📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 跨页面通讯
  • 背景
  • 实现方案
  • postMessage
  • cookies
  • storage
  • webSocket
  • BroadcastChannel
  • 总结
在GitHub上编辑
  1. 经验记录
  2. 经验总结

跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd

跨页面通讯

tags: JavaScript summary: 跨页面通讯是前端开发中常见的需求。根据同源策略,同源的页面之间可以直接进行通信,而非同源的页面之间需要使用绕过同源策略的方法才能进行通信。本文介绍了关于跨页面通讯的几种方法,并介绍了它们各自的优缺点以及适用场景。 Created time: December 19, 2023 11:01 AM

背景

假如用户打开了两个浏览器标签页,这两个标签页可能同源,也可能不同源,但是当用户在其中一个页面进行某些操作时,需要“通知”到另一个页面,也就是实现所谓的跨页面通讯,这在一些场景下非常重要。

首先我们来看一下什么是同源,源,也就是指协议+域名+端口号,如果这三者都相同,注意是都相同,那么就认为他们是同源的。浏览器出于安全考虑,会执行非常严格的“同源策略”,即非同源的页面不可能进行通讯,当然这也不是绝对的,在某些情况下可以绕过同源策略。

由于同源策略的影响,一些跨页面方案无法在非同源的页面中使用,例如storage、cookie等,而这时候可以采用postMessage等替代方案。

实现方案

postMessage

postMessage是官方推荐的跨域方案,通过postMessage不仅可以实现跨页面通讯,而且它还不受同源策略的影响,这意味着它可以向非同源的页面进行通讯。

// 发送消息
function sendMessage() {
    const message = {
        name: "张三"
    };
		const otherWindow = window.open(url)
    otherWindow.postMessage(message, "*");
}

// 接收消息
window.onmessasge = function onMessage(event) {
    const message = event.data;
    console.log(message);
}

注意最好在onMessage事件中验证一下发送源。

这种方式的优点:

  1. 安全性高

  2. 可以跨域

  3. 支持复杂的数据

缺点也很明显,一定需要另一个页面的window对象,可以通过window.parent或者window.open这些方法拿到,但是如果不能拿到另一个页面的window对象,那么这种方法就不可用。

cookies

第二种方式是通过cookie来实现跨页面通讯,这是因为cookie在同源页面中是被“共享”的,因此你可以通过设置cookie来进行跨页面通讯,但是注意这要求是同源的。

// 发送消息
function sendMessage() {
    const message = {
        name: "张三",
    };
    document.cookie = "message=" + JSON.stringify(message);
}

// 接收消息
function onMessage() {
    const message = JSON.parse(document.cookie.split("=")[1]);
    console.log(message);
}

优点有

  1. 实现简单

  2. 兼容性强,毕竟几乎所有主流浏览器都支持cookie

缺点也很多

  1. 实时性差,比较难监听对方什么时候设置了cookie

  2. 只支持简单的数据

  3. 不支持跨域

  4. 浏览器对cookie大小有限制,不能存放太多数据

  5. 安全性差,有泄漏和被篡改的风险

  6. 影响性能,cookie在某些情况下会被http请求携带,如果设置太多无关的cookie可能会影响网络传输

总而言之,不建议使用这种方式。

storage

另一种方式是通过storage来实现跨页面通讯,这种方式类似于上一种使用cookie的方案,但是相比较而言优点更多。首先可以通过监听window.onstorage事件来确定对方什么时候发送了通知,其次storage可以存储的数据大约有5-10mb左右,比cookie多得多。

// 发送消息
function sendMessage() {
    const message = {
        name: "张三",
    };
    localStorage.setItem("message", JSON.stringify(message));
}

// 接受消息
window.onstorage = function(e){
  // ...
}

优点

  1. 实现简单

  2. 实时性更好一些

  3. 相较于cookie,可以存储更多数据

缺点

  1. 安全性较差

  2. 不支持跨域

webSocket

webSocket是一种全双工协议,这种方法其实已经不是单纯靠前端技术实现了,通过webSocket实现的跨页面通讯需要借助后端来实现,本质上就是两个页面都通过websocket协议与服务器相连,然后一个页面发送消息到服务器,然后将这则消息通知给另一个页面。这里就不展开讲websocket了,有兴趣的话可以参考MDN。

优点是:

  1. 实时性强

  2. 支持复杂的数据

  3. 支持跨域

缺点

  1. 需要后端参与

  2. 实现复杂

BroadcastChannel

// 发送消息
const channel = new BroadcastChannel("my-channel");
channel.postMessage("Hello, world!");

// 接收消息
channel.onmessage = function (event) {
  console.log(event.data); // "Hello, world!"
};

优点

  1. 无需感知另一个页面(postMessage需要拿到另一个页面的window对象才能通讯)

  2. 简单易用,只需要几行代码即可。

  3. 安全,BroadcastChannel 使用 EventSource 对象来实现通信,相较于cookie和storage这几种方案安全性更好

缺点

  1. 不支持跨域,只支持同源页面

  2. 兼容性差

总结

跨页面通讯是前端开发中常见的需求。根据同源策略,同源的页面之间可以直接进行通信,而非同源的页面之间需要使用绕过同源策略的方法才能进行通信。

本文介绍了几种常用的跨页面通讯方案,包括:

  • postMessage:官方推荐的跨域方案,支持跨域、复杂数据,但需要另一个页面的 window 对象。

  • cookies:同源方案,实现简单、兼容性强,但实时性差、不支持跨域、安全性差。

  • storage:同源方案,实现简单、支持 onstorage 事件,但安全性较差、不支持跨域。

  • WebSocket:全双工协议,支持实时性、复杂数据、跨域,但需要后端参与、实现复杂。

  • BroadcastChannel:同源方案,无需感知另一个页面、简单易用、安全,但不支持跨域。

在选择跨页面通讯方案时,应根据实际需求进行选择。如果需要跨域通信、支持复杂数据、实时性强,则可以选择 WebSocket 或 BroadcastChannel。如果只需要同源通信,则可以选择 cookies、storage 或 BroadcastChannel。

上一页设计一个即时聊天功能下一页踩坑记录