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