浏览器与web前端通信的方法、web前端及系统的制作方法
【技术领域】
[0001]本发明涉及图片处理技术领域，尤其涉及一种浏览器与web前端通信的方法、web如端及系统。
【背景技术】
[0002]目前，运行于1s系统之上的浏览器都是基于safari内核，web前端无法直接使用浏览器客户端提供的API，即web前端缺少与浏览器客户端主动通信的机制。
[0003]对于浏览器客户端，可以访问web前端的全局javascript代码，浏览器客户端访问web前端的javascript代码通常采用以下两种方式JARweb前端传入的全局函数名对应的函数，或者执行web前端传入的函数体。
[0004]但是上述两种方式都存在严重的弊端:第一种方式要求传入的函数名需要对应一个全局函数，这种方式对于异步接口来说简直是灾难，因为调用一次API意味着需要生成一个全局变量，这样不仅会污染命名空间，也会占用内存；第二种方式会使传入的函数体中的作用域链失效，函数体内只能访问全局变量，this对应的是window对象,此时函数体将无法保留现场，这些潜规则的存在将会给web前端开发带来更大的复杂度。
【发明内容】
[0005]本发明实施例提供一种浏览器与web前端通信的方法、web前端及系统，旨在实现web前端与浏览器客户端之间的有效通信，降低开发者对API接口的使用成本。
[0006]本发明实施例提出了一种浏览器与web前端通信的方法，包括:
[0007]web前端响应接口调用指令，生成用以标识所述接口调用指令对应请求事件的id ；
[0008]所述web前端根据所述接口调用指令，获取所述请求事件的接口参数；
[0009]所述web前端将所述请求事件、id以及所述接口参数存入全局变量命令队列中；
[0010]所述web前端通过给预先创建的标签的设定属性赋值的方式，将所述全局变量命令队列发送至浏览器；
[0011]所述浏览器接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数,对所述请求事件进行处理。
[0012]本发明实施例还提出一种浏览器与web前端通信的的系统，包括:浏览器和与所述浏览器通信连接的web前端；其中:
[0013]所述web前端，用于响应接口调用指令，生成用以标识所述接口调用指令对应请求事件的id ;根据所述接口调用指令，获取所述请求事件的接口参数；将所述请求事件、id以及所述接口参数存入全局变量命令队列中；通过给预先创建的标签的设定属性赋值的方式，将所述全局变量命令队列发送至浏览器；
[0014]所述浏览器，用于接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数，对所述请求事件进行处理。
[0015]本发明实施例还提出一种web前端，包括:
[0016]生成模块，用于响应接口调用指令，生成用以标识所述接口调用指令对应的请求事件的id ；
[0017]获取模块，用于根据所述接口调用指令，获取所述请求事件的接口参数；
[0018]存储模块，用于将所述请求事件、id以及所述接口参数存入全局变量命令队列中；
[0019]发送模块，用于将所述全局变量命令队列发送至浏览器；由所述浏览器接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数，对所述请求事件进行处理。
[0020]本发明实施例提出的一种浏览器与web前端通信的方法、web前端及系统，通过创建的iframe标签,在web前端和浏览器客户端之间建立一座通信的桥梁,通过该桥梁，web前端可以主动和浏览器客户端通信，浏览器客户端也可以主动和web前端通信且保留函数现场，由此实现了 web前端与浏览器客户端之间的有效通信，降低了开发者学习使用API的成本。
【附图说明】
[0021]图1是本发明实施例涉及的浏览器与web前端通信的系统架构示意图；
[0022]图2是本发明实施例浏览器客户端与web前端的交互时序示意图；
[0023]图3是本发明实施例方案涉及的web前端硬件运行环境示意图；
[0024]图4是本发明浏览器与web前端通信的方法第一实施例的流程示意图；
[0025]图5是本发明实施例中浏览器接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件，以及接口参数，对所述请求事件进行处理的流程示意图；
[0026]图6是本发明浏览器与web前端通信的方法第二实施例的流程示意图；
[0027]图7是本发明浏览器与web前端通信的方法第三实施例的流程示意图；
[0028]图8是本发明浏览器与web前端通信的方法第四实施例的流程示意图；
[0029]图9是本发明浏览器与web前端通信的方法第五实施例的流程示意图；
[0030]图10是本发明浏览器与web前端通信的方法第六实施例的流程示意图；
[0031]图11是本发明web前端第一实施例的功能模块示意图；
[0032]图12是本发明web前端第二实施例的功能模块示意图。
[0033]为了使本发明的技术方案更加清楚、明了，下面将结合附图作进一步详述。
【具体实施方式】
[0034]应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0035]本发明实施例的主要解决方案是:通过创建的iframe标签，在web前端和浏览器客户端之间建立一座通信的桥梁，通过该桥梁，web前端可以主动和浏览器客户端通信，浏览器客户端也可以主动和web前端通信且保留函数现场，由此实现了 web前端与浏览器客户端之间的有效通信，降低了开发者学习使用API的成本。
[0036]如图1所示，图1为本发明实施例方案涉及的浏览器与web前端通信的系统架构，该系统架构包括:浏览器客户端102和与所述浏览器客户端102通信连接的web前端101 ；其中:
[0037]所述web前端1I,用于响应接口调用指令,生成一 i d用以标识所述接口调用指令对应的请求事件；根据所述接口调用指令，获取所述请求事件的接口参数；将所述请求事件、id以及所述接口参数存入全局变量命令队列中；通过给预先创建的标签的设定属性赋值的方式，将所述全局变量命令队列发送至浏览器；
[0038]所述浏览器，用于接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数，对所述请求事件进行处理。
[0039]具体地，本实施例浏览器客户端102可以为PC客户端，也可以为手机、平板电脑等具有网页浏览功能的移动终端。
[0040]以1s系统的手机端为例，由于现有的运行于1s系统之上的浏览器都是基于safari内核,web前端101无法直接使用浏览器客户端102提供的API,即web前端101缺少与浏览器客户端102主动通信的机制。而对于浏览器客户端102，虽然可以访问web前端101的全局javascript代码,但是无法保留函数现场,给web前端101开发带来更大的复杂度。
[0041]本实施例方案可以在web前端101和浏览器客户端102之间建立一座通信的桥梁，通过该桥梁，web前端101可以主动和浏览器客户端102通信，浏览器客户端102也可以主动和web前端101通信且保留函数现场，实现web前端101与浏览器客户端102之间的有效通信，降低开发者学习使用API的成本。本实施例浏览器客户端102与web前端101的交互流程如图2所示。
[0042]具体地,在web前端101创建有一个标签,本实施例以一个隐藏的iframe标签进行举例。web前端101在给这个iframe标签的src属性赋值时,会触发一个事件，而浏览器客户端102会及时捕获到这个事件，与此同时，浏览器还会截获iframe标签的src信息。
[0043]因此,基于此原理,通过创建一个隐藏的iframe的方式可以建立起web前端101和浏览器客户端102之间通信的桥梁。由于web前端101每次创建iframe标签并赋值时都会触发一个事件，所以为了区分创建iframe标签是普通的行为还是传递一个命令，本实施例定义了 src的特殊格式，并且该src的格式由web前端101与浏览器客户端102协商产生，以便浏览器客户端102可以及时捕获到src属性值。
[0044]本实施例定义src采用以下格式:mtt:service:act1n。
[0045]其中，mtt是字符串常量，service和act1n唯一决定一个命令的行为，service标识大类的行为，act1n标识大类下的细分行为。
[0046]通过这种通信方式，浏览器客户端102对外提供的API都是异步接口，开发用户可以传入service和act1n标识命令的类型,并且以opt1n作为命令参数,sue作为成功回调函数，err作为失败的回调函数，由此，定义一个API接口的格式为:
[0047]browserApi (service, act1n, opt1n, sue, err)。
[0048]开发用户可以调用web前端101提供的代码库，触发对客户端API接口的调用。其中，web前端101的代码库具体可以为javascript代码库。
[0049]web前端101响应开发用户触发的接口调用指令，会产生一个发送给浏览器客户端102的请求事件，由此发起一个命令。
[0050]web前端101对浏览器客户端102发起一个命令前，会自动生成一个唯一的随机数作为id来标识该命令，S卩，生成一 id用以标识所述接口调用指令对应的请求事件。
[0051]此外，web前端101还会根据所述接口调用指令，获取所述请求事件的接口参数。该接口参数包括:请求事件的类型和请求事件的命令参数；其中，请求事件的类型通过上述service和act1n标识；请求事件的命令参数通过opt1n标识。
[0052]上述获取的请求事件的接口参数用于传送给浏览器客户端102，便于浏览器客户端102对请求事件进行处理。
[0053]在web前端101，还会维护一个命令队列queue (本实施例称全局变量命令队列)来保存这些请求事件(含有请求事件对应的id、请求事件的类型和请求事件的命令参数)。
[0054]web前端101之所以通过全局变量命令队列保存请求事件、id以及接口参数，是考虑到开发用户在一段时间内可能会多次调用浏览器客户端102API接口，而浏览器客户端102不一定能够及时处理这些请求事件。因此，采用全局变量命令队列保存请求事件这些命令，分批发送给浏览器客户端102，从而可以保证浏览器客户端102合理安排请求事件的处理时机，提高了浏览器侧系统性能和数据处理的效率，同时也缓解了 web前端101的数据处理压力。
[0055]然后,web前端101以预定格式，给iframe标签的src属性赋值,触发全局变量命令队列的发送；所述src属性包括用于标识所述请求事件的类型的service字段和act1n字段。
[0056]由此,通过给创建好的隐藏iframe的src赋值的方式,将包含请求事件及其相关参数的全局变量命令队列传达到浏览器客户端102。
[0057]web前端101通过给创建好的隐藏iframe的src赋值的方式,将全局变量命令队列传达到浏览器客户端102