動態iframe高度在Chrome中不起作用

Question

我在這里瘋了。 我在這里找到了據說也可以在chrome上運行的腳本，但我只是無法使其正常工作

這是我頭文件中的腳本

<script type="text/javascript">
function resizeFrame() {
     var t=document.getElementById("Footer");
     var f = document.getElementById("mainContent");
     var y = f.contentWindow;
     t.innerHTML = y.document.body.offsetHeight;
     f.height = y.document.body.offsetHeight;
    }
</script>

和iframe

 <iframe onload="resizeFrame()" id="mainContent" src="swwbookpg1.php" scrolling=auto frameborder=0 
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>

它適用於Firefox和IE，但不適用於chrome。

如果有人可以幫助那將是驚人的！

此處正在使用： https : //www.whalewatchingsydney.com.au/payment_sww/

謝謝=）

Answer 1

Google似乎不辜負自己的宗旨“不做惡”。 盡管Chrome能夠動態調整iframe的高度，但Google卻並不十分方便。 經過兩天的努力，嘗試了無數的javascript代碼段，這些代碼段在其他所有瀏覽器中均能正常運行，但Chrome瀏覽器最終使我獲得了一些有用的功能。 我將分享此內容，以希望為其他網站開發人員節省我必須經歷的48小時痛苦。

內部外部SetiFrameHeight.js文件，然后可以使用html將其添加到任何iframe子文檔中。

<script type="text/javascript" src="SetiFrameHeigh.js"></script>

setIframeHeight.js

window.onload=setIframeHeight(window.top.document.getElementById('iFrame_ID'));
//note this code only runs serverside when using Google Chrome, very helpful


function setIframeHeight(ifrm){
    var doc = ifrm.contentDocument? ifrm.contentDocument:
    ifrm.contentWindow.document;
    var RestHeight=ifrm.style.height; //Capture original height see why below.
    ifrm.style.visibility = "hidden";
    ifrm.style.height = "10px"; //Necessary to work properly in some browser eg IE
    var NewHeight = getDocHeight( doc ) + 10;
    if (NewHeight>20){
        ifrm.style.height=NewHeight + "px";
    } else { //if dom returns silly height value put back old height see above.
        ifrm.style.height=RestHeight + "px";
    }
    ifrm.style.visibility = "visible";
}

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight,
    html.scrollHeight, html.offsetHeight );
    return height;
}

此代碼段的真正魔力是功能getDocHeight，該功能基本上會嘗試所有可能的dom組合並選擇給出最大高度的組合。 我對此不敢相信，可以從http://www.christersvensson.com/html-tool/iframe.htm獲得 。

Answer 2

鍍鉻

1. 我發現，當我使用document.createElement創建一個iFrame並為其分配一個名稱（“ myIframe”）時，新的iFrame在設置其位置時不會加載內容。 但是，如果我為元素的src分配一個url，它就可以正常工作。 現在，當我改為手動將iframe標記插入html文本（靜態-與使用document.createElement相對）時，它將在設置其位置（以及標記的src）時加載該文檔。 奇怪。

2. 假設您打算直接顯示iframe的內容，我想知道為什么嗎？ 我喜歡使用iframe，但實際上僅是將內容動態加載到頂部窗口中的容器中。 加載到iframe中的html的最后一部分包括一個腳本，該腳本將輸出移至頂部框架的所需位置。

通過iFrame加載新內容的php腳本示例。

// top Frame calls the php script like this:

 <div id="myContainerDiv">
    <p>old content - please replace me with fresh content</p>
</div>


<iframe name="hiddenFrame" style="display:none;"></iframe>

<script>

    hiddenFrame.location = 'index.php?getNewContent=125';

</script>


// the following script would be at the top of index.php

<?php //

if( isset($_GET['getNewContent']) ):


echo '<div id="myIframeHtml">';

    // the html that I want to load to the top frame..


echo '</div>';

?>
<script>

    newContent = document.getElementById('myIframeHtml').innerHTML; // from this iFrame

    topContainer = top.document.getElementById('myContainerDiv'); // in top frame

    topContainer.innerHTML = newContent; // no fuss-no muss --> no encoding or parsing

</script>

<?php

exit;

endif;