澳门24小时官网 - 欢迎光临

平时工作中会遇到页面嵌套的情况，一般是用 解决。父子页面跨域的情况可以通过postMessage来实现通信。

otherWindow.postMessage(message, targetOrigin, [transfer])

其中：

1.otherWindow：目标窗口。比如 的 contentWindow 属性

2.message：将要发送到其他 窗口 的数据。

3.targetOrigin：目标窗口的域。其值可以是字符串"*"（表示无限制）或者一个 URI。不提供确切的 targetOrigin 将导致数据泄露到任何对数据感兴趣的恶意站点。

4.transfer：可选参数，高级用法。和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

现在有两个不同源的 嵌套页面，父页面 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.父页面发送信息，子页面接收信息

// 父页面发送信息

const = document.getElementById('');

. = function () {

.contentWindow.postMessage('hello, child!', 'http://127.0.0.1:8002');

}

// 子页面接收信息

window.addEventListener('message', e => {

// 通过origin对消息进行过滤，避免遭到XSS攻击

if (e.origin === 'http://127.0.0.1:8001') {

console.log(e.origin) // 父页面所在的域 

console.log(e.data) // 父页面发送的消息, hello, child!

}

}, false);

2.子页面发送信息，父页面接收信息

// 子页面

window.parent.postMessage('hello, parent!', 'http://127.0.0.1:8001');

// 父页面

window.addEventListener('message', e => {

// 通过origin对消息进行过滤，避免遭到XSS攻击

if (e.origin === 'http://127.0.0.1:8002') {

console.log(e.origin) // 子页面所在的域

console.log(e.data)  // 子页面发送的消息, hello, parent!

}

}, false);

通过postMessage和window.addEventListener('message', e => { ... })配合使用，我们就能够完成跨域 父子页面的通信。当然对于同源的 父子页面也可以采用postMessage的方式来发送接收信息。