如何動態調整iFrame的大小（交叉瀏覽器解決方案）

我試圖在Drupal頁面上添加iframe。到目前爲止，我成功地包含了框架，但我寫的高度調整功能僅適用於Internet Explorer。我的目標是在Firefox和Chrome中調整大小。我搜索了互聯網，但我找不到我在找什麼。長話短說，我想我的框架自動調整高度本身。如何動態調整iFrame的大小（交叉瀏覽器解決方案）

這是我做的，到目前爲止（這是HTML頁面中包含的Drupal的代碼）：

<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()">

我明白，如果iframe生活在另一個領域的解決方案可能會更加困難，因爲權限。那是對的嗎？

這些都是我在Chrome和Firefox得到錯誤：

鉻：無法讀取未定義

鉻的特性 '體'：JavaScript嘗試與URL XXX從框架訪問框架與URL YYY 。域，協議和端口必須匹配。

火狐：的document.all未定義

編輯：如果我想改變iframe的元素之一？在我的情況下，我需要改變一個文本框的值。我知道我必須這樣做，當頁面被加載，但我找不到解決方案。無論身在何處，我把我的代碼總是得到一個

不能調用方法「的getElementById」未定義

，當我嘗試訪問的iFrame文本框。

EDIT2：問了一個新問題，因爲他們沒有關係。

來源

2012-10-30 raz3r

只要您有權訪問這兩種解決方案，此解決方案即使跨域也能正常工作。有一堆邊緣情況，但至少你可以從這個開始。您還可以添加計時器事件以確保iFrame始終是正確的大小，因此您從不擁有滾動條。請記住，這僅適用於支持HTML5的瀏覽器，因爲使用了postMessage。

裏面的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}, '*'); 
}

家長

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

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

來源

2012-10-30 13:29:14 juminoz

幹得好！它的作用就像使用Firefox和Chrome的魅力，唯一的問題是它不會與IE。所以我試圖把一個如果進入調整大小的功能，以便如果瀏覽器是IE瀏覽器它使用舊的方法。認爲它會工作？ – raz3r

是的它的工作：P – raz3r

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

此代碼沒有爲IE瀏覽器。

對於IE使用

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

來源

2013-09-26 12:52:47

看看這個小程序，這是否和管理所有其他邊緣情況爲您服務。

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

來源

2014-03-12 21:01:37

如何動態調整iFrame的大小（交叉瀏覽器解決方案）

回答

相關問題