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的背景顏色，實際工作中操作什么就看你的需求了，這里只是拋磚引玉。