CN115994280A - 一种浏览器标签页通信方法、系统、电子设备及存储介质 - Google Patents
一种浏览器标签页通信方法、系统、电子设备及存储介质 Download PDFInfo
- Publication number
- CN115994280A CN115994280A CN202310286066.0A CN202310286066A CN115994280A CN 115994280 A CN115994280 A CN 115994280A CN 202310286066 A CN202310286066 A CN 202310286066A CN 115994280 A CN115994280 A CN 115994280A
- Authority
- CN
- China
- Prior art keywords
- function
- sending
- page
- browser tab
- communication method
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 38
- 230000006854 communication Effects 0.000 title claims abstract description 27
- 238000004891 communication Methods 0.000 title claims abstract description 23
- 230000004044 response Effects 0.000 claims abstract description 28
- 230000005540 biological transmission Effects 0.000 claims abstract description 10
- 238000012544 monitoring process Methods 0.000 claims abstract description 9
- 238000012545 processing Methods 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 6
- 230000008569 process Effects 0.000 claims description 3
- 230000008878 coupling Effects 0.000 abstract description 2
- 238000010168 coupling process Methods 0.000 abstract description 2
- 238000005859 coupling reaction Methods 0.000 abstract description 2
- 230000006870 function Effects 0.000 description 40
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种浏览器标签页通信方法、系统、电子设备及存储介质，包括调用发送页面的发送函数向目标页面发送消息事件，消息事件包括发送数据以及目标页面地址；目标页面调用监听函数对消息事件进行监听，并将监听到发送函数的响应信息发送给发送页面。本发明基于postMessage的浏览器标签页实时通信方法与流程，使其达到一对一的发送响应模式，有效的解决了消息重复造成错误结果，确保了消息准确到达，简化消息协议，降低数据协议的耦合度，提高了协议的复用。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种浏览器标签页通信方法、系统、电子设备及存储介质。
背景技术
目前实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。
postMssage就是其中的一种方式。postMssage通信是分发一个 MessageEvent 消息，是将消息放入消息队列中发出广播，是一种广播模式。这种模式是一个消息可以发送到多个接收者，但是接收者有没有接收到，广播者不知道，可能导致消息重复造成错误结果；如果广播者的下步操作依赖于接收者的反馈，就会导致功能无法实现。
发明内容
针对上述问题中存在的不足之处，本发明提供一种浏览器标签页通信方法、系统、设备及存储介质。
为实现上述目的，本发明提供一种浏览器标签页通信方法，包括：
调用发送页面的发送函数向目标页面发送消息事件，所述消息事件包括发送数据以及所述目标页面地址；
所述目标页面调用监听函数对所述消息事件进行监听，并将监听到所述发送函数的响应信息发送给所述发送页面。
优选的是，调用所述发送页面的发送函数的过程中产生一识别码和与所述识别码对应的一Promise对象，并将所述识别码和所述Promise对象均存储至Map中。
优选的是，定义Promise对象状态的返回值，状态为发送状态，则所述返回值为N，状态为响应状态，则所述返回值为M，N和M均为正整数且取数不相同。
优选的是，所述目标页面将接收到的所述发送数据转换成json，并从所述Map中查找所述json中的所述识别码对应的Promise对象的resolve函数，所述发送页面通过所述resolve函数获得响应信息。
优选的是，所述目标页面将接收到的所述发送数据转换成json，并创建一callback函数，调用所述callback函数将响应信息发送给所述发送页面。
优选的是，调用所述callback函数包括：
将所述Promise对象状态修改为响应状态；
将所述识别码、所述响应状态对应返回值和所述发送数据转成字符串；
调用postMessage函数发送给所述发送页面。
优选的是，所述发送函数为postMessage函数，所述监听函数为addEventListener函数。
本发明还提供一种浏览器标签页通信系统，包括：
发送模块，用于调用发送页面的发送函数向目标页面发送消息事件，所述消息事件包括发送数据以及所述目标页面地址；
响应模块，用于所述目标页面调用监听函数对所述消息事件进行监听，并将监听到所述发送函数的响应信息发送给所述发送页面。
本发明还提供一种电子设备，包括至少一个处理单元以及至少一个存储单元，其中，所述存储单元存储有计算机程序，当所述程序被所述处理单元执行时，使得所述处理单元执行上述的方法。
本发明还提供一种存储介质，其存储有可由电子设备执行的计算机程序，当所述程序在所述电子设备上运行时，使得所述电子设备执行上述的方法。
与现有技术相比，本发明的有益效果为：
本发明基于postMessage的浏览器标签页实时通信方法与流程，使其达到一对一的发送响应模式，有效的解决了消息重复造成错误结果，确保了消息准确到达，简化消息协议，降低数据协议的耦合度，提高了协议的复用。
附图说明
图1是本发明浏览器标签页通信方法的流程图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
参照图1，本发明提供一种浏览器标签页通信方法，方法包括：
调用发送页面的发送函数向目标页面发送消息事件，消息事件包括发送数据以及目标页面地址；
目标页面调用监听函数对消息事件进行监听，并将监听到发送函数的响应信息发送给发送页面。
具体地，在postMessage的基础上定义消息协议和添加一个事件管理器，事件管理器有两个API接口，一个为sendMsg接口，用于发送消息（method：string，data：object），返回一Promise对象，且响应结果在Promise对象的resolve回调函数中；一个为onMsg接口，用于监听消息（method:string,listener:function(data,done)），参数listener，监听发送函数的回调函数;listener调用有两个参数data1和done回调,data1是sendMsg发送过来的数据，done响应发送者回调函数,done回调参数data2响应给发送者的数据。
在本实施例中，消息发送函数为postMessage函数，监听函数为addEventListener函数。且调用发送页面的发送函数的过程中产生一识别码uuid和与识别码对应的一Promise对象，并将识别码和Promise对象均存储至Map中。再把status,uuid,method,data转成字符转params，通过调用window.postMessage(params,"*")发送出去。注意status和uuid 是在sendMsg函数内部操作。
进一步地，预先定义Promise对象状态的返回值，状态为发送状态，则返回值为N，状态为响应状态，则返回值为M，N和M均为正整数且取数不相同。例如1为发送状态，2为响应状态。
在本实施例中，目标页面调用监听函数对消息事件进行监听，即为监听window.onmessage,即window.addEventListener("message", callback, false)，其有两种情况:一种响应自己发送，另一种是响应别人发送。
响应自己发送：
目标页面将接收到的发送数据转换成json，并从Map中查找json中的识别码对应的Promise对象的resolve函数，判断status=2，取出并调用resolve方法传参data，即可在sendMsg(method，data).then 中拿到响应的数据。
响应别人发送：
在调用onMsg(method:sting,listener:function(data,done))方法时，会在Map中存储以method为key,listener为值的数据，目标页面将接收到的发送数据转换成json，并创建一callback函数，调用callback函数将响应信息发送给发送页面。
调用callback函数包括：
将Promise对象状态修改为响应状态；
将识别码、响应状态对应返回值和发送数据转成字符串；
调用window.postMessage(params,"*")发送给发送页面。
具体地，调用callback函数时并调用，listener，即在onMsg的listener中就能拿到发送过来的值data，done；通过json数据中method在Map查找对应的listener，传入data；调用listener的done方法,传入数据data，实现了响应消息给发送页面。
本发明还提供一种浏览器标签页通信系统，包括：
发送模块，用于调用发送页面的发送函数向目标页面发送消息事件，消息事件包括发送数据以及目标页面地址；
响应模块，用于目标页面调用监听函数对消息事件进行监听，并将监听到发送函数的响应信息发送给发送页面。
本发明还提供一种电子设备，包括至少一个处理单元以及至少一个存储单元，其中，存储单元存储有计算机程序，当程序被处理单元执行时，使得处理单元执行上述的方法。
本发明还提供一种存储介质，其存储有可由电子设备执行的计算机程序，当程序在电子设备上运行时，使得电子设备执行上述的方法。
以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.一种浏览器标签页通信方法，其特征在于，包括：
调用发送页面的发送函数向目标页面发送消息事件，所述消息事件包括发送数据以及所述目标页面地址；
所述目标页面调用监听函数对所述消息事件进行监听，并将监听到所述发送函数的响应信息发送给所述发送页面。
2.根据权利要求1所述的浏览器标签页通信方法，其特征在于，调用所述发送页面的发送函数的过程中产生一识别码和与所述识别码对应的一Promise对象，并将所述识别码和所述Promise对象均存储至Map中。
3.根据权利要求2所述的浏览器标签页通信方法，其特征在于，定义Promise对象状态的返回值，状态为发送状态，则所述返回值为N，状态为响应状态，则所述返回值为M，N和M均为正整数且取数不相同。
4.根据权利要求3所述的浏览器标签页通信方法，其特征在于，所述目标页面将接收到的所述发送数据转换成json，并从所述Map中查找所述json中的所述识别码对应的Promise对象的resolve函数，所述发送页面通过所述resolve函数获得响应信息。
5.根据权利要求3所述的浏览器标签页通信方法，其特征在于，所述目标页面将接收到的所述发送数据转换成json，并创建一callback函数，调用所述callback函数将响应信息发送给所述发送页面。
6.根据权利要求5所述的浏览器标签页通信方法，其特征在于，调用所述callback函数包括：
将所述Promise对象状态修改为响应状态；
将所述识别码、所述响应状态对应返回值和所述发送数据转成字符串；
调用postMessage函数发送给所述发送页面。
7.根据权利要求1所述的浏览器标签页通信方法，其特征在于，所述发送函数为postMessage函数，所述监听函数为addEventListener函数。
8.一种浏览器标签页通信系统，其特征在于，包括：
发送模块，用于调用发送页面的发送函数向目标页面发送消息事件，所述消息事件包括发送数据以及所述目标页面地址；
响应模块，用于所述目标页面调用监听函数对所述消息事件进行监听，并将监听到所述发送函数的响应信息发送给所述发送页面。
9.一种电子设备，其特征在于，包括至少一个处理单元以及至少一个存储单元，其中，所述存储单元存储有计算机程序，当所述程序被所述处理单元执行时，使得所述处理单元执行权利要求1～7任一权利要求所述的方法。
10.一种存储介质，其特征在于，其存储有可由电子设备执行的计算机程序，当所述程序在所述电子设备上运行时，使得所述电子设备执行权利要求1～7任一权利要求所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310286066.0A CN115994280A (zh) | 2023-03-23 | 2023-03-23 | 一种浏览器标签页通信方法、系统、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310286066.0A CN115994280A (zh) | 2023-03-23 | 2023-03-23 | 一种浏览器标签页通信方法、系统、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115994280A true CN115994280A (zh) | 2023-04-21 |
Family
ID=85993769
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310286066.0A Pending CN115994280A (zh) | 2023-03-23 | 2023-03-23 | 一种浏览器标签页通信方法、系统、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115994280A (zh) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104410722A (zh) * | 2014-12-19 | 2015-03-11 | 上海斐讯数据通信技术有限公司 | 一种Web页面窗口对象的通信方法及系统 |
| CN110110274A (zh) * | 2019-05-17 | 2019-08-09 | 极智(上海)企业管理咨询有限公司 | 一种浏览器多页面消息处理分发方法 |
-
2023
- 2023-03-23 CN CN202310286066.0A patent/CN115994280A/zh active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104410722A (zh) * | 2014-12-19 | 2015-03-11 | 上海斐讯数据通信技术有限公司 | 一种Web页面窗口对象的通信方法及系统 |
| CN110110274A (zh) * | 2019-05-17 | 2019-08-09 | 极智(上海)企业管理咨询有限公司 | 一种浏览器多页面消息处理分发方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP1729444B1 (en) | A snmp-based asynchronous communication mechanism process method | |
| CN113630465B (zh) | 消息处理方法、装置、设备以及存储介质 | |
| US9058372B2 (en) | Database management in a wireless communication system | |
| CN112839083B (zh) | 一种数据传输方法及装置、可读存储介质 | |
| CN108134801B (zh) | 一种基于消息过滤算法的mqtt协议智能家居的识别方法 | |
| US20090068989A1 (en) | Method for exchanging requests between the computer application of a mobile terminal and an instantaneous messaging server | |
| CN113391979A (zh) | 监控数据展示的处理方法、设备、系统及存储介质 | |
| CN110557321B (zh) | 一种信息传输方法、网络设备及终端 | |
| US7130898B2 (en) | Mechanism for facilitating invocation of a service | |
| CN115994280A (zh) | 一种浏览器标签页通信方法、系统、电子设备及存储介质 | |
| CN115442177B (zh) | 一种can网络的数据通信方法和装置 | |
| CN112468386B (zh) | 一种重复消息的处理方法及终端 | |
| CN110971535B (zh) | 一种通信拥塞控制方法及装置、设备和存储介质 | |
| CN111181628B (zh) | 通过北斗短报文传输语音数据的方法、终端及存储介质 | |
| CN113316102A (zh) | 一种基于北斗短报文的信息高可靠传输方法 | |
| CN114337942A (zh) | 一种报文重传方法、装置及电子设备 | |
| CN109688204B (zh) | 基于ndn网络的文件下载方法、节点、终端 | |
| CN112261124B (zh) | 车辆状态数据的上报方法和系统以及车辆状态的查看方法 | |
| US7349945B1 (en) | System and method for managing event publication and subscription | |
| CN110247841B (zh) | 信息发送方法及装置、业务服务器和存储介质 | |
| CN113556399B (zh) | 消息推送装置、系统、方法、电子设备、存储介质 | |
| CN115189807B (zh) | Harq进程号的确定、指示方法、装置、终端及网络侧设备 | |
| CN115334466B (zh) | 一种消息的发送方法、装置、电子设备及存储介质 | |
| CN112650601B (zh) | 跨宿主打开小程序的方法、装置、设备、存储介质和程序 | |
| CN114039881B (zh) | 一种通信连接监控方法 |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20230421 |