js BroadcastChannel 页面消息传输

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量172 收藏
点赞数
文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42473322/article/details/129379247
版权
通过创建BroadcastChannel对象，可以在不同的浏览器标签页或窗口之间进行实时的数据传递。在发送页面上，创建channel并调用postMessage方法发送数据；在接收页面，同样创建channel并监听onmessage事件来接收和处理数据。
摘要由CSDN通过智能技术生成

创建 BroadcastChannel

想传数据的页面

   var channel =  new BroadcastChannel("mul");
       channel.postMessage({
           value: "无敌"//消息内容
       })

接收的页面

var channel =   new BroadcastChannel("mul");
      channel.onmessage = function (e) {
          console.log(e.data)//接收的消息
      }
DM_小骆驼
关注
JS_BroadcastChannel 跨标签页通信
小歪博客
06-20 328
【代码】JS_BroadcastChannel 跨标签页通信。
【JS】1678- 重学 JavaScript API - Broadcast Channel API
pingan8787
05-10 376
当我们网页需要在不同的浏览器窗口之间共享数据时，可能需要使用 WebSocket 或 WebRTC 等技术。但是，这些技术会过于复杂。而浏览器自带的 Broadcast Channel API[1] 可以让我们轻松地在不同浏览器窗口之间共享数据，而无需使用复杂的技术。本文将介绍 Broadcast Channel API 的基本和高级使用方法，并提供示例代码来帮助读者更好地理解和使用该 API。????...
JS的BroadcastChannel与MessageChannel
qq_44849271的博客
03-09 1505
BroadcastChannel以广播的形式进行通信BroadcastChannel用于创建浏览器标签页之间的通信使用BroadcastChannel的浏览器标签页面必须要遵循同源策略页面1使用BroadcastChannel创建一个频道，页面2使用BroadcastChannel链接频道，页面1与页面2即可通信。实例。
JavaScript第 17 篇，JavaScript中的new BroadcastChannel()方法，BroadcastChannel API使用介绍
weixin_65793170的博客
05-05 1404
⭐BroadcastChannel API用于跨窗口、跨标签页和跨框架之间的通信，它使得多个客户端能够订阅同一个消息频道，并且在其中一个客户端发送消息后，所有订阅该频道的客户端都会收到相同的消息。
两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？
weixin_36278346的博客
06-07 2758
引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会更新。跨页面通信实例这就是我们所说的前端跨页面...
静态页面间传值实例静态页面间传值实例
04-09
7. **自定义事件和消息传递**：利用`MutationObserver`或`BroadcastChannel` API，可以在同一个浏览器窗口的不同页面间创建通信通道，实现页面间的实时数据传递。 8. **文件存储**：在用户许可的情况下，可以将数据...
单线程JavaScript的多线程方式：工作者线程
hhhh
03-31 861
工作者线程 JavaScript单线程，意味着它不可以像多线程语言那样把工作委托给独立的线程和进程去做，但是单线程可以保证它与不同浏览器API兼容。而且多线程意味着它与DOM这样的API就会出现问题 工作者线程：允许把主线程的工作转嫁给独立的实体，而不会改变现有的单线程模型。 各种工作者线程有不同的形式和功能，但他们都是独立于JavaScript的主执行环境。 ...
《现代JavaScript高级教程》前端跨页面通信：实现页面间的数据传递与交互
linwu的博客
07-09 1010
前端跨页面通信是指在不同的浏览器页面或标签页之间进行数据传递和交互的过程。在单页面应用（Single-Page Application）中，这种通信往往是在同一页面的不同组件之间进行的，而在多页面应用（Multi-Page Application）中，通信涉及到不同的页面之间的数据传递和交互。前端跨页面通信的目的是实现不同页面之间的信息共享和协作，使得用户在不同页面间的操作能够产生相应的效果和影响。在不同页面之间传递数据和状态。发送消息和通知。同步数据和状态的更新。实现页面间的协作和交互操作。
基于 Vue3打造前台+中台通用提效解决方案（下）
oschina_41559824的博客
03-04 849
attribute 的时候，它的 CSS 只会影响当前组件的元素，和 Shadow DOM 中的样式封装类似。根据我们本章的内容可以发现，整个的第三方登录逻辑还是比较复杂的，特别是微信的第三方登录步骤更加繁琐。所谓倒计时，其实更多的是一个时间的处理，那么对于时间的处理，此时我们就需要使用到一个第三方的包: dayis。注意：扫码成功重定向的地址是在小窗口打开的、并不是在原来的窗口打开、登录成功的回调也是在小窗口中回调。在对接微博分享之前，我们还是按照老规矩，先来说一下所谓的分享，指的是什么。
如何在JavaScript中使用BroadcastChannel API
08-15 1596
The BroadcastChannel API is a new web platform API that lets you communicate between different windows/tabs/iframes of the same origin. Using BroadcastChannel may sound fancy and daunting but it is su...
BroadCast Channel
zhouhao620的博客
04-11 1030
BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当监听同一频道的某个页面通过它发送消息时就会被其他所有页面收到。 // 使用构造函数创建一个实例，可以接受一个DOMString作为频道的name标识。在其他页面，可以通过传入相同的name来使用同一个广播频道。 const bc = new BroadcastChannel("broadcast"); // 监听消息 /...
跨页面通信BroadcastChannel
axzzy的博客
08-16 565
BroadcastChannel，这个方式，只要是在同一原始域和用户代理下，所有窗口、iframe之间都可以进行交互。这个感觉就有点类似于广播了。 1，父页面发送数据 var BroadcastChanne1 = new BroadcastChannel('name');//创建一个名字是name BroadcastChannel对象 //广播值 BroadcastChanne1.postMessage("data") 2，子页面接收 var var BroadcastChanne1 = new
BroadcastChannel通讯-1.1
caishu1995的博客
06-13 2253
    就目前而言，感觉postMessage更多可能是界面与界面直接的通讯，更像单点通讯。如果现在想进行类似广播的多点接收通讯的方式，怎么做呢？     现在我们来看看这个方式吧——BroadcastChannel。     这个方式，只要是在同一原始域和用户代理下，所有窗口、iframe之间都可以进行交互。这个感觉就有点类似于广播了。     那怎么玩呢？    1、在一个页面上，触...
BroadcastChannel-[跨页面传值]
席木木的博客
10-11 527
之前有使用window.postMessage和window.onMessage的方式跨页面传值操作，window.postMessage()方法可以安全地实现Window对象之间的跨域通信。基于BroadcastChannel的传值方法，可以摆脱这种弊端，实现更加自由的跨页面传值操作。
js实现浏览器不同页签之间通信
haluodepaopao的博客
03-29 416
1.创建一个SharedWorker实例，并在其中编写处理消息的代码。一. 使用BroadcastChannel。二. 使用SharedWorker。
js MessageChannel通道传输
weixin_43294560的博客
02-15 2086
window.MessageChannel也是浏览器提供的一个异步操作的API，属于宏任务 这个api会创建一个管道，管道的两端分别代表一个messagePort，都能够通过portMessage向对方发送数据，通过onmessage来接受对方发送过来的数据 基本使用 const ch = new MessageChannel() const port1 = ch.port1 const port2 = ch.port2 port1.onmessage = function(d) { conso
BroadcastChannel页面间通讯
热门推荐
q1424966670的博客
04-22 3万+
BroadcastChannel，这个方式，只要是在同一原始域和用户代理下，所有窗口、iframe之间都可以进行交互。这个感觉就有点类似于广播了。 1，父页面发送数据 var BroadcastChanne1 = new BroadcastChannel('load1');//创建一个名字是load1的BroadcastChannel对象。记住这个名字，下面会用到 BroadcastCha...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 854
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 474
【代码】【JavaScript】LeetCode：707设计链表。
js实现跨页面传输数据
05-29
在不同页面之间传输数据，有多种方法可以实现。以下是其中几种常见的方法： 1. 使用localStorage或sessionStorage localStorage和sessionStorage都是H5提供的本地存储API，可以在浏览器中存储键值对数据。它们的区别在于localStorage数据会一直保存，直到手动清除，而sessionStorage数据只在当前会话中有效，关闭浏览器窗口后会被清除。因此，如果需要在不同页面之间共享数据，可以使用localStorage。 假设在页面A中需要传输数据到页面B，可以在页面A中使用以下代码存储数据： ```javascript localStorage.setItem('data', 'hello world'); ``` 在页面B中获取数据： ```javascript var data = localStorage.getItem('data'); ``` 需要注意的是，如果在同一浏览器中打开的多个窗口都需要访问同一个localStorage，那么需要注意不同窗口中访问localStorage时的同步问题。 2. 使用URL参数传递数据 在URL中传递参数是一种常用的传输数据的方式。在页面A中，可以通过URL参数的形式传递数据到页面B： ```javascript var data = 'hello world'; window.open('pageB.html?data=' + encodeURIComponent(data)); ``` 在页面B中获取数据： ```javascript var data = decodeURIComponent(location.search.substring(1).split('=')[1]); ``` 需要注意的是，URL参数传递的数据大小有限制，不同浏览器的限制大小也不同，因此在传输数据时需要注意大小限制。 3. 使用cookie 使用cookie也可以在不同页面之间传输数据。在页面A中，可以设置cookie： ```javascript document.cookie = 'data=hello world'; ``` 在页面B中获取数据： ```javascript var data = document.cookie.split('; ').find(row => row.startsWith('data=')).split('=')[1]; ``` 需要注意的是，cookie也有大小限制，而且cookie的生命周期可以自行设置，需要在存储时设置cookie的过期时间。此外，cookie还需要注意跨域问题，只有在同一域名下才能访问同一cookie。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值