怎么讓頁面與iframe進(jìn)行通信

本文小編為大家詳細(xì)介紹“怎么讓頁面與iframe進(jìn)行通信”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么讓頁面與iframe進(jìn)行通信”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

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)前對象。

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

接收消息

無論是在 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ù)請傳遞消息接收方的域名。因為這里是會存在安全隱患的，任何站點都可以向你的站點發(fā)送消息，如果沒有做相關(guān)安全處理，是很容易造成攻擊的。

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

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

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

讀到這里，這篇“怎么讓頁面與iframe進(jìn)行通信”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。