Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题
在前端开发的过程中,我们常常会用到iframe去在我们的页面中引用一个子页面,而父子页面又常常会有交互。在同域情况下,子页面如果想要访问父页面中的window对象中的方法的话,直接在当前页面中使用window.parent就可以啦。但是在跨域情况下就会受到种种限制。
如图所示,我用node在本地起了2个server,端口号分别是:8124和8123。
下面,我在server1页面中通过iframe的方式将server2的页面引入,如图:
我们在子页面“server2”中打印一下当前页面和父页面的window对象,如图:
如图所示,在子页面中,父页面window对象中绝大多数方法和属性都已经拿不到了。这其实就是跨域造成的限制。
比如说我们在父页面中定义了一个sessionStorage,
然后在子页面中访问父页面的sessionStorage:
不出所料,报了一个跨域的错误
这就是由于跨域导致了子页面无法调用和访问父页面中的属性和方法,这给我们的业务开发带来了很大的影响。解决这种问题最好的办法就是将子页面和父页面放到同一域名下,那么跨域问题自然就解决了。
可是在实际业务中,由于客观原因,我们往往无法做到将父页面和子页面放倒同一域名下。那有没有其他方法可以在跨域的情况下,依然让子页面调用父页面中的方法呢?当然是有的!
经过在网上查阅相关资料文章,我大体得到两种方法,第一种是“代理页面”法,第二种是通过“postMessage”法。
下文将详细介绍“代理页面”法
何为“代理页面法”?简言之就是,在父页面的同域下,放一个代理页面,代替子页面去执行调用父页面中方法的操作。
文字描述略显枯燥,接下来我用图片分步讲解这一过程:
第一步:我在父页面的同域下新建了一个代理页面:iframe.html,在这个代理页面中注册一个“window.onload”监听事件,当代理页面被加载的时候,执行window.top对象上的“excute”方法。
第二步:在父页面中定义将要被执行的excute方法,该方法打印出当前页面中的sessionStorage(之前子页面想要做的事)
第三步:在子页面中定义一个方法,当触发该方法时会在子页面中create一个看不到的iframe,并将代理页面的地址,赋给这个iframe。
经过这三个步骤,代理页面的方式访问父页面window对象的方法已经完成了:
此时,点击子页面中的“跨域”按钮,就会把父页面中的sessionStorage打印出来。
整理一下,其实思路如图所示:
当在子页“http://localhost:8123/index2”中触发事件时,创建一个iframe,iframe引入代理页“http://localhost:8124/iframe.html”,代理页在加载时通过“window.top.excute”执行父页“http://localhost:8124/index1.html”中的excute方法。这样就实现了在子页面中与父页面跨域进行交互!
引自
https://www.jianshu.com/p/9d90d3333215
转载于:https://www.cnblogs.com/wayneliu007/p/11578807.html
Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题相关推荐
- 解决:Uncaught DOMException: Blocked a frame with origin “xxx“ from accessing a cross-origin frame.
丑话说在前头:觉得我写的不错,记得点赞+收藏+分享,觉得我写得不行,欢迎留言! 最近在写一个项目:需要在页面使用iframe来播放老大写好的动画播放器,突然报这种错误: 老大说:这错误太明显了,就是跨 ...
- JS Uncaught DOMException: Blocked a frame with origin “XXX“ from accessing a cross-origin frame问题解决
问题描述: Uncaught DOMException: Blocked a frame with origin "http://localhost:46819" from acc ...
- Blocked a frame with origin XXX from accessing a cross-origin 跨域问题解决方案
本文示例使用的 html vue ckeditor4 场景说明 项目是一个比较老的项目,需要使用ckeditor4来进行步骤填写,商议后使用jsp内iframe一个vue的html页面进行编写,但是在 ...
- Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.
最近在写一个项目:需要在页面使用iframe来做登陆功能,本想使用parent.window.location.reload();刷新页面的,最后报错了"Blocked a frame wi ...
- iframe跨端口报错 Blocked a frame with origin from accessing a cross-origin frame
前言 在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,报错 SecurityError: Blocked a frame with origin f ...
- iframe跨端口报错 :Blocked a frame with origin
iframe跨端口报错 简单解决方法 报错信息 Uncaught DOMException: Blocked a frame with origin "https://www.XXX.com ...
- 页面跨域与iframe通信(Blocked a frame with origin)
项目中有个需求是在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中:但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自 ...
- iframe 父页面全屏同时子页面 viewer轮播插件全屏放大 Uncaught DOMException: Blocked a frame with origin null from acce
1.在父页面<iframe allowfullscreen="true" ></iframe> 标签要加上 allowfullscreen="tr ...
- 【跨域报错解决方案】Access to XMLHttpRequest at ‘http://xxx.com/xxx‘ from origin ‘null‘ has been blocked by
错误背景描述: 在使用ajax调用api接口的时候:发生错误如下 Access to XMLHttpRequest at 'http://xxxx.com/xxx' from origin 'null ...
最新文章
- 一次搞懂 Runnable、Callable、Future、FutureTask,不懂不要钱!
- 国考临近——送给奔跑在国考路上的人的一些话
- Linux 命令之 chown -- 用来变更文件或目录的拥有者或所属群组
- LINQ学习中需要明确的几点问题
- HDU 1162 Eddy's picture (最小生成树)(java版)
- 智能优化算法总结-数字孪生下的车间调度-APS预告
- apache 2.4.4 自动分割日志,按年月日生成
- 高德地图报Native method not found: com.autonavi.amap.mapcore.MapCore.nativeNewInstance:
- SVN_SERVER的搭建
- vue根据身份证号算出年龄
- css用网络图片做背景图片,网络编程css为图片设置背景图片
- 江苏高中考计算机,【江苏985录取率】_各省高考985录取率排名,江苏最让人“心疼”,倒数第二...
- 把图片变成语音怎么弄?快来看看这篇文章
- RACI 职责分配矩阵 模型使用详解及案例分析
- 新款武侠游戏 请名人献声
- 肾有多好人就有多年青――男女通用
- C++模拟与高精度——玩具谜题
- SQL如何构建多条件组合查询,而且不降低效率
- 数据处理-21.数据分析常用流程
- java计算机毕业设计绿叶有限公司工资管理信息系统源码+系统+mysql数据库+lw文档
热门文章
- java实现微信公众号图文、视频一键发布
- 表单插件——form
- 【Hive】Hive查询报错 Malformed ORC file、Invalid postscript、serious problem
- 在win7安装onedrive报错0x80040c97的解决方案
- 给研华, 控创, 西门子, 凌华, 研祥, 艾迅, 盛博, 诺达佳, 阿普奇 ,桦汉工控机外扩一路,二路CAN,四路等CAN通讯
- Java毕设项目‘网上宠物店(java+VUE+Mybatis+Maven+Mysql)
- Windchill_IBA属性
- java计算机毕业设计网络游戏管理网站源码+数据库+系统+lw文档+mybatis+运行部署
- 示波器的底噪测量以及影响底噪的设置因素
- Premature end of file