AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

面试装X：我知道的前端跨页面通信

2022-05-10 403
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本篇文章就是对前端跨页面通信的解决方案做了一个了解。

网络异常，图片无法展示
|

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。


背景

用户在实际的操作场景中会打开多个 Tab 页面A、B、C、D、E...。当用户在 E Tab 页退出登录，并且登录到新的账号，然后用户切换到非 E 的 Tab 时，发现登录信息没有刷新， 并且由于登录信息没有刷新，会出现操作异常。这个问题简单来说就是多个 Tab 信息没有同步。问题的关键在于一个 Tab 退出重新登录，需要通知到其他的 Tab 刷新到最新的信息。本质问题就是解决前端跨页面通信。


本篇文章就是对前端跨页面通信的解决方案做了一个了解。


onstorage


WindowEventHandlers.onstorage 属性包含一个在 storage 事件触发时运行的事件处理程序。当更改存储时会触发事件处理程序。

语法

window.onstorage = function（）{...};
window.onstorage = function(e) {
  console.log(`The ${e.key}  key has been changed from ${e.oldValue}  to  ${e.newValue} .`);
};
<div id="app"></div>
<button id="tab">新开 Tab</button>
<button id="l-btn">触发 LocalStorage 更新</button>
<button id="s-btn">触发 SessionStorage 更新</button>
<script>
  window.onstorage = function(e) {
    console.log(`The ${e.key}  key has been changed from ${e.oldValue}  to  ${e.newValue} .`);
  };
  document.getElementById('tab').onclick = function () {
    window.open('xxx');
  }
  document.getElementById('l-btn').onclick = function () {
    localStorage.setItem('storage1', Date.now())
  }
  document.getElementById('s-btn').onclick = function () {
    sessionStorage.setItem('storage1', Date.now())
 }
</script>

网络异常，图片无法展示
|

网络异常，图片无法展示
|


Tips


  1. 该事件不在导致数据变化的当前页面触发（如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变 数据时，其他所有页面的 storage 事件会被触发，而原始页面并不触发 storage 事件）。
  2. sessionStorage（❎）不能触发 storage 事件 ， localStorage（✅）可以。
  3. 如果修改的值未发生改变，将不会触发 onstorage 事件。
  4. 优点：浏览器支持效果好、API直观、操作简单。缺点：部分浏览器隐身模式下，无法设置 localStorage。如safari，这样也就导致 onstrage 事件无法使用。

除开少数情况，localStorage的兼容性不错，就当前国内的情况，已经基本没有问题了。localStorage 的原理很简单，浏览器为每个域名划出一块本地存储空间，用户网页可以通过 localStorage 命名空间进行读写。

网络异常，图片无法展示
|


BroadCast Channel

BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab页，frame或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。


说到 BroadCast Channel 不得不说一下 postMessage，他们二者的最大区别就在于 postMessage 更像是点对点的通信，而 BroadCast Channel 是广播的方式，点到面。


语法


// 创建
const broadcastChannel = new BroadcastChannel('channelName');
// 监听消息
broadcastChannel.onmessage = function(e) {
    console.log('监听消息:', e.data);
};
// 发送消息
broadcastChannel.postMessage('测试：传送消息');
// 关闭
broadcastChannel.close();
<div id="app"></div>
  <button id="tab">新开 Tab</button>
  <button id="l-btn">发送消息</button>
  <button id="s-btn">关闭</button>
  <script>
    // 创建
    const broadcastChannel = new BroadcastChannel('channelName');
    // 监听消息
    broadcastChannel.onmessage = function(e) {
        console.log('监听消息:', e.data);
    };
    document.getElementById('tab').onclick = function () {
      window.open('xxx');
    }
    document.getElementById('l-btn').onclick = function () {
      // 发送消息
      broadcastChannel.postMessage('测试，传送消息，我发送消息啦。。。');
    }
    document.getElementById('s-btn').onclick = function () {
      // 关闭
      broadcastChannel.close();
    }
  </script>

