Code pour postmessage en HTML5 pour implémenter le transfert de valeur entre les fenêtres enfant et parent-Tutoriel H5-php.cn

Code pour postmessage en HTML5 pour implémenter le transfert de valeur entre les fenêtres enfant et parent

不言

Libérer： 2018-08-06 17:52:27

original

3091 Les gens l'ont consulté

Le contenu de cet article concerne le code post-message en HTML5 qui implémente le transfert de valeur entre les fenêtres enfant et parent. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, j'ai rencontré un problème lors de la construction d'un terminal de point de vente. Le problème de transfert de valeur entre les fenêtres enfant et parent. Parce que la machine de point de vente a deux écrans, si une page est étirée et projetée, elle peut. être affiché sur deux écrans, mais comme il s'agit d'un écran tactile, lorsque le premier écran est utilisé, cela affectera le deuxième écran, et vice versa. Maintenant que les exigences sont claires et que le problème est connu, nous avons besoin de deux fenêtres pour. effectuer différentes opérations

D'abord la page parent :

<!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>

Copier après la connexion

Puis la page enfant :

<!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>

Copier après la connexion