Normalde iframe'ler için genişliği ve yüksekliği ayarlarsınız. İçerideki içerik daha büyükse, kaydırma çubuklarının yeterli olması gerekir. Aşağıdaki komut dosyası, iframe'i yüklediği içeriğe uyacak şekilde dinamik olarak yeniden boyutlandırarak bunu düzeltmeye çalışır.
$(function()( var iFrames = $('iframe'); function iResize() ( for (var i = 0, j = iFrames.length; i < j; i++) ( iFrames(i).style.height = iFrames(i).contentWindow.document.body.offsetHeight + 'px';) ) if ($.browser.safari || $.browser.opera) ( iFrames.load(function()( setTimeout(iResize, 0); )); for (var i = 0, j = iFrames.length; i < j; i++) ( var iSource = iFrames(i).src; iFrames(i).src = ''; iFrames(i).src = iSource; ) ) else ( iFrames.load(function() ( this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; )); ) )); Bir iframe'i şu şekilde yeniden boyutlandıracak:
Demoyu Görüntüle
Hala sorunlu ...
- İframe içeriğinin kaynağı aynı etki alanında bulunmalıdır
- iframe içindeki içeriğin yüksekliği değişirse, bu uyum sağlamaz
- Görünüşe göre hiçbir hata oluşturmamasına rağmen, Google Analytics kodunu yukarıdaki demo dışında bıraktım, çünkü içine eklediğimde iframe'i engelliyor ve yeniden boyutlandırmıyor gibi görünüyor.