Air展现超文本标记语言HTML5页面的方法及装置与流程

本发明涉及网页加载技术领域，特别涉及一种air展现超文本标记语言html5页面的方法及装置。

背景技术：

自从adobe将air移交给apchae以后，apache对air的支持力度越来越低，导致air技术越来越落后。另外随着html5的越来越流行，html5的社区活跃度和功能组件等也越来越丰富，对应的前端ui开发框架也越来越齐全，如：react.js，vue.js，angularjs等。考虑到现有交易和平台都是基于air的air框架开发，因此如何实现air展现h5页面是亟待解决的问题。

技术实现要素：

本发明实施例提供了一种air展现超文本标记语言html5页面的方法，用以实现air展现html5页面，该方法包括：

接收air展现html5页面请求；

根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令；所述目标浏览器为支持html5特性的浏览器；

根据所述创建指令，创建目标浏览器的页签窗口；

根据用户登录air平台的token信息，从所述页签窗口展现html5页面。

本发明实施例还提供了一种air展现超文本标记语言html5页面的装置，用以实现air展现html5页面，该装置包括：

接收单元，用于接收air展现html5页面请求；

发送单元，用于根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令；所述目标浏览器为支持html5特性的浏览器；

页签窗口创建单元，用于根据所述创建指令，创建目标浏览器的页签窗口；

html5页面展现单元，用于根据用户登录air平台的token信息，从所述页签窗口展现html5页面。

本发明实施例还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述实现air展现超文本标记语言html5页面的方法。

本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有执行实现air展现超文本标记语言html5页面的方法的计算机程序。

本发明实施例提供的技术方案，通过预先建立air平台与目标浏览器之间的socket路径，即将预先开发的支持html5特性的目标浏览器与air平台关联，因此，在接收到air展现html5页面请求时，根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令，根据该创建指令，创建目标浏览器的页签窗口；根据用户登录air平台的token信息，从该页签窗口展现html5页面，实现了air展现h5页面，进而实现了原有的air开发的交易页面能和h5开发的交易页面进行数据通讯。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，并不构成对本发明的限定。在附图中：

图1是本发明实施例中air展现超文本标记语言html5页面方法的流程示意图；

图2是本发明实施例中air展现html5页面的方法的原理示意图；

图3是本发明实施例中air展现超文本标记语言html5页面装置的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下面结合实施方式和附图，对本发明做进一步详细说明。在此，本发明的示意性实施方式及其说明用于解释本发明，但并不作为对本发明的限定。

在介绍本发明实施例之前，首先对本发明实施例涉及的技术名称进行介绍如下。

一、缩略语：

guip：通用业务处理平台(generaluserinterfaceportal)；

air：adobe集成运行环境(adobeintegratedruntime)；

html：超文本标记语言(hypertextmarkuplanguage)；

html5：html最新的版本；

css：层叠样式表(cascadingstylesheets)；

css3：css最新的版本；

cef：chromium嵌入式框架(chromiumembeddedframework)；

ane：adobe本机扩展(adobenativeextension)；

ie：微软的网页浏览器(internetexplorer)；

ria：富互联网程序(richinternetapplications)；

as:一种脚本语言(actionscript)；

as3.0：actionscript最新的版本；

js：一种脚本语言(javascript)。

二、关键术语：

socket：网络上两个程序通过一个双向的通讯实现数据的交换，连接的一端称为一个socket，服务端的socket称为serversocket；

cefloader：一个独立的air程序，内部通过ane的方式加载cef窗口；

websocket：基于tcp的一种新的网络协议，实现了浏览器和服务器双向通讯；

webkit：是一个开源的浏览器引擎；

chromium：是google开发的开源浏览器；

safari：苹果计算机操作系统浏览器；

react.js：facebook开源的前端ui开发框架；

vue.js：个人开发源的前端开发框架；

angular.js：google开源的前端开发框架；

canvas：html5新增的绘图标签；

transform：css3新增的变换属性；

transition：css3新增的过度属性；

token：存储用户信息的请求头字段。

三、涉及技术：

flex：adoberia程序ui开发框架；

actionscript：adobe开发flash产品的脚本语言，是一种完全的面向对象的编程语言；

air：adoberia程序本地开发框架，视图层技术依赖flex，脚本层技术依赖actionscript；

