iframe跨域解决方案

　　　　公司某个功能用的是iframe，由于跨域的原因，我们不能直接设置父级页面iframe的高度，所以用了一个中间页home来完成父级页面iframe的高度设置，这种中间页其实很多时候不好用，因为涉及到页面跳转和刷新，每次都得刷一下页面，而消息发送成功页的一个定位到顶部的功能，就是由于页面刷了一次导致体验不好，除了体验，这种中间页跳转的做法也很蹩脚和繁琐。

　　　　昨天网上Get了一下iframe的跨域解决方案 找到了一个方法！

　　　　postMessage，通过postMessage可以实现iframe的跨域通信。原理是子页面向父页面发送消息，父页面接收消息。

　　　　话不多说直接干货。

 

　　　　子页面代码：

top.postMessage('success', '在这里填写父页面URL');

　　　　父页面代码：

    //响应事件
    window.addEventListener('message', function (e) {
        var color = e.data;
        console.log(color);
        if (color == "success")
        {
            $("#MessageSend").height(600);
            $(window).scrollTop(0);
        }
    }, false);

　　　　如上，子页面向父页面发送了一条消息 “success”，父页面获取消息后判断消息内容是不是想要的，进而做相应的操作。

 

　　　　上面的代码还应该完善一下，父页面接收消息请求的时候，应该验证域名，总不能随便一个页面发来消息这边就处理。