MessageChannel

time 0

  1. var channel=new MessageChannel();
  2. console.log(channel);

image.png

time 2m13s

  1. var channel = new MessageChannel();
  2. var {port1, port2} = channel;
  3. console.log(port1, port2);

image.png

  1. <div id="mess1">No message</div>
  2. <button id="btn1">1send Message</button>
  3. <div id="mess2">No message</div>
  4. <button id="btn2">2send Message</button>
  6. <script !src="">
  7.     const oBtn1 = document.getElementById('btn1'),
  8.         oBtn2 = document.getElementById('btn2'),
  9.         oMess1Info = document.getElementById('mess1'),
  10.         oMess2Info = document.getElementById('mess2');
  11.     // 函数实例化，拿到实例对象的属性
  12.     const {port1, port2} = new MessageChannel();
  14.     oBtn1.addEventListener('click', sendMessage1, false);
  15.     oBtn2.addEventListener('click', sendMessage2, false);
  17.     port1.onmessage = getMessage1;
  18.     port2.onmessage = getMessage2;
  20.     function getMessage1(e) {
  21.         console.log(e);
  22.         oMess1Info.textContent = e.data;
  23.     }
  25.     function getMessage2(e) {
  26.         console.log(e);
  27.         oMess2Info.textContent = e.data;
  28.     }
  30.     /**
  31.      * 点击按钮port2端口发送消息，
  32.      */
  33.     function sendMessage1() {
  34.         port2.postMessage('I am prot2.');
  35.     }
  37.     function sendMessage2() {
  38.         port1.postMessage('I am port1.');
  39.     }
  41. </script>

vue2.0之前使用了
time 14m40s
npm init -y 与中文不行
image.png

用 yarn init -y就可以了
image.png

npm i vite -D
yarn add vite -D

包名起好，别有中文与空格等，与工程文件名不一样也行
image.png

image.png

  1. {
  2.   "name": "messagechannel",
  3.   "version": "1.0.0",
  4.   "main": "index.js",
  5.   "license": "MIT",
  6.   "devDependencies": {
  7.     "vite": "^3.0.0"
  8.   }
  9. }

npm init

  1. {
  2.   "name": "messagechannel",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "author": "",
  10.   "license": "ISC"
  11. }

改变package.json

  1. {
  2.   "name": "messagechannel",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "dev": "vite"
  8.   },
  9.   "author": "",
  10.   "license": "ISC",
  11.   "devDependencies": {
  12.     "vite": "^3.0.0"
  13.   }
  14. }

image.png
点击蓝色链接
http://127.0.0.1:5173/

time 16m31s
demo.js
image.png

index2.js
image.png

image.png

总结

time 21m27s
不要求会写，了解什么意思

扩展

mdn文档，看视频看不懂的，可以看看mdn文档
以后得多看文档nodejs、mdn、ecma262等官方文档，全详细，权威错误少，任何书都有错

点击红框网站得到源代码
image.png
点击跳转
https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic
image.png

当index在onLoad时，监听port1端口，并把文字与port2端口传给iframe page2
page2的windows监听message，event中有data，event可以拿到从index传过来的port2端口，通过port2端口发送消息，消息是传到port1的
index在onLoad时，监听port1端口，可以拿到从port2传的数据，port2传给port1，port1传给port2，两个端口互相传

index

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <meta name="viewport" content="width=device-width">
  7.     <title>Channel messaging demo</title>
  8.     <link rel="stylesheet" href="">
  9. </head>
  10. <body>
  11. <h1>Channel messaging demo</h1>
  12. <p class="output">My body</p>
  13. <iframe src="page2.html" width='480' height='320'></iframe>
  14. </body>
  15. <script>
  16.     var channel = new MessageChannel();
  17.     var output = document.querySelector('.output');
  18.     var iframe = document.querySelector('iframe');
  20.     // Wait for the iframe to load
  21.     iframe.addEventListener("load", onLoad);
  23.     function onLoad() {
  24.         // Listen for messages on port1
  25.         channel.port1.onmessage = onMessage;
  26.         // Transfer port2 to the iframe
  27.         iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
  28.     }
  30.     // Handle messages received on port1
  31.     function onMessage(e) {
  32.         output.innerHTML = e.data;
  33.     }
  34. </script>
  35. </html>

page2

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <meta name="viewport" content="width=device-width">
  7.     <title>My page title</title>
  8.     <link rel="stylesheet" href="">
  9. </head>
  10. <body>
  11. <p class="output">iFrame body</p>
  12. </body>
  13. <script>
  14.     var output = document.querySelector('.output');
  16.     window.addEventListener('message', onMessage);
  18.     function onMessage(e) {
  19.         output.innerHTML = e.data;
  20.         console.log(e);
  21.         // Use the transfered port to post a message back to the main frame
  22.         e.ports[0].postMessage('Message back from the IFrame');
  23.     }
  24. </script>
  25. </html>