在前后端分离的情况下,前台页面将后台页面加载在预留的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. git 查看某个文件的修改记录

    有几种方式, (1)如果是在linux环境下,比如centos,ubuntu之类的,建议安装tig命令 炒鸡好用,tig后面可以跟文件或者文件夹,比如: (1.1)tig  dir_name (1.2 ...

  2. linux shell脚本检测硬盘磁盘空间 邮件报警

    使用 http://www.weiruoyu.cn/?p=368 shell脚本监控硬盘空间剩余空间 邮件报警 1.先观察一下磁盘,和如何使用脚本 [root@localhost ~]# df -h ...

  3. React对比Vue(04 父子组件的通信 )

    跟vue差不多 都是props,但是react里面不仅可以给子组件传值,还可以传方法,MD尽然还可以把自己传给子组件,(卧槽vue可没有这个啊 )  vue的传递值差不多,传方法就不用了,子组件可以掉 ...

  4. rsa 加密 pkcs#1格式秘钥的格式化

    C++调用openssl库生成的秘钥对,通过传输传出来的只有秘钥的内容,没有秘钥的格式.而我们在调用openssl库加密解密时,传入的秘钥是需要包含格式的.C++调用openssl库需要的格式为pkc ...

  5. Nginx性能调优

    [调优]Nginx性能调优   一.Nginx优化配置 1.主配置文件优化:# vi /usr/local/nginx/conf/nginx.conf------------------------- ...

  6. Js闭包学习笔记

    好多内容摘抄了大神的博客内容,只为分享记录.如有冒犯,请见谅 参考文章 http://www.cnblogs.com/libin-1/p/5962269.html http://www.cnblogs ...

  7. Nginx常用功能

    3.Nginx常用功能 3.1 反向代理服务器 3.1.1.demo2 a.我在tomcat下部署了一个javaweb项目,tomcat安装的服务器IP为:192.168.37.136,部署的项目在t ...

  8. 强化学习--Actor-Critic---tensorflow实现

    完整代码:https://github.com/zle1992/Reinforcement_Learning_Game Policy Gradient  可以直接预测出动作,也可以预测连续动作,但是无 ...

  9. Yii Restful api自定义字段

  10. jQuery属性--attr(name|properties|key,value|fn)和removeAttr(name)

       attr(name|properties|key,value|fn) 概述     设置或返回被选元素的属性值 参数 key,function(index, attr)  1:属性名称:2:返回 ...