iframe子父页面通信
2017-11-02 本文已影响53人
小夫特
iframe以及iframe的特性
iframe 内联框架，用来在当前 HTML 文档中嵌入另一个文档
以下列举常用属性
- name 属性
name属性在iframe中是一个很重要的属性，后面子页面和父页面之间的通信中会用到 - src 属性
嵌入页面的地址 - width 和 height属性
用来指定iframe的宽度和高度，可以为百分比
iframe子页面与父页面通信
首先我们先给出一个栗子，先写出父页面和子页面
<html>
<head>
<script type="text/javascript">
function say(){
alert("父页面中say方法");
}
function callChild(){
//myFrame 为iframe的name属性
myFrame.window.say(); //myFrame.say();也可
myFrame.window.document.getElementById("button").value="调用结束";
}
</script>
</head>
<body>
<input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function say(){
alert("子页面中say方法");
}
function callParent(){
//以下两个方法均可
parent.say();
parent.window.say();
parent.window.document.getElementById("button").value="调用结束";
}
</script>
</head>
<body>
<input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
</body>
</html>
方法
父页面调用子页面方法，FrameName.window.childMethod();
子页面调用父页面方法 parent.window.parentMethod();
子页面获取父页面中的dom parent.window.document
付页面内获取子页面中的dom, FrameName.window.document
window.top顶层页面window对象
window.parent 父层页面window对象
window.frames 返回窗口中所有命名的框架，数组集合
注意
- 本地直接打开html文件会报错，需要启动本地服务器
- 需要在子页面加载完成后执行，否则会报错
- 不支持跨域
