一种webview页面处理方法及装置与流程

本申请涉及一种webview页面处理方法及装置。

背景技术：

webview即我们熟悉的“网络视图”，其能加载并显示界面内容；webview主要用于展示网络请求后的内容，将从网络地址请求的内容展示在里面。由于此种属性，这使得webview一般作为一种单操作线程的方式进行操作，但是由于webview本身的特性，各个网页之间存在一定的关系，但是单操作线程的方式，使得各个webview之间独立存在，通过与服务器交互数据进行页面显示，这实质上大大延缓了网页的刷新效率，也浪费了中间存储资料，同时进行了大量的不必要的信息交互，影响整体的数据传输速度。一般移动应用app展示html5页面有两种方式：一.用单层webview组件，该方式html5页面打开新页面和回退之前页面都在单层webview组件内，实现简单，但跳转及回退的业务逻辑层次不清晰，回退页面还需要重新加载页面，效率低也浪费服务资源；二.用多层webview组件叠加显示页面，该方式html5页面打开新页面就会打开一层webview组件，返回时只需要关闭子webview即可，层次分明，返回上一个页面也不需要重新加载，效率高、速度快，但是子webview执行完操作后，无法及时、主动通知母webviewhtml5页面处理对应数据，如审批列表处理审批等业务无法应用该方式，限制了多层webview的应用场景。

技术实现要素：

为了解决上述问题，本申请一方面提出了一种webview页面处理方法，包括如下步骤：包括一母webview，子webview通过触发母webview产生；子webview获取第一外部输入，判断所述第一外部输入是否为母webview所需数据，若为所需数据，将第一外部输入传输给母webview或者传输到母webview可获取的其他位置；子webview获取第二外部输入，第二外部输入使得子webview关闭或者降低相对于母webview的显示优先级；第二外部输入使得母webview获取第一外部输入之后展示到显示界面。本申请设置为母webview可以与子webview可直接进行信息交互的方式，使得在多层webview下，可以进行相互之间的信息交互，实现了多层webview页面之间的消息通讯，解决了返回底层页面无法刷新、刷新慢的问题，简单易行，通讯效率高，扩宽了多层webview页面的应用场景。

优选的，获取第二外部输入后，子webview关闭，母webview获取第一外部输入之后展示到显示界面。

优选的，获取第二外部输入后，子webview的显示优先级降低至低于母webview显示优先级或者是母webview显示优先级升高至高于子webview显示优先级，使得获取了第一外部输入之后的母webview展示到显示界面。本申请提供了两种母webview与子webview之间的切换方式，一种是子webview关闭，使得母webview得以进入到显示界面；第二种是母webview显示优先级提升，此时子webview并未关闭，在此种状况下，由于没有关闭，即使在没有框架层存在的情况下，子webview可以直接通过设计js调用方法进行与母webview进行信息交互，这样可以进一步的节省调用的过程以及调用过程所占用的储存空间以及计算能力。

优选的，还包括一框架层，所述框架层用于母webview和子webview之间的通信。本申请通过设置框架层可以为不同线程之间的webview提供一个交互通道，由于在多层模式下处于激活状态下的webview只有一个，不同线程的webview并不能通信，因此需要设置框架层作为中间信息传输和控制中枢来进行不同webview之间的信息交互。

优选的，所述子webview叠加在母webview上，所述子webview待输入内容来源于母webview。

优选的，所述框架层将webview配置成允许js交互并且定义js调用方法名和参数；在框架层设置有js接口使得母webview和子webview的对象和方法映射设置。

优选的，所述子webview上还叠加归属于子webview的子子webview，在子webview和子子webview之间独立设置有用于通信的框架层。本申请可以采用树状分布来使得每个webview都具有扩展性，且为了使得临近webview之间的一体化，临近的webview之间设置独立的框架层来保证webview之间通信的及时性和有效性。

优选的，所述母webview对应多个子webview，所述子webview对应多个子子webview。

优选的，各个webview采用html5界面。

另一方面，还提出了一种webview页面处理装置，包括如下模块：

显示模块，用于显示母webview和子webview，子webview通过触发母webview产生；

第一接收判断模块，用于子webview获取第一外部输入，判断所述第一外部输入是否为母webview所需数据，若为所需数据，将第一外部输入传输给母webview或者传输到母webview可获取的其他位置；

