一.問題描述
使用iframe通過iframe子頁面呼叫父頁面或父頁面呼叫iframe子頁面時，因為違反了瀏覽器安全策略，無法跨iframe獲取到另一頁面的資料，在控制臺中可以看到如下報錯
Blocked a frame with origin “http://localhost:****” from accessing a cross-origin frame.
二.解決方案
以上問題可通過postMessage方法安全地跨iframe進行通信，
1.iframe子頁面呼叫父頁面
- 子頁面資料發送
// data為子頁面發送的資料（可以是一個js物件，會被自動序列化處理）
window.parent.postMessage(data, '*')
- 父頁面資料監聽
addEventListener('message', e => {
// e.data為子頁面發送的資料
console.log(e.data)
})
2.父頁面呼叫iframe子頁面
- 父頁面資料發送
document.getElementById('iframe').contentWindow.postMessage(data,'*')
- 子頁面接收資料
addEventListener('message', e => {
// e.data為父頁面發送的資料
console.log(e.data)
})
3.安全性優化- 發送資料限制接收源
在上邊的代碼中postMessage的第二個引數被設定為’*’，意為任意源，這里可以指定接收源，示例代碼如下
window.parent.postMessage('exit','http://example.org');
- 監聽到資料檢測發送來源
addEventListener('message', e => {
if(e.origin === 'http://example.org') {
// 僅在資料發送來源自受信任的地址才執行對應操作
}
})
END
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/1475.html
標籤：其他
上一篇：記錄坎坷的面試