Window.postMessage() 问题

Question

如果我使用不同的域，我无法获取任何数据。如果我运行它在同一台服务器上，它没有问题 - 收到消息。

index.html:

<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
        function popupResize() {
            var popup = window.open('popup.html', '', 'resizable=yes,scrollbars=yes,width=500,height=500');
            // var popup = window.open('https://foo/index.html', '', 'resizable=yes,scrollbars=yes,width=500,height=500');
            window.addEventListener(
                'message',
                function(event) {
                    console.log(event.data);
                },
                false
            );
        }
    </script>
</head>
<body>
    <a href='javascript:void(0)' onClick="popupResize(); return false;">Go!</a>
</body>

popup.html:

    <head>
    <title>Game history details</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script>
        function postSize() {
            var h = 100;
            var w = 200;
            opener.postMessage([h, w], '*');
        }
    </script>
</head>
<body onload="postSize();">
    test 1
</body>

如何使用不同的服务器使其工作？

Answer 1

eventListener 应该附加到 window 而不是 popup:

window.addEventListener(
    'message',
    function (event) {
        console.log(event.data);
    },
    false
);

在您的子 window（弹出窗口）中，您正在向父 window 发送消息，但 eventListener 附加到子 window。

Answer 2

问题 1

popup.addEventListener(

您需要在原始 window 上监听事件，而不是在弹出窗口上。弹出窗口是消息的来源，而不是发送的地方。

使用 window.addEventListener( 或仅 addEventListener(.

问题 2

{h, w}

ES6 shorthand 属性 IE、Opera、Safari 或 Android Mobile 的名称是 not supported。最好避免使用它们。

问题 3

parent.postMessage({h, w}, '*');

您正在将消息发送到开头 window，而不是父框架。没有父框架（因此 parent 递归到 window）。

应该是：

 opener.postMessage({h: h, w: w}, '*');

问题 4

<script type="text/javascript">
   var popup = window.open('popup.html', '', 'resizable=yes,scrollbars=yes,width=500,height=500');

您的脚本无权打开新的 window，除非响应用户事件。该代码需要移动到一个函数中，然后从例如单击事件中调用。

If I run it on the same server, no problem with it - message is obtained.

这是问题 1 和 3 的组合导致的。您正在将事件处理程序绑定到弹出窗口（如果它在同一来源，则只能从开头 window 开始执行）并且您正在从弹出窗口向自身发布消息（因为 parent === window） .

完成但不是最佳实践，在我的测试中有效的代码：

`http://localhost:7007/index.html`

<!DOCTYPE html>
<html>
<script>
addEventListener("message", function (event) {
    document.body.appendChild(document.createTextNode(event.data));
});
function pop() {
    window.open("http://127.0.0.1:7007/popup.html");
}
</script>
<input type="button" onclick="pop()">

`http://127.0.0.1:7007/popup.html`

<!DOCTYPE html>
<html>
<script>
opener.postMessage([123, 456], '*');
</script>
<h1>popup</h1>

Window.postMessage() 问题

Window.postMessage() issue

javascript

postmessage

dom-events