1. 程式人生 > >HTML5之postMessage和addEventListener實現跨域通訊

HTML5之postMessage和addEventListener實現跨域通訊

使用postMessage實現跨域的前提條件是一個頁面通過<iframe>呼叫另一個頁面,示例如下所示:

在這個示例中,通過outter.html呼叫inner.html

這是outter.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>outter</title>
</head>
<body>
	獲取的資訊為:
	<div id="getMessage"></div>
	<iframe src="http://test.inner.com:8080/test/inner.html" frameborder="1"></iframe>
	<hr>
	要傳入內部的資訊:<input type="text" id="out"><input type="button" value="點選" id="but">
	<script>
	var message=document.getElementById("getMessage");
	var text=document.getElementById("out");
	window.addEventListener("message",function(e){
		if(e.data!=null){
			message.innerText=e.data;
		}
	});

	document.getElementById("but").onclick=function(){
		window.frames[0].postMessage(text.value,"http://test.inner.com:8080");
		text.value="";
	}
	</script>
</body>
</html>

這裡顯示inner.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>inner</title>
</head>
<body>
	外面傳進來的資訊為:
	<div id="getMessage"></div>
	<hr>
	要傳到外面的資訊為:<input type="text" id="text"><input type="button" value="傳遞" id="but">
	<script>
	var message=document.getElementById("getMessage");
	var text=document.getElementById("text");
	document.getElementById("but").onclick=function(){
		window.parent.postMessage(text.value,"http://test.outter.com:8080");
		text.value="";
	}
	window.addEventListener("message",function(e){
		if(e.data!=null){
			message.innerText=e.data;
		}
	});
	</script>
</body>
</html>
上面的示例如果你想試用的話,

一、需要在tomcat的webapps下,新建一個test資料夾,在test資料夾下放入inner.html和outter.html。

二、在電腦的hosts檔案中配置兩個域名127.0.0.1    test.inner.com和127.0.0.1    test.outter.com

三、瀏覽器訪問的URL為   http://test.outter.com:8080/test/outter.html

相關的知識點如下:

一、<iframe>後必須為</iframe>,而不能使用<iframe/>

二、獲取子視窗物件:document.getElementById("").contentWindow==$("")[0].contentWindow==window.frames[0]

       獲取父視窗物件:window.parent

三、postMessage的兩個引數,第一個引數為想跨域傳遞的值,第二個引數是作用域,包括協議、域名和埠。這裡或者為對應的域名,或者為*,意為對所有域都有效。

四、postMessage的前面定義了由本視窗window向哪個視窗傳值。這裡是在父window向第一個子window傳值。

五、方法addEventListener(type,function,useCapture)前面可為元素、document、window或XMLHttpRequest

type字串,事件名稱,不含"on",比如click,mouseover,keydown等。

message                    //事件,每接收到一次更新,就會發生onmessage事件。

當為postMessage時,可以用onmessage接受,但是當為sendMessage時,無法用onMessage接收。

useCapture為是否使用事件捕獲,一般為false      //事件捕獲,從上往下,和事件冒泡相反

六、sendMessage和postMessage的區別

postMessage:只負責將訊息放入訊息佇列,不確定何時及是否處理,非同步,返回postMessage是否正確執行。

sendMessage:把訊息放入訊息佇列,要等到訊息處理完,返回訊息處理的返回碼(DWord型別)後才繼續,同步,返回處理結果。