CN114385956A - 一种在浏览器多个页签间通讯并更新状态的方法 - Google Patents

一种在浏览器多个页签间通讯并更新状态的方法 Download PDF

Info

Publication number
CN114385956A
CN114385956A CN202210173391.1A CN202210173391A CN114385956A CN 114385956 A CN114385956 A CN 114385956A CN 202210173391 A CN202210173391 A CN 202210173391A CN 114385956 A CN114385956 A CN 114385956A
Authority
CN
China
Prior art keywords
thread
tabs
sharedworker
browser
communicating
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210173391.1A
Other languages
English (en)
Inventor
钱子钦
于希光
江燕
高传集
孙思清
肖雪
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Cloud Information Technology Co Ltd
Original Assignee
Inspur Cloud Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Inspur Cloud Information Technology Co Ltd filed Critical Inspur Cloud Information Technology Co Ltd
Priority to CN202210173391.1A priority Critical patent/CN114385956A/zh
Publication of CN114385956A publication Critical patent/CN114385956A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/23—Updating
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明提供了一种在浏览器多个页签间通讯并更新状态的方法，包括以下步骤：创建sharedworker线程，页签订阅新建线程，页签发送通知给线程，线程给所有已订阅页签发送通知，页签根据收到的通知变化状态，关闭端口。有益效果为：利用了Html5新增的SharedWorker api，在客户端支持SharedWorker并且页签都保证同源(相同的协议，主机和端口号)的基础上采用通过SharedWorker建立新线程来间接的建立页签间通信的通道，从而解决页签间的通讯及状态更新问题，并且可以以较低的成本进行功能上的实现和复用，拓展了单个页签对浏览器可操作的权限。

Description

