前端跨界面之间的通信解决方案

主要是这两个方案，其他的，还有 SharedWorker 、IndexedDB、WebSocket、Service Worker
如果是，父子嵌套 iframe 还可以使用 window.parent.postMessage(“需要传递的参数”, ‘*’)

1、localStorage

核心点

同源，不能跨域(协议、端口、域名三者有一个不一样)
使用storage事件监听localStorage变化

示例代码
pageA 界面

<body>
  <h1>1、localStorageh1>
  <h2>pageAh2>
  <script>
    window.addEventListener("storage", (e) => {
      console.info("localStorage发生变化：", e)
    })
  script>
body>
1
2
3
4
5
6
7
8
9

pageB 界面

<body>
  <h1>1、localStorageh1>
  <h2>pageBh2>
  <button id="btnB">添加数据到 localStoragebutton>
body>
<script>
  let btnB = document.getElementById("btnB");
  let num = 0;
  btnB.addEventListener("click", () => {
    localStorage.setItem("num", num++)
  })
script>
1
2
3
4
5
6
7
8
9
10
11
12

当在 B界面上，点击添加的时候，A界面会输出结果

在这里插入图片描述

2、BroadcastChannel

核心点

在这里插入图片描述

同源
两个界面，务必保证频道名称一样

示例代码
pageA界面

<body>
  <h1>1、localStorageh1>
  <h2>pageAh2>
  <h1>2、BroadcastChannelh1>
  <span id="span2">发送广播span>
  <script>
    window.addEventListener("storage", (e) => {
      console.info("localStorage发生变化：", e)
    })


    document.querySelector('#span2').addEventListener('click', () => {
      // 创建 某个频道
      var bc = new BroadcastChannel("test_channel");
      bc.postMessage({ msg: "A界面发送来的" })
    })

  script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

pageB 界面

<body>
 <h1>1、localStorageh1>
 <h2>pageBh2>
 <button id="btnB">添加数据到 localStoragebutton>
body>
<script>
 let btnB = document.getElementById("btnB");
 let num = 0;
 btnB.addEventListener("click", () => {
   localStorage.setItem("num", num++)
 })


 var bc = new BroadcastChannel("test_channel");
 bc.onmessage = function (ev) {
   console.log('收到了消息', ev);
 };
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

window.parent.postMessage

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <iframe src="./son.html" frameborder="0">iframe>
  <script>

    //监听单个事件
    window.addEventListener('message', function (msg) {
      console.log(msg, '发生了变化')
    })
  script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <h2>发送请求h2>
  <script>
    // window.parent 是 iframe 子页面获取父页面的 window 对象

    document.querySelector('h2').addEventListener('click',()=>{
      window.parent.postMessage("需要传递的参数", '*')
    })
    // 后面的 * 号就是处理跨域问题的，任何域名都不会出现跨域问题
 

    // 也可以指定传送域名地址，这个域名不会出现跨域问题，写父页面(接收)域名地址
    // window.parent.postMessage("需要传递的参数", 'http://0.0.0.0:8080')
    // 传递的参数可以是数组，对象，字符串等
  script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3、参考连接

BroadcastChannel MDN 介绍

相关阅读:
linux安装telnet遇到的问题
1.mysql--常用sql（2）
【WebGL】VAO和VBO理解
基于springboot+vue的便捷网住宿预约系统(前后端分离)
给老婆写的，每日自动推送暖心消息
Linux常用命令——clock命令
前端性能优化手段
Filebeat+Kafka+ELK日志分析架构
D-Wave公开演示大规模相干量子退火
JavaEE多线程知识--计时器

原文地址：https://blog.csdn.net/qq_45634593/article/details/134419137