使用 Javascript 从父 iFrame 到子 iFrame 的跨域通信答案

【问题标题】：Cross domain communication from parent to child iFrame using Javascript使用 Javascript 从父 iFrame 到子 iFrame 的跨域通信
【发布时间】：2023-03-12 15:10:02
【问题描述】：

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

这是我的代码 sn-p。父页面：

<!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 的代码 sn-p 是：

<!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 根本没有收到事件。我在这里想念什么？很感谢任何形式的帮助。谢谢！

【问题讨论】：

标签： javascript iframe cross-domain parent-child

【解决方案1】：

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

【讨论】：

我正在使用 IE8。addEventListener 无法与 IE8 一起使用。 AttachEvent 是 IE8 的正确方法。我正在发布到内容窗口。我的断点到达那行。

【解决方案2】：

我的代码的问题是： window.attachEvent("onMessage", myhandler)

onmessage 应该全部小写。一旦我将此行更改为以下内容，它就起作用了。

window.attachEvent("onmessage", myhandler)

【讨论】：

【解决方案3】：

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

该链接还包含指向 github 上示例工作代码的链接。

【讨论】：