c#：微软公司发布的一种面向对象的、运行与.netframework之上的高级程序设计语言；

socket：基于tcp/ip的双向通讯技术，通常也称套接字；

serversocket：服务器端的socket；

html/css：超文本标记语言和层叠样式表，用于开发浏览器可识别和解析的在线浏览页面；

ane：actionscript调用c++语言开发的开放接口，支持强对象类型传递，为adobeair增加本机扩展能力；

c++：继承c语言，是一种比较底层的技术语言；

crl：公共语言运行时支持，c++调用由c#语言开发的开放接口技术；

nativeprocess：adobeair本机进程管理器。

发明人发现：现有方案主要包括以下两种：

方案一：采用air提供的html浏览器组件。该方案中air提供的html浏览器组件是基于safari5.0.3版本的webkit内核，不支持很多html5的新增特性，如：canvas，css3的transition和transform属性等。

方案二：在air中弹出方式调用本机默认浏览器。该方案严重依赖用户的行为，如果用户设置的默认浏览器不支持html5新特性(如：ie8)，将会导致程序异常。依赖用户行为的方案不确定性太大，导致后期风险和维护成本较高。

因此，考虑到上述技术问题，发明人提出了一种基于cef技术的air展现超文本标记语言html5页面方案，该方案解决了air中集成html5开发的前端页面，打开的html5页面与原有air开发的交易页面进行通讯的问题。该方案：先开发基于c#语言的本机浏览器项目，目标浏览器项目可以在win7和xp系统中运行，并支持html5新特性。然后，开发ane中间件将浏览器和air项目关联，air在关联浏览器项目前启动一个webscoket本地服务，并将服务端口传给目标浏览器，后续目标浏览器与air的数据通讯采用socket方式。下面对该air展现超文本标记语言html5页面方案进行详细介绍如下。

图1是本发明实施例中air展现超文本标记语言html5页面的方法的流程示意图，如图1所示，该方法包括如下步骤：

步骤101：接收air展现html5页面请求；

步骤102：根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令；所述目标浏览器为支持html5特性的浏览器；

步骤103：根据所述创建指令，创建目标浏览器的页签窗口；

步骤104：根据用户登录air平台的token信息，从所述页签窗口展现html5页面。

本发明实施例提供的技术方案，通过预先建立air平台与目标浏览器之间的socket路径，即将预先开发的支持html5特性的目标浏览器与air平台关联，因此，在接收到air展现html5页面请求时，根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令，根据该创建指令，创建目标浏览器的页签窗口；根据用户登录air平台的token信息，从该页签窗口展现html5页面，实现了air展现h5页面，进而实现了原有的air开发的交易页面能和h5开发的交易页面进行数据通讯，提高了air客户端的展现能力。

下面再结合图2，对上述本发明实施例涉及的各个步骤进行详细介绍如下。

一、首先，介绍air启动的过程，该过程即为预先建立air平台与目标浏览器之间的socket路径的过程。

具体实施时，本发明实施例提到的air平台(air客户端)可以是指上文提到的在adobe集成运行环境下的通用业务处理平台guip。

在一个实例中，如图2所示，可以按照如下方法预先建立air平台与目标浏览器之间的socket路径：

用户登录air平台时，生成token信息以及创建服务器端口serversocket；

air平台通过本机程序启动目标浏览器加载单元，将所述token信息和serversocket信息传输至所述目标浏览器加载单元；

目标浏览器加载单元通过ane方式，将所述token信息和serversocket信息传输至目标浏览器创建单元；创建加载socket端口连接至所述serversocket，加载socket端口与serversocket之间为第一socket路径1；所述第一socket路径1用于发送所述页签窗口创建指令；

目标浏览器创建单元创建浏览器端口websocket连接至所述serversocket，websocket与serversocket之间为第二socket路径2；所述第二socket路径2用于html5页面与air平台的数据通讯。

