İçeriğe Göre Otomatik İframe Yüksekliği

Merhaba, içeriğe göre değişen iframe kodu paylaşacağım.

Dikkat: Bu konu web site sahiplerini ilgilendiriyor.

Konunun özünü bilenler için altın niteliğinde bir kod…

İçeriğe göre genişleyen iframe !

Piyasada bu işlevi yapan onca kod var. Bu kodun farkı ne derseniz…

Bu kod, sayfanın içeriğine göre olan genişlemesini canlı olarak yapıyor.

Canlı dan kasıt; iframe yüksekliğini kendi otomatik ayarlıyor.

Genişlemeyi yapıyor ama daralmayı yapamayabilir. Siz yine de deneyiniz.

Not: Bu kod harici iframe pencerelerinde çalışmamaktadır. Yereldeki dosyalarınızı kullanmalısınız. Harici sayfa iframelerin yani sitenizin dışındaki sayfaların iframelerin yüksekliğini ayarlayan başka bir kod zaten bulunmuyor gibi. Bilen varsa yorumlarda paylaşabilirler.

İçeriğe Göre Genişleyen İframe Penceresi

İframe pencerelerinde genişlik değerine widh=”100%” versek dahi, yükseklik değerine height=”100%” veremiyoruz.

Yükseklik değerini px olarak veya benzer gösterimlerle göstermek zorundayız.

Bu şuna sebebiyet veriyor; İframede göstereceğiniz sayfa içeriği bazen değişebiliyor veya içerik farklı çözünürlükler için değişebiliyor.

Bu durumda içeriğe göre yükselen bir iframe penceresi kodu kaçınılmaz oluyor.

Gerçi sayfalarınızda iframe pencerelerini seo kaybı olabileceğinden önermesem de bazen mecburen ekliyoruz.

İçeriğe Göre Yükselen Otomatik iframe Kodu Kullanımı:

Kodumuzun çalışmasını çok basit şekilde anlatacağım.

icerige gore yuksekligi degisen iframe

1- Aşağıdaki kodu iframe penceresini göstereceğin Ana Sayfa vs. neresi ise o html içine ekle.

(Örnek: index.html)

<script src="https://davidjbradshaw.com/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
<script>

      var level = document.location.search.replace(/\?/,'') || 0;

      $('#nested').attr('href','frame.nested.html?'+(++level));

    </script>
Not: Yukarıdaki kod içinde ek olarak jquery de mevcuttu fakat wordpresste zaten jquery olduğundan kodu içinden çıkardım.
Wordpress harici sitede kodu kullanacaksanız içine ekleyebilirsiniz KODU GÖRMEK İÇİN TIKLAYIN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2 Hangi iframeyi göstermek istiyorsan o kod içine ekle

(Örnek: iframe.html)

<iframe id="myIframe" src="https://100numaraliadam.com/iframelerim/iframe.html" width="100%" scrolling="no"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://davidjbradshaw.com/iframe-resizer/js/iframeResizer.min.js"></script>
<script type="text/javascript">

iFrameResize({
log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
resizedCallback : function(messageData){ // Callback fn when resize is received
$('p#callback').html(
'<b>Frame ID:</b> ' + messageData.iframe.id +
' <b>Height:</b> ' + messageData.height +
' <b>Width:</b> ' + messageData.width +
' <b>Event type:</b> ' + messageData.type
);
},
messageCallback : function(messageData){ // Callback fn when message is received
$('p#callback').html(
'<b>Frame ID:</b> ' + messageData.iframe.id +
' <b>Message:</b> ' + messageData.message
);
alert(messageData.message);
},
closedCallback : function(id){ // Callback fn when iFrame is closed
$('p#callback').html(
'<b>IFrame (</b>' + id +
'<b>) removed from page.</b>'
);
}
});

</script>

Not: Kod içindeki https://100numaraliadam.com/iframelerim/iframe.html kısmını kendine göre uyarla.

100numaraliadam Yeni Konu:  OneSignal Gecikmeli Bildirim

Kaynak: https://github.com/davidjbradshaw/iframe-resizer#usage

Yazar: utquick

utquick 1Merhaba, Bu site 2017 senesinde kurulmuştur: Kemal SUNAL 'ın 100 Numaralı Adam filminden feyz alınarak kurulan sitemiz, filmdeki Halk Kahramanı rolünü de bünyesine katarak dürüst paylaşımlarda bulunmaktadır. Bizi takip ediniz. Büyük bir aile oluyoruz. Tek güvencemiz paylaşımlarımızın samimiliğidir.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

css.php