来自在新窗口中打开的 iframe 的 postMessage
Posted
技术标签:
【中文标题】来自在新窗口中打开的 iframe 的 postMessage【英文标题】：postMessage from an iframe opened in in new window 【发布时间】：2017-02-25 09:08:01 【问题描述】：请在下面的弹出窗口中打开一个小表单。
<html>
<head>
</head>
<body>
<div id="popUpDiv" style="display:none;"></div>
<script type="text/javascript">
var popUpWindow;
function popup(n)
popUpWindow = window.open("",n, "height=500,width=500");
function foo(obj)
test1 = "http://localhost:3001";
popUpWindow.document.write('<iframe id="receiver" allowTransparency="true" frameborder="0" scrolling="yes" style="width:100%;" src="'+test1+'" type= "text/javascript"></iframe>');
</script>
<a href="#" onclick="popup('popUpDiv');foo(this);">OnSale</a>
</body>
</html>
上面是父表单，在服务器 localhost:3000 上运行。我打开了一个带有 iframe 的新窗口。我打算从弹出窗口或子窗口中发布消息并在父窗口中接收它。然后我修改了我的代码，在下面添加了 onload。
window.onload = function() .
var messageEle = document.getElementById('message');
console.log('its receiving message');
function receiveMessage(e)
alert('received');
console.log('the origin is ', e.origin);
if (e.origin !== "http://localhost:3001")
return;
messageEle.innerHTML = "Message Received: " + e.data;
window.addEventListener('message', receiveMessage);
我的完整父页面现在如下所示。
<html>
<head>
</head>
<body>
<div id="popUpDiv" style="display:none;"></div>
<script type="text/javascript">
var popUpWindow;
function popup(n)
popUpWindow = window.open("",n, "height=500,width=500");
function foo(obj)
test1 = "http://localhost:3001";
popUpWindow.document.write('<iframe id="receiver" allowTransparency="true" frameborder="0" scrolling="yes" style="width:100%;" src="'+test1+'" type= "text/javascript"></iframe>');
window.onload = function()
var messageEle = document.getElementById('message');
console.log('its receiving message');
function receiveMessage(e)
alert('received');
console.log('the origin is ', e.origin);
if (e.origin !== "http://localhost:3001")
return;
messageEle.innerHTML = "Message Received: " + e.data;
window.addEventListener('message', receiveMessage);
</script>
<a href="#" onclick="popup('popUpDiv');foo(this);">OnSale</a>
<div id="message"></div>
</body>
</html>
当我单击父级上的 onSale 链接时，它从服务器 3001 打开了我的孩子。但是，在子控制台上运行
parent.postMessage('Hello', 'http://localhost:3000');
不会触发父级的 receiveMessage 事件。我确认我的活动已附加。我尝试了一切可能但没有任何改变。请问我做错了什么？任何帮助将不胜感激
【问题讨论】：
【参考方案1】：抱歉，经过多次尝试，
parent.opener.postMessage('Hello', 'http://localhost:3000');
似乎工作正常。虽然需要研究原因。找到答案here
【讨论】：
谢谢，它在类似的情况下对我有用。在新窗口中运行时，postMessage 需要发送到 opener 而不是 parent。在我的情况下，我需要让它适用于这两种情况，所以我检查开瓶器是否存在：opener ? opener.postMessage('Hello','https://target.url') : parent.postMessage('Hello','https://target.url')以上是关于来自在新窗口中打开的 iframe 的 postMessage的主要内容，如果未能解决你的问题，请参考以下文章
适用于 IOS 的 Chrome 无法在 iframe 中正确打开新窗口
在新窗口/标签中打开 Google Docs iframe 链接在 Internet Explorer 中不起作用