具体实施时，guip主程序启动后，首先自动创建服务器端口serversocket，serversocket创建成功后，通过nativeprocess的方式启动一个cefloaderair程序(图2中的cef加载程序，即目标浏览器加载单元)，并将token和serversocket的端口信息传递给cef加载程序，cefloaderair程序通过ane的方式启动guipcefform程序(目标浏览器创建单元，注：guipcefform与cefloaderair可以共用一个进程)，cef加载程序(cefloaderair)和目标浏览器创建单元(guipcefform)启动后各自会启动一个socket连接到serversocket，即加载socket端口(在图2中的cef加载程序端)与serversocket(在图2中的通用业务处理平台端，即air平台或air客户端)之间为第一socket路径1，websocket(在图2中的目标浏览器端)与serversocket之间为第二socket路径2，进而完成程序的初始化，完成程序启动的所有工作。

二、其次，介绍上述步骤101。

具体实施时，接收air展现html5页面请求可以通过用户点击guip菜单的方式。

三、接着，介绍上述步骤102。

在一个实施例中，根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令，可以包括：

判断待展现页面的类型；

在确定待展现页面的类型为html5页面时，根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令。

具体实施时，在接收到air展现html5页面请求时，guip内部根据菜单对应功能码配置的打开方式(每个页面对应一个功能码，每个功能码在后台有对应的配置，功能码配置中有一项是打开方式(openmode)配置，例如支持：flex打开(openmode＝1)，内嵌浏览器打开(openmode＝6))自动校验要加载的页面是flex页面还是h5页面，如果是h5页面，根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令，判断页面的类型后进行后续页面展现，提高了air展现页面的灵活性。

四、接着，介绍上述步骤103和104。该两个步骤包括窗口创建、控制及展现的过程。

在一个实施例中，在根据所述创建指令，创建目标浏览器的页签窗口之后，还可以包括：

通过window操作系统底层的win32.dll提供的接口，将所述页签窗口设置成air平台的子窗口；

通过window操作系统底层的win32.dll提供的接口，控制所述页签窗口在air平台中显示的坐标位置。

具体实施时，上述设置子窗口及控制页签窗口的显示位置，提高了页面展现的质量和灵活性，提高了用户体验。

具体实施时，若根据上述页面类型判断，确定待展现页面的类型是h5页面，guip通过ane创建浏览器页签窗口，并通过window操作系统底层的win32.dll提供的接口，将浏览器页签窗口设置成guip的子窗口，并控制浏览器页签窗口在guip中的显示位置，浏览器页签窗口创建完成后开始加载对应的网页，进而完成窗口展示和网页加载功能。

具体实施时，每个打开的浏览器页面都是一个独立窗口。guip通过socket(第一socket路径)发送指令给cefloaderair程序(目标浏览器加载单元)，cefloaderair程序通过ane调用guipcefform(目标浏览器创建单元)创建一个浏览器窗口，创建窗口的同时执行两个操作：executeasynjavascript和registerjsobject。

executeasynjavascript操作：执行js脚本动态绘制界面相关提示信息；

registerjsobject操作：注入顶层js对象(即向window注入属性和属性值，例如模块属性：guipmodule，开发可以在页面通过window.guipmodule.moduleid的方式调用模块的moduleid的属性值)，开发js调用接口。

js接口调用：js通过resigterjsobject调用guipcefform接口，guipcefform程序通过sokcet调用guip的接口，进而完成js调用guip接口，进而实现了h5页面与air交易界面的通讯。

具体实施时，在上述步骤104中，从浏览器页签窗口加载各应用系统网页无需重复登录，网页内的所有请求都将在请求头中追加token信息，token信息内包含用户成功登录标识。由各应用系统后台解密token并获取登录标识，进而可以实现用户单点登录。

基于同一发明构思，本发明实施例中还提供了一种air展现超文本标记语言html5页面的装置，如下面的实施例。由于air展现超文本标记语言html5页面的装置解决问题的原理与上述air展现超文本标记语言html5页面的方法相似，因此air展现超文本标记语言html5页面的装置的实施可以参考上述air展现超文本标记语言html5页面的方法的实施，重复之处不再赘述。以下所使用的，术语“模块”或者“单元”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图3是本发明实施例中air展现超文本标记语言html5页面装置的结构示意图，如图3所示，该装置可以包括：

接收单元02，用于接收air展现html5页面请求；

发送单元04，用于根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令；所述目标浏览器为支持html5特性的浏览器；

页签窗口创建单元06，用于根据所述创建指令，创建目标浏览器的页签窗口；