网络异常，图片无法展示
|
网络异常，图片无法展示
|


Tips


  1. 监听消息除了 .onmessage 这种方式，还可以 使用addEventListener来添加'message'监听，
  2. 关闭除了使用 Broadcast Channel 实例为我们提供的 close 方法来关闭 Broadcast Channel。我们还可取消或者修改相应的'message'事件监听。两者是有区别的：取消'message'监听只是让页面不对广播消息进行响应，Broadcast Channel 仍然存在；而调用 close 方法会切断与 Broadcast Channel 的连接，浏览器才能够尝试回收该对象，因为此时浏览器才会知道用户已经不需要使用广播频道了。
  3. 兼容性：如果不使用 IE 和 sf on iOS 浏览器，兼容性还是可以的。

网络异常，图片无法展示
|


Service Worker

Service Worker 是一个可以长期运行在后台的 Worker，能够实现与页面的双向通信。多页面共享间的 Service Worker 可以共享，将 Service Worker 作为消息的处理中心（中央站）即可实现广播效果。


语法


<div id="app"></div>
<button id="tab">新开 Tab</button>
<button id="l-btn">发送消息</button>
<script>
  /* 判断当前浏览器是否支持serviceWorker */
  if ('serviceWorker' in navigator) {
    /* 当页面加载完成就创建一个serviceWorker */
    window.addEventListener('load', function () {
      /* 创建并指定对应的执行内容 */
      /* scope 参数是可选的，可以用来指定你想让 service worker 控制的内容的子目录。在这个例子里，我们指定了 '/'，表示 根网域下的所有内容。这也是默认值。*/
      navigator.serviceWorker.register('./serviceWorker.js', { scope: './' })
        .then(function (registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      })
        .catch(function (err) {
        console.log('ServiceWorker registration failed: ', err);
      });
    });
    // 监听消息
    navigator.serviceWorker.addEventListener('message', function (e) {
      const data = e.data;
      console.log('我接受到消息了：', data);
    });
    document.getElementById('l-btn').onclick = function () {
      navigator.serviceWorker.controller && navigator.serviceWorker.controller.postMessage('测试，传送消息，我发送消息啦。。。');
    };
  }
</script>
/* 监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑 */
this.addEventListener('install', function (event) {
  /* 通过这个方法可以防止缓存未完成，就关闭serviceWorker */
  event.waitUntil(
    /* 创建一个名叫V1的缓存版本 */
    caches.open('v1').then(function (cache) {
      /* 指定要缓存的内容，地址为相对于跟域名的访问路径 */
      return cache.addAll(['./index.html']);
    })
  );
});
/* 注册fetch事件，拦截全站的请求 */
this.addEventListener('fetch', function (event) {
  event.respondWith(
    // magic goes here
    /* 在缓存中匹配对应请求资源直接返回 */
    caches.match(event.request)
  );
});
/* 监听消息，通知其他 Tab 页面 */
this.addEventListener('message', function(event) {
  this.clients.matchAll().then(function(clients) {
    clients.forEach(function(client) {
      // 这里的判断目的是过滤掉当前 Tab 页面，也可以使用 visibilityState 的状态来判断
      if(!client.focused) {
        client.postMessage(event.data)
      }
    })
  })
})

网络异常，图片无法展示
|

网络异常，图片无法展示
|

Tips

  1. Service workers 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。所以本质上来说 Service Worker 并不自动具备“广播通信”的功能，需要改造 Service Worker 添加些代码，将其改造成消息中转站。在 Service Worker 中监听了message事件，获取页面发送的信息。然后通过 self.clients.matchAll() 获取当前注册了 Service Worker 的所有页面，通过调用每个的 postMessage 方法，向页面发送消息。这样就把从一处（某个Tab页面）收到的消息通知给了其他页面。
  2. 兼容性：IE 全军覆没，其他浏览器还行，整体来说一般。

网络异常，图片无法展示
|


open & opener

