使用 postMessage 对 iframe 进行跨域数据传输
postMessage
前端开发过程中，有时需要调用显示别人的页面，此时如果模块化不高时，就有可能会使用 iframe 去进行引入，不过在 iframe 父子页面之间有时候会遇到参数传递问题。
本文主要通过 postMessage 的方式进行传参，这种传参方式可以减少跨域带来的问题。
MDN 介绍：
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数
Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
url 传参
在介绍 postMessage 的传参方式之前，先说一下子页面可以通过 url 来获取参数（如果只是固定不变的关键数据，使用这种方式也不错）
在父页面中：
<iframe id="ifr" src="./iframe.html?id=123" frameborder="0"></iframe>
在子页面中，可以直接分析 window.location的 url。
<script>
let url = window.location.search.slice(1, window.location.search.length).split('=');
console.log(url);
</script>
此时运行父页面到浏览器中，显示结果：
这样就能拿到关键的 id 参数了。
使用 postMessage 传参
方法的参数有三种：
-
data: 从其他 window 中传递过来的对象。
-
origin: 调用
postMessage时消息发送方窗口的 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org(隐含端口 `443`)”、“https://example.net (隐含端口 `80`)”、“https://example.com:8080”。请注意，这个 origin 不能保证是该窗口的当前或未来 origin，因为 postMessage 被调用后可能被导航到不同的位置。
在父界面中, 从 iframe 的 contentWindow 中找到 postMessage 方法
<script>
let i = 0;
let ifr = document.getElementById('ifr')
function post() {
ifr.contentWindow.postMessage(`发送数据 i: ${i}`, 'https://127.0.0.1:5500/');
i++;
}
</script>
iframe 子界面通过 addEventListener 监听message。
window.addEventListener('message', (event)=> { //给当前window建立message监听函数
console.log(event.data);
}, false);
效果如下：
现在上面的例子是父页面给子页面传值，也可以由子页面向父页面传值，原理其实是相同的。
同时为了安全性考虑，可以通过使用 origin 来对来源增加判断
window.addEventListener('message', (event)=> { //给当前window建立message监听函数
console.log(event.origin);
console.log(event.data);
}, false);
本文文字及图片出自 InfoQ
你也许感兴趣的：
- 【外评】电脑从哪里获取时间？
- 【外评】为什么 Stack Overflow 正在消失？
- Android 全力押注 Rust，Linux 却在原地踏步？谷歌：用 Rust 重写固件太简单了！
- 【外评】哪些开源项目被广泛使用，但仅由少数人维护？
- 【外评】好的重构与不好的重构
- C 语言老将从中作梗，Rust for Linux 项目内讧升级！核心维护者愤然离职：不受尊重、热情被消耗光
- 【外评】代码审查反模式
- 我受够了维护 AI 生成的代码
- 【外评】Linux 桌面市场份额升至 4.45
- 【外评】作为全栈开发人员如何跟上 AI/ML 的发展？
你对本文的反应是：