使用postMessage實現跨窗口消息傳遞

時間 2019-11-07

標籤使用 postmessage 實現窗口消息傳遞简体版

原文原文鏈接

檢測瀏覽器支持javascript

不一樣版本的瀏覽器對postMessage的支持可能不一樣，所以使用前須要檢測。在chrome瀏覽器中的一種比較簡單的方法就是直接在開發者工具中輸入window.postMessage,若是結果以下，說明支持
html

使用postMessage 發送消息java

postMessage的語法 :window.postMessage(data,url)chrome

data:發送的消息，一般爲字符串瀏覽器
url:指定容許通訊的域名。注意，不是接受消息的目標域名。使用該參數的主要做用是出於安全考慮，接受消息的窗口能夠根據此消息來判斷信息來源是否可靠，避免惡意攻擊。若是不對訪問的域進行判斷能夠使用‘*’。安全

跨窗口消息傳遞實例框架

1.目標：使用框架實現左邊發送消息，右邊顯示發送的消息函數

2.效果圖：工具

3.代碼實現佈局

1）index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨框架發送消息</title>
</head>
<frameset framespacing="1" border="1" bordercolor=#333339 frameborder="yes">
<frameset cols="500,*">
<frame name="left" target="main" src="left.html" scrolling="auto" frameborder="1"></frame>
<frame name="right" src="right.html" scrolling="auto" noresize frameborder="1"></frame>
</frameset>
<noframes>
<body>
<p>您的瀏覽器不支持框架</p>
</body>
</noframes>
</frameset>
</html>

主頁面佈局比較簡單，主要是使用了frame框架，引入左右兩個html文件

2）left.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
<script type="text/javascript">
//程序首先獲取文本框的內容，而後使用右側框架窗口對象調用postMessage（）向右側框架發送消息
function send(){
var message=document.querySelector("input[type = 'text']").value;
window.parent.frames[1].postMessage(message,'*');
//window.parent.pastMessage用於向父窗口發送消息，frames[1]表示要發送的框架，*表示不對訪問的域進行判斷
}
</script>
</head>
<body>
<p>這是框架的左部,點擊發送消息</p>
<form>
<input type="text" required autofocus></input>
<input type="button" value="發送" onclick="send()"></input>
</form>
</body>
</html>

left.html的佈局也是很簡單的，就一個輸入框和發送按鈕，主要是調用了window.parent.postMessage向父窗口傳遞消息

3）right.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<p>這是框架的右部,用於接收來自左側的消息</p>
<div id="message"></div>
</body>
<script type="text/javascript">
var elebox = document.querySelector("#message");
//事件處理函數
//e.data是接受到的數據
//e.origin是傳送源，若是postMessage（）第二個參數爲*則返回undefined。
//能夠根據e.origin的值來判斷是否爲安全的源
var messageHandle=function(e){
elebox.innerHTML += e.data+"<br>";
}; 
//監聽postMessage發送的消息事件，並對其中包含的數據進行處理。
if(window.addEventListener){
window.addEventListener("message",messageHandle,false);
}else if(window.attachEvent){
window.attachEvent("onmessage",messageHandle);
}
</script>
</html>

right.html主要是接受消息的，須要監聽消息事件，並處理。

若是使用addEventListener方法，則須要監聽message事件

window.addEventListener("message",messageHandle,false);

若是使用attachEvent方法，則須要監聽onmessage事件

window.attachEvent("onmessage",messageHandle);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。