03-iframe标签

通过百分比设置，高度自适应浏览器

给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父页面，子页面的元素与方法

1. 获取元素

// 在父元素中获取子页面的元素：（获取子页面中类名为box的元素）
$(".myIframe").contents().find(".box");
// 在子元素中获取父页面的元素：（获取父页面中类名为left的元素）
$(".left", parent.document)

2. 方法调用

// 子页面调用父页面定义的方法info ：
parent.info()
// 父页面调用子页面定义的方法sonFunc:
myIframe.sonFunc();  // myIframe为iframe的属性name值
$(".myIframe")[0].contentWindow.sonFunc();