一种在浏览器多个页签间通讯并更新状态的方法
技术领域
本发明涉及浏览器页签状态更近技术领域，具体为一种在浏览器多个页签间通讯并更新状态的方法。
背景技术
页面标签技术是一种从访客浏览器端收集数据的技术，通常是通过放置在网站中每个页面的javascript代码进行收集的。有些网站分析供应商也会添加一些特定的标签收集额外的信息，这是一种基于客户端的数据收集技术，被主机托管供应商广泛应用。
现有技术中，在浏览器中，因安全策略的限制页签间缺乏一种直接的手段来进行相互通信，因此当有需求需要页签间进行相互通信时，技术人员需要采取一些间接的方法建立起页签间的通信通道。
但是，上述操作方法的浏览器页签只能对自身的内容进行操作，页签间不能直接进行通信，即当客户端支持SharedWorker并且页签都保持同源(相同的协议，主机和端口号)的情况下,页签A的页面状态依赖于页签B的变化时缺乏一种直接的方法去连接多个页签间的通信的问题。
发明内容
本发明的目的在于提供一种在浏览器多个页签间通讯并更新状态的方法，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种在浏览器多个页签间通讯并更新状态的方法，包括以下步骤：
创建sharedworker线程，检查客户端的浏览器是否存在SharedWorker api，在客户端支持SharedWorker并且页签都保证同源，即相同的协议，主机和端口号的基础下，通过SharedWorker api加载SharedWorker的js配置文件，因此js配置文件需要单独打包，在浏览器js主线程外新增一条线程；
页签订阅新建线程，将所有页签都订阅这个新建的线程，订阅后页签与线程间就已经建立起了一条通信的管道，之后页签就可以向新线程接收或发送消息；
页签发送通知给线程，当某一个页签状态发生改变时调用通信通道的postMessage方法发送通知去告知线程；
线程给所有已订阅页签发送通知，线程接收到页签发送的通知后会发送广播给所有已经订阅当前线程的页签，或者通过筛选发送给指定的页签；
页签根据收到的通知变化状态，单个页签在收到广播后触发绑定的回调函数对收到的数据进行解析并根据广播的内容自行决定是否发生页面的变化；
关闭端口，不再需要使用SharedWorker时关闭端口。
优选的，创建sharedworker线程步骤中，worker线程执行的脚本文件必须和主线程的脚本文件同源。
优选的，创建sharedworker线程步骤中，worker线程无法读取本地文件，它所加载的脚本必须来自网络，且需要与主线程的脚本同源。
优选的，创建sharedworker线程步骤中，worker线程在与主线程的window不同的另一个全局上下文中运行，其中无法读取主线程所在网页的DOM对象，也不能获取document、window等对象，但是可以获取navigator、location、XMLHttpRequest、setTimeout族等浏览器API。
优选的，创建sharedworker线程步骤中，worker线程与主线程不在同一个上下文，不能直接通信，需要通过postMessage方法来通信。
优选的，创建sharedworker线程步骤中，worker线程不能执行alert、confirm，但可以使用XMLHttpRequest对象发出ajax请求。
优选的，创建sharedworker线程步骤中，同一个js url只会创建一个sharedWorker，其他页面再使用同样的url创建sharedWorker，会复用已创建的worker，这个worker由那几个页面共享，sharedWorker通过port来发送和接收消息。
优选的，页签订阅新建线程步骤中，在接收消息前需要在页签内绑定当前通信通道接收到消息的回调函数，通过回调函数来解析收到的消息并根据消息来进行页面的更新。
优选的，页签发送通知给线程步骤中，postMessage方法只接收字符串，因此如果需要发送Object类型的数据需要先对数据类型进行转化。
优选的，线程给所有已订阅页签发送通知步骤中，通过设置SharedWorker js配置文件中信道的回调函数，筛选出需要发送消息的信道。
与现有技术相比，本发明的有益效果是：
本发明提出的在浏览器多个页签间通讯并更新状态的方法利用了Html5新增的SharedWorker api，在客户端支持SharedWorker并且页签都保证同源(相同的协议，主机和端口号)的基础上采用通过SharedWorker建立新线程来间接的建立页签间通信的通道，从而解决页签间的通讯及状态更新问题，并且可以以较低的成本进行功能上的实现和复用，拓展了单个页签对浏览器可操作的权限；解决了当客户端支持SharedWorker并且页签都保持同源(相同的协议，主机和端口号)的情况下,页签A的页面状态依赖于页签B的变化时缺乏一种直接的方法去连接多个页签间的通信的问题。
附图说明
图1为本发明方法流程图。
具体实施方式
为了使本发明的目的、技术方案进行清楚、完整地描述，及优点更加清楚明白，以下结合附图对本发明实施例进行进一步详细说明。应当理解，此处所描述的具体实施例是本发明一部分实施例，而不是全部的实施例，仅仅用以解释本发明实施例，并不用于限定本发明实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在本发明的描述中，需要说明的是，术语“中心”、“中”、“上”、“下”、“左”、“右”、“内”、“外”、“顶”、“底”、“侧”、“竖直”、“水平”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“一”、“第一”、“第二”、“第三”、“第四”、“第五”、“第六”仅用于描述目的，而不能理解为指示或暗示相对重要性。
在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
出于简明和说明的目的，实施例的原理主要通过参考例子来描述。在以下描述中，很多具体细节被提出用以提供对实施例的彻底理解。然而明显的是，对于本领域普通技术人员，这些实施例在实践中可以不限于这些具体细节。在一些实例中，没有详细地描述公知方法和结构，以避免无必要地使这些实施例变得难以理解。另外，所有实施例可以互相结合使用。
请参阅图1，本发明提供一种技术方案：一种在浏览器多个页签间通讯并更新状态的方法，其特征在于，包括以下步骤：
创建sharedworker线程，检查客户端的浏览器是否存在SharedWorker api，在客户端支持SharedWorker并且页签都保证同源，即相同的协议，主机和端口号的基础下，通过SharedWorker api加载SharedWorker的js配置文件，因此js配置文件需要单独打包，在浏览器js主线程外新增一条线程；
其中，worker线程执行的脚本文件必须和主线程的脚本文件同源；worker线程无法读取本地文件，它所加载的脚本必须来自网络，且需要与主线程的脚本同源；worker线程在与主线程的window不同的另一个全局上下文中运行，其中无法读取主线程所在网页的DOM对象，也不能获取document、window等对象，但是可以获取navigator、location、XMLHttpRequest、setTimeout族等浏览器API；worker线程与主线程不在同一个上下文，不能直接通信，需要通过postMessage方法来通信；worker线程不能执行alert、confirm，但可以使用XMLHttpRequest对象发出ajax请求；
同一个js url只会创建一个sharedWorker，其他页面再使用同样的url创建sharedWorker，会复用已创建的worker，这个worker由那几个页面共享，sharedWorker通过port来发送和接收消息
页签订阅新建线程，将所有页签都订阅这个新建的线程，订阅后页签与线程间就已经建立起了一条通信的管道，之后页签就可以向新线程接收或发送消息；在接收消息前需要在页签内绑定当前通信通道接收到消息的回调函数，通过回调函数来解析收到的消息并根据消息来进行页面的更新；
页签发送通知给线程，当某一个页签状态发生改变时调用通信通道的postMessage方法发送通知去告知线程；postMessage方法只接收字符串，因此如果需要发送Object类型的数据需要先对数据类型进行转化；
线程给所有已订阅页签发送通知，线程接收到页签发送的通知后会发送广播给所有已经订阅当前线程的页签，或者通过筛选发送给指定的页签，通过设置SharedWorker js配置文件中信道的回调函数，筛选出需要发送消息的信道；
页签根据收到的通知变化状态，单个页签在收到广播后触发绑定的回调函数对收到的数据进行解析并根据广播的内容自行决定是否发生页面的变化；
关闭端口，不再需要使用SharedWorker时关闭端口。
Worker是Web Workers API的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息；要创建一个Worker，只须调用Worker(URL)构造函数，函数参数`URL`为指定的脚本；Worker也可以创建新的Worker，当然，所有Worker必须与其创建者同源；用户使用浏览器一般会打开多个(Tab)，现代浏览器使用单独的进程渲染每个页面，以提升页面性能和稳定性，并进行操作系统级别的内存隔离；页面中，内容渲染和用户交互主要由Render Process中的主线程进行管理，主线程渲染页面每一帧(Frame)；JS单线程和Event Loop，是主线程的一部分，JS单线程的机制避免了多线程开发中的复杂场景(如竞态和死锁)，但单线程的主要困扰是：主线程同步JS执行耗时过久时(浏览器理想帧间隔约16ms)，会阻塞用户交互和页面渲染；长耗时任务执行时，页面无法更新，业务发响应用户的交互事件，如果卡死太久，浏览器会抛出卡顿提示，Web Worker会创建操作系统级别的线程，JS多线程，是有独立于主线程的JS运行环境,多个线程可以并行运行JS；这里的并行区别于单线程中的并发，单线程中的并发准确的说叫Concurrent，运行时只有一个函数调用栈，通过Event Loop实现不同Task的上下文切换(Context Switch)，这些Task通过BOM API调起其他线程为主线程工作，但回调函数代码逻辑仍然由JS串行运行。
Web Workers使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主(通常是UI)线程运行而不被阻塞；它的作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程；这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢，这并不意味着JS语言本身支持了多线程能力，而是浏览器作为宿主环境提供了JS一个多线程运行的环境。
不过因为worker一旦新建，就会一直运行，不会被主线程的活动打断，这样有利于随时响应主线程的通性，但是也会造成资源的浪费，所以不应过度使用，用完注意关闭；或者说：如果worker无实例引用，该worker空闲后立即会被关闭；如果worker实列引用不为0，该worker空闲也不会被关闭。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (10)

