浏览器与web前端通信的方法、web前端及系统的制作方法_4

文档序号:9810263阅读:来源:国知局
,由于现有的运行于1s系统之上的浏览器都是基于safari内核,web前端无法直接使用浏览器客户端提供的API,即web前端缺少与浏览器客户端主动通信的机制。而对于浏览器客户端,虽然可以访问web前端的全局javascript代码,但是无法保留函数现场,给web前端开发带来更大的复杂度。
[0168]本实施例方案可以在web前端和浏览器客户端之间建立一座通信的桥梁,通过该桥梁,web前端可以主动和浏览器客户端通信,浏览器客户端也可以主动和web前端通信且保留函数现场,实现web前端与浏览器客户端之间的有效通信,降低开发者学习使用API的成本。
[0169]具体地,在web前端创建有一个标签,本实施例以一个隐藏的iframe标签进行举例。web前端在给这个iframe标签的src属性赋值时,会触发一个事件,而浏览器客户端会及时捕获到这个事件,与此同时,浏览器还会截获iframe标签的src信息。
[0170]因此,基于此原理,通过创建一个隐藏的iframe的方式可以建立起web前端和浏览器客户端之间通信的桥梁。由于web前端每次创建iframe标签并赋值时都会触发一个事件,所以为了区分创建iframe标签是普通的行为还是传递一个命令,本实施例定义了 src的特殊格式,并且该src的格式由web前端与浏览器客户端协商产生,以便浏览器客户端可以及时捕获到src属性值。
[0171]本实施例定义src采用以下格式:mtt:service:act1n。
[0172]其中,mtt是字符串常量,service和act1n唯一决定一个命令的行为,service标识大类的行为,act1n标识大类下的细分行为。
[0173]通过这种通信方式,浏览器客户端对外提供的API都是异步接口,开发用户可以传入service和act1n标识命令的类型,并且以opt1n作为命令参数,sue作为成功回调函数,err作为失败的回调函数,由此,定义一个API接口的格式为:
[0174]browserApi (service, act1n, opt1n, sue, err)。
[0175]开发用户可以调用web前端提供的代码库,触发对客户端API接口的调用。其中,web前端的代码库具体可以为javascript代码库。
[0176]web前端响应开发用户触发的接口调用指令,会产生一个发送给浏览器客户端的请求事件,由此发起一个命令。
[0177]web前端对浏览器客户端发起一个命令前,会自动生成一个唯一的随机数作为id来标识该命令,即,生成一 id用以标识所述接口调用指令对应的请求事件。
[0178]此外,web前端还会根据所述接口调用指令,获取所述请求事件的接口参数。该接口参数包括:请求事件的类型和请求事件的命令参数;其中,请求事件的类型通过上述service和act1n标识;请求事件的命令参数通过opt1n标识。
[0179]上述获取的请求事件的接口参数用于传送给浏览器客户端,便于浏览器客户端对请求事件进行处理。
[0180]在web前端,还会维护一个命令队列queue (本实施例称全局变量命令队列)来保存这些请求事件(含有请求事件对应的id、请求事件的类型和请求事件的命令参数)。
[0181]web前端之所以通过全局变量命令队列保存请求事件、id以及接口参数,是考虑到开发用户在一段时间内可能会多次调用浏览器客户端API接口,而浏览器客户端不一定能够及时处理这些请求事件。因此,采用全局变量命令队列保存请求事件这些命令,分批发送给浏览器客户端,从而可以保证浏览器客户端合理安排请求事件的处理时机,提高了浏览器侧系统性能和数据处理的效率,同时也缓解了 web前端的数据处理压力。
[0182]然后,web前端以预定格式,给iframe标签的src属性赋值,触发全局变量命令队列的发送;所述src属性包括用于标识所述请求事件的类型的service字段和act1n字段。
[0183]由此,通过给创建好的隐藏iframe的src赋值的方式,将包含请求事件及其相关参数的全局变量命令队列传达到浏览器客户端。
[0184]web前端通过给创建好的隐藏iframe的src赋值的方式,将全局变量命令队列传达到浏览器客户端时,会触发一个事件,如前所述,浏览器会及时捕获到这个事件。
[0185]在浏览器侧,浏览器客户端会捕获iframe标签的src属性格式及src属性值,并对src属性格式及src属性值进行判断,判断src属性格式是否为约定的格式,src属性值是否产生变化。
[0186]然后,根据所述iframe标签的src属性格式及src属性值,获取全局变量命令队列。
[0187]浏览器客户端在接收到所述全局变量命令队列后,调用全局的队列获取函数(getQueue),从所述全局变量命令队列中读取所述请求事件,以及请求事件的id、类型和命令参数。
[0188]然后,根据所述请求事件的id、类型和命令参数对所述请求事件进行相应处理。
[0189]浏览器客户端处理完成一条命令后,若处理成功,浏览器调用一个全局的成功处理函数(sucCallback),将处理结果、所述请求事件的命令参数及id传入所述web前端。
[0190]当处理失败后,所述浏览器调用全局的失败处理函数(errCallback),将处理结果、所述请求事件的命令参数及id传入所述web前端。
[0191]由此,通过上述三个全局函数getQueue, sucCallback和errCallback(全局的队列获取函数、全局的成功处理函数以及全局的失败处理函数),可以使对外API的回调函数保留现场,因为整个系统只需维护三个全局函数getQueue, sucCallback和errCallback,而后续web前端执行命令后的成功和失败回调函数不需要是全局的函数,且会保留该回调函数的现场。
[0192]本实施例通过上述方案,通过创建的iframe标签,在web前端和浏览器客户端之间建立一座通信的桥梁,通过该桥梁,web前端可以主动和浏览器客户端通信,浏览器客户端也可以主动和web前端通信且保留函数现场,由此实现了 web前端与浏览器客户端之间的有效通信。
[0193]此外,在具体实现时,通过提供一个基本的javascript组件来封装上述的web前端和浏览器客户端间的通信方式和命令调用的队列维护机制,对外提供一个定制的API。开发用户只需通过引入这个轻量级的组件即可使用API,而不用关心内部实现,且没有任何潜规则,从而降低了开发用户学习使用API的成本。
[0194]如图9所示,本发明第五实施例提出一种浏览器与web前端通信的方法,在上述图8所不的第四实施例的基础上:
[0195]在上述步骤S202之后,还包括:
[0196]步骤S205,所述web前端将所述id作为key值,将所述接口参数中的成功回调函数和失败回调函数作为value值存入一匹配对象中;
[0197]在上述步骤S204之后,还包括:
[0198]步骤S206,所述web前端根据所述浏览器对所述请求事件的处理结果,进行相应操作。
[0199]本实施例与上述图8所示的第四实施例的区别在于,本实施例还包括web前端对浏览器客户端处理结果进行相应操作的方案。
[0200]具体地,在本实施例中,web前端根据接口调用指令,获取请求事件的接口参数中还包括:请求事件的成功回调函数和失败回调函数。
[0201]其中,web前端会将获取到的请求事件的id作为key值,将请求事件的成功回调函数和失败回调函数作为value值存入一匹配对象中。
[0202]之后,web前端根据浏览器对请求事件的处理结果,进行相应操作时,具体采用以下方案:
[0203]在浏览器对请求事件处理成功后,web前端根据请求事件的id,从所述匹配对象中找到对应的成功回调函数,并执行;在所述浏览器对所述请求事件处理失败后,所述web前端根据请求事件的id,从所述匹配对象中找到对应的失败回调函数,并执行。
[0204]以下详细阐述浏览器客户端处理请求,以及web前端获得浏览器客户端响应后进行相应操作的具体过程:
[0205]浏览器客户端在接收到全局变量命令队列后,调用全局的队列获取函数(getQueue),从全局变量命令队列中读取请求事件,以及请求事件的id、类型和命令参数。
[0206]然后,根据请求事件的id、类型和命令参数对请求事件进行相应处理。
[0207]浏览器客户端处理完成一条命令后,若处理成功,浏览器调用一个全局的成功处理函数(sucCallback),将处理结果、请求事件的命令参数及id传入web前端。web前端根据接收到的id从匹配对象中找到对应的成功回调函数,并执行。
[0208]当浏览器处理请求事件失败后,浏览器调用全局的失败处理函数(errCallback),将处理结果、所述请求事件的命令参数及id传入所述web前端。web前端根据接收到的id从匹配对象中找到对应的失败回调函数,并执行。
[0209]通过这种方法,整个系统只需维护三个全局函数getQueue, sucCallback和errCallback,而web前端执行命令后的成功和失败回调函数不需要是全局的函数,且会保留该回调函数的现场。
[0210]如图10所示,本发明第六实施例提出一种浏览器与web前端通信的方法,在上述图9所示的第五实施例的基础上:
[0211]在上述步骤S204之前,还包括:
[0212]步骤S207,所述web前端判断是否创建有用于通信的iframe标签;若是,则进入步骤204,否则进入步骤S208 ;
[0213]步骤S208,创建所述iframe标签,并进入步骤S208。
[0214]本实施例与上述图9所示的第五实施例的区别在于,本实施例还包括是否创建iframe标签的方案。
[0215]web前端通过判断,若当前没有创建用于通信的iframe标签,则创建该iframe标签,若当前有创建用于通信的iframe标签,则通过给预先创建的标签的设定属性赋值的方式,将全局变量命令队列发送至浏览器。
[0216]本实施例通过上方案,通过创建iframe标签,在web前端和浏览器客户端之间建立一座通信的桥梁,通过该桥梁,web前端可以主动和浏览器客户端通信,浏览器客户端也可以主动和web前端通信且保留函数现场,由此实现了 web前端与浏览器客户端之间的有效通信,降低了开发者学习使用API的成本。
[0217]如图11所示,本发明第一实施例提出一种web前端,包括:生成模块301、获取模块302、存储模块303及发送模块304,其中:
[0218]生成模块301,用于响应接口调用指令,生成一 id用以标识所述接口调用指令对应的请求事件;
[0219]获取模块302,用于根据所述接口调用指令,获取所述请求事件的接口参数;
[0220]存储模块303,用于将所述请求事件、id以及所述接口参数存入全局变量命令队列中;
[0221]发送模块304,用于通过给预先创建的标签的设定属性赋值的方式,将所述全局变量命令队列发送至浏览器;由所述浏览器接收到所述全局变量命令队列后,从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数,对所述请求事件进行处理。
[0222]如图12所示,本发明第二实施例提出一种
当前第4页1 2 3 4 5 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1