html5页面展现单元08，用于根据用户登录air平台的token信息，从所述页签窗口展现html5页面。

在一个实施例中，所述发送单元具体用于：

判断待展现页面的类型；

在确定待展现页面的类型为html5页面时，根据预先建立的air平台与目标浏览器之间的socket路径，发送目标浏览器的页签窗口创建指令。

在一个实施例中，可以按照如下方法预先建立air平台与目标浏览器之间的socket路径：

用户登录air平台时，生成token信息以及创建服务器端口serversocket；

air平台通过本机程序启动目标浏览器加载单元，将所述token信息和serversocket信息传输至所述目标浏览器加载单元；

目标浏览器加载单元通过ane方式，将所述token信息和serversocket信息传输至目标浏览器创建单元；创建加载socket端口连接至所述serversocket，加载socket端口与serversocket之间为第一socket路径；所述第一socket路径用于发送所述页签窗口创建指令；

目标浏览器创建单元创建浏览器端口websocket连接至所述serversocket，websocket与serversocket之间为第二socket路径；所述第二socket路径用于html5页面与air平台的数据通讯。

在一个实施例中上述air展现超文本标记语言html5页面的装置还可以包括：页签窗口操控单元；所述页签窗口操控单元用于：

通过window操作系统底层的win32.dll提供的接口，将所述页签窗口设置成air平台的子窗口；

通过window操作系统底层的win32.dll提供的接口，控制所述页签窗口在air平台中显示的坐标位置。

下面再举一例子，以说明本发明如何实施。

通用业务处理平台通过内嵌浏览器加载内部邮箱系统：

使用内嵌浏览器(目标浏览器)加载h5网页主要流程分为三个部分：启动guip、加载网页和单点登录(数据交互)。下面对这三个部分进行详细介绍。

1.启动guip：用户先登录guip->生成单点登录token->初始化内嵌浏览器->完成登录。

用户登录guip后，guip生成token信息并启动serversocket，serversocket启动成功后，通过本机程序启动cef加载程序，并将token和serversocket的端口信息传递给cef加载程序，cef加载程序通过本机扩展加载浏览器，cef加载程序(cefloaderair)与浏览器(guipcefform，该程序的作用主要包括：1、创建socket，可以由目标浏览器创建单元实现；2、创建目标浏览器的页签窗口，可以由页签窗口创建单元实现；3、创建与h5网页通讯的接口)是公用一个进程的两个不同程序。接着，cef加载程序和浏览器启动后各自会启动一个socket连接到serversocket，进而完成程序的初始化。

2.加载网页：用户点击菜单->弹出浏览器窗口->将窗口嵌入到guip->加载网页。

用户点击guip的菜单，guip内部根据菜单的类型自动校验要加载的页面是flex页面还是h5页面。如果是h5页面guip通过ane创建浏览器页签窗口，并通过window操作系统底层的win32.dll提供的接口，将浏览器页签窗口设置成guip的子窗口，并控制浏览器页签窗口在guip中的显示位置，浏览器页签窗口创建完成后开始加载对应的网页，进而完成窗口展示和网页加载功能。

3.单点登录：网页内发起请求->内嵌浏览器拦截请求并追加请求头token->发送请求到后台应用服务器。

从浏览器页签窗口加载各应用系统网页无需重复登录，网页内的所有请求都将在请求头中追加token信息，token信息内包含用户成功登录标识。由各应用后台解密token并获取登录标识，进而实现用户单点登录。

通过上述可知，本发明实施例实现了：

1、通过cef技术增强air程序展现h5页面的功能。

2、通过cef技术实现了浏览器版本的统一，避免了很多浏览器兼容性问题。

3、通过socket通讯，使得原有的air开发的交易页面能和h5开发的交易页面进行数据通讯。

本发明实施例还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述实现air展现超文本标记语言html5页面的方法。

本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有执行实现air展现超文本标记语言html5页面的方法的计算机程序。

本发明实施提供的技术方案的有益技术效果为：让基于html5开发的页面与air开发的程序整合成为可能，增强air客户端的展现能力，并且通过socket通讯方案，实现了原有的air开发的交易页面与h5开发的交易页面之间的数据通讯。

显然，本领域的技术人员应该明白，上述的本发明实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明实施例不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明实施例可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。