詳解如何讓頁面與 iframe 進行通信

Posted on by

引言

這篇文章介紹如何實現頁面與 iframe 進行通信，實際工作中可能很難遇到，但一旦遇到瞭，我們要能夠立即想到怎樣去實現。

iframe 向父級頁面發送消息

在 iframe 頁面，使用 window.parent 調用 postMessage 方法，即可發送消息給父級頁面。

window.parent.postMessage(message, '*');

message 隻能是 String 類型，所以如果想發送多條數據，可以使用 JSON 序列化對象。

// 序列化對象
const message = JSON.stringify({
  message: 'Hello',
  date: Date.now(),
});
window.parent.postMessage(message, '*');

使用 JSON.stringify 方法對內容進行序列話，即可在傳入 postMessage 方法。

父級頁面向 iframe 發送消息

在父級頁面，使用 iframe.contentWindow 調用 postMessage 方法，即可發送消息給 iframe。

iframeEl.contentWindow.postMessage(message, '*');

iframeEl 表示 iframe DOM 對象。

通過上面兩個例子，我們可以得到一個信息。

向誰發送消息，那麼調用者對象就是這個發送消息的目標對象，而不是當前對象。

這一點需要非常註意，這裡是很容裡踩坑的。

接收消息

無論是在 iframe 頁面還是父級頁面，都是使用 window 監聽 message 事件接收消息。

window.addEventListener('message', function (e) {
  // 獲取消息內容 data
  const { data } = e;
});

如果消息內容是序列化後的對象，還需要將消息內容反序列化。

window.addEventListener('message', function (e) {
  // 獲取消息內容 data
  let { data } = e;
  data = JSON.parse(data);
});

使用 JSON.parse 方法對內容進行反序列化，即可的到傳遞過來的內容對象。

指定發送消息的域名

上面我們使用 postMessage 方法，傳遞的第二個參數都是 *，這裡的含義是指任何域名都能接收消息。

建議如果知道消息接收方的域名，第二個參數請傳遞消息接收方的域名。因為這裡是會存在安全隱患的，任何站點都可以向你的站點發送消息，如果沒有做相關安全處理，是很容易造成攻擊的。

iframeEl.contentWindow.postMessage(message, 'https://www.baidu.com');

上面的示例代碼標識僅當 iframe 的指向 https://www.baidu.com 時才會發送消息。

通過制定域名的的方式，避免安全隱患。

以上就是詳解如何讓頁面與 iframe 進行通信的詳細內容，更多關於頁面與iframe通信的資料請關註WalkonNet其它相關文章！

推薦閱讀：