如果我使用不同的域名，我无法获得任何数据。如果我在同一台服务器上运行它，没问题 - 获得消息。
的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>
如何让它使用不同的服务器？
答案 0 :(得分：3)
popup.addEventListener(
您需要在原始窗口上侦听事件，而不是在弹出窗口上。弹出窗口是消息的来源，而不是发送消息的位置。
使用window.addEventListener(或addEventListener(。
{h, w}
IE，Opera，Safari或Android Mobile的ES6速记属性名称为not supported。最好避免使用它们。
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>
答案 1 :(得分：1)
eventListener应附加到window而不是popup：
window.addEventListener(
'message',
function (event) {
console.log(event.data);
},
false
);
在您的子窗口（弹出窗口）中，您正在向父窗口发布消息，但eventListener将附加到子窗口。