ホームページ > 記事 > ウェブフロントエンド > 子ウィンドウと親ウィンドウ間の値の転送を実装するための HTML5 のポストメッセージのコード
子ウィンドウと親ウィンドウ間の値の転送を実装するための HTML5 のポストメッセージのコード
- 不言オリジナル
- 2018-08-06 17:52:273017ブラウズ
この記事の内容は、子ウィンドウと親ウィンドウ間の値の転送を実装する Html5 のポストメッセージ コードに関するもので、必要な方は参考にしていただければ幸いです。
最近POS端末を構築する際に問題に遭遇しました。それは、子ウィンドウと親ウィンドウ間の値の転送の問題です。POSマシンには2つの画面があるため、ページを引き伸ばして投影すると、2つの画面に表示できます。タッチ スクリーンなので、最初の画面が動作しているときは 2 番目の画面に影響があり、その逆も同様です。要件が明確になり、問題がわかったので、異なる操作を実行するには 2 つのウィンドウが必要です
まず。親ページ:
<!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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。