Window.postMessage() 问题

Question

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

索引.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>

弹出窗口.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

问题一

popup.addEventListener(

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

使用window.addEventListener(或只是addEventListener( 。

问题二

{h, w}

IE、Opera、Safari 或 Android Mobile 不支持ES6 速记属性名称。 最好避免它们。

问题三

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

您正在向打开的窗口而不是父框架发送消息。 没有父框架（所以parent递归到window ）。

那应该是：

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

问题四

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

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

如果我在同一台服务器上运行它，它没有问题 - 获得消息。

是问题 1 和问题 3 的组合导致了这种情况。 您正在将事件处理程序绑定到弹出窗口（如果它位于同一来源，您只能从打开的窗口执行此操作）并且您正在从弹出窗口向其自身发布消息（因为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>

Answer 2

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

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

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

Window.postMessage() 问题

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-08-14 15:20:36

问题一

问题二

问题三

问题四

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

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

解决方案2
1 2015-08-14 15:13:45

Window.postMessage() 问题

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-08-14 15:20:36

问题一

问题二

问题三

问题四

http://localhost:7007/index.html

http://127.0.0.1:7007/popup.html

解决方案2 1 2015-08-14 15:13:45

解决方案1
3 已采纳 2015-08-14 15:20:36

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

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

解决方案2
1 2015-08-14 15:13:45