Der Inhalt dieses Artikels befasst sich mit dem Postmessage-Code in HTML5, der die Werteübertragung zwischen untergeordneten und übergeordneten Fenstern implementiert. Ich hoffe, dass er für Sie hilfreich ist.
Kürzlich ist beim Aufbau eines POS-Terminals ein Problem mit der Wertübertragung zwischen dem untergeordneten und dem übergeordneten Fenster aufgetreten. Da das POS-Gerät über zwei Bildschirme verfügt, ist dies möglich Da es sich jedoch um einen Touchscreen handelt, wirkt sich die Bedienung auf den zweiten Bildschirm aus und umgekehrt. Da die Anforderungen klar sind und das Problem bekannt ist, benötigen wir zwei Fenster verschiedene Vorgänge ausführen
Zuerst die übergeordnete Seite:
<!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 向子窗口发送数据
win.postMessage( document.getElementById("message").value, 'http://127.0.0.1:8080/');
}
if (window.addEventListener) {
//为window注册message事件并绑定监听函数
window.addEventListener('message', receiveMsg, false);
}else {
window.attachEvent('message', receiveMsg);
}
//监听函数，接收一个参数--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>
Dann die Unterseite:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html5 postMessage</title>
<style>
#txt {
width: 500px;
height: 300px;
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>The New Window</h1>
<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 向父窗口发送数据
freceiveMsg(prent);
}
//监听函数，接收一个参数--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事件并绑定监听函数
window.addEventListener('message', receiveMsg, false);
}else {
window.attachEvent('message', receiveMsg);
}
};
</script>
</body>Empfohlene verwandte Artikel:
Das obige ist der detaillierte Inhalt vonCode für Postmessage in HTML5 zur Implementierung der Wertübertragung zwischen untergeordneten und übergeordneten Fenstern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So überprüfen Sie die JVM-Speichernutzung
So lösen Sie das Problem, dass der Scanf-Rückgabewert ignoriert wird
Was sind die Parameter des Festzeltes?
Verwendung der ppf-Funktion in Python
Top 10 der sichersten digitalen Währungsumtausche im Jahr 2024
Der Unterschied zwischen MySQL und SQL_Server
Lösung für den Computer-Anzeigefehlercode 651
Was soll ich tun, wenn Chaturbate hängen bleibt?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
