父页面HTML：
<html>
<head>
<script type="text/javascript">
function say(){
alert("parent.html");
}
function callChild(){
window["myFrame"].say();
window["myFrame"].document.getElementById("button").value="调用结束";
}
</script>
</head>
<body>
<input id="button" type="button" value="调用child.html中的函数say()" οnclick="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.document.getElementById("button").value="调用结束";
}
</script>
</head>
<body>
<input id="button" type="button" value="调用parent.html中的say()函数" οnclick="callParent()"/>
</body>
</html>关键点：
父亲访问孩子页面：window["frameName"]-------返回iframe页面的window对象【js中定义的方法和变量都做为window对象的属性存在】
iframe访问父亲页面:parent-----代表父亲的window对象
HTML和Iframe的跨域通信
父HTML：
var frm = document.getElementById("chat-panel");
frm.contentWindow.postMessage("hello","*");
iframe.html window.addEventListener("message", function (e) {
alert(e.data);
}, false);
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
