在jQuery中包裝postMessage

2011-06-10 74 views 1 likes

我想學習jQuery，我想做一個簡單的postMessage客戶端。是否有可能把它包裝在jQuery中？第一次警報有效，但第二次警報不起作用。在jQuery中包裝postMessage

我試圖修改此代碼：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可以做到這一點，但我這樣做是一個學習的過程。

來源

2011-06-10 woahman

回答

postMessage用於在不同的頁面或窗口（或iframe）之間進行通信。您正在向同一窗口發佈消息。正如你所見，沒有任何反應。

如果您回到原始博客帖子，作者將創建並顯示兩個iframe，然後在它們之間發佈消息。

來源

2011-06-10 17:39:53 jmbucknall

現在需要postMessage的第二個參數。您的代碼可以更改爲：

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

這是有效的，因爲您發佈到自己的窗口。要發佈到另一個窗口，使用此：

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

在jQuery中包裝postMessage

回答

相關問題