logo标签列表

使用JavaScript实现从父级到子级iFrame的跨域通信

javascriptiframecross-domainparent-child
3

我需要将网页中的数据传递给托管在该网页中的 iFrame。我使用了 window.postMessage，但是 iFrame 没有接收到事件。

以下是我的代码片段。 父页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Test event listener</title>
</head>
<body>
<script type="text/javascript">
function SendMsgToIFrame() {
    alert("In Parent window ");
    var myiframe = document.getElementById('myIframe');
    if (myiframe.contentDocument) {
        myiframe.contentDocument.postMessage('Post Message from Parent', '*');
    }
    else if (myiframe.contentWindow) {
        myiframe.contentWindow.postMessage('Post Message from Parent', '*');
    }
</script>
<button type="button" onclick="SendMsgToIFrame()">Push to iframe</button>
<div id="iframeDiv">
<iframe id="myIframe" src="http://localhost:50000/Receiver.htm" width="500" height="200" frameborder=10> 
</iframe>
</div>
</body>
</html>

Receiver.htm的代码片段如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Got Text</title>
</head>
<body>
<script type="text/javascript">
    window.attachEvent("onMessage", myhandler);

    function myhandler(mobj) {
        alert("I am in iFrame");
        var message = mobj.data;

        alert("data: " + message);
    }
</script>
<input type="text" name="text1" id="text1" value="text here" /> 
</body>
</html>

我正在Tomcat上运行父页面（localhost:8080）。iFrame正在运行我使用httplistener构建的HTTP服务器上。 当我运行父页面并点击生成事件的按钮时，我没有收到警报“我在iFrame中”。看起来iFrame根本没有接收到事件。我在这里漏掉了什么？ 非常感谢任何帮助。谢谢！

3个回答
0

你的代码有一些奇怪的部分。你正在使用attachEvent，而最好使用addEventListener，并且你应该将其发布到contentWindow，而不是文档。

我正在使用IE8浏览器，在IE8中addEventListener将无法正常工作。AttachEvent是IE8的正确方法。我正在发布到内容窗口。我的断点到达了那一行。 - Betty Thomas
0
我的代码问题在于： window.attachEvent("onMessage", myhandler)
onmessage 应该全部小写。 一旦我将这行代码更改为以下内容，它就可以工作了。
window.attachEvent("onmessage", myhandler)
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接