区块链技术博客
www.b2bchain.cn

解决iframe跨域传参(Blocked a frame with origin)的讲解

这篇文章主要介绍了解决iframe跨域传参(Blocked a frame with origin)的讲解,通过具体代码讲解7150并且分析了解决iframe跨域传参(Blocked a frame with origin)的讲解的详细步骤与相关技巧,需要的朋友可以参考下

本文实例讲述了解决iframe跨域传参(Blocked a frame with origin)的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7150.html。具体如下:

一.问题描述

使用iframe通过iframe子页面调用父页面或父页面调用iframe子页面时,因为违反了浏览器安全策略,无法跨iframe获取到另一页面的数据,在控制台中可以看到如下报错

Blocked a frame with origin “http://localhost:****” from accessing a cross-origin frame.

二.解决方案

以上问题可通过postMessage方法安全地跨iframe进行通信。

1.iframe子页面调用父页面

  • 子页面数据发送
// data为子页面发送的数据(可以是一个js对象,会被自动序列化处理) window.parent.postMessage(data, '*') 
  • 父页面数据监听
addEventListener('message', e => {     // e.data为子页面发送的数据     console.log(e.data) })  

2.父页面调用iframe子页面

  • 父页面数据发送
document.getElementById('iframe').contentWindow.postMessage(data,'*') 
  • 子页面接收数据
addEventListener('message', e => {     // e.data为父页面发送的数据     console.log(e.data) }) 

3.安全性优化- 发送数据限制接收源

在上边的代码中postMessage的第二个参数被设置为’*’,意为任意源,这里可以指定接收源,示例代码如下

 window.parent.postMessage('exit','http://example.org'); 
  • 监听到数据检测发送来源
addEventListener('message', e => {     if(e.origin === 'http://example.org') {         // 仅在数据发送来源自受信任的地址才执行对应操作     } }) 

END

本文地址https://www.b2bchain.cn/7150.html

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 解决iframe跨域传参(Blocked a frame with origin)的讲解
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们