在前端开发的过程中,我们常常会用到iframe去在我们的页面中引用一个子页面,而父子页面又常常会有交互。在同域情况下,子页面如果想要访问父页面中的window对象中的方法的话,直接在当前页面中使用window.parent就可以啦。但是在跨域情况下就会受到种种限制。

 
 

如图所示,我用node在本地起了2个server,端口号分别是:8124和8123。

下面,我在server1页面中通过iframe的方式将server2的页面引入,如图:

 
 

我们在子页面“server2”中打印一下当前页面和父页面的window对象,如图:

 

如图所示,在子页面中,父页面window对象中绝大多数方法和属性都已经拿不到了。这其实就是跨域造成的限制。

比如说我们在父页面中定义了一个sessionStorage,

 

然后在子页面中访问父页面的sessionStorage:

 

不出所料,报了一个跨域的错误

 

这就是由于跨域导致了子页面无法调用和访问父页面中的属性和方法,这给我们的业务开发带来了很大的影响。解决这种问题最好的办法就是将子页面和父页面放到同一域名下,那么跨域问题自然就解决了。

可是在实际业务中,由于客观原因,我们往往无法做到将父页面和子页面放倒同一域名下。那有没有其他方法可以在跨域的情况下,依然让子页面调用父页面中的方法呢?当然是有的!

经过在网上查阅相关资料文章,我大体得到两种方法,第一种是“代理页面”法,第二种是通过“postMessage”法。

下文将详细介绍“代理页面”法

何为“代理页面法”?简言之就是,在父页面的同域下,放一个代理页面,代替子页面去执行调用父页面中方法的操作。

文字描述略显枯燥,接下来我用图片分步讲解这一过程:

 
建立iframe代理页面

第一步:我在父页面的同域下新建了一个代理页面:iframe.html,在这个代理页面中注册一个“window.onload”监听事件,当代理页面被加载的时候,执行window.top对象上的“excute”方法。

 
在父页面中定义将要被执行的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

Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题的更多相关文章

  1. iframe跨域问题:Uncaught DOMException: Blocked a frame with origin解决方法

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

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

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

  3. SecurityError: Blocked a frame with origin from accessing a cross-origin frame

    问题描述:浏览器报错I am loading an <iframe> in my HTML page and trying to access the elements within it ...

  4. iframe跨源报错:"Blocked a frame with origin from accessing a cross-origin frame"

    一.报错信息: “Blocked a frame with origin from accessing a cross-origin frame” 二.在stackoverflow上找到原因 Same ...

  5. iframe跨端口报错 Blocked a frame with origin from accessing a cross-origin frame

    前言    在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,报错 SecurityError: Blocked a frame with origin fr ...

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

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

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

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

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

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

  9. jquery读取本地文件,Windows上报错。XMLHttpRequest cannot load xxx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.k.cors.a.c

    问题: 测试报告,使用本地的json.txt文件,结果文件读取失败,报错如下: XMLHttpRequest cannot load xxx. Cross origin requests are on ...

随机推荐

  1. 3.Linux目录结构与文件管理

    1.Linux系统目录结构 Windows: 以多根的方式组织文件 C:\ D:\ E:\ F:\ Linux:以单根的方式组织文件 / 2.文件定义 比如: /etc/hostname,整个文件中包 ...

  2. 百万年薪python之路 -- 变量及if的练习

    1.简述变量命名规范 1.变量由数字,字母,下划线组成 2.不能以数字开头 3.不能使用python关键字 4.不能使用中文和拼音命名 5.区分大小写 6.变量名要具有描述性 7.推荐写法 7.1驼峰 ...

  3. Intellij idea 自动生成serialVersionUID

    1 什么是UID 网络间的数据传输最终都是要转化为二进制流的方式进行传输,为了方便转换以及进行验证,我们应该把对角序列化,当实现Seriabizable接口时,UID就是一个必须的属性,可以方便进行版 ...

  4. SQLServer执行大脚本文件时,提示“无法执行脚本没有足够的内存继续执行程序 (mscorlib)”

    问题描述: 有时候服务器操作导入数据.sql,或者 当需求不可以直接备份整库还原时,往往通过导出数据库脚本的方式来部署-还原数据库表 但是当数据库导出脚本很大,用Microsoft SQL Serve ...

  5. InitializingBean,spring 初始化bean

    springframework的提供接口,InitializingBean接口为bean提供了初始化方法的方式,它只包括afterPropertiesSet方法,凡是继承该接口的类,在初始化bean的 ...

  6. django-模板之comment标签(六)

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. fenby C语言 P28

    #include <stdio.h> int main(){ int *p1,*p2,a=10,b=20,c; p1=&a; p2=&b; if(a<b) { c=a ...

  8. linux文本编辑器教学

    linux常见服务 一. 文本编辑器 vi vim是vi增强版 vim需要安装 sudo apt-get -y install vim 1 vim的三种工作模式 1 编辑模式 命令模式=>编辑模 ...

  9. 第五篇 Flask 中内置的 Session

    Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cookie中,使用起来也非常的奇怪 1. Flask 中 session 是需要 secret_key 的 from ...

  10. spring boot项目启动报错

    在eclipse中运行没有任何问题,项目挪到idea之后就报错 Unable to start EmbeddedWebApplicationContext due to miss EmbeddedSe ...