H5的postMessage解決跨域問題

爲了解決的問題：

1、頁面與其它窗口的數據傳遞

2、頁面與嵌套的iframe的數據傳遞

3、跨域數據傳遞

HTML5引入了message的API，使用postMessage()方法可以允許來自不同域的腳本異步方式通信，可以實現跨文本檔、多窗口、跨域的消息傳遞

參數

postMessage(data, origin)

data:需要傳遞的數據，因爲部分瀏覽器只能處理字符串類型，所以需要JSON.stringify序列化一下

origin:字符串，指明目標窗口的源，也可以設置爲*，即表示不限制，當然，爲了安全考慮，建議設置

例子：

//假設訪問地址是http://test.com/index.html
<div>
	<iframe id="child" src="http://kong.com/index.html" />
</div>
//在test中向跨域的子頁面iframe傳遞信息
window.onload = function(){
	window.frames[0].postMessage('getInfo', 'http://kong.com')
}

//子頁面即kong.com接收消息
window.addEventListener('message', function(e){
	//e對象包含了發送源的一些信息，爲了安全起見，可以處理下數據來源方的判斷
	if(e.source !== window.parent){
		return;
	}
	alert(e.data);
	window.parent.postMessage('ok', '*');
})

注意：有些瀏覽器不支持window.onmessage=function(){}這種寫法，爲了兼容IE，也要判斷是否支持addEventListener

參考鏈接：

http://www.cnblogs.com/dolphinX/p/3464056.html