javascript postMessage - 测试消息的接收

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript postMessage - 测试消息的接收相关的知识,希望对你有一定的参考价值。

我使用postMessage在我的域的主机和iframe之间进行通信。

以下是hostdomain.org上的代码:

function rec_tyd(json_var)
{
  //if i decode and alert json_var there i get the content.
  var win = document.getElementById("tyd_frame").contentWindow;
  win.postMessage(json_var, "http://multipress.fr/tyd//module/pro_mod.php");
}

<iframe src="http://example.org/myiframe.php" width="500" height="200" 
name="tyd_frame" id="tyd_frame" style="border:1px solid black;"</iframe>

json_var是一个JSON对象。

我的域名example.org/myiframe.php上的代码是:

if (!window.addEventListener)   // IE
  {window.addEventListener = function (type, listener, capt) {
  attachEvent("on"+type, function(){listener(event)});}
}

addEventListener("message", function(e) {       
  var final = JSON.parse(e.data);
  alert(final.id_product);
  alert(final.id_company);
}, false);

基本上,一切正常,除了:

  • 在第一次加载时,我在iframe中没有得到任何内容
  • 当我重装一次时,我得到了价值
  • 如果我刷新主页,我什么都没得到。

在Chrome和FireFox中也是如此:刷新不起作用,但如果进入地址栏并按回车键,则可以正常工作。除了第一次。

我检查了我的JSON对象,然后在postmessage之前得到它。它真的在iframe中我什么都没得到。

所以我的问题是:我如何测试我得到的东西?我在代码中犯了错误吗?

目前我实际上在同一个域上工作,但它将在不同的域上进行生产。

答案

解决了评论:)

==>当文档准备就绪时停止启动我的postMessage,但是将其置于iframe的onload状态,似乎问题已修复!谢谢

以上是关于javascript postMessage - 测试消息的接收的主要内容,如果未能解决你的问题,请参考以下文章

javascript postMessage - 测试消息的接收

javascript 滚动扩展 - postMessage - Stroeer

保护 Javascript 同源 postMessage 调用和消息监听器,这就够了吗?

HTML5 postMessage 和 onmessage API 具体应用

解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

javascript 提供用于从React-Native WebView发送和接收消息的示例实现(使用postMessage / onMessage WebVie)