postMessage實現頁面通訊介紹

本章節介紹一下如何實現使用postMessage實現頁面通訊效果。

一.postMessage簡單介紹:

window.postMessage雖然說是html5的功能，但是支援IE8+。

假如網站不需要支援IE6和IE7，那麼可以使用window.postMessage。

window.postMessage是客戶端和客戶端直接的資料傳遞，既可以跨域傳遞，也可以同域傳遞。

二.應用場景:

下面只是一個簡單的例子，當然它的應用場景有很多。

例如有一個頁面，頁面中拿到部分使用者資訊，點選進入另外一個頁面，另外的頁面預設是取不到使用者資訊的，可以通過window.postMessage把部分使用者資訊傳到這個頁面中。（當然要考慮安全性等方面。）

三.程式碼例項:

傳送資訊:

[JavaScript] 純文字檢視 複製程式碼
//彈出一個新視窗
var domain = 'http://softwhy.com';
var myPopup = window.open(domain+ '/windowPostMessageListener.html', 'myWindow');
 
//週期性的傳送訊息
setTimeout(function () {
  //var message = '當前時間是 ' + (new Date().getTime()); 
  var message = { name: "站點", sex: "男" }; //你在這裡也可以傳遞一些資料，obj等
  console.log('傳遞的資料是  ' + message);
  myPopup.postMessage(message, domain);
}, 1000);

要延遲一下，一般用計時器setTimeout延遲再發用。

接受的頁面:

[JavaScript] 純文字檢視 複製程式碼
//監聽訊息反饋
window.addEventListener('message', function (event) {
  //這個判斷一下是不是我這個域名跳轉過來的
  if (event.origin !== 'http://softwhy.com') return; 
  console.log('received response:  ', event.data);
}, false);

如下圖，接受頁面得到資料

如果是使用iframe，程式碼應該這樣寫：

[JavaScript] 純文字檢視 複製程式碼
//捕獲iframe
var domain = 'http://softwhy.com';
var iframe = document.getElementById('myIFrame').contentWindow;
 
//傳送訊息
setTimeout(function () {
  //var message = '當前時間是 ' + (new Date().getTime()); 
  var message = { name: "站點", sex: "男" }; //你在這裡也可以傳遞一些資料，obj等
  console.log('傳遞的資料是:  ' + message);
  //send the message and target URI
  iframe.postMessage(message, domain);
}, 1000);

接受資料

[JavaScript] 純文字檢視 複製程式碼
//響應事件
window.addEventListener('message', function (event) {
  if (event.origin !== 'http://softwhy.com') return;
  console.log('message received:  ' + event.data, event);
  event.source.postMessage('holla back youngin!', event.origin);
}, false);

上面的程式碼片段是往訊息源反饋資訊，確認訊息已經收到。下面是幾個比較重要的事件屬性：

source – 訊息源，訊息的傳送視窗/iframe。

origin – 訊息源的URI(可能包含協議、域名和埠)，用來驗證資料來源。

data – 傳送方傳送給接收方的資料。