iframe傳值之Postmessage
阿新 • • 發佈:2018-12-25
緣由:
最近遇到一個神奇的問題,淘寶WindVane不支援多層巢狀,只支援一層巢狀的形式,所以就像使用一層傳值的方式來互動iframe,調研了幾種方案以後,發現還是window.postMessage傳值在iframe最靠譜,但是相對的要改動原來的頁面,所以自己衡量啦~
API:
傳值方式:
父頁面給子頁面傳值方式,寫法基本是一致的,收到值監聽message事件
父頁面傳值
示例:
let url = $("#postMessageText").val(); iFrame = document.getElementById('iframe-info'); // 後臺頁面傳送資料 iFrame.contentWindow.postMessage({ 'resourceURL': "傳值" }, '*');
<iframe id="iframe-info" src="https://www.taobao.com/"></iframe>
子頁面給父頁面傳值
// 給父頁面傳送訊息,隱藏按鈕
parent.postMessage({
sendBack: false,
}, '*');
接收值(通過”message“進行事件監聽)
//監聽message事件 window.addEventListener("message", this.getPostMessage, false); // 用 origin 判斷傳輸網址 var origin = event.origin || event.originalEvent.origin; if (origin !== "http://example.org:8080") return; //獲取傳輸的 resourceURL 值 let data = event.data; let resourceURL = data.resourceURL; }