第二接收判断模块，用于子webview获取第二外部输入，第二外部输入使得子webview关闭或者降低相对于母webview的显示优先级；第二外部输入使得母webview获取第一外部输入之后展示到显示界面；

框架层，所述框架层用于母webview和子webview之间的通信。

本申请能够带来如下有益效果：

1.本申请设置为母webview可以与子webview可直接进行信息交互的方式，使得在多层webview下，可以进行相互之间的信息交互，实现了多层webview页面之间的消息通讯，解决了返回底层页面无法刷新、刷新慢的问题，简单易行，通讯效率高，扩宽了多层webview页面的应用场景；

2.本申请提供了两种母webview与子webview之间的切换方式，一种是子webview关闭，使得母webview得以进入到显示界面；第二种是母webview显示优先级提升，此时子webview并未关闭，在此种状况下，由于没有关闭，即使在没有框架层存在的情况下，子webview可以直接通过设计js调用方法进行与母webview进行信息交互，这样可以进一步的节省调用的过程以及调用过程所占用的储存空间以及计算能力；

3.本申请通过设置框架层可以为不同线程之间的webview提供一个交互通道，由于在多层模式下处于激活状态下的webview只有一个，不同线程的webview并不能通信，因此需要设置框架层作为中间信息传输和控制中枢来进行不同webview之间的信息交互；

4.本申请可以采用树状分布来使得每个webview都具有扩展性，且为了使得临近webview之间的一体化，临近的webview之间设置独立的框架层来保证webview之间通信的及时性和有效性。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为实施例1的示意图；

图2为实施例2的示意图；

图3为实施例3的示意图。

具体实施方式

为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本申请进行详细阐述。

在第一个实施例中，如图1所示，按照如下方式进行webview页面的调用和处理：

步骤s101：定义框架层与webview内js相互通信的通信协议；

定义用于接收webview内js调用的通信协议进行通讯中转，首先需要定义定义框架层与webview内js相互通信的通信协议，记录激活的webview组件，包括以下步骤：

移动端应用框架层(简称框架层)，定义用于接收webview内js调用的通信协议，以下步骤可以实施：

1.框架层webview配置为允许js交互；

2.框架层定义js调用的方法名及参数；

3.框架层通过添加js接口将native对象和方法进行映射；

也不局限于以上方法，通过例如cordova等开源技术，安装自定义native插件流程开发、配置也可以定义用于接收webview内js调用的通信协议；

框架层，定义管理webview的组件，记录处于激活状态的webview对象；每次有新开启或关闭webview页面时记录将要激活的webview对象；

webview内h5页面,定义接收函数用于对通讯的消息事件做出响应；webview内需要打开的h5页面可以定义js接收函数，接收框架层通过webview对象调用的js脚本；

步骤s102：在母webview界面上打开子webview，并输入相关信息，关闭子webview页面时调用框架层通信协议；

关闭子webview页面时html中调用s1步骤中框架层的通信协议，发起通讯，并将数据参数(可以定义字符串参数，用于json数据传递，扩展性强可支持多种数据业务类型)传递给框架层；

步骤s103：框架层管理webview的组件更新激活的webview对象；

子webview页面关闭时框架层管理webview的组件，更新母webview页面为激活的webview对象；

步骤s104：框架层通信协议发送消息通知，即母webview进行接收；

框架层通信协议收到子webview页面发来的消息及参数，在子webview页面关闭后通知到当前激活的母webview页面，可使用母webview内包含的loadurl或cordova等开源技术封装的加载js的方法执行“javascript：funname()；”即执行s1步骤中h5页面定义的接收函数，发送消息通知到母webview页面内；

步骤s105：母webview的接收函数收到子webview发送的消息，执行需要的操作。

通过如上步骤，母webview内html收到来自子webview的通讯消息，执行需要的操作。

在第二个实施例中，如图2所示，按照如下方式进行webview页面的调用和处理：

步骤s201：定义框架层与webview内js相互通信的通信协议；

定义用于接收webview内js调用的通信协议进行通讯中转，首先需要定义定义框架层与webview内js相互通信的通信协议，记录激活的webview组件，包括以下步骤：

