Html5中postmessage如何實(shí)現(xiàn)子父窗口傳值

這篇文章主要介紹了Html5中postmessage如何實(shí)現(xiàn)子父窗口傳值，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、黃陵網(wǎng)站維護(hù)、網(wǎng)站推廣。

最近做一個(gè)POS機(jī)終端遇到一個(gè)問題，子父窗口傳值問題，因?yàn)镻OS機(jī)是兩個(gè)屏幕，如果將一個(gè)頁面拉長投射雖然可以做到兩個(gè)屏幕顯示，但是因?yàn)槭怯|摸屏，當(dāng)?shù)谝粋€(gè)屏幕在操作的時(shí)候會(huì)影響到第二屏幕，反之也是如此，既然需求明確了，問題也知道了，則我們需要兩個(gè)窗口進(jìn)行不同的操作

首先是父頁面：

<!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打開接收消息目標(biāo)窗口


win = window.open('http://127.0.0.1:8080/mngapp/chatroom/win.html', 'popUp');


}


btn_send.onclick = function() { 


// 通過 postMessage 向子窗口發(fā)送數(shù)據(jù) 


win.postMessage( document.getElementById("message").value, 'http://127.0.0.1:8080/');


}


if (window.addEventListener) {


//為window注冊(cè)message事件并綁定監(jiān)聽函數(shù)


window.addEventListener('message', receiveMsg, false);


}else {


window.attachEvent('message', receiveMsg);


}


//監(jiān)聽函數(shù)，接收一個(gè)參數(shù)--Event事件對(duì)象


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>


<h2>The New Window</h2>


<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 向父窗口發(fā)送數(shù)據(jù) 


freceiveMsg(prent);


}


//監(jiān)聽函數(shù)，接收一個(gè)參數(shù)--Event事件對(duì)象


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;


//獲取父對(duì)象


prent = e;


}


function freceiveMsg(e) {


console.log("freceiveMsg:"+e);


e.source.postMessage(document.getElementById("message").value,


e.origin);


}


if (window.addEventListener) {


//為window注冊(cè)message事件并綁定監(jiān)聽函數(shù)


window.addEventListener('message', receiveMsg, false);


}else {


window.attachEvent('message', receiveMsg);


}


};


</script>


</body>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享Html5中postmessage如何實(shí)現(xiàn)子父窗口傳值內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

分享文章：Html5中postmessage如何實(shí)現(xiàn)子父窗口傳值
網(wǎng)站鏈接：http://jinyejixie.com/article6/pdccig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、全網(wǎng)營銷推廣、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、定制開發(fā)、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

Html5中postmessage如何實(shí)現(xiàn)子父窗口傳值