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

编辑：我知道有很多插件可以做到这一点，但我这样做是一个学习过程。

score 0 · Accepted Answer

postMessage用于在不同的页面或窗口（或 iframe）之间进行通信。您正在向同一窗口发布消息。如您所见，没有任何反应。

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

score 0 · Accepted Answer

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

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

哪个有效，因为您要发布到自己的窗口。要发布到另一个窗口，请使用以下命令：

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

jquery - 在 jQuery 中包装 postMessage

2 回答 2

Related

Reference