父与子页面通信【解决Blocked a frame with origin“XXX”from accessing a cross-origin frame】

已于 2022-05-12 15:35:09 修改
阅读量700 收藏
点赞数
分类专栏： js 文章标签： vue.js javascript 前端
于 2022-05-12 15:32:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sogi1212/article/details/124732315
版权
本文介绍了在Vue.js和JavaScript环境中，如何处理跨域父页面与子页面之间的通信问题。通过使用`postMessage`方法，例如`_this.refs.cuotiIframe.contentWindow.postMessage()`和`window.parent.postMessage()`，可以实现在多级父子关系中的消息传递。总结关键点在于：要确定正确的窗口对象，例如`window.parent`或`window.parent.parent`，以便正确地将消息发送到目标页面。
摘要由CSDN通过智能技术生成


子页面对象.contentwindow.postMessage()
如:
_this.refs.cuotiIframe.contentWindow.postMessage()

window.parent.postmessage()【只有一个父】

此时的window 代表 子页面自己，window.parent  就是父对象，
若有多个父，可通过 window.parent.parent 的方式找到实际想要发送的父页面

总结通信 ：想要发送给谁，就要找到对象的窗口信息

父-子页面通信 - GitMindGitMind免费在线思维导图，支持Windows/Mac/Linux多平台操作及内容同步。你可以用它来轻松制作流程图、思维导图、组织结构图、类图、用例图、ER图、网络拓扑图以及UML图等十多种图形。https://gitmind.cn/app/flowchart/5728487483

