Javascript 如何检索使用HTML5的postMessage发布的数据？

我有两个HTML文件。在一个HTML文件中，我使用HTML5中的

postMessage

发布了一条消息。如何在加载时在另一个HTML文件中获取发布的消息

One.html

$（文档）.ready（函数（）{
//留言
var iframeWin=document.getElementById（“iframe_id”）.contentWindow；
iframeWin.postMessage（“hellooo”）；
});
IFrame示例

2.html

$（文档）.ready（函数（）{
//在这里得到张贴消息
});
IFrame子示例
我还没有听到任何消息
内联框架

您可以使用类似HTML5的本地存储

localStorage.setItem("msgvariable", message);

并在另一个html页面上检索它，如下所示

var retrivedMsg = localStorage.getItem("msgvariable");

---

检查实现

您必须在子iframe中的

窗口

对象上侦听

消息

事件。另外，

postMessage

接受两个参数，message和domain

One.html

$（文档）.ready（函数（）{
$（'#clickMe'）。单击（函数（）{
//留言
var iframeWin=document.getElementById（“iframe_id”）.contentWindow；
iframeWin.postMessage（“hellooo”，“*”）；
});
});
IFrame示例
点击我

2.html

$（文档）.ready（函数（）{
$（窗口）.on（'message'，函数（evt）{
$（“#已收到消息”）.html（evt.originalEvent.data）；
});
});
IFrame子示例
我还没有听到任何消息
内联框架

HTML5

postMessage（）

API方法的语法如下：

userWindow.postmessage(myMessage, targetOrigin);

这将把

myMessage

发布到

userWindow

指向的窗口，该窗口的URI为

targetOrigin

。如果

userWindow

引用匹配，但

targetOrigin

与其URI不匹配，则不会发布消息

在目标窗口，即

用户窗口

中，您可以收听

消息

事件

window.addEventListener('message', handlerFunction, captureBubble);

例如，如果在

myWindow

变量中有一个窗口引用，那么在源代码中

呼叫

myWindow.postMessage('this is a message', 'http://www.otherdomain.com/');

回调处理

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  if (event.origin !== 'http://www.otherdomain.com/')
    return;
  // this check is neccessary 
  // because the `message` handler accepts messages from any URI

  console.log('received response:  ',event.data);
}

目标是

消息处理程序

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  if (event.origin !== 'http://www.callingdomain.com/')
    return;

  console.log('received message:  ',event.data);
  event.source.postMessage('this is response.',event.origin);
}

---

我不想使用本地存储概念。如果我能用html5nope的postmessage方法获得发布的值，请帮助我，我对此一无所知。但看看这个链接可能会触发什么

window.addEventListener('message', handlerFunction, captureBubble);

myWindow.postMessage('this is a message', 'http://www.otherdomain.com/');

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  if (event.origin !== 'http://www.otherdomain.com/')
    return;
  // this check is neccessary 
  // because the `message` handler accepts messages from any URI

  console.log('received response:  ',event.data);
}

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  if (event.origin !== 'http://www.callingdomain.com/')
    return;

  console.log('received message:  ',event.data);
  event.source.postMessage('this is response.',event.origin);
}