怎么讓頁面與iframe進行通信

本文小編為大家詳細介紹“怎么讓頁面與iframe進行通信”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么讓頁面與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進行通信”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。