Question

我需要将网页中的数据传递到该网页中托管的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根本没有接收到这个事件。我在这里错过了什么？很感谢任何形式的帮助。谢谢！

Answer 1

您的代码有一些奇怪的部分。您使用attachEvent，最好使用addEventListener，您应该发布到contentWindow，而不是文档。

Answer 2

我的代码的问题是这样的： window.attachEvent（“onMessage”，myhandler）

onmessage应该全是小写。一旦我将这一行改为下面，就可以了。

window.attachEvent("onmessage", myhandler)

Answer 3

我在这里发布了答案：javascript cross domain iframe resize

该链接还有一个链接到github上的示例工作代码。

使用Javascript从父级到子级iFrame进行跨域通信

3 个答案: