하위 창과 상위 창 간의 값 전송을 구현하기 위한 Html5의 사후 메시지 코드-H5 튜토리얼-php.cn

하위 창과 상위 창 간의 값 전송을 구현하기 위한 Html5의 사후 메시지 코드

不言

풀어 주다： 2018-08-06 17:52:27

원래의

3013명이 탐색했습니다.

공유된 이 글의 내용은 자식 창과 부모 창 사이의 값 전송을 구현하는 HTML5의 postmessage 코드에 관한 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

최근 POS 터미널을 구축할 때 문제가 발생했는데, 자식 창과 부모 창 사이의 값 전송 문제입니다. POS 기계에는 두 개의 화면이 있기 때문에 페이지를 늘려서 투영하면 두 개의 화면에 표시될 수 있기 때문입니다. 터치스크린입니다. 첫 번째 화면이 작동하면 두 번째 화면에 영향을 주고, 그 반대의 경우도 마찬가지입니다. 이제 요구 사항이 명확하고 문제가 알려졌으므로 서로 다른 작업을 수행하려면 두 개의 창이 필요합니다

첫 번째는 부모입니다. 페이지:

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

로그인 후 복사

그 다음 하위 페이지:

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

로그인 후 복사