当我们 系统中通过 window.open 打开一个新页面时，window.open 方法会返回一个被打开页面的引用，而被打开页面则可以通过 window.opener 获取到打开它的页面的引用（当然这是在没有指定noopener的情况下）。


番外关于 noopener


<a href="https://google.com" target="_blank">Google</a>


我们在系统中经常会这样使用 a 标签跳转到第三方网站，有时，当您单击网站上的链接时，该链接将在新选项卡中打开，但旧选项卡也会被重定向到其他网络钓鱼网站，它会要求您登录或开始将一些恶意软件下载到您的设备。这样存在一定的安全隐患，此时在新打开的页面中可通过 window.opener 获取到源页面的 window 对象， 这就埋下了安全隐患。 比如：


  • 你自己的网站 A，点击如上链接打开了第三方网站 B。
  • 此时网站 B 可以通过 window.opener 获取到 A 网站的 window 对象。
  • 然后通过 window.opener.location.href = 'www.baidu.com' 这种形式跳转到一个钓鱼网站，泄露用户信息。

为了避免这样的问题，可以添加引入了 rel="noopener" 属性， 这样新打开的页面便获取不到来源页面的 window 对象了， 此时 window.opener 的值是 null。

<a href="https://google.com" rel="noopener" target="_blank">Google</a>


但是由于一些老的浏览器并不支持 noopener ，通常 noopener 和 noreferrer 会同时设置， rel="noopener noreferrer"。


语法


回到主题，使用 window.opener 如何实现跨页面通信了。

  • 收集对象
// 收集 window 对象：单个打开页面
const windowOpen = window.open('xxx');
// 收集 window 对象：多个打开页面，打开一个页面就需要将打开的 window 对象收集起来，以便于发布广播
const windowOpens = [];
const windowOpen = window.open('xxx');
windowOpens.push(windowOpen);
复制代码
  • 发送消息
// 发送消息：单个页面
windowOpen.postMessage(data);
// 发送消息：多个页面
windowOpens.forEach((window) => window.postMessage(data));
接受消息，对于接受消息来说，可能只是接受消息，但是可能接受消息的页面也打开了页面，这种情况需要将消息继续传递下去
window.addEventListener('message', function (e) {
    const data = e.data;
    console.log(data);
    windowOpens.forEach((window) => window.postMessage(data));
});
复制代码


Tips

  1. 在收集到的 window 对象中，可能有的 Tab 窗口被关闭了，这种情况下的 Tab 不需要进行消息传递。
  2. 对于接受消息的一方来说，需要继续传递消息，但是这里存在一个问题就是消息回传，可能出现两者之间消息的死循环传递。
  3. 这种方式，类似击鼓传花，一个传一个，传递的消息从前往后，一条锁链。
  4. 但是如果页面不是通过一个页面打开的，而且直接打开的，或者从三方网站跳转的，那这条锁链将断开。所以这种方式基本只做了解，问题太多，可不做参考。

完善的代码如下：

<button id="tab">新开 Tab</button>
<button id="l-btn">发送消息</button>
<script>
  // 收集 window 对象：多个打开页面，打开一个页面就需要将打开的 window 对象收集起来，以便于发布广播
  let windowOpens = [];
  document.getElementById('tab').onclick = function () {
    // IP 地址为本地的服务
    const windowOpen = window.open('http://127.0.0.1:5500/CrossPageCommunication/open&opener.html');
    windowOpens.push(windowOpen);
  }
  document.getElementById('l-btn').onclick = function () {
    const data = {};
    console.log(windowOpens);
    // 发送消息之前，先进行已关闭 Tab 的过滤
    windowOpens = windowOpens.filter((window) => !window.closed);
    if (windowOpens.length > 0) {
      // 数据打一个标记
      data.tag = false;
      data.message = '测试，传送消息，我发送消息啦。。。'
      windowOpens.forEach((window) => window.postMessage(data));
    }
    if (window.opener && !window.opener.closed) {
      data.tag = true;
      window.opener.postMessage(data);
    }
  }
  window.addEventListener('message', function (e) {
    const data = e.data;
    console.log('我接受到消息了：', data.message);
    // 避免消息回传
    if (window.opener && !window.opener.closed && data.tag) {
      window.opener.postMessage(data);
    }
    // 过滤掉已经关闭的 Tab
    windowOpens = windowOpens.filter((window) => !window.closed);
    // 避免消息回传
    if (windowOpens && !data.tag) {
      windowOpens.forEach((window) => window.postMessage(data));
    }
  });
