通过百分比设置，高度自适应浏览器
给iframe嵌套一个父盒子，设置父盒子自适应或定宽高，设置iframe宽高100%，从而实现iframe的自适应或固定大小
如下：一屏显示
<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-细线边框.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</div>
image.png
通过jq/js代码实现高度自适应，根据其内容设置高度
<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) {
// 高度根据内容自适应
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)
- 方法调用
// 子页面调用父页面定义的方法info ：
parent.info()
// 父页面调用子页面定义的方法sonFunc:
myIframe.sonFunc(); // myIframe为iframe的属性name值
$(".myIframe")[0].contentWindow.sonFunc();
