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!
Empfehlungen für Android-Desktop-Software
bootsqm
Was tun, wenn der Remote-Desktop keine Verbindung herstellen kann?
Kann pagefile.sys gelöscht werden?
Historisches Bitcoin-Preisdiagramm
Der Unterschied zwischen Java und Java
So löschen Sie ein Verzeichnis unter LINUX
Win7 meldet, dass auf Anwendungsdaten nicht zugegriffen werden kann
