Bir iFrame (crossbrowser çözümü)

Question

Dinamik olarak nasıl yeniden boyutlandırılır Drupal sayfasına bir iframe eklemeye çalışıyorum. Şimdiye kadar çerçeveyi başarıyla ekledim ancak yazdığım yükseklik yeniden boyutlandırma işlevi yalnızca Internet Explorer'da çalışıyor. Amacım inFirefox ve Chrome'da yeniden boyutlandırma çalışması yapmak. İnternette aradım ama aradığım şeyi bulamadım. Uzun lafın kısası, çerçevemin yüksekliğini otomatik olarak yeniden boyutlandırmasını istiyorum.

Bu

I (bu Drupal dahil HTML sayfasının kodudur) bugüne kadar ne yaptığını geçerli:

<script type="text/javascript"> 
    function resize() { 
     var iframe = document.all.icw; 
     document.getElementById("icw").style.height = iframe.document.body.scrollHeight + "px"; 
    } 
</script> 
<iframe id="icw" src="XXXXX" width="100%" scrolling="no" onload="resize()"> 

ben başka bir alanda iframe hayatları eğer çözüm dolayı daha zor olabileceğini anlıyoruz izinleri. Bu doğru mu?

Bunlar Chrome ve Firefox'ta olsun hataları şunlardır:

Krom: URL YYY ile çerçeveden URL XXX ile çerçeve erişmek için JavaScript girişimi: tanımsız

Chrome malı 'beden' okunamıyor . Domainler, protokoller ve portlar uyuşmak zorunda.

Firefox: document.all

tanımlanmamış

DÜZENLEME: Ne iframe elemanın birini değiştirmek isterseniz? Benim durumumda bir metin kutusu değerini değiştirmem gerekiyor. Anlıyorum, sayfa yüklendiğinde bunu yapmalıyım ama bir çözüm bulamıyorum. Ben iFrame metin kutusu erişmeye çalıştığımda kodu koymak olursa olsun hep bir bir

tanımsız

yöntemi 'getElementById' Aranamıyor olsun.

EDIT2: İlişkili olmadığı için yeni bir soru sordu.

Answer 1

Bu çözüm, her ikisine de erişiminiz olduğu sürece çapraz etki alanıyla bile çalışır. Bir sürü kenar kutusu var, ama en azından bununla başlayabilirsiniz. Ayrıca, iFrame'in her zaman doğru bir boyut olduğundan emin olmak için zamanlayıcı etkinliği ekleyebilir, böylece hiçbir zaman kaydırma çubuğuna sahip olmazsınız. Bunun yalnızca postMessage kullanımı nedeniyle HTML5'i destekleyen tarayıcıyla çalıştığını unutmayın.

İçinde iFrame

function resize(){ 
    var body = document.body, 
    html = document.documentElement, 
    height = body.offsetHeight; 
    if(height === 0){ 
     height = html.offsetHeight; 
    } 
    parent.postMessage({'action':'RESIZE', 'height':height}, '*'); 
} 

Veli

function handleMessage(e) { 
    if (e.data.action == 'RESIZE') { 
     var targetHeight = e.data.height; 
     $('#iFrame').height(targetHeight); 
    } 
} 

window.addEventListener("message", handleMessage, false); 

Answer 2

window.addEventListener("message", handleMessage, false); 

IE için çalışmıyor Bu kodu. IE için

yapar ve sizin için tüm diğer sınır durumları yöneten bu küçük kütüphane

window.attachEvent("onmessage", handleMessage, false); 

Answer 3

kontrol dışarı kullanın.

https://github.com/davidjbradshaw/iframe-resizer