引言

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

iframe 向父級(jí)頁(yè)面發(fā)送消息

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

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

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

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

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

父級(jí)頁(yè)面向 iframe 發(fā)送消息

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

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

iframeEl 表示 iframe DOM 對(duì)象。

通過(guò)上面兩個(gè)例子，我們可以得到一個(gè)信息。

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

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

接收消息

無(wú)論是在 iframe 頁(yè)面還是父級(jí)頁(yè)面，都是使用 window 監(jiān)聽(tīng) message 事件接收消息。

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論