</script>

网络异常，图片无法展示
|


SharedWorker

SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域, SharedWorkerGlobalScope。


语法


// 创建共享线程对象
let worker = new SharedWorker("./sharedWorker.js");
// 手动启动端口
worker.port.start();
// 处理从 worker 返回的消息
 worker.port.onmessage = function (val) {
    ...
 };
<button id="tab">新开 Tab</button>
<button id="l-btn">点赞</button>
<p><span id="likedCount">还没有人点赞</span></span>👍</p>
<script>
 let likedCountEl = document.querySelector("#likedCount");
 let worker = new SharedWorker("./sharedWorker.js");
 console.log('worker.port', worker.port);
 worker.port.start();
 // 监听消息
 worker.port.onmessage = function (val) {
   likedCountEl.innerHTML = val.data;
 };
 document.getElementById('tab').onclick = function () {
   // IP 地址为本地起的服务
   const windowOpen = window.open('http://127.0.0.1:5500/CrossPageCommunication/sharedWorker/index.html');
 }
 document.getElementById('l-btn').onclick = function () {
   worker.port.postMessage('点赞了');
 };
</script>
// ./sharedWorker.js
let a = 666;
console.log('shared-worker');
onconnect = function (e) {
 const port = e.ports[0];
 console.log('shared-worker connect');
 // 不能使用这种方式监听事件
 // port.addEventListener('message', () => {
 //   port.postMessage(++a);
 // });
 port.postMessage(a);
 port.onmessage = () => {
   port.postMessage(++a);
 };
 console.log('当前点赞次数:', a);
};

网络异常，图片无法展示
|


Tips


  1. 如果要使 SharedWorker 连接到多个不同的页面，这些页面必须是同源的（相同的协议、host 以及端口）。
  2. Shared Worker 在实现跨页面通信时的，它无法主动通知所有页面，需要刷新页面或者是定时任务来检查是否有新的消息。在例子中我是手动刷新的，当然可以使用 setInterval 来定时刷新。
  3. 如果需要调试 SharedWorker，使用 chrome://inspect/#workers


网络异常，图片无法展示
|

网络异常，图片无法展示
|

  1. sharedWorker.js 不能使用 .addEventListener 来监听 message 事件，监听无效。 兼容性一般。

网络异常，图片无法展示
|


总结

在上面列举了五种前端跨页面通信的方式，当然对前端来说远远不止这五种方式，还有其他方案例如：使用 hashchange、cookie、Websocket、postMessage 都是可以的。文章中只是列举了部分。并且文章中的方案都是针对同源的 Tab。


文章的前三种解决方式不论是 Broadcast Channel，还是 Service Worker ，或是 storage 事件，其都是“广播模式”：一个页面将消息通知给一个“中央站”，再由“中央站”通知给各个页面。


而对于 open & opener 这种方式，类似击鼓传花，一个传一个，传递的消息从前往后，一条锁链。但是如果页面不是通过一个页面打开的，而且直接打开的，或者从三方网站跳转的，那这条锁链将断开。


Shared Worker 的最大问题在于实现跨页面通信时的，它无法主动通知所有页面，需要刷新页面或者是定时任务来检查是否有新的消息，也就是需要配合轮询来使用。

最终在我们团队对于前端跨页面通信最后选择的解决方案是使用 onstorage，主要考量的三个方面：

  • 兼容性。浏览器支持度。
  • 通用性。能否覆盖需求、是否具有拓展性。
  • 便捷性。开发便捷程度。

