一种同域同浏览器不同标签页间的通信方法及系统与流程

本发明涉及一种通信方法，具体为同域同浏览器不同标签页间的通信方法，属于通讯。

背景技术：

1、标签页间的通信指的是在网页浏览器中，不同标签页(tab)之间的信息交流。在网页浏览中，标签页是浏览器窗口中的独立页面，它们可以独立打开、加载和浏览不同的网页内容。标签页间的通信机制允许用户在不同标签页之间共享信息，提高用户体验和浏览效率。

2、同域：是指在互联网中，两个或多个网站的域名具有相同的根域名部分。域名是用于标识和访问网站的地址，通常由多个部分组成，以点号分隔。

3、在进行网页操作时，有一类审批操作需要从列表页跳转进入详情页进行审核，如果在同一页面中打开新子页面，审核完再返回列表页，会导致效率降低；而如果在新的页面中打开新的子页面，审核完又不能保证两个页面之间的数据同步；

4、在现有的web应用中，同一域名下的不同标签页之间的通信一直是一个具有挑战性的问题，传统的通信方法受到浏览器的安全限制，无法直接在不同的标签页间进行实时通信，为此，提出一种同域同浏览器不同标签页间的通信方法及系统。

技术实现思路

1、有鉴于此，本发明提供一种同域同浏览器不同标签页间的通信方法及系统，以解决或缓解现有技术中存在的技术问题，至少提供有益的选择。

2、本发明实施例的技术方案是这样实现的：一种同域同浏览器不同标签页间的通信方法，包括以下步骤：

3、s1、创建共享存储对象-用于存储数据；

4、s2、引入javascript脚本-访问共享存储对象；

5、s3、数据存储-利用共享存储对象的特定键值对传递数据进行存储；

6、s4、监听共享存储对象的变化-监听共享存储对象的变化事件，以获取数据的变化；

7、s5、执行操作-接收方标签页根据接收到的数据执行相应的操作。

8、进一步优选的，所述s1中，共享存储对象为浏览器环境中的localstorage或sessionstorage共享存储对象。

9、进一步优选的，所述s1中，共享存储对象允许在同一域名下的不同标签页之间共享数据。

10、进一步优选的，所述s2中，在每个标签页中引入javascript脚本，用以通过javascript脚本访问共享存储对象；

11、其中，实现方式为在html页面的<script>标签中引入脚本文件或直接在页面中嵌入javascript代码。

12、进一步优选的，所述s3中，在发送方标签页中，将要传递的数据存储在共享存储对象的特定键值中；

13、其中，存储方式为使用共享存储对象的api，将数据存储在指定的键中。

14、进一步优选的，api为localstorage.setitem()或sessionstorage.setitem()。

15、进一步优选的，所述s4中，在接收方标签页中，通过监听共享存储对象的变化事件，以获取数据的变化。

16、进一步优选的，所述s4中，监听方式为使用共享存储对象的window.addeventlistener('storage',callback)注册事件监听器，当共享存储对象中的数据发生变化时，触发回调函数。

17、进一步优选的，所述s5中，当共享存储对象的数据发生变化时，接收方标签页的事件监听器会被触发，在回调函数中获取到变化的数据，并根据需求执行相应的操作。

18、一种同域同浏览器不同标签页间的通信系统，所述系统包括处理器、与所述处理器耦接的寄存器，所述寄存器中存储有程序指令，所述程序指令被所述处理器执行时，使所述处理器执行上述的同域同浏览器不同标签页间的通信方法。

19、本发明实施例由于采用以上技术方案，其具有以下优点：

20、一、本发明通过利用浏览器提供的共享存储机制，无需复杂的网络通信配置，便可实现简单易用的标签页间通信；

21、二、本发明通过利用利用浏览器提供的共享存储机制，结合javascript编程语言，使共享存储对象的变化事件可以实时地通知接收方标签页，使通信具备高效实时性；

22、三、本发明只在同一域名下的标签页间进行通信，避免了跨域通信的安全风险，保证了通信的安全可靠性。

23、上述概述仅仅是为了说明书的目的，并不意图以任何方式进行限制。除上述描述的示意性的方面、实施方式和特征之外，通过参考附图和以下的详细描述，本发明进一步的方面、实施方式和特征将会是容易明白的。

技术特征：

1.一种同域同浏览器不同标签页间的通信方法，其特征在于，包括以下步骤：

2.根据权利要求1所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述s1中，共享存储对象为浏览器环境中的localstorage或sessionstorage共享存储对象。

3.根据权利要求2所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述s1中，共享存储对象允许在同一域名下的不同标签页之间共享数据。

4.根据权利要求1所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述s2中，在每个标签页中引入javascript脚本，用以通过javascript脚本访问共享存储对象；

5.根据权利要求1所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述s3中，在发送方标签页中，将要传递的数据存储在共享存储对象的特定键值中；

6.根据权利要求5所述的同域同浏览器不同标签页间的通信方法，其特征在于：api为localstorage.setitem()或sessionstorage.setitem()。

7.根据权利要求1所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述s4中，在接收方标签页中，通过监听共享存储对象的变化事件，以获取数据的变化。

8.根据权利要求7所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述s4中，监听方式为使用共享存储对象的window.addeventlistener('storage',cal lback)注册事件监听器，当共享存储对象中的数据发生变化时，触发回调函数。

9.根据权利要求8所述的同域同浏览器不同标签页间的通信方法，其特征在于：所述s5中，当共享存储对象的数据发生变化时，接收方标签页的事件监听器会被触发，在回调函数中获取到变化的数据，并根据需求执行相应的操作。

10.一种同域同浏览器不同标签页间的通信系统，其特征在于：所述系统包括处理器、与所述处理器耦接的寄存器，所述寄存器中存储有程序指令，所述程序指令被所述处理器执行时，使所述处理器执行权利要求1-9中任意一项所述的同域同浏览器不同标签页间的通信方法。

技术总结
本发明提供了一种同域同浏览器不同标签页间的通信方法及系统，包括以下步骤：创建共享存储对象‑用于存储数据；引入JavaScript脚本‑访问共享存储对象；数据存储‑利用共享存储对象的特定键值对传递数据进行存储；监听共享存储对象的变化‑监听共享存储对象的变化事件，以获取数据的变化；本发明通过利用浏览器提供的共享存储机制，无需复杂的网络通信配置，便可实现简单易用的标签页间通信；通过利用利用浏览器提供的共享存储机制，结合JavaScript编程语言，使共享存储对象的变化事件可以实时地通知接收方标签页，使通信具备高效实时性；本发明只在同一域名下的标签页间进行通信，避免了跨域通信的安全风险，保证了通信的安全可靠性。

技术研发人员：于志杰
受保护的技术使用者：北京白龙马云行科技有限公司
技术研发日：
技术公布日：2025/1/20