【九月打卡】第15天如何实现网页多标签通讯？-原创手记-慕课网

第一模块（课程信息）:

课程名称:2周刷完100道前端优质面试真题
课程章节:第六章第二十一节如何实现网页多标签通讯？
主讲老师:双越

第二模块（课程内容）:

课程内容概述

1、使用websocket

无跨域限制
需要服务端支持，成本高

2、localStorage通讯

同域的A和B两个页面
A页面设置localStorage
B页面可以监听到localStorage值的修改

3、使用SharedWorker通讯

SharedWorker是WebWorker的一种
WebWorker可开启子进程执行JS，但不能操作DOM
SharedWorker可单独开启一个进程，用于同域页面通讯

代码演示
封装SharedWorker

const set = new Set();
onconnect = event =>{
  const port = event.ports[0];
  set.add(port);
  // 接收消息
  port.onmessage = e =>{
    // 广播消息
    set.forEach(p=>{
      if(p===port) return;
      p.postMessage(e.data);
    })
  }
  // 发送消息
  port.postMessage('worker.js done');
}

使用方式：
list页面

const worker = new SharedWorker('./worker.js');
worker.port.onmessage = e =>console.log('list',e.data);

detail页面

const worker = new SharedWorker('./worker.js')；
worker.port.postMessage('detail go...')；

总结：

Websocket需要服务器端，成本高
localstorage简单易用，推荐
SharedWorker 调试不方便，不兼用IE11，只支持同域

拓展：网页和iframe如何通讯？

使用postMessage通讯
注意跨域的限制和判断

具体案例演示
主页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    index 页面
    <button id="btn1">发送消息</button>
  </p>
  <iframe id="iframe1" src="./child.html" ></iframe>

  <script>
    const btn1 = document.getElementById('btn1');
    btn1.addEventListener('click',()=>{
      console.info('index clicked');
      window.iframe1.contentWindow.postMessage('hello','*');
    });

    window.addEventListener('message',event=>{
      console.info('origin',event.origin);//来源的域名
      console.info('index received',event.data);
    })
  </script>
</body>
</html>

iframe页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    child页面
    <button id="btn1">发送消息了</button>
  </p>

  <script>
    const btn1 = document.getElementById('btn1');
    btn1.addEventListener('click',()=>{
      console.info('child clicked');
      window.parent.postMessage('world',"*");
    })

    window.addEventListener('message',event=>{
      console.info('origin',event.origin);

      console.info('child received data',event.data);
    })
  </script>
</body>
</html>

运行结果如下：
图片描述

第三模块（学习心得）：

1、通过这次学习掌握了不常用的SharedWorker通讯方式
2、掌握了iframe和页面之间的通讯
父页面向iframe页面：
window.#iframeId.contentWindow.postMessage(‘内容’，’’);*
iframe向父页面：
window.parent.postMessage(‘内容’,’’);*

第四模块（学习截图）：

图片描述

【九月打卡】第15天 如何实现网页多标签通讯？