其他方案在这三个方面来说都或多或少存在一些美中不足。


参考


文章标签：
前端开发
iOS开发
安全
Web App开发
API
存储
关键词：
前端页面
面试前端
前端面试
前端通信
面试通信
拜小白
目录
相关文章
gkkkkk
|
22天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
gkkkkk
8 1
.自定义认证前端页面
阿里云计算巢-雲尧
|
17天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息，并通过阿里云计算巢完成了Appsmith的快速部署，使用者不需要自己下载代码，不需要自己安装复杂的依赖，不需要了解底层技术，只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith，非技术同学也能轻松搞定。
阿里云计算巢-雲尧
33 5
qhhf_地道酬勤
|
25天前
|
存储 缓存 网络协议
计算机网络常见面试题（二）：浏览器中输入URL返回页面过程、HTTP协议特点，GET、POST的区别，Cookie与Session
计算机网络常见面试题（二）：浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式，GET、POST的区别，DNS的解析过程、数字证书、Cookie与Session，对称加密和非对称加密
qhhf_地道酬勤
92 2
刘大猫.
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
刘大猫.
38 18
土木林森
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍：深度解析浏览器面试必考问题，从重绘回流到事件委托，让你一举拿下前端 Offer！"
【10月更文挑战第23天】在前端开发面试中，浏览器相关知识是必考内容。本文总结了四个常见问题：浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析，帮助求职者更好地理解和准备面试。掌握这些知识点，有助于提升面试表现和实际工作能力。
土木林森
64 1
周一同学Zelina
|
3月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点，特别是围绕Git的使用进行了详细介绍，包括Git的基本概念、常用命令以及在团队协作中的最佳实践，同时还涉及了Chrome调试工具和Linux命令行的基础操作。
周一同学Zelina
32 1
「offer来了」浅谈前端面试中开发环境常考知识点
六卿
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容，支持文本类型文件。在文件读取成功后，可以通过onload事件处理函数获取文件内容，然后展示到页面上。
六卿
101 2
前端JS读取文件内容并展示到页面上
木子0204
|
2月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
木子0204
31 1
你都不懂
|
2月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
你都不懂
21 1
游客zi3qmblbcdexu
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
游客zi3qmblbcdexu
18 0

热门文章

最新文章

  • 1
    前端 时间个性化 插件 jquery.timeago.js
  • 2
    前端分页插件pagination
  • 3
    wordpress页面前端添加编辑按钮
  • 4
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 5
    你用过的网站前端优化的技术有哪些？
  • 6
    [前端]jekyll+markdown+github搭建个人博客
  • 7
    未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~
  • 8
    合格前端系列第四弹-如何监听一个数组的变化
  • 9
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 10
    从0到上线开发企业级电商项目_前端_01_sublime使用技巧
  • 1
    Spring Boot 源码面试知识点
    94
  • 2
    大厂高频面试题：ReentrantLock 与 synchronized异同点对比
    66
  • 3
    【Java多线程】面试常考 —— JUC(java.util.concurrent) 的常见类
    78
  • 4
    【Java多线程】面试常考——锁策略、synchronized的锁升级优化过程以及CAS（Compare and swap）
    65
  • 5
    【LeetCode力扣】面试题 17.14. 最小K个数（top-k问题）
    90
  • 6
    【刷题】 leetcode 面试题 08.05.递归乘法
    71
  • 7
    【刷题】 leetcode 面试题 01.06 字符串压缩
    66
  • 8
    MySQL第五战：常见面试题（下）
    60
  • 9
    MySQL第四战：视图以及常见面试题（上）
    60
  • 10
    面试高频 ThreadLocal类详解
    39

    • 相关课程

    更多
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 阿里云技术面试红宝书
  • 超全算法笔试-模拟题精解合集
  • 程序员面试宝典

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    使用阿里云接口（API）进行身份证实名认证