用 jQuery 封装 postMessage

Question

我正在尝试学习 jQuery，我想制作一个简单的 postMessage 客户端。 可以用jquery封装吗？第一个警报有效，但第二个警报无效。

我正在尝试修改此代码：http://austinchau。 blogspot.com/2008/11/html5-cross-document-messaging.html

$(document).ready(function() {

   $('#submit_button').click(function() {
      var data = $('#message').val();
      window.postMessage('1st' + data);
      alert(data);
   });

    var onmessage = function(e) {
      var data = e.data;
      var origin = e.origin;
      document.getElementById('display').innerHTML = data;
      alert('2nd' + data);
    };

    if (typeof window.addEventListener != 'undefined') {
      window.addEventListener('message', onmessage, false);
    } else if (typeof window.attachEvent != 'undefined') {
      window.attachEvent('onmessage', onmessage);
    }
});

编辑：我知道有 许多插件可用于执行此操作，但我将其作为一个学习过程。

Answer 1

postMessage 用于在不同页面或窗口（或 iframe）之间进行通信。您正在向同一个窗口发布消息。正如您所看到的，什么也没有发生。

如果您返回到原始博客文章，作者会创建并显示两个 iframe，然后在它们之间发布消息。

Answer 2

现在需要 postMessage 的第二个参数。您的代码可以更改为：

   window.postMessage('1st' + data, document.location);

其有效，因为您正在发布到自己的窗口。要发布到另一个窗口，请使用以下内容：

   popup = window.open('http://example.com/');
   popup.postMessage("Hi!", 'http://example.com/')

进一步阅读：

• http://ejohn.org /blog/postmessage-api-changes/

• http://dev.w3.org/html5/postmsg/#web-messaging

祝你好运！