H5之postMessage

Posted 2020-10-14 阿弥陀佛么么哒！

对于跨域我们有很多的解决方案，今天我来分享一下postMessage的那点事，postMessage是html5新增的一个解决跨域的一个方法，不过很可惜万恶的ie6,7不支持

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。听起来还是很牛掰的！！！

让我们慢慢的揭开postMessage的神秘面纱......

我们拿跨域中的iframe做例子

<script type="text/javascript">
    window.parent.postMessage(‘hello world‘,‘*‘);    //在被嵌套的iframe的页面中写入这样一段代码
</script>

注意：postMessage的写法，postMessage之前写的是你要通信的window对象（也就是你要像谁通信），此时的window.parent的权限仅限于此，不能在像同域似的，进行获取父级的DOM元素，否则浏览器会报错，提示你不能进行跨域访问，我们再来看postMessage中所接收的参数，第一个参数就是你要像另外一个窗口传递的数据（只能传字符串类型），第二个参数表示目标窗口的源，协议+主机+端口号，是为了安全考虑，如果设置为“*”，则表示可以传递给任意窗口。

那么另外一个窗口是如何接收数据的呢

<script type="text/javascript">
    window.addEventListener(‘message‘,function(e){
        console.log(e.data);        //hello world
        console.log(e.origin);      //http://127.0.0.1:8020 所传来数据的域

    })
</script>

可以看到我们已经拿到了数据，那么拿到数据我们可以做那些操作呢

<script type="text/javascript">
    window.addEventListener(‘message‘,function(e){
        console.log(e.data);        //hello world
                if(e.data=="hello world"){
                       document.body.style.background = ‘red‘;
                }
        })
</script>                

哇哇。。。是不是很神奇，我们竟然间接的操作了DOM，改变了body的背景颜色，实际工作中操作什么就看你的需求了，这里只是抛砖引玉。