父页面：
<html>
<head>
<script type="text/javascript">
function say(){
alert("parent.html");
}
function callChild(){
myFrame.say();
myFrame.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("child.html");
}
function callParent(){
parent.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元素访问
获取到页面的window.document对象后，即可访问DOM元素
注意事项
要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：
-
iframe上用onload事件
-
用document.readyState=="complete"来判断
注意事项：当调用子页面的时候，比如子页面iframe的name属性为qwer，则子页面里面不能有一个变量叫做qwer，否则父页面将不能通过子页面iframe的name属性调用子页面的方法。
网友评论