新闻中心
跨域通信方法
日期：2024年10月09日
新闻分类： 技术中心
浏览：318次
平时事情中会遇到页面嵌套的情况，一般是用 解决。父子页面跨域的情况可以通过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的方法来发送接收信息。
- 上一条：web数字孪生云渲染优缺点及大致流程
- 下一条：车机系统主要功效
总部地点：山西省太原市长治路227号（山西综改示范区
学府园区高新国际大厦B座一层）
总机：(0351)7021780
董事办：(0351)7026650
传真：(0351)7027037
全国免费销售热线：400-0351-150
版权所有： 金年会 备案号：晋ICP备09004627号-2 
- keda@sxkeda.com
- 400-0351-150
-
微信
- 专属客服
- 留言
- 回到顶部