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.

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://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.0/iframeResizer.contentWindow.min.js"></script>
<script>

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

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

    </script>

<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://100numaraliadam.com/1/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.

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