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

    Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoother t ...

  2. TL-WAR1200L V1.0升级软件20170609

         TL-WAR1200L_V1.0升级软件20170609.part1.rar  TL-WAR1200L_V1.0升级软件20170609.part2.rar TP-LINK WVR& ...

  3. composer 用法

    构建工程 composer create-project test/name project_name help composer help create-project 参数 --prefer-di ...

  4. docker每次都重新拉取远程镜像的问题

    将镜像上传到远程之后,dockerfile按理来说只需一次拉取远程镜像就好了,之后每次都是使用第一次拉取的远程镜像. 但是实际上出现的问题是:dockerfile每次都从远程拉取镜像,浪费了资源和时间 ...

  5. Appium基础(四)查找app的appActivity与appPackage

    要查看appActivity需要借助日志:adb logcat>D:/log.log  前提是已经装了Android SDK 在目录D:\Program Files (x86)\android\ ...

  6. Hibernate框架第二天

    ### Hibernate的持久化类 ### ---------- **什么是持久化类** 1. 持久化类:就是一个Java类(咱们编写的JavaBean),这个Java类与表建立了映射关系就可以成为 ...

  7. jQuery_ajax请求超时

    设置timeout的时间,通过检测complete时status的值判断请求是否超时,如果超时执行超时的操作. $.ajax({ url:'', timeout : 1000, //超时时间设置,单位 ...

  8. SQL Server数据库(时间戳timestamp)类型

    1.公开数据库中自动生成的唯一二进制数字的数据类型. 2.timestamp 通常用作给表行加版本戳的机制. 3.存储大小为 8 个字节. 不可为空的 timestamp 列在语义上等价于 binar ...

  9. 有关Struts下载文件时报错问题

    在学习文件下载的时候,我也是按照网络课程上面老师的代码一句一句敲得,和老师的一模一样:到最后测试下载的时候出现了如下的错误: 而老师的写的代码可以完美运行,以下是跟着老师敲的代码: package c ...

  10. C# 5.0五大新特性

    第一:绑定运算符,:=: 这个只是简化了数据绑定,跟ASP.NET MVC3不断改进一样,其实不是什么亮点改进. comboBox1.Text :=: textBox1.Text; //将文本框的内容 ...