1. 程式人生 > >iframe高度自適應問題

iframe高度自適應問題

今天寫了一下html靜態頁,遇到iframe高度自適應問題。本來是使用bootstrap的,看它上面的文件說直接使用它們給好樣式就可以了。但是並沒有達到要的效果。
最後使用了這個中方法解決了。

<div class="col-lg-10 col-md-10">
            <div class="embed-responsive embed-responsive-4by3" id="mainContent">
                <iframe class="embed-responsive-item" id="mainFrame"
src="home.html" onload="javascript:iframeAutoHeight();"></iframe> </div> </div>

這裡是使用js實現的,程式碼如下

        //iframe 高度自適應
        function iframeAutoHeight(){
            var iframe=document.getElementById("mainFrame");
            if(navigator.userAgent.indexOf
("MSIE")>0||navigator.userAgent.indexOf("rv:11")>0||navigator.userAgent.indexOf("Firefox")>0){ iframe.height=iframe.contentWindow.document.body.scrollHeight; }else{ iframe.height=iframe.contentWindow.document.documentElement.scrollHeight; } iframe.style
.cssText="height:"+iframe.height+"px;"; $("#mainContent").css("height",iframe.height+"px"); $("#menu").css("height",iframe.height+"px"); }

注:無關程式碼請忽略

各位大神有什麼好的解決方案,可以勞煩留言一下給小弟嗎,萬分感謝!