跨域问题2

使用window.postmessage方法来跨域

---

Html5里有一个属性window.postmessage也可以用来跨域：

postmessage(data,origin)有两个参数：

data: 要传递的数据，html5规范中该参数可以是JavaScript的任意基本类型或可复制的对象，考虑到部分浏览器只能处理字符串参数，所以在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，对postmessage()方法的支持度为IE8+；

origin: 字符串参数，指明目标窗口的源；设置为* 则为通配，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"

例如有两个页面：

http://test.com/index.html

http://receive.com/index.html

在http://test.com/index.html中发送信息：

然后再在http://receive.com/index.html中接受消息，渲染显示：

window.onmessage=function(e){

if(e.origin !== 'http://test.com/index.html') return; //做一下安全性判断，看看消息是否是由可信源头发送

console.log(e.origin+' '+e.data.key); //接受跨域数据，渲染

}

//http://test.com/index.html values

window.postmessage()也可用在iframe的通信中，例如(该实例来源于：http://www.cnblogs.com/dolphinX/p/3464056.html)：

    


    

        
Frame Color
    
    

        
    

    



http://test.com/index.html

    
        
    
    
        

            click to change color