浏览器与web前端通信的方法、web前端及系统技术方案

本发明专利技术涉及一种浏览器与web前端通信的方法、web前端及系统，其方法包括：web前端响应接口调用指令，生成用以标识接口调用指令对应请求事件的id；根据接口调用指令，获取请求事件的接口参数；将请求事件、id以及接口参数存入全局变量命令队列中；将全局变量命令队列发送至浏览器；浏览器接收到全局变量命令队列后，从全局变量命令队列中读取请求事件、id及接口参数，对请求事件进行处理。本发明专利技术使得web前端可主动和浏览器客户端通信，浏览器客户端也可主动和web前端通信且保留函数现场，实现了web前端与浏览器客户端之间的有效通信，降低了开发者学习使用API的成本。

【技术实现步骤摘要】

本专利技术涉及图片处理
，尤其涉及一种浏览器与web前端通信的方法、web如端及系统。
技术介绍
目前，运行于1s系统之上的浏览器都是基于safari内核，web前端无法直接使用浏览器客户端提供的API，即web前端缺少与浏览器客户端主动通信的机制。对于浏览器客户端，可以访问web前端的全局javascript代码，浏览器客户端访问web前端的javascript代码通常采用以下两种方式JARweb前端传入的全局函数名对应的函数，或者执行web前端传入的函数体。但是上述两种方式都存在严重的弊端:第一种方式要求传入的函数名需要对应一个全局函数，这种方式对于异步接口来说简直是灾难，因为调用一次API意味着需要生成一个全局变量，这样不仅会污染命名空间，也会占用内存；第二种方式会使传入的函数体中的作用域链失效，函数体内只能访问全局变量，this对应的是window对象,此时函数体将无法保留现场，这些潜规则的存在将会给web前端开发带来更大的复杂度。
技术实现思路
本专利技术实施例提供一种浏览器与web前端通信的方法、web前端及系统，旨在实现web前端与浏览器客户端之间的有效通信，降低开发者对API接口的使用成本。本专利技术实施例提出了一种浏览器与web前端通信的方法，包括:web前端响应接口调用指令，生成用以标识所述接口调用指令对应请求事件的id ；所述web前端根据所述接口调用指令，获取所述请求事件的接口参数；所述web前端将所述请求事件、id以及所述接口参数存入全局变量命令队列中；所述web前端通过给预先创建的标签的设定属性赋值的方式，将所述全局变量命令队列发送至浏览器；所述浏览器接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数,对所述请求事件进行处理。本专利技术实施例还提出一种浏览器与web前端通信的的系统，包括:浏览器和与所述浏览器通信连接的web前端；其中:所述web前端，用于响应接口调用指令，生成用以标识所述接口调用指令对应请求事件的id ;根据所述接口调用指令，获取所述请求事件的接口参数；将所述请求事件、id以及所述接口参数存入全局变量命令队列中；通过给预先创建的标签的设定属性赋值的方式，将所述全局变量命令队列发送至浏览器；所述浏览器，用于接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数，对所述请求事件进行处理。本专利技术实施例还提出一种web前端，包括:生成模块，用于响应接口调用指令，生成用以标识所述接口调用指令对应的请求事件的id ；获取模块，用于根据所述接口调用指令，获取所述请求事件的接口参数；存储模块，用于将所述请求事件、id以及所述接口参数存入全局变量命令队列中；发送模块，用于将所述全局变量命令队列发送至浏览器；由所述浏览器接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数，对所述请求事件进行处理。本专利技术实施例提出的一种浏览器与web前端通信的方法、web前端及系统，通过创建的iframe标签,在web前端和浏览器客户端之间建立一座通信的桥梁,通过该桥梁，web前端可以主动和浏览器客户端通信，浏览器客户端也可以主动和web前端通信且保留函数现场，由此实现了 web前端与浏览器客户端之间的有效通信，降低了开发者学习使用API的成本。【附图说明】图1是本专利技术实施例涉及的浏览器与web前端通信的系统架构示意图；图2是本专利技术实施例浏览器客户端与web前端的交互时序示意图；图3是本专利技术实施例方案涉及的web前端硬件运行环境示意图；图4是本专利技术浏览器与web前端通信的方法第一实施例的流程示意图；图5是本专利技术实施例中浏览器接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件，以及接口参数，对所述请求事件进行处理的流程示意图；图6是本专利技术浏览器与web前端通信的方法第二实施例的流程示意图；图7是本专利技术浏览器与web前端通信的方法第三实施例的流程示意图；图8是本专利技术浏览器与web前端通信的方法第四实施例的流程示意图；图9是本专利技术浏览器与web前端通信的方法第五实施例的流程示意图；图10是本专利技术浏览器与web前端通信的方法第六实施例的流程示意图；图11是本专利技术web前端第一实施例的功能模块示意图；图12是本专利技术web前端第二实施例的功能模块示意图。为了使本专利技术的技术方案更加清楚、明了，下面将结合附图作进一步详述。【具体实施方式】应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。本专利技术实施例的主要解决方案是:通过创建的iframe标签，在web前端和浏览器客户端之间建立一座通信的桥梁，通过该桥梁，web前端可以主动和浏览器客户端通信，浏览器客户端也可以主动和web前端通信且保留函数现场，由此实现了 web前端与浏览器客户端之间的有效通信，降低了开发者学习使用API的成本。如图1所示，图1为本专利技术实施例方案涉及的浏览器与web前端通信的系统架构，该系统架构包括:浏览器客户端102和与所述浏览器客户端102通信连接的web前端101 ；其中:所述web前端1I,用于响应接口调用指令,生成一 i d用以标识所述接口调用指令对应的请求事件；根据所述接口调用指令，获取所述请求事件的接口参数；将所述请求事件、id以及所述接口参数存入全局变量命令队列中；通过给预先创建的标签的设定属性赋值的方式，将所述全局变量命令队列发送至浏览器；所述浏览器，用于接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数，对所述请求事件进行处理。具体地，本实施例浏览器客户端102可以为PC客户端，也可以为手机、平板电脑等具有网页浏览功能的移动终端。以1s系统的手机端为例，由于现有的运行于1s系统之上的浏览器都是基于safari内核,web前端101无法直接使用浏览器客户端102提供的API,即web前端101缺少与浏览器客户端102主动通信的机制。而对于浏览器客户端102，虽然可以访问web前端101的全局javascript代码,但是无法保留函数现场,给web前端101开发带来更大的复杂度。本实施例方案可以在web前端101和浏览器客户端102之间建立一座通信的桥梁，通过该桥梁，web前端101可以主动和浏览器客户端102通信，浏览器客户端102也可以主动和web前端101通信且保留函数现场，实现web前端101与浏览器客户端102之间的有效通信，降低开发者学习使用API的成本。本实施例浏览器客户端102与web前端101的交互流程如图2所示。具体地,在web前端101创建有一个标签,本实施例以一个隐藏的iframe标签进行举例。web前端101在给这个iframe标签的src属性赋值时,会触发一个事件，而浏览器客户端102会及时捕获到这个事件，与此同时，浏览器还会截获iframe标签的src信息。因此,基于此原理,通过创建一个隐藏的iframe的方式可以建立起web前端101和浏览器客户端102之间通信的桥梁。由于web前端101每次创建iframe标签并赋值时都会触发一个事件，所以为了区分创建iframe标签是普通的行为本文档来自技高网...

【技术保护点】
一种浏览器与web前端通信的方法，其特征在于，包括：web前端响应接口调用指令，生成用以标识所述接口调用指令对应请求事件的id；所述web前端根据所述接口调用指令，获取所述请求事件的接口参数；所述web前端将所述请求事件、id以及所述接口参数存入全局变量命令队列中；所述web前端将所述全局变量命令队列发送至浏览器；所述浏览器接收到所述全局变量命令队列后，从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数，对所述请求事件进行处理。

【技术特征摘要】

【专利技术属性】
技术研发人员：于小军，田淑宁，夏李，曾亮，薄川川，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东;44