页面跨域与iframe通信(Blocked a frame with origin)
项目中有个需求是在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中;但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题:
只保留单个滚动条,那么就要让iframe的高度自适应,而从主页面显然直接取不到iframe的值,因为这是跨域的(前台页面与后台页面不在同一个IP地址或者同一个端口),尝试访问会报错:
Blocked a frame with origin "http://7.35.0.8:8080" from accessing a frame with origin "http://7.35.0.9:8080".Protocols, domains, and ports must match.
这本质上是跨域问题
解决跨域问题的方法大致有以下几种
1.jsonp
2.hash
3.postMessage
4.websocket
5.cors
具体的使用方式和原理的文章有很多,而就应用场景而言,iframe间通信最完美的办法莫过于postMessage了。
postMesasge是html5标准的方法,ie10+浏览器都支持,ie8/9部分支持。以下是部分实例:
//主页面 向 iframe传递事件 //主页面var frame = document.getElementById('iframeId');
// postMessage接收两个参数,第一个表示信息,可以传递字符串或者对象,我用的对象。refresh 是目标页面监听事件的key,对象内可以传递多个key;第二个参数表示目标源,*表示所有,但不安全,建议使用具体地址
frame.contentWindow.postMessage({refresh:'id'},'*');
//iframe页面 window.addEventListener('message',function(event){ // event.origin --发送者的源 // event.source --发送者的window对象 // event.data --数据 if(event.data.refresh){ //此处执行事件
}
})
//iframe向主页面传递事件 //iframe页面 window.parent.postMessage({refresh:'id'},'*');//主页面 window.addEventListener('message',,function(event){if(event.data.refresh){ //此处执行事件
}
})
新开页面时也能用这个方式向父页面传递事件(ie8/9不支持)
window.opener.postMessage({refresh:'some message'},'*')
转载于:https://www.cnblogs.com/syll/p/8640329.html
页面跨域与iframe通信(Blocked a frame with origin)相关推荐
- iframe跨端口报错 :Blocked a frame with origin
iframe跨端口报错 简单解决方法 报错信息 Uncaught DOMException: Blocked a frame with origin "https://www.XXX.com ...
- 使用iframe+postMessage跨域操作和通信
使用iframe+postMessage跨域操作和通信 场景 1. http://XXX/a.html(自己的)页面要操作http://YYY/b.html(其他域名的) 2. 看了网上很多都是同域名 ...
- html5跨域获取页面元素,iframe嵌套页面 跨域
如何用javascript 跨域获取iframe子页面的元素信息 我的iframe嵌套在别人页面上,在iframe中ajax访问...以前没这问题啊,我更新了一下界面,难道是换了个jquery版本? ...
- Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题
在前端开发的过程中,我们常常会用到iframe去在我们的页面中引用一个子页面,而父子页面又常常会有交互.在同域情况下,子页面如果想要访问父页面中的window对象中的方法的话,直接在当前页面中使用wi ...
- iframe跨端口报错 Blocked a frame with origin from accessing a cross-origin frame
前言 在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,报错 SecurityError: Blocked a frame with origin f ...
- iframe 父页面全屏同时子页面 viewer轮播插件全屏放大 Uncaught DOMException: Blocked a frame with origin null from acce
1.在父页面<iframe allowfullscreen="true" ></iframe> 标签要加上 allowfullscreen="tr ...
- 跨域问题has been blocked by CORS policy: No Access-Control-Allow-Origin和 It does not have HTTP ok status
SpringBoot vue项目发布到服务器出现跨域问题has been blocked by CORS policy: No Access-Control-Allow-Origin 和 Respon ...
- Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.
最近在写一个项目:需要在页面使用iframe来做登陆功能,本想使用parent.window.location.reload();刷新页面的,最后报错了"Blocked a frame wi ...
- 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 ...
最新文章
- 零基础如何学习软件测试
- ADO.NET中的五个主要对象介绍及使用
- Winxp中加密自己的用户目录
- Jenkins发布spring boot到hub.Docker 方法
- 常用的后端性能优化六种方式:缓存化+服务化+异步化等
- STL11-stack容器
- C#的变迁史 - C# 4.0 之多线程篇
- 如何解决MySQL导入大数据出现的问题
- Centos7.6安装Oracle11gR2
- 万应低代码CTO胡艳平:浅谈低代码在中大型企业数字化转型中的应用
- 使用Colab对wget下载加速
- 鸿蒙系统是否能玩游戏,鸿蒙系统玩游戏跟安卓互通吗
- 综合决策支持系统的含义
- 以太网二层技术——VPLS详解
- 成田机场坐access到品川_下了飞机看不懂日语?这篇干货告诉你从羽田/成田机场到东京市区怎样方便又省钱!...
- 转载 usb_alloc_coherent 和 usb_free_coherent
- elasticsearch-数据聚合
- 合并两个有序数组,合并之后保持有序
- 信号调理方法总结笔记
- Arduino压电震动传感器(二)
热门文章
- tomcat xjar 加密_XJar Spring Boot JAR 安全加密运行工具
- Linux系统无线网络抓包程序(分析手机WIFI MAC地址)
- python创建一个csv文件_python操作csv文件
- 【Flink】Flink 1.13 Flink SQL 新特性 性能优化 时区 时间 纠正
- 【Elasticsearch】改进布尔查询的搜索相关性
- 【Elasticsearch】如何构建一个好的电商搜索引擎?
- 【Es】es deep paging问题
- mac下编译hadoop-3.0.3
- java datetime long_Android Java datetime值从String到Long到String问题
- mysql分頁查詢_mysql分頁查詢 | 學步園