Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题

前端开发中，常会遇到iframe引入页面的情况，如果在同域下，子页面访问父页面中的window对象的方法，直接使用window.parent就行了，特别简单，但是如果跨域的情况下就会受到限制。
跨域错误信息

image.png

经过网上查找总结三种方法解决
一、放到同一个域名下（如果客观条件允许的话）
二、代理页面方法

image.png

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

image.png

在父页面中定义将要被执行的excute方法
第二步：在父页面中定义将要被执行的excute方法，该方法打印出当前页面中的sessionStorage（之前子页面想要做的事）

image.png

在子页面中定义一个方法
第三步：在子页面中定义一个方法，当触发该方法时会在子页面中create一个看不到的iframe，并将代理页面的地址，赋给这个iframe。

经过这三个步骤，代理页面的方式访问父页面window对象的方法已经完成了：

image.png

执行结果
此时，点击子页面中的“跨域”按钮，就会把父页面中的sessionStorage打印出来。

整理一下，其实思路如图所示：

image.png

代理页面解决跨域问题思路示意图
当在子页“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