하위 창과 상위 창 간의 값 전송을 구현하기 위한 Html5의 사후 메시지 코드
- 不言원래의
- 2018-08-06 17:52:273093검색
공유된 이 글의 내용은 자식 창과 부모 창 사이의 값 전송을 구현하는 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('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>
그 다음 하위 페이지:
<!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>추천 관련 기사:
html5 현재 재생 시간의 실시간 모니터링을 구현하는 방법(코드)
html은 산업 인터넷을 결합하여 달성합니다. 지능형 항공기 제어(코드 포함)
위 내용은 하위 창과 상위 창 간의 값 전송을 구현하기 위한 Html5의 사후 메시지 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.