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