引言

這篇文章介紹如何實(shí)現(xiàn)頁面與 iframe 進(jìn)行通信，實(shí)際工作中可能很難遇到，但一旦遇到了，我們要能夠立即想到怎樣去實(shí)現(xiàn)。

iframe 向父級頁面發(fā)送消息

在 iframe 頁面，使用 window.parent 調(diào)用 postMessage 方法，即可發(fā)送消息給父級頁面。

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

message 只能是 String 類型，所以如果想發(fā)送多條數(shù)據(jù)，可以使用 JSON 序列化對象。

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

使用 JSON.stringify 方法對內(nèi)容進(jìn)行序列話，即可在傳入 postMessage 方法。

父級頁面向 iframe 發(fā)送消息

在父級頁面，使用 iframe.contentWindow 調(diào)用 postMessage 方法，即可發(fā)送消息給 iframe。

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

iframeEl 表示 iframe DOM 對象。

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

向誰發(fā)送消息，那么調(diào)用者對象就是這個發(fā)送消息的目標(biāo)對象，而不是當(dāng)前對象。

這一點(diǎn)需要非常注意，這里是很容里踩坑的。

接收消息

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

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

如果消息內(nèi)容是序列化后的對象，還需要將消息內(nèi)容反序列化。

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

使用 JSON.parse 方法對內(nèi)容進(jìn)行反序列化，即可的到傳遞過來的內(nèi)容對象。

指定發(fā)送消息的域名

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

建議如果知道消息接收方的域名，第二個參數(shù)請傳遞消息接收方的域名。因?yàn)檫@里是會存在安全隱患的，任何站點(diǎn)都可以向你的站點(diǎn)發(fā)送消息，如果沒有做相關(guān)安全處理，是很容易造成攻擊的。

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

上面的示例代碼標(biāo)識僅當(dāng) iframe 的指向 https://www.baidu.com 時才會發(fā)送消息。

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

以上就是詳解如何讓頁面與 iframe 進(jìn)行通信的詳細(xì)內(nèi)容，更多關(guān)于頁面與iframe通信的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論