HUA
首页/文章/javascript

跨窗口（标签页）通信方法

2024-05-09
210 字约 1 分钟
...
学习面试

一、前言

最近需求有跨标签页操作，借此总结跨窗口（标签页）通信的常用方法，包括同源和跨域两种情况，给出的示例代码能让你快速上手。

二、同源

localStorage 配合 storage 事件：简单、兼容性好

window.addEventListener('storage', (e) => {
    
    if (e.key != 'wc') return;
    const data = JSON.parse(e.newValue);
    console.log(data);
});

const data = {
    a: 111,
    now: Date.now(), 
};
localStorage.setItem('wc', JSON.stringify(data));

Broadcast Channel API：功能全


const channel = new BroadcastChannel('test_channel');

channel.addEventListener('message', (e) => {
    console.log(e.data);
});

channel.addEventListener('messageerror', (e) => {
    console.error(e);
});

channel.postMessage({
    url: location.href,
    data: '123',
});

三、跨域

利用 iframe 的 postmessage 接口

parent.html（注意修改子页面的 iframe 地址）

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Document</title>
  <style>
    #theIframe {
      width: 450px;
      height: 200px;
    }
  </style>
</head>
<body>
  <h1>Parent</h1>
  <button id="sendBtn">发送消息给子页面</button>
  <p>收到消息：<span id="msg"></span></p>
  
  <iframe src="http://localhost:7002/iframe/child.html" id="theIframe"></iframe>

  <script>
    
    const IFRAME_SOURCE = 'http://localhost:7002';

    theIframe.addEventListener('load', () => {
      try {
        
        theIframe.contentDocument.body.prepend("Hello, world!");
      } catch (err) {
        console.log('iframe 跨域');
      }

      sendBtn.addEventListener('click', () => {
        
        theIframe.contentWindow.postMessage({ command: 'show-text', text: '1' }, IFRAME_SOURCE);
      });
    });

    
    window.addEventListener('message', (e) => {
      
      if (e.origin !== IFRAME_SOURCE) return;

      
      const { command, text } = e.data;
      switch (command) {
        case 'show-text':
          msg.textContent = text;
          break;
      }
    });
  </script>
</body>
</html>

child.html

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Document</title>
</head>
<body>
  <h1>Child</h1>
  <button id="sendBtn">发送消息给父页面</button>
  <p>收到消息：<span id="msg"></span></p>

  <script>
    
    const PARENT_SOURCE = 'http://localhost:7001';

    sendBtn.addEventListener('click', () => {
      
      window.parent.postMessage({ command: 'show-text', text: '3' }, PARENT_SOURCE);
    });

    
    window.addEventListener('message', (e) => {
      if (e.origin !== PARENT_SOURCE) return;
      const { command, text } = e.data;
      switch (command) {
        case 'show-text':
          msg.textContent = text;
          break;
      }

      
      setTimeout(() => {
        e.source.postMessage({ command: 'show-text', text: '2' }, e.origin);
      }, 1000);
    });
  </script>
</body>
</html>

启动示例：

启动子页面服务：npx serve -l 7002
启动父页面服务：npx serve -l 7001
最后访问父页面即可。

如果帮到你了，可以点个赞，欢迎交流沟通。

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
javascript2025-09-18
JavaScript 的多线程能力：Worker
如果你写过一些计算量稍大的 JavaScript 代码，比如图像处理、大量数据排序或者复杂的算法，你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应，动画也停了，就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript，又要负责渲染页面、响应用户操作，一旦它被繁重的计算任务占满，就无暇顾及其他，用户体验便直线下降。 这个问题的根源，正是“主线程是单线程的”。那么，如何解决呢？ 答案很简单：把这...
学习面试
javascript2025-09-10
手把手教你实现一个EventEmitter
你是不是也遇到过这种情况：代码里各种事件监听和触发，回调函数套了一层又一层，最后自己都理不清哪个事件先触发、哪个后触发了？ 别担心，今天我就带你从零开始实现一个自己的事件触发器（EventEmitter），让你彻底掌握事件驱动的精髓，代码清晰度直接提升200%！ 为什么要懂EventEmitter？ 先说说为什么我们要关心这个。Node.js的核心就是事件驱动，比如文件读写、网络请求，都是通过事件来处理的。不会EventEmitter，...
学习面试
javascript2025-08-09
Web Worker 多线程魔法
你是否曾遇到过网页因为复杂计算而卡顿的情况？今天，让我们一起探索Web Worker的神奇世界，看看如何用多线程技术解决性能瓶颈，并实现流畅的图片压缩功能！ 为什么需要Web Worker？ 想象一下，你在一个繁忙的餐厅里，只有一位服务员（主线程）负责点餐、上菜、结账所有工作。当客人突然暴增时，这位服务员就会手忙脚乱，其他客人只能干等着… 这就是JavaScript的现状—— 单线程 ！所有任务都在一个线程中排队执行，一旦遇到复杂计算（...
学习面试
javascript2025-08-07
🌐AST抽象语法树
AST 是前端开发中一个非常重要的概念，它就像是代码的“编译器”，能够帮助我们理解和操作代码。本文将深入探讨 AST 的原理和应用，带你从零开始了解 AST。 一、什么是 AST？ AST（抽象语法树）是一种树形结构，用于表示程序代码的语法结构。它将代码分解为一系列的节点，每个节点代表代码中的一个元素，如变量、函数、表达式等。AST 是编译器和解释器的基础，也是代码分析和转换的关键工具。 1\. AST 的结构 AST 的结构通常包括以...
学习面试
javascript2025-08-05
打字机效果是如何实现的
分析效果 使用 AI 对话的时候，文字是一个字一个字蹦出来的？它不是等所有内容生成完毕后一次性展示，而是以一种流畅、实时的“打字机”效果呈现，这种体验的背后，隐藏着一种高效的Web技术。它就是 服务器推送事件（Server Sent Events，简称 SSE） 什么是 SSE 从根本上说，SSE 是一种允许服务器 单向 、 持续 地向客户端（浏览器）推送数据的Web技术。 可以把它想象成一个 电台广播 ： 服务器 是广播电台，持续不断...
学习面试
javascript2025-08-04
Promise 从原理到实现
前言 是 异步编程的核心概念之一，它为我们提供了一种更优雅的方式来处理异步操作。 本文将全面剖析 的工作原理，并逐步实现一个符合 规范的 。 正文 一、Promise 基础概念 代表一个异步操作的最终完成（或失败）及其结果值。它有 种状态： 1. pending ： ，既不是成功，也不是失败状态 2. fulfilled ：意味着操作 完成 3. rejected ：意味着操作 状态一旦改变就不能再变，只能从 变为 ，或从 变为 。 二...
学习面试

评论

请登录后发表评论

去登录
加载评论中...

目录