1.一种在浏览器多个页签间通讯并更新状态的方法，其特征在于，包括以下步骤：
创建sharedworker线程，检查客户端的浏览器是否存在SharedWorker api，在客户端支持SharedWorker并且页签都保证同源，即相同的协议，主机和端口号的基础下，通过SharedWorker api加载SharedWorker的js配置文件，因此js配置文件需要单独打包，在浏览器js主线程外新增一条线程；
页签订阅新建线程，将所有页签都订阅这个新建的线程，订阅后页签与线程间就已经建立起了一条通信的管道，之后页签就可以向新线程接收或发送消息；
页签发送通知给线程，当某一个页签状态发生改变时调用通信通道的postMessage方法发送通知去告知线程；
线程给所有已订阅页签发送通知，线程接收到页签发送的通知后会发送广播给所有已经订阅当前线程的页签，或者通过筛选发送给指定的页签；
页签根据收到的通知变化状态，单个页签在收到广播后触发绑定的回调函数对收到的数据进行解析并根据广播的内容自行决定是否发生页面的变化；
关闭端口，不再需要使用SharedWorker时关闭端口。
2.根据权利要求1所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：创建sharedworker线程步骤中，worker线程执行的脚本文件必须和主线程的脚本文件同源。
3.根据权利要求2所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：创建sharedworker线程步骤中，worker线程无法读取本地文件，它所加载的脚本必须来自网络，且需要与主线程的脚本同源。
4.根据权利要求3所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：创建sharedworker线程步骤中，worker线程在与主线程的window不同的另一个全局上下文中运行，其中无法读取主线程所在网页的DOM对象，也不能获取document、window等对象，但是可以获取navigator、location、XMLHttpRequest、setTimeout族等浏览器API。
5.根据权利要求4所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：创建sharedworker线程步骤中，worker线程与主线程不在同一个上下文，不能直接通信，需要通过postMessage方法来通信。
6.根据权利要求5所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：创建sharedworker线程步骤中，worker线程不能执行alert、confirm，但可以使用XMLHttpRequest对象发出ajax请求。
7.根据权利要求6所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：创建sharedworker线程步骤中，同一个js url只会创建一个sharedWorker，其他页面再使用同样的url创建sharedWorker，会复用已创建的worker，这个worker由那几个页面共享，sharedWorker通过port来发送和接收消息。
8.根据权利要求7所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：页签订阅新建线程步骤中，在接收消息前需要在页签内绑定当前通信通道接收到消息的回调函数，通过回调函数来解析收到的消息并根据消息来进行页面的更新。
9.根据权利要求8所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：页签发送通知给线程步骤中，postMessage方法只接收字符串，因此如果需要发送Object类型的数据需要先对数据类型进行转化。
10.根据权利要求9所述的一种在浏览器多个页签间通讯并更新状态的方法，其特征在于：线程给所有已订阅页签发送通知步骤中，通过设置SharedWorker js配置文件中信道的回调函数，筛选出需要发送消息的信道。
CN202210173391.1A 2022-02-24 2022-02-24 一种在浏览器多个页签间通讯并更新状态的方法 Pending CN114385956A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210173391.1A CN114385956A (zh) 2022-02-24 2022-02-24 一种在浏览器多个页签间通讯并更新状态的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210173391.1A CN114385956A (zh) 2022-02-24 2022-02-24 一种在浏览器多个页签间通讯并更新状态的方法

