Code für Postmessage in HTML5 zur Implementierung der Wertübertragung zwischen untergeordneten und übergeordneten Fenstern-H5-Tutorial-php.cn

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

不言

Freigeben： 2018-08-06 17:52:27

Original

3015 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!