Html5 postmessage 子父窗口传值

旧城等待， 2021-09-16 00:44 307阅读 0赞

[https://blog.csdn.net/hjjoe1213123/article/details/51698404][https_blog.csdn.net_hjjoe1213123_article_details_51698404]

最近做一个POS机终端遇到一个问题，子父窗口传值问题，因为POS机是两个屏幕，如果将一个页面拉长投射虽然可以做到两个屏幕显示，但是因为是触摸屏，当第一个屏幕在操作的时候会影响到第二屏幕，反之也是如此，既然需求明确了，问题也知道了，则我们需要两个窗口进行不同的操作

首先是父页面：

1.  `<!DOCTYPE html>`
2.  `<html lang="en">`
3.  `<head>`
4.  `<meta charset="UTF-8">`
5.  `<title>Html5 postMessage</title>`
6.  `<style>`
7.  `#otherWin {`
8.  `width: 600px;`
9.  `height: 400px;`
10. `background-color: #cccccc;`
11. `}`
12. `#txt {`
13. `width: 500px;`
14. `height: 300px;`
15. `background-color: #cccccc;`
16. `}`
17. `</style>`
18. `</head>`
19. `<body>`
20. `<button id="btn">open</button>`
21. `<button id="send">send</button>`
22. `<input type="text" id="message" />`
23. `<br/><br/>`
24. `<div id="txt"></div>`
25. `<script>`
26. `window.onload = function() {`
27. `var btn = document.getElementById('btn');`
28. `var btn_send = document.getElementById('send');`
29. `var text = document.getElementById('txt');`
30. `var win;`
31. `btn.onclick = function() {`
32. `//通过window.open打开接收消息目标窗口`
33. `win = window.open('http://127.0.0.1:8080/mngapp/chatroom/win.html', 'popUp');`
34. `}`
35. `btn_send.onclick = function() {`
36. `// 通过 postMessage 向子窗口发送数据`
37. `win.postMessage( document.getElementById("message").value, 'http://127.0.0.1:8080/');`
38. `}`
39. `if (window.addEventListener) {`
40. `//为window注册message事件并绑定监听函数`
41. `window.addEventListener('message', receiveMsg, false);`
42. `}else {`
43. `window.attachEvent('message', receiveMsg);`
44. `}`
45. `//监听函数，接收一个参数--Event事件对象`
46. `function receiveMsg(e) {`
47. `console.log("Got a message!");`
48. `console.log("Message: " + e.data);`
49. `console.log("Origin: " + e.origin);`
50. `text.innerHTML = "Got a message!<br>" +`
51. `"Message: " + e.data +`
52. `"<br>Origin: " + e.origin;`
53. `}`
54. `};`
55. `</script>`
56. `</body>`
57. `</html>`

然后再是子页面：

1.  `<!DOCTYPE html>`
2.  `<html lang="en">`
3.  `<head>`
4.  `<meta charset="UTF-8">`
5.  `<title>Html5 postMessage</title>`
6.  `<style>`
7.  `#txt {`
8.  `width: 500px;`
9.  `height: 300px;`
10. `background-color: #cccccc;`
11. `}`
12. `</style>`
13. `</head>`
14. `<body>`
15. `<h1>The New Window</h1>`
16. `<div id="txt"></div>`
17. `<input type="text" id="message" />`
18. `<button id="send">send</button>`
19. `<script>`
20. `window.onload = function() {`
21. `var text = document.getElementById('txt');`
22. `var btn_send = document.getElementById('send');`
23. `var prent = null;`
24. `btn_send.onclick = function() {`
25. `// 通过 postMessage 向父窗口发送数据`
26. `freceiveMsg(prent);`
27. `}`
28. `//监听函数，接收一个参数--Event事件对象`
29. `function receiveMsg(e) {`
30. `console.log("Got a message!");`
31. `console.log("Message: " + e.data);`
32. `console.log("Origin: " + e.origin);`
33. `text.innerHTML = "Got a message!<br>" +`
34. `"Message: " + e.data +`
35. `"<br>Origin: " + e.origin;`
36. `//获取父对象`
37. `prent = e;`
38. `}`
39. `function freceiveMsg(e) {`
40. `console.log("freceiveMsg:"+e);`
41. `e.source.postMessage(document.getElementById("message").value,`
42. `e.origin);`
43. `}`
44. `if (window.addEventListener) {`
45. `//为window注册message事件并绑定监听函数`
46. `window.addEventListener('message', receiveMsg, false);`
47. `}else {`
48. `window.attachEvent('message', receiveMsg);`
49. `}`
50. `};`
51. `</script>`
52. `</body>`
53.

[https_blog.csdn.net_hjjoe1213123_article_details_51698404]: https://blog.csdn.net/hjjoe1213123/article/details/51698404