使用iframe通过iframe子页面调用父页面或父页面调用iframe子页面时,因为违反了浏览器安全策略,无法跨iframe获取到另一页面的数据,在控制台中可以看到如下报错
Blocked a frame with origin “http://localhost:****” from accessing a cross-origin frame.
以上问题可通过postMessage
方法安全地跨iframe进行通信。
子页面数据发送
// data为子页面发送的数据(可以是一个js对象,会被自动序列化处理)window.parent.postMessage(data, '*')
父页面数据监听
addEventListener('message', e => { // e.data为子页面发送的数据 console.log(e.data)})
父页面数据发送
document.getElementById('iframe').contentWindow.postMessage(data,'*')
子页面接收数据
addEventListener('message', e => { // e.data为父页面发送的数据 console.log(e.data)})
在上边的代码中postMessage
的第二个参数被设置为’*’,意为任意源,这里可以指定接收源,示例代码如下
window.parent.postMessage('exit','http://example.org');
监听到数据检测发送来源
addEventListener('message', e => { if(e.origin === 'http://example.org') { // 仅在数据发送来源自受信任的地址才执行对应操作 }})
联系客服