iframe 裡的高度適應的問題

Muzi狗發表於2018-04-17

iframe 這個東西功能是很強大,但是有一個巨大的問題就是高度自適應的問題;

不過這個問題,百度或者谷歌上有很多解決辦法,但是,很多時候都有相容性問題; 所有我就每個方法都試了一遍,終於找到了一個

感覺很牛的樣子,不需要用到js 就可以讓iframe 裡的內容覆蓋整個頁面,感覺很舒服。哈哈哈

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
<style type="text/css">
    body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}
</style>
    <body>
        
        <div>
            <iframe id="external-frame" src="https://cdn-huoshu.fire2333.com/landpages/rxgl/template/4039/index.php?pt=7590&footer_id=1" width="100%" height="100%" scrolling=" no"></iframe>
        </div>
    </body>

</html>

這樣,就可以完美的解決這個問題啦;

有三點要注意哦:

第一:一定要已html開頭,而不是用<!DOCTYPE html>開頭

第二:body的overflow:hidden ; 一定不要忘記加;

第三:iframe 的高度100%一定要記得加上。這樣就解決了我的問題了;

雖然不知道這種實現的原理是什麼,希望有知道的朋友可以告訴我下。

這在跨域的時候,是真的好用,尤其是不能修改iframe 裡的頁面的時候;

同域的話:

有一段js程式碼就可以解決這個問題啦;

function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};

window.onload = function () {
setIframeHeight(document.getElementById(`external-frame`));
};

在頁面裡插入這個就好啦;

我覺得這兩個方法完美的解決了我公司一些php們的問題。

天天都在用iframe結果用的還那麼不清楚,實在搞不懂。

尤其是某個php,什麼css js html都不會,真心不知道他是怎麼成為php的。連獲取元素都不會。很氣

瞎抱怨下,反正沒人看。哈哈哈哈,總之這兩種方法我覺得很好。贊;

 

相關文章