前端开发中,常会遇到iframe引入页面的情况,如果在同域下,子页面访问父页面中的window对象的方法,直接使用window.parent就行了,特别简单,但是如果跨域的情况下就会受到限制。
跨域错误信息
经过网上查找总结三种方法解决
一、放到同一个域名下(如果客观条件允许的话)
二、代理页面方法
建立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/writer#/notebooks/19577515/notes/93127124/preview