一种浏览器标签页通信方法、系统、电子设备及存储介质技术方案

本发明专利技术公开了一种浏览器标签页通信方法、系统、电子设备及存储介质，包括调用发送页面的发送函数向目标页面发送消息事件，消息事件包括发送数据以及目标页面地址；目标页面调用监听函数对消息事件进行监听，并将监听到发送函数的响应信息发送给发送页面。本发明专利技术基于postMessage的浏览器标签页实时通信方法与流程，使其达到一对一的发送响应模式，有效的解决了消息重复造成错误结果，确保了消息准确到达，简化消息协议，降低数据协议的耦合度，提高了协议的复用。了协议的复用。了协议的复用。

【技术实现步骤摘要】
一种浏览器标签页通信方法、系统、电子设备及存储介质


[0001]本专利技术涉及计算机
，尤其涉及一种浏览器标签页通信方法、系统、电子设备及存储介质。

技术介绍

[0002]目前实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。
[0003]postMssage就是其中的一种方式。postMssage通信是分发一个 MessageEvent 消息，是将消息放入消息队列中发出广播，是一种广播模式。这种模式是一个消息可以发送到多个接收者，但是接收者有没有接收到，广播者不知道，可能导致消息重复造成错误结果；如果广播者的下步操作依赖于接收者的反馈，就会导致功能无法实现。

技术实现思路

[0004]针对上述问题中存在的不足之处，本专利技术提供一种浏览器标签页通信方法、系统、设备及存储介质。
[0005]为实现上述目的，本专利技术提供一种浏览器标签页通信方法，包括：调用发送页面的发送函数向目标页面发送消息事件，所述消息事件包括发送数据以及所述目标页面地址；所述目标页面调用监听函数对所述消息事件进行监听，并将监听到所述发送函数的响应信息发送给所述发送页面。
[0006]优选的是，调用所述发送页面的发送函数的过程中产生一识别码和与所述识别码对应的一Promise对象，并将所述识别码和所述Promise对象均存储至Map中。
[0007]优选的是，定义Promise对象状态的返回值，状态为发送状态，则所述返回值为N，状态为响应状态，则所述返回值为M，N和M均为正整数且取数不相同。
[0008]优选的是，所述目标页面将接收到的所述发送数据转换成json，并从所述Map中查找所述json中的所述识别码对应的Promise对象的resolve函数，所述发送页面通过所述resolve函数获得响应信息。
[0009]优选的是，所述目标页面将接收到的所述发送数据转换成json，并创建一callback函数，调用所述callback函数将响应信息发送给所述发送页面。
[0010]优选的是，调用所述callback函数包括：将所述Promise对象状态修改为响应状态；将所述识别码、所述响应状态对应返回值和所述发送数据转成字符串；调用postMessage函数发送给所述发送页面。
[0011]优选的是，所述发送函数为postMessage函数，所述监听函数为addEventListener函数。
[0012]本专利技术还提供一种浏览器标签页通信系统，包括：发送模块，用于调用发送页面的发送函数向目标页面发送消息事件，所述消息事件包括发送数据以及所述目标页面地址；响应模块，用于所述目标页面调用监听函数对所述消息事件进行监听，并将监听到所述发送函数的响应信息发送给所述发送页面。
[0013]本专利技术还提供一种电子设备，包括至少一个处理单元以及至少一个存储单元，其中，所述存储单元存储有计算机程序，当所述程序被所述处理单元执行时，使得所述处理单元执行上述的方法。
[0014]本专利技术还提供一种存储介质，其存储有可由电子设备执行的计算机程序，当所述程序在所述电子设备上运行时，使得所述电子设备执行上述的方法。
[0015]与现有技术相比，本专利技术的有益效果为：本专利技术基于postMessage的浏览器标签页实时通信方法与流程，使其达到一对一的发送响应模式，有效的解决了消息重复造成错误结果，确保了消息准确到达，简化消息协议，降低数据协议的耦合度，提高了协议的复用。
附图说明
[0016]图1是本专利技术浏览器标签页通信方法的流程图。
具体实施方式
[0017]为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术的一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0018]参照图1，本专利技术提供一种浏览器标签页通信方法，方法包括：调用发送页面的发送函数向目标页面发送消息事件，消息事件包括发送数据以及目标页面地址；目标页面调用监听函数对消息事件进行监听，并将监听到发送函数的响应信息发送给发送页面。
[0019]具体地，在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响应给发送者的数据。
[0020]在本实施例中，消息发送函数为postMessage函数，监听函数为addEventListener函数。且调用发送页面的发送函数的过程中产生一识别码uuid和与识别码对应的一Promise对象，并将识别码和Promise对象均存储至Map中。再把status,uuid,method,data转成字符转params，通过调用window.postMessage(params,"*")发送出去。注意status和uuid 是在sendMsg函数内部操作。
[0021]进一步地，预先定义Promise对象状态的返回值，状态为发送状态，则返回值为N，状态为响应状态，则返回值为M，N和M均为正整数且取数不相同。例如1为发送状态，2为响应状态。
[0022]在本实施例中，目标页面调用监听函数对消息事件进行监听，即为监听window.onmessage,即window.addEventListener("message", callback, false)，其有两种情况:一种响应自己发送，另一种是响应别人发送。
[0023]响应自己发送：目标页面将接收到的发送数据转换成json，并从Map中查找json中的识别码对应的Promise对象的resolve函数，判断status=2，取出并调用resolve方法传参data，即可在sendMsg(method，data).then 中拿到响应的数据。
[0024]响应别人发送：在调用onMsg(method:sting,listener:function(data,done))方法时，会在Map中存储以method为key,listener为值的数据，目标页面将接收到的发送数据转换成json，并创建一callback函数，调用callback本文档来自技高网...

【技术保护点】

【技术特征摘要】
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函数将响应信息...

【专利技术属性】
技术研发人员：杨明坡，原攀峰，陈廷梁，陈廷权，
申请(专利权)人：浙江数新网络有限公司，
类型：发明
国别省市：