iframe子页面与父页面通信

father.html通过iframe包含了son.html

father.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		 <script type="text/javascript">
        function say(){
            alert("这是father的say()");
        }
        function callChild(){
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value="调用结束"
        }
    </script>
	</head>
	<body>
		 <input id="button" type="button" value="调用son.html中的函数say()" onclick="callChild()"/>
    <iframe name="myFrame" src="son.html"></iframe>
	</body>
</html>

　　son.html

<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript">
			function say() {
				alert("这是son的say()");
			}
			function callParent() {
				parent.say();
				parent.window.document.getElementById("button").value = "调用结束";
			}
		</script>
	</head>
	<body>
		<input id="button" type="button" value="调用father.html中的say()函数" onclick="callParent()" />
	</body>
</html>

　方法是如何调用的？获取子页面或父页面的window对象，在通过对象调用方法。

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

在方法调用前，以下点必须要注意！！！

要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！