2
私は以下のようなポップアップウィンドウで開いた小さなフォームを持ってください。postMessage iframeから新しいウィンドウで開く
<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 height="450" 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を持つ新しいウィンドウを開きました。私はポップアップまたは子ウィンドウからpostMessageを作成し、それを親ウィンドウで受け取るつもりです。私はその後、下の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 height="450" 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リンクをクリックすると、それは子コンソールに
parent.postMessage('Hello', 'http://localhost:3000');
を実行するとのreceiveMessageイベントを発生しません、しかし、サーバ3001からの私の子供を開設親。私は自分のイベントが付いていることを確認した。私は可能な限りすべてを試みたが、何も変わらなかった。私は間違って何をしていますか？すべてのヘルプは申し訳ありませんが、数多くの試みの後、
parent.opener.postMessage('Hello', 'http://localhost:3000');
が正常に動作するようです
ありがとう、それは私のために同様のケースで動作します。新しいウィンドウで実行する場合、** postMessage **は** parent **ではなく** opener **に送信する必要があります。私の場合は、両方のケースで動作させる必要があるので、オープナーの存在を確認します。 opener.postMessage（ 'Hello'、 'https：//target.url'）：parent.postMessage（ 'Hello'、 'https：//target.url'） ' – Rafa