Html 5 postmessage子親ウィンドウ伝値
4130 ワード
最近1つのPOS機の端末をして1つの問題に出会って、子の親のウィンドウの値を伝える問題、POS機が2つのスクリーンなため、もし1つのページを長くして投射すれば2つのスクリーンの表示をすることができますが、タッチスクリーンなので、最初のスクリーンが操作する時第2のスクリーンに影響して、逆にこのようにして、需要が明確になった以上、問題も知っています.2つのウィンドウで異なる操作を行う必要があります
まず、親ページ:
次にサブページ:
まず、親ページ:
Html5 postMessage
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;
}
};
次にサブページ:
Html5 postMessage
The New Window
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);
}
};