新聞中心
平時工作中會遇到頁面嵌套的情況,一般是用 解決。父子頁面跨域的情況可以通過postMessage來實現(xiàn)通信。
otherWindow.postMessage(message, targetOrigin, [transfer])
其中:
1.otherWindow:目標(biāo)窗口。比如 的 contentWindow 屬性
2.message:將要發(fā)送到其他 窗口 的數(shù)據(jù)。
3.targetOrigin:目標(biāo)窗口的域。其值可以是字符串"*"(表示無限制)或者一個 URI。不提供確切的 targetOrigin 將導(dǎo)致數(shù)據(jù)泄露到任何對數(shù)據(jù)感興趣的惡意站點。
4.transfer:可選參數(shù),高級用法。和message 同時傳遞的 Transferable 對象. 這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方,而發(fā)送一方將不再保有所有權(quán)。
現(xiàn)在有兩個不同源的 嵌套頁面,父頁面 http://127.0.0.1:8001/parent.html,子頁面 http://127.0.0.1:8002/child.html,其中父頁面嵌套部分代碼如下:
< id="" src="http://127.0.0.1:8002/child.html"></>
1.父頁面發(fā)送信息,子頁面接收信息
// 父頁面發(fā)送信息
const = document.getElementById('');
. = function () {
.contentWindow.postMessage('hello, child!', 'http://127.0.0.1:8002');
}
// 子頁面接收信息
window.addEventListener('message', e => {
// 通過origin對消息進(jìn)行過濾,避免遭到XSS攻擊
if (e.origin === 'http://127.0.0.1:8001') {
console.log(e.origin) // 父頁面所在的域
console.log(e.data) // 父頁面發(fā)送的消息, hello, child!
}
}, false);
2.子頁面發(fā)送信息,父頁面接收信息
// 子頁面
window.parent.postMessage('hello, parent!', 'http://127.0.0.1:8001');
// 父頁面
window.addEventListener('message', e => {
// 通過origin對消息進(jìn)行過濾,避免遭到XSS攻擊
if (e.origin === 'http://127.0.0.1:8002') {
console.log(e.origin) // 子頁面所在的域
console.log(e.data) // 子頁面發(fā)送的消息, hello, parent!
}
}, false);
通過postMessage和window.addEventListener('message', e => { ... })配合使用,我們就能夠完成跨域 父子頁面的通信。當(dāng)然對于同源的 父子頁面也可以采用postMessage的方式來發(fā)送接收信息。
總部地址:山西省太原市長治路227號(山西綜改示范區(qū)
學(xué)府園區(qū)高新國際大廈B座一層)