在前后端分离的情况下,前台页面将后台页面加载在预留的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.

  解决方案如下: 

  

//主页面 向 iframe传递事件

//主页面

var frame = document.getElementById('iframeId');
frame.contentWindow.postMessage(object,'*'); //iframe页面
iframe: window.addEventListener('message',function(event){
//此处执行事件
})
//iframe向主页面传递事件

//iframe页面
window.parent.postMessage(object,'*'); //主页面
window.addEventListener('message',,function(event){
//此处执行事件
})

亲测解决,ok的。

iframe跨域问题:Uncaught DOMException: Blocked a frame with origin解决方法的更多相关文章

  1. 跨域问题 Uncaught DOMException: Blocked a frame with origin。。。

    第三方系统内嵌 到iframe中的 跨域问题. 解决方案: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

  2. 跨域打开页面:Uncaught DOMException: Blocked a frame with origin

    Uncaught DOMException: Blocked a frame with origin 使用postMessage()方法可以解决跨域传值的问题 Api: https://develop ...

  3. Uncaught DOMException: Blocked a frame with origin "http://localhost

    ajaxFileUpload上传时报错 :Uncaught DOMException: Blocked a frame with origin "http://localhost..... ...

  4. 【运行错误】Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

    代码如下: <html> <head> <script> /*window.frames[]可以通过下标或名称访问单独的frame*/ window.onload= ...

  5. iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

    来源于crm项目的contact/edit.html 一.背景是这样的 最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷 ...

  6. 页面跨域与iframe通信(Blocked a frame with origin)

    项目中有个需求是在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中:但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自 ...

  7. 【HTML】iframe跨域访问问题

    概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...

  8. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  9. 跨域问题 Blocked a frame with origin "http://......" from accessing a cross-origin frame.

    为了轻松偷懒,不想从目的项目中开发目标项目中的页面,但目的项目中需要获取老项目中的页面,这里用了iframe跨域链接页面出现了问题 Blocked a frame with origin " ...

随机推荐

  1. js模拟散列

    //散列 //类似于 对象存储,key-value // 存入前,先将key进行hash编码,然后存入 function HashTable(){ var hashData = []; this.dj ...

  2. TestNG-详解preserve-order的作用与测试case的执行顺序

    在TestNG xml配置文件中,关于<test>的配置里面,有一个属性叫preserve-order,一开始以为这个属性可以用来控制测试case(那些被@Test注解标注的方法)的执行顺 ...

  3. React/VUE 脚手架2.0和3.0

    react官方脚手架 npm install -g create-react-app create-react-app my-app cd my-app npm start 区别自己对比 vue2.x ...

  4. 记录一则完整的SPA(10g->11g)测试过程

    生产端:Windows 2008 + Oracle 10.2.0.5 测试端:RHEL 6.5 + Oracle 11.2.0.4 需求:因为Oracle跨越大版本,优化器.新特性变动较多,需要进行S ...

  5. react native 中使用react-native-vector-icons

    1.引入依赖 cnpm install react-native-vector-icons --save 2.LINK原生 react-native link react-native-vector- ...

  6. DataGridView控件用法一:数据绑定

    使用DataGridView控件,可以显示和编辑来自多种不同类型的数据源的表格数据. 将数据绑定到DataGridView控件非常简单和直观,在大多数情况下,只需设置DataSource属性即可.在绑 ...

  7. sudo安装某一文件报错:E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?

    报错原因:资源被占用 解决方法: sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock

  8. rpgmakermv(10) GraphicalDesignMode

    插件地址:https://github.com/triacontane/RPGMakerMV/blob/master/GraphicalDesignMode.js 原文: メニュー画面や戦闘画面など各 ...

  9. JAVA基础3---JVM内存模型

    Java虚拟机执行Java程序的时候需要使用一定的内存,根据不同的使用场景划分不同的内存区域.有公用的区域随着Java程序的启动而创建:有线程私有的区域依赖线程的启动而创建 JVM内存模型大致可以分为 ...

  10. mybatis源码解析10---StatementHandler解析

    StatementHandler解析 接口的作用是statement处理器,位于mybatis包的org.apache.ibatis.executor.statement目录下,源码如下: packa ...