layer/iframe跨域问题postmessage的方式解决

一、问题分析

首先跨域这个问题应该是一直以来大家比较困惑的事情，其实简单来说就是存在一堵墙影响了两个人的访问关系，也就是跨不过去的地域。

那么问题来了，为啥会遇到这样的问题，首先当不是本地起的服务的时候，你要是想通过load或者layer的方式去加载本地的文件的时候就会出现。如果你起了tomcat或者Go live服务的话就不用考虑本地文件iframe的加载问题了。
如上所示的页面：

二、问题引发

当你点击B页面的关闭按钮时候你会怎样的方式进行关闭呢？
top.layer.close?还是parent.layer.close?
一开始我以为可以关闭，但是试了两种方式后发现我想多了，事情没我想的那么简单。点击后就会出现跨域的错误：
Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.

这个时候可不要放弃，你就要去网上搜一下postmessage的用法了，答案都在里面，或者你顺着我的思路往下看。

三、如何解决问题

首先用到的是postMessage的基础应用，先直接上代码吧，省的你们看不下去：
子页面（B页面）点击关闭按钮方法调用：

 $("#closeBtn").off('click').on('click', function () {
     
        debugger;
        // parent.layer.closeAll();
        try {
     
            // 如果top.layer不跨域，那么正常弹窗
            parent.layer.closeAll();
        } catch (error) {
     
            // 报错后拿到配置，发送到父页面
            var option = {
     
                
            }
            //不能发送top或者发送window，甚至是配置内的function属性都不能发送，只能发送简单的配置对象
            window.top.postMessage(option, '*')
        }
    })

父页面代码如下：

var conlayer;
    $('#tanc').click(function () {
     
        // 如果top.layer不跨域，那么正常弹窗
        conlayer = layer.open({
     
            type: 2,
            title: '选择字段1',
            shadeClose: true,
            shade: 0.3,
            area: ['80%', '80%'],
            content: 'layeriframe.html'
        });
    })
    //监听iframe传参
    window.addEventListener('message', function (e) {
     
        debugger;
        console.log(e);
        layer.close(conlayer);
    }, false)

其实我们可以把postmessage理解成一个事件就可以，只是这个事件可以允许不同源的文件进行访问和调用，实现跨文本，跨窗口，跨域进行消息的传递。
不过这个也存在她的局限性，比如说不能操作不同源的dom节点，当然还有更多的介绍我就不在这篇文章中展开描述了，大家有兴趣的可以去了解一下Web Worker的一些应用，个人比较推荐。

喜欢这篇文章或者给您带来帮助的话可以给个小心心关注一下哈，不胜感激！！！

技术的路上，有你有我方能走的更远，一起为美好的明天而奋斗！！！