通過百分比設(shè)置，高度自適應(yīng)瀏覽器
給iframe嵌套一個父盒子，設(shè)置父盒子自適應(yīng)或定寬高疯淫，設(shè)置iframe寬高100%故爵，從而實現(xiàn)iframe的自適應(yīng)或固定大小
如下：一屏顯示
<style>
* {margin: 0;padding: 0;}
html, body, .wrap { width: 100%; height: 100%; }
.wrap { position: relative; }
.top { width: 100%; height: 120px; background: #0f0; }
.main { position: absolute; top: 120px; bottom: 0; width: 100%; }
.left { float: left; width: 120px; height: 100%; background: #ff0; }
.right { height: 100%; overflow: hidden; background: #f1f1f1f1; }
</style>
<div class="wrap">
<div class="top">top</div>
<div class="main">
<div class="left">left</div>
<div class="right">
<iframe src="03-細(xì)線邊框.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</div>
image.png
通過jq/js代碼實現(xiàn)高度自適應(yīng)，根據(jù)其內(nèi)容設(shè)置高度
<iframe src="xxx.html" frameborder="0" scrolling="no" class="myIframe" id="myIframe" name="myIframe" onload="setIframeHeight(this)"></iframe>
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
console.log(iframeWin);
if (iframeWin.document.body) {
// 高度根據(jù)內(nèi)容自適應(yīng)
iframe.height = iframeWin.document.documentElement.offsetHeight || iframeWin.document.body.offsetHeight;
}
}
};
參考文章：http://caibaojian.com/iframe-adjust-content-height.html
jQuery操作iframe父頁面骇钦，子頁面的元素與方法
- 獲取元素
// 在父元素中獲取子頁面的元素：（獲取子頁面中類名為box的元素）
$(".myIframe").contents().find(".box");
// 在子元素中獲取父頁面的元素：（獲取父頁面中類名為left的元素）
$(".left", parent.document)
- 方法調(diào)用
// 子頁面調(diào)用父頁面定義的方法info ：
parent.info()
// 父頁面調(diào)用子頁面定義的方法sonFunc:
myIframe.sonFunc(); // myIframe為iframe的屬性name值
$(".myIframe")[0].contentWindow.sonFunc();