移动端应用框架层(简称框架层)，定义用于接收webview内js调用的通信协议，以下步骤可以实施：

1.框架层webview配置为允许js交互；

2.框架层定义js调用的方法名及参数；

3.框架层通过添加js接口将native对象和方法进行映射；

也不局限于以上方法，通过例如cordova等开源技术，安装自定义native插件流程开发、配置也可以定义用于接收webview内js调用的通信协议；

框架层，定义管理webview的组件，记录处于激活状态的webview对象；每次有新开启或隐藏webview页面时记录将要激活的webview对象；

webview内h5页面,定义接收函数用于对通讯的消息事件做出响应；webview内需要打开的h5页面可以定义js接收函数，接收框架层通过webview对象调用的js脚本；

步骤s202：在母webview界面上打开子webview，并输入相关信息，降低子webview页面优先级时调用框架层通信协议；

降低子webview页面优先级时html中调用s1步骤中框架层的通信协议，发起通讯，并将数据参数(可以定义字符串参数，用于json数据传递，扩展性强可支持多种数据业务类型)传递给框架层；

步骤s203：框架层管理webview的组件更新激活的webview对象；

子webview页面隐藏时框架层管理webview的组件，更新母webview页面为激活的webview对象；

步骤s204：框架层通信协议发送消息通知，即母webview进行接收；

框架层通信协议收到子webview页面发来的消息及参数，在子webview页面隐藏后通知到当前激活的母webview页面，可使用母webview内包含的loadurl或cordova等开源技术封装的加载js的方法执行“javascript：funname()；”即执行s1步骤中h5页面定义的接收函数，发送消息通知到母webview页面内；

步骤s205：母webview的接收函数收到子webview发送的消息，执行需要的操作。

通过如上步骤，母webview内html收到来自子webview的通讯消息，执行需要的操作。

在第三个实施例中，如图3所示，按照如下方式进行webview页面的调用和处理：

步骤s301：定义webview内js相互通信的通信协议；

定义用于接收webview内js调用的通信协议进行通讯中转，首先需要定义各个webview内js相互通信的通信协议，记录激活的webview组件，包括以下步骤：

1.webview配置为允许js交互；

2.webview定义js调用的方法名及参数；

3.webview通过添加js接口将native对象和方法进行映射；

也不局限于以上方法，通过例如cordova等开源技术，安装自定义native插件流程开发、配置也可以定义用于接收webview内js调用的通信协议；

webview内h5页面,定义接收函数用于对通讯的消息事件做出响应；webview内需要打开的h5页面可以定义js接收函数，接收其他webview通过webview对象调用的js脚本；

步骤s302：在母webview界面上打开子webview，并输入相关信息，降低子webview页面的优先级时调用通信协议；

隐藏子webview页面时html中调用s1步骤中的通信协议，发起通讯，并将数据参数(可以定义字符串参数，用于json数据传递，扩展性强可支持多种数据业务类型)传递给母webview；

步骤s303：管理webview的组件更新激活的webview对象；

子webview页面隐藏时管理webview的组件，更新母webview页面为激活的webview对象；

步骤s304：webview通信协议发送消息通知，即母webview进行接收；

框架层通信协议收到子webview页面发来的消息及参数，在子webview页面隐藏后通知到当前激活的母webview页面，可使用母webview内包含的loadurl或cordova等开源技术封装的加载js的方法执行“javascript：funname()；”即执行s1步骤中h5页面定义的接收函数，发送消息通知到母webview页面内；

步骤s305：母webview的接收函数收到子webview发送的消息，执行需要的操作。

通过如上步骤，母webview内html收到来自子webview的通讯消息，执行需要的操作。

在第四个实施例中，一种webview页面处理装置，包括如下模块：

显示模块，用于显示母webview和子webview，子webview通过触发母webview产生；

第一接收判断模块，用于子webview获取第一外部输入，判断所述第一外部输入是否为母webview所需数据，若为所需数据，将第一外部输入传输给母webview或者传输到母webview可获取的其他位置；

第二接收判断模块，用于子webview获取第二外部输入，第二外部输入使得子webview关闭或者降低相对于母webview的显示优先级；第二外部输入使得母webview获取第一外部输入之后展示到显示界面；

框架层，所述框架层用于母webview和子webview之间的通信。

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