2015/4/16

[筆記] 透過Javascript根據內容來自動調整iframe高度

方法一︰
先加入iframe的語法。（Ex︰A.html）
<iframe src="./source" （欲連結的網頁，Ex︰B.html） name="mainframe" width="100%" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" id="mainframe">
</iframe> 
在到欲連結的網頁（Ex︰B.html）裡，在head下面加入以下程式碼。
<head>
    <script>
    function resize() {　　　　　
        parent.document.getElementById("mainframe").height = document.body.scrollHeight; //將子頁面高度傳到父頁面框架　　　　　
    }
    </script>
</head>


並在body（Ex︰B.html）裡加入︰
<body onload="resize();" >

方法二︰
在同一個檔案內編寫就可以了。
<script type="text/javascript">
function SetCwinHeight() {
    var iframeid = document.getElementById("mainframe"); //iframe id  
    if (document.getElementById) {
        if (iframeid && !window.opera) {
            if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
                iframeid.height = iframeid.contentDocument.body.offsetHeight;
            } else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
                iframeid.height = iframeid.Document.body.scrollHeight;
            }
        }
    }
}
</script>
在加入iframe的語法。
<iframe src="./NEWS" name="mainframe" width="100%" marginwidth="0" marginheight="0" onload="Javascript:SetCwinHeight()"  scrolling="No" frameborder="0" id="mainframe"  ></iframe>



沒有留言:

張貼留言

注意：只有此網誌的成員可以留言。

訂閱： 張貼留言 (Atom)