sogi1212
关注
专栏目录
iframe 内嵌报跨域SecurityError: Blocked a frame with origin “http://x“from accessing a cross-origin frame
userDengDeng的博客
03-09 2万+
Vue 项目中 嵌入 iframe <iframe id="iframe" width="100%" height="100%" frameborder="0" :src="embedSrc"></iframe> 报跨域错误 Error in nextTick: "SecurityError: Blocked a frame with origin "https://test-live.cantonfair.org.cn" from accessing a cross-origi
Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题
weixin_30485291的博客
09-24 2087
在前端开发的过程中，我们常常会用到iframe去在我们的页面中引用一个子页面，而父子页面又常常会有交互。在同域情况下，子页面如果想要访问父页面中的window对象中的方法的话，直接在当前页面中使用window.parent就可以啦。但是在跨域情况下就会受到种种限制。 如图所示，我用node在本地起了2个server，端口号分别是...
iframe嵌入跨域错误
最新发布
m0_70903072的博客
08-02 540
Blocked a frame with origin 正常情况下，如果iframe嵌入的页面跟外部页面没有交互情况下 不会存在跨域问题，但是这次嵌入的页面调用了一个外部js，里面写了一个方法 window.top.xx。当我们使用 window.parent 或 window.top 来获取父页面的 window 对象，如果两个的域名不一样，所以会出现跨域问题。## 子页面传父页面。## 父页面传子页面。
from accessing a cross-origin frame有没有更好的解决办法？
just_lover的博客
11-16 4万+
这是在原有显示页面加入（嵌入）新页面用的， <iframe id="mainframe" name="mainframe" frameborder="0" src="/../**" style="overflow-x: hidden; height: 1389px; width: 1000px;" width="1912"></iframe> 显示用a标签，targ...
Blocked a frame with origin "xxx" from accessing a cross-origin frame.
qq_37556534的博客
04-25 7151
**Blocked a frame with origin "xxx" from accessing a cross-origin frame.**最近做一个统计问题，要在A服务器向B服务器的发起请求，获取数据显示，刚开始的时候方法和jsp页面都是写在B服务器上的，直接从A服务器发请求，弹出页面就可以了，，但是后来要求做到iframe里面，再向之前那么整就直接出现了跨域的问题，网上查了些资料，现在...
简单解决 Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题
m0_67391870的博客
03-10 1万+
大多数是因为使用 window.parent 或 top.xxxx 在子页面，想使用父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题 解决方法：在子页面 window.postMessage("message", '*');//后面的*号就是处理跨域问题的 然后在父页面 window.addEventListener('message', function (msg) { console.log(msg.data); }) 设置监听的方法就可以了 ...
Blocked a frame with origin XXX from accessing a cross-origin 跨域问题解决方案
New_Yao的博客
02-17 6149
本文示例使用的 html vue ckeditor4 场景说明 项目是一个比较老的项目，需要使用ckeditor4来进行步骤填写，商议后使用jsp内iframe一个vue的html页面进行编写，但是在部署的环境下发生了iframe跨域问题，本文提供了一种解决思路。 解决方案 父级向iframe传值： 使用url取值方案，网上也有很多子集监听数值的方案，但是实际过程中往往第一次在子页面初始化时，是监听不到数据的，故采用url拼接传值方案，关键代码如下 //父级代码 <iframe id="aaa"
解决 Blocked a frame with origin "xxx" from accessing a cross-origin frame
卡尔特斯
08-09 574
内嵌 iframe 页面，一般使用 window.parent 或 window.top 来获取父页面的 window 对象 在子页面 想使用(或传递给) 父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题。 解决办法 1、父页面监听 message，写法固定 window.addEventListener('message', function (e) { console.l...
iframe和父页面相互传值,并兼容跨域问题.(项目实测成功) from accessing a cross-origin frame
热门推荐
往事随风的博客
09-24 8万+
项目背景: 部署本地服务器项目,后台管理系统内需要用iframe嵌入另一个功能项目,需要能够互相传值进行操作 问题: 翻译之后是跨域了,因为浏览器的同源策略问题 解决方法: 1:父页面向子iframe传值 (在父页面的js里获取到iframe,然后向iframe传值,然后这么写就行了,第一个参数是需要传的...
【前端】跨域 问题 原理 + 解决方案 下
高精尖发展
08-31 403
前言：      上一篇的排版好难看，字体都不能设置，我们可不可以不悲伤——怎么可能 正文： 先复习一下jsonp，上图一张【源】     iFrame解决跨域 如果两个网页不同源，就无法拿到对方的DOM：iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信 document.getElementById("myIFrame").contentWind...
Java面试题及答案整理（ 2022 年 7月最新版）
m0_67698950的博客
05-31 1477
发现网上很多Java面试题都没有答案，所以花了很长时间搜集整理出来了这套Java面试题大全，希望对大家有帮助哈~ 博主已将以下这些面试题整理成了一个Java面试手册，是PDF版的。 小伙伴们有兴趣想了解内容和更多相关学习资料的请点赞收藏+评论转发+关注我，后面会有很多干货。我有一些面试题、架构、设计类资料可以说是程序员面试必备！所有资料都整理到网盘了，需要的话欢迎下载！私信我回复【000】即可免费获取 一、Java 基础 1. JDK 和 JRE 有什么区别？ JDK：Java Develop
想进互联网大公司？那这些题你总得会吧？前端面试题2022及答案前端面试题2022及答案
m0_67392409的博客
03-02 1832
长文噩梦预警！ 如果你 想进大型互联网公司 本文掌握程度90%~100% 想进中大企业 掌握程度70%~85% 想进小企业 掌握程度45%~80% 想家里蹲 掌握程度：undefined 咳咳，如果你是大神的话当我什么都没说哈，小弟祝您发大财。 接下来的题我会根据重点程度使用来标记，越多标明越重点，满星是5颗星 ok，你准备好了吗？咱们开始吧！ 本文章是根据2022年的面试题走向对《身为三本的我就是凭借这些前端面试题拿到百度京东offer的，前端面试题2021及答案》的做了一
前端JS面试题2021及答案
zhao142731的博客
10-09 6709
一、数据类型 1、JavaScript中什么是基本数据类型什么是引用数据类型？以及各个数据类型是如何存储的？⭐⭐⭐⭐⭐ 基本数据类型有 Number String Boolean Null Undefined Symbol(ES6新增数据类型) bigInt 引用数据类型统称为Object类型，细分的话有 Object Array Date Function RegExp 基本数据类型的数据直接存储在栈中；而引用数据类型的数据存储在堆中，每个对象在堆中有一个引用地址。引...
Blocked a frame with origin “XXX“ from accessing a cross-origin frame.
weixin_42097259的博客
06-24 614
父子通讯采用 addEventListener 与 postMessage。由于无法获取父页面属性，所有只能指明源地址为*这个是因为违反csp规定，具体介绍查看。
解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
卡尔特斯
08-09 1万+
这是内嵌 iframe 页面使用 window.parent 或 top.xxxx 导致的，在 子页面，想传递给 父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题。 解决办法 1、父页面监听 message，写法固定 window.addEventListener('message', function (e) { console.log(e) }) 2、子页面发送 message 消息，并附带参数 // window.parent 是 iframe 子页面获取父页面的 window..
Spring boot文件上传blocked a frame with origin "http://xxx" from accessing a cross-origin frame.
深蓝浅蓝的天
06-23 6万+
spring boot 上传文件，页面弹出提示：blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame. 在上传文件的过程中，前端报了这个错误，这个错误咋一看还还以为是AJAX提交数据跨域的问题，实则和跨域没有一毛线关系，这个提示是DOMException报出的提示，具体错
Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.
m0_61420899的博客
05-03 4272
最近在写一个项目：需要在页面使用iframe来做登陆功能，本想使用parent.window.location.reload();刷新页面的，最后报错了“Blocked a frame with origin "https://my.xxxxxxx.com" from accessing a cross-origin frame”。 很明显这个报错就是跨域的问题，因为iframe遵循"同源策略"，所以在不同源的情况下是无法进行DOM操作的。因为我只是需要刷新父级的页面所以我使用了：parent.windo
blocked a frame with origin '' from accessing a cross-origin frame
05-09
这个错误通常出现在一个页面中，当你试图访问来自另一个域的 `iframe` 时。浏览器安全策略通常会阻止跨域访问，以保护用户的隐私和安全。 解决此问题的一种方法是确保你的 `iframe` 和主页面在同一个域中，或者使用跨域资源共享 (CORS) 来允许跨域访问。你可以在服务器端配置 CORS 来授权跨域资源访问，也可以使用第三方库来简化此过程。 另一种可能的解决方案是在 `iframe` 的标记中添加 `sandbox` 属性。这将导致 `iframe` 运行在一个沙箱环境中，从而限制其对主页面的访问权限。但是，这种方法具有一些限制，如无法使用某些功能和 API，因此需要谨慎使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值