Publications (1)

Publication Number Publication Date
CN114385956A true CN114385956A (zh) 2022-04-22

Family

ID=81206407

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210173391.1A Pending CN114385956A (zh) 2022-02-24 2022-02-24 一种在浏览器多个页签间通讯并更新状态的方法

Country Status (1)

Country Link
CN (1) CN114385956A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116955874A (zh) * 2023-09-20 2023-10-27 北京中关村科金技术有限公司 页面处理方法、装置、电子设备和计算机可读存储介质
CN117270854A (zh) * 2023-11-17 2023-12-22 江西格如灵科技股份有限公司 一种基于ugui的树形折叠结构页签创建方法和系统

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116955874A (zh) * 2023-09-20 2023-10-27 北京中关村科金技术有限公司 页面处理方法、装置、电子设备和计算机可读存储介质
CN116955874B (zh) * 2023-09-20 2023-12-26 北京中关村科金技术有限公司 页面处理方法、装置、电子设备和计算机可读存储介质
CN117270854A (zh) * 2023-11-17 2023-12-22 江西格如灵科技股份有限公司 一种基于ugui的树形折叠结构页签创建方法和系统
CN117270854B (zh) * 2023-11-17 2024-02-23 江西格如灵科技股份有限公司 一种基于ugui的树形折叠结构页签创建方法和系统

Similar Documents

Publication Publication Date Title
CN114385956A (zh) 一种在浏览器多个页签间通讯并更新状态的方法
CN106371932B (zh) 一种基于zookeeper的信息配置方法及装置
CN109150572B (zh) 实现告警关联的方法、装置以及计算机可读存储介质
CN103067230A (zh) 一种通过植入监控代码实现对http服务监控的方法
US11150896B2 (en) Automated generation of service definitions for message queue application clients
CN104834582B (zh) 一种监控事件展示方法
CN107908488B (zh) 消息请求接口交互方法、装置、计算机设备及存储介质
CN111190892B (zh) 一种数据回填中处理异常数据的方法和装置
US9021456B2 (en) Using collaborative annotations to specify real-time process flows and system constraints
CN108462598A (zh) 一种日志生成方法、日志分析方法及装置
US10489179B1 (en) Virtual machine instance data aggregation based on work definition metadata
CN111949484B (zh) 信息处理方法、装置、电子设备和介质
CN111381832B (zh) 自动化部署控制方法、装置、计算机设备及存储介质
CN113553260B (zh) 测试方法、测试装置、设备和介质
US7496891B2 (en) Real-time dynamic modification of service-oriented systems using annotations to specify real-time system constraints
US7502822B2 (en) Using collaborative annotations to specify real-time process flows and system constraints
CN116700779A (zh) 代码动态调整方法、装置、设备、介质和程序产品
CN112422349B (zh) 面向nfv的网管系统、方法、设备及介质
CN112702441B (zh) 基于容器的访问数据处理方法、装置、系统及存储介质
CN114816477A (zh) 服务器升级方法、装置、设备、介质和程序产品
CN115514618A (zh) 告警事件的处理方法、装置、电子设备和介质
CN115220992A (zh) 接口变更监控方法、装置、计算机设备和存储介质
EP4024761A1 (en) Communication method and apparatus for multiple management domains
US12035156B2 (en) Communication method and apparatus for plurality of administrative domains
Benetti et al. Design and Implementation of a Software Vulnerabilities and Application Research Tool

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination