使用 postmessage 发回消息答案

【问题标题】：Sending message back with postmessage使用 postmessage 发回消息
【发布时间】：2014-09-29 12:54:50
【问题描述】：

我目前正在制作一个需要在两个域之间发送信息的应用程序（将在页面加载时）。

网站 1： 创建 iFrame > 向网站 2 发送 Postmessage

window.onload =  function () {

iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "WEBSITE 2");
iframe.style.width = "200px";
iframe.style.height = "200px";
iframe.style.border = "none"; //please do not show the iframe JS.
 iframe.id = "lol";
document.body.appendChild(iframe);
document.getElementById("test").innerHTML = "Test!"
window.addEventListener("message", listener, false);

window.setTimeout(sendMessage,100)
}
function sendMessage(e) {
  var receiver = document.getElementById('lol').contentWindow;
receiver.postMessage('Hello Treehouse!', 'WEBSITE 2');
}

function listener(event){
if ( event.origin !== "WEBSITE 2" )
return //website isn't ours bro

  document.getElementById("test").innerHTML = event.data

}

网站 2 从网站 1 获取 Postmessage > 创建 iFrame (?) > 将 Postmessage 发送到网站 1 (?)

window.onload =  function createiframe() {
 window.addEventListener("message", listener, false);
}

function listener(event){
  if ( event.origin !== "WEBSITE 1" )
  return //website isn't ours bro

  document.getElementById("test").innerHTML = event.data

  window.setTimeout(createiFrame,1000)
}
  function createiFrame() {
 iframe = document.createElement("IFRAME");
  iframe.setAttribute("src", "WEBSITE 1");
  iframe.style.width = "230px";
  iframe.style.height = "203px";
  iframe.style.border = "none"; //please do not show the iframe JS.
  iframe.id = "lol";
  document.body.appendChild(iframe);
  document.getElementById("test").innerHTML = "Test!"
  window.setTimeout(sendMessage,1000)
  }
  function sendMessage(e) {
         var receiver = document.getElementById('lol').contentWindow;
    receiver.postMessage('Hello ', 'WEBSITE 1');
    console.log('Message sent')
  }

iFrame是在网站2上创建的，然后与网站1和网站2进行循环，但是从网站2发送到网站1的Postmessage显示在额外的iFrame中，是否可以发回消息到浏览器中打开的网站1？

显示的示例：

测试！测试！你好测试！

谢谢！

【问题讨论】：

标签： javascript iframe cross-browser sendmessage postmessage

【解决方案1】：

如果我没看错的话，在网站 2 中的 sendMessage() 函数中，看起来您正在获取新创建的 iframe 元素，然后向其发布消息。在现实中您真正想在网站 1 上发布消息的位置。

从网站 2...尝试类似

window.parent.postMessage("hello website 1", "*");

【讨论】：

【解决方案2】：

要响应 Event.origin 域，您可以使用消息的Event.source

// Child website:
window.addEventListener("message", evt => {
    // if (evt.origin !== "http://example.com") return;

    console.log(evt.data) // "Question!"
    evt.source.postMessage("Response!", evt.origin);
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#The_dispatched_event

source
对发送消息的窗口对象的引用；您可以使用它在具有不同来源的两个窗口之间建立双向通信。

【讨论】：