溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Html5中postmessage如何實現(xiàn)子父窗口傳值，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
最近做一個POS機終端遇到一個問題，子父窗口傳值問題，因為POS機是兩個屏幕，如果將一個頁面拉長投射雖然可以做到兩個屏幕顯示，但是因為是觸摸屏，當?shù)谝粋€屏幕在操作的時候會影響到第二屏幕，反之也是如此，既然需求明確了，問題也知道了，則我們需要兩個窗口進行不同的操作
首先是父頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html5 postMessage</title>
<style>
#otherWin {
width: 600px;
height: 400px;
background-color: #cccccc;
}
#txt {
width: 500px;
height: 300px;
background-color: #cccccc;
}
</style>
</head>
<body>
<button id="btn">open</button>
<button id="send">send</button>
<input type="text" id="message" />
<br/><br/>
<p id="txt"></p>
<script>
window.onload = function() {
var btn = document.getElementById('btn');
var btn_send = document.getElementById('send');
var text = document.getElementById('txt');
var win;
btn.onclick = function() {
//通過window.open打開接收消息目標窗口
win = window.open('http://127.0.0.1:8080/mngapp/chatroom/win.html', 'popUp');
}
btn_send.onclick = function() {
// 通過 postMessage 向子窗口發(fā)送數(shù)據(jù)
win.postMessage( document.getElementById("message").value, 'http://127.0.0.1:8080/');
}
if (window.addEventListener) {
//為window注冊message事件并綁定監(jiān)聽函數(shù)
window.addEventListener('message', receiveMsg, false);
}else {
window.attachEvent('message', receiveMsg);
}
//監(jiān)聽函數(shù)，接收一個參數(shù)--Event事件對象
function receiveMsg(e) {
console.log("Got a message!");
console.log("Message: " + e.data);
console.log("Origin: " + e.origin);
text.innerHTML = "Got a message!<br>" +
"Message: " + e.data +
"<br>Origin: " + e.origin;
}
};
</script>
</body>
</html>
然后再是子頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html5 postMessage</title>
<style>
#txt {
width: 500px;
height: 300px;
background-color: #cccccc;
}
</style>
</head>
<body>
<h2>The New Window</h2>
<p id="txt"></p>
<input type="text" id="message" />
<button id="send">send</button>
<script>
window.onload = function() {
var text = document.getElementById('txt');
var btn_send = document.getElementById('send');
var prent = null;
btn_send.onclick = function() {
// 通過 postMessage 向父窗口發(fā)送數(shù)據(jù)
freceiveMsg(prent);
}
//監(jiān)聽函數(shù)，接收一個參數(shù)--Event事件對象
function receiveMsg(e) {
console.log("Got a message!");
console.log("Message: " + e.data);
console.log("Origin: " + e.origin);
text.innerHTML = "Got a message!<br>" +
"Message: " + e.data +
"<br>Origin: " + e.origin;
//獲取父對象
prent = e;
}
function freceiveMsg(e) {
console.log("freceiveMsg:"+e);
e.source.postMessage(document.getElementById("message").value,
e.origin);
}
if (window.addEventListener) {
//為window注冊message事件并綁定監(jiān)聽函數(shù)
window.addEventListener('message', receiveMsg, false);
}else {
window.attachEvent('message', receiveMsg);
}
};
</script>
</body>感謝你能夠認真閱讀完這篇文章，希望小編分享Html5中postmessage如何實現(xiàn)子父窗口傳值內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學(xué)習(xí)!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