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);
    }
});

编辑：我知道有many plugins可以做到这一点，但我这样做是为了学习过程。

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/')

进一步阅读：

祝你好运！

在jQuery中包装postMessage

2 个答案: