shared Worker页面通信

2026-09-07

实现多个标签页之间通信的几种方法(sharedworker)

效果图.gif prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信.我目前想到的方法有三种:使用websocket协议.通过localstorage.以及使用html5浏览器的新特性SharedWorker. websocket这里先不介绍了,全双工(full-duplex)通信自然可以实现多个标签页之间的通信,相信网上通过websocket实现聊天室的教程也不少接下来会介绍另外两个方法:监听localstorage和使用SharedWorker locals

sharedWorker 实现多页面通信

是这样的,今天玩github,先是在没有登录浏览了一些页面,然后在某一页面进行了登录.这时再切换的其他页面时就看到了下面的提示: 那么这是怎么做到的呢?我们可以想到,一种办法是 localStorage,在某一个页面登录时,修改localStorage 状态,其他页面在显示的时候,读取最新的状态,然后显示提示: // 登录的页面 localStorage.setItem('login', true): // 其他页面 document.addEventListener("visibilitych

渐进式web应用开发---Service Worker 与页面通信(七)

_ 阅读目录一:页面窗口向 service worker 通信二:service worker 向所有打开的窗口页面通信三:service worker 向特定的窗口通信四:学习 MessageChannel 消息通道五:窗口之间的通信六:从sync事件向页面传递消息回到顶部一:页面窗口向 service worker 通信 Service Worker 没有直接操作页面DOM的权限.但是可以通过postMessage方法和web页面进行通信.让页面操作DOM.并且这种操作是双向

Web Worker: Shared Worker的使用

Web Worker: Shared Worker的使用参考资料: JavaScript高级程序第四版 https://juejin.cn/post/7064486575916187656 https://juejin.cn/post/6844904198639714311 [你不知道的Service Worker] https://juejin.cn/post/6963519363492085790 [sharedWorker 实现多页面通信] 一.概述 shared worker,是一

js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.w

学习安卓开发[1] - 程序结构、Activity生命周期及页面通信

一.程序结构 Android原生应用采用了MVC的架构设计模式,因此可以将一个Android APP中的对象归为Model.View或Controller中的一种. 具体到某个实际的APP结构中,它一般会由若干个activity.layout文件和自定义类组成,activity是Android SDK中Activity类的实例,负责管理用户与应用界面的交互,应用的功能是通过编写Activity子类来实现的:layout文件则用于定义需要显示的UI对象以及指定它们在屏幕上所处的位置,layout文

[转]html5: postMessage解决跨域和跨页面通信的问题

[转]html5: postMessage解决跨域和跨页面通信的问题平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = window.open(..)); 页面与嵌套的iframe消息传递 postMessage方法 postMessage是html5引入的API可以更方便.有效.安全的解决这些问题.postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递. p

iframe之父子页面通信

iframe之父子页面通信 1.获取子页面的 window 对象在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindow 可以获取到子页面 window 对象 // iframe id document.getElementById('menuIframe').contentWindow // iframe name window.frames['menuIframe'].window // iframe ind

window.frames && iframe 跨页面通信

1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法假设iframe 是一个以存在的 iframe 的 ID 和 NAME 值,获取iframe的方法有: document.getElementById(“iframe”); (获取的是 iframe 元素,可改变iframe的 src 或者 border , scrolling 等 attributes) window.frames[“iframe”];

js之iframe父、子页面通信

注意事项一 . 页面加载顺序:一般先加载完父页面才会去加载子页面,所以:必须要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误.判断iframe是否加载完成有两种方法: 1. iframe上用onload事件 2. 用document.readyState=="complete"来判断 <iframe name="myFrame" src="2.html"></ifra

微信小程序页面通信

目录微信小程序页面通信方式一:通过URL 方式二:通过全局变量方式三:通过本地存储方式四:通过路由栈微信小程序页面通信方式一:通过URL // A 页面 wx.navigateTo({ url: '/pages/index/index?id=1' }) // index 页面 onLoad(options) { console.log(options.id) // 1 } 方式二:通过全局变量 // a 页面 getApp().PageToPageParams.id = 1 // i

service worker 实现页面通信

sw.js 基本写法: function send_message_to_sw(msg){ navigator.serviceWorker.controller.postMessage("Client 1 says '"+msg+"'"); } 广播写法:信息可以同步作用域下所有页面. self.addEventListener('message', function(event){ console.log(event.data); console.log(even

iframe子页面与父页面通信

同域下父子页面的通信父页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function say(){ alert("调用父页面方法成功"); } function

js Iframe与父级页面通信及IE9-兼容性

一. postMessage window.postMessage()方法安全地启用Window对象之间的跨源通信:例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间. 二.语法 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow:是接收对象的窗体引用,例如:子窗体(iframe)对父级窗体的引用 "window.parent" 或者其他Iframe的引用 “Window

iframe父子页面通信

一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 document.getElementById('iframe_Id').contentWindow // contentWindow 不能省略 (2)通过iframe的name直接获取子窗口的window对象 iframe_Name.window //window可以省略 (3)通过win

HTML父子页面通信问题（showModalDialog）

1. showModalDialog参数说明 window.showModalDialog(URL, ARGS,Features)(在父窗口中调用打开新的窗口) URL -- 必选参数,类型:字符串.用来指定对话框要显示的文档的URL.ARGS -- 可选参数,类型:变体.向窗口中传递参数.在子窗口中使用window.dialogArguments来取得传递进来的参数. Features -- 可选参数,类型:字符串.设置打开窗口的外观属性(height,width等) F

[转]Shared——探究react-native通信机制

原文:https://www.cnblogs.com/android-blogs/p/5623481.html 探究react-native通信机制通信方式我们所说的［通信］,指的是RN中Java和js的通信,也就是js部分中的那些jsx代码是如何转化成一个java层真实的view和事件的,java层又是如何调用js来找出它所需要的那些view和事件的. 简单的说,RN的两端通信靠的是一张配置表,java端和js端持有同一张表,通信的时候就是靠这张表的各个条目的对应来进行的. 大致的就是和上

localstorage实现两个页面通信，购物车原理。

如:A,B页面,A为商品页,B为购物车页,两个页面同时打开,在A页面点击商品添加至购物车,切换到B页面购物车怎么显示该商品信息利用localStroage,A页面将数据存入localStroage,B页面读取localStorage中的数据关键点: B页面如何知道A页面什么时候存数据到localStorage localStorage中有个‘storage’事件 window.addEventListener(‘storage’, callback),A页面存数据,B页面监听事 A页面 <b

pwa-serviceWorker与页面通信postMessage

https://ppt.geekbang.org/list/gmtc2018?from=groupmessage&amp%3Bisappinstalled=0 http://www.sohu.com/a/230096432_355140 HTML 文档未关闭的情况下,ServiceWorker 线程也可能会关闭. 这就意味着 ServiceWorker 不应定义全局变量.另外,ServiceWorker 的 Stop 会 Close MessageChannel,重新启动之后也无法重建原来的 M

js 页面间的通信

看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭我想了半天也没想出来,怎么样不借助node就直接用js生成新页面并输入数据到新页面上以初始化.然后百度,必应搜索(公司电脑安全设置不能用greenshadowFQ,郁闷!),关键词不对,没搜到想要的结果.趁着面试,问了一下考官,关键词是“页面之间的通信”,而且说是有三种方法!这不,折腾了几天,算是小有成果,且把相关的东

[转] 微信小程序页面间通信的5种方式

微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个双Tab框架PageA和PageB,子页面pageB, PageC. 让我们假设这样一个场景:首页PageA有一个飘数,当我们从PageA新开PageC后,做一些操作,再回退到PageA的时候,这个飘数要刷新.很显然,这需要在PageC中做操作时,能通知到PageA,以便PageA做相应的联动变化.

shared Worker页面通信

热门专题