iframe的一些缺点一直被人诟病，就像生活一样，一个缺点便可以颠覆认知，哪有那么多的理所当然，要什么自行车？
iframe在很多开发场景都是非常适用的，例如sass应用、文件无跳转上传、下载等！
接下来一块领略iframe的妙用（遵循同源，请在服务器环境测试练习）：
1.基础用法：
iframe是一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清风笔记</title>
</head>
<body>
<iframe src="child.html">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
</body>
</html>
对于不支持的浏览器，可以在标签内部插入提示内容 ,src属性指向iframe访问路径。
2.父子页面访问：
-
2.1父访问子
document对象
- iframeElement.contentDocument; // chrome
- iframeElement.contentDocument; // firefox
- iframeElement.contentWindow.document; // (ie没有iframeElement.contentDocument属性)
var getIframeDocument = iframeElement.contentDocument || iframeElement.contentWindow.document;//兼容方式
能够访问document对象了，那操作元素节点等等相关也就不在话下了。
-
2.2 父访问子
window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清风笔记</title>
</head>
<body>
<iframe src="child.html" height="500" width="500" name="iframename" id="iframe">
</iframe>
</body>
<script>
var iframe=document.getElementById("iframe");
console.log(iframe.contentWindow) //获取iframe页面window对象
</script>
</html>
-
2.3子访问父
document、window对象
window.parent //访问父window对象
window.parent.document //访问父document对象
-
2.4 方法互相访问
因为一定有对应方法访问window对象，所以function可以借助window对象进行访问，以下是综合案例: -
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清风笔记-parent</title>
</head>
<body>
<iframe src="child.html" height="500" width="500" frameborder="0" name="iframename" id="iframe">
<p>您的浏览器不支持iframe 亲！</p>
</iframe>
<button id="parent_btn">触发child_fn</button>
</body>
<script>
var iframeElement=document.getElementsByName("iframename")[0]
var iframeDocument = iframeElement.contentDocument||iframeElement.contentWindow.document;
var iframeWindow = iframeElement.contentWindow;
parent_btn.onclick=function(){
iframeWindow.fn();
}
function fn(){
alert("子页面触发父页面方法!")
}
</script>
</html>
-
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清风笔记-child</title>
</head>
<body>
<button id="child_btn">触发parent_fn</button>
</body>
<script>
child_btn.onclick=function(){
window.parent.fn();
}
function fn(){
alert("父页面触发子页面方法!")
}
</script>
</html>
加油!
