1. 程式人生 > >Iframe 高度自適應

Iframe 高度自適應

沒有 border off right The style 需要 是否 開始

實現 iframe 的自適應高度,能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象。 (需要只有iframe出現滾動條)

剛開始以為是很小的問題一直沒註意,但是經常頁面比較高的只能顯示一半,後來也在網上搜了很多解解辦法,一直沒真正解決,下面是我在網上搜到的方法:

        function iframeAutoFit(iframeObj) {
            setTimeout(function() { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight); }, 200)
        }

  下面是我的Iframe

        <iframe id="MainIframe" onload="iframeAutoFit(this)" name="rightContent" src="@Url.Action("Content","Home")" class="main" frameborder="0" scrolling="no" style="min-height:1000px;"></iframe>

這樣可以解決,但是有一個問題,剛加載進來時高度可以正確顯示,但是嵌入內容的高度隨點擊變化(如:下拉菜單,左側導航欄,上傳顯示圖片等)Iframe高度不會自動適應,為了解決這個問題,我又去搜了一圈,包括在園子裏看了一圈也沒真正解決,後來仔細想想咱們這樣寫的是在Iframe加載的是改變的高度,可是我們的內容是在加載以後改變的,應該定一個計時器去隨時監測我們的頁面高度是否改變了!於是我把上面的方法改了下完美解決問題了。

        function iframeAutoFit(iframeObj) {
            setInterval(function () {
                if (!iframeObj) return;
                iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight);
            }, 200)
        }

  雖然是個小問題,但是發現網上搜的方法都沒解決我的問題,於是寫出來分享給大家,不知道解決你的問題沒有呢?

Iframe 高度自適應