您现在的位置是:网站首页> HTML&JS
postMessage 用法(可以给iframe传值)
- HTML&JS
- 2023-06-20
- 797人已阅读
postMessage(data,origin)方法接受两个参数:
let iframeWindow = document.getElementById('myframe').contentWindow;
iframeWindow.postMessage('aaa', 'http://www.wrox.com');
1. data:
- 要传输的数据,推荐使用字符串格式,其他格式的浏览器的兼容性不好
- 如果要传输结构化数据,可以通过JSON.stringify处理,接收时用JSON.parse转换回来
2. origin:
- 指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写
- 如果不想限制接收目标源:可以传 '*'
- 如果目标与当前窗口同源:可以传 '/'
接收消息
window.addEventListener('message',(event)=>{
// 判断源路径是否来自预期发生者
if(event.origin.includes('http://www.wrox.com')){
// 获取传过来的数据
console.log(event.data)
// 再传回去一条消息
event.source.postMessage('已收到消息', 'p2p.wrox.com')
}
})
// event包含3个参数
- event.data: 接收到的数据
- event.origin: 发送消息的文档源
- event.source: 发生消息的文档中window对象的代理
下一篇:Js实现web应用浏览器通知