Heim > Artikel > Web-Frontend > Code für Postmessage in HTML5 zur Implementierung der Wertübertragung zwischen untergeordneten und übergeordneten Fenstern

Code für Postmessage in HTML5 zur Implementierung der Wertübertragung zwischen untergeordneten und übergeordneten Fenstern

不言Original: 2018-08-06 17:52:273091Durchsuche

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(&#39;btn&#39;);


var btn_send = document.getElementById(&#39;send&#39;);


var text = document.getElementById(&#39;txt&#39;); 


var win;


btn.onclick = function() {


//通过window.open打开接收消息目标窗口


win = window.open(&#39;http://127.0.0.1:8080/mngapp/chatroom/win.html&#39;, &#39;popUp&#39;);


}


btn_send.onclick = function() { 


// 通过 postMessage 向子窗口发送数据 


win.postMessage( document.getElementById("message").value, &#39;http://127.0.0.1:8080/&#39;);


}


if (window.addEventListener) {


//为window注册message事件并绑定监听函数


window.addEventListener(&#39;message&#39;, receiveMsg, false);


}else {


window.attachEvent(&#39;message&#39;, 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(&#39;txt&#39;); 


var btn_send = document.getElementById(&#39;send&#39;);


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(&#39;message&#39;, receiveMsg, false);


}else {


window.attachEvent(&#39;message&#39;, receiveMsg);


}


};


</script>


</body>

Empfohlene verwandte Artikel:

So implementieren Sie die Echtzeitüberwachung der aktuellen Situation in HTML5-Video-Wiedergabezeit (Code)

HTML kombiniert industrielles Internet, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren

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!

html5 html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie eine Echtzeitüberwachung der aktuellen Wiedergabezeit in HTML5-Videos (Code)Nächster Artikel：So implementieren Sie eine Echtzeitüberwachung der aktuellen Wiedergabezeit in HTML5-Videos (Code)

In Verbindung stehende Artikel

Mehr sehen