iframe之多么痛的领悟@慕课网原创_慕课网

iframe基本用法

内联元素
如果想作为块级元素，需要加display:block 否则在计算高度时，会出现 5px左右的空隙

<iframe src="" frameborder='0' scrolling='yes' name='myFrameName' id='myFrameId'></iframe>

多层iframe嵌套数据交互

通过name或id获取iframe对象


获取当前iframe对象
var frame = document.getElementById('myFrameId') || $('#myFrameId')[0] || $('iframe[name=myFrameName]')[0]

获取当前iframe的window对象
var frameWindow = frame.contentWindow  || window.frames[myFrameName]

获取当前iframe的document对象
var frameDoc = frameWindow .document

父子交互

父页面获取iframe内的dom
var sonDom = frameDoc.getElementById('sonDom');
调用子页面的方法
frameWindow.sonFnc()

子页面获取父页面dom
var parentDom = parent.document.getElementById('parentDom');
或 
var parentDom = top.document.getElementById('parentDom'); //多层iframe获取顶层父页面dom
调用父页面方法
parent.parentFnc();

注意：父元素需要使用window.或 $(window).load(),在所有资源都加载完毕后，才可以获取子页面的dom,否则会出现dom为null的情况。

完整代码如下

父页面：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<h1>i am the iframe parent page</h1>
<h3 id="parentDom"></h3>
<iframe src="son.html" name="son" id="sonFrame" ></iframe>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript">
	function parentFnc(){
		alert('i am the parent function')
	}
	var parentVar = 'parentVar';
	window.onload = function(){
		var sonFrame = document.getElementById("sonFrame");
		var sonWindow = sonFrame.contentWindow;  //获取iframe的window对象
		var sonDoc = sonWindow.document;  //获取iframe的document对象
		
		alert('sonVar');
        sonWindow.son()   //调子页面方法

        sDom = sonDoc.getElementById("sonDom")
        $(sDom).html('i am from the parent page')

		
	}

</script>
</html>

子页面：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>i am son page</h1>
	<div id="sonDom"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript">
	var sonVar = 'sonVar';
	function son(){
		alert('i am the son function')
	}
	var pDom = window.parent.document.getElementById('parentDom');
	pDom.innerHTML ="i am form the son page";
	
	alert(window.parent.parentVar);
	window.parent.parentFnc();
	
</script>
</html>

跨域问题

注意：chrome对于file协议有安全限制，访问本地文件也存在跨域问题，需在服务器中访问或修改chrome配置。

总结 iframe优缺点

优点：

使用简单
不用刷新整个页面公用代码不用重复加载

缺点

页面多，管理不方便，无法使用浏览器返回键
资源请求过多（iframe外层的页面，和iframe页面不能公用资源，每个iframe都要加载其所用的所有资源）
移动设备兼容性差