H5之postMessage 。实现跨域

 

对于跨域咱们有不少的解决方案，今天我来分享一下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的背景颜色，实际工做中操做什么就看你的需求了，这里只是抛砖引玉。