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的背景颜色,实际工作中操作什么就看你的需求了,这里只是抛砖引玉。

原文地址:https://www.cnblogs.com/leolovexx/p/8984298.html