CN105204875A - 网页调用native功能的方法和系统 - Google Patents

Abstract

本发明提供一种网页调用native功能的方法，包括步骤：通过浏览器组件获取网页页面的资源请求；根据所述资源请求解析出所述资源的统一资源定位符；根据所述统一资源定位符获取并执行native指令。另外还提供一种与所述方法对应的网页调用native功能的系统，本发明的技术方案，通过在浏览器组件进行加载资源时接管资源请求，解析资源的统一资源定位符并获取native指令执行，以加载资源的形式实现网页页面与native的互调，使得在网页页面调试中，无需修改页面跳转方式，即可借助开发工具进行页面调试，降低了调试复杂度，提高了调试效率。

Description

网页调用native功能的方法和系统

技术领域

本发明涉及计算机技术领域，特别是涉及一种网页调用native功能的方法和系统。

背景技术

“native”是原生的意思，指编写对应系统上原生应用的原生语言，“native”在不同系统上具体所指的语言是不同的，例如，iOS系统的原生应用是用Objective-C编写的，Android系统原生应用是用Java编写的。

目前，网页调用native功能的技术，一般是通过一种伪协议监听浏览器组件(webview)的URL(UniformResoureLocator，统一资源定位符)加载事件，再针对伪协议约定的schema截断请求，解析URL并转换为需要交给native调用的指令和参数。

上述调用native功能的技术，存在较为明显的缺陷，例如，在浏览器上调试网页调用浏览器组件扩展的native功能时，由于无法判断出伪协议会让地址跳转到一个不存在的URL，此时需要对浏览器组件的网页地址进行相应修改才能借助开发工具进行页面调试，这就增加了调试难度，影响调试效率。

发明内容

基于此，有必要针对上述现有技术的问题，提供一种网页调用native功能的方法和系统，不影响页面跳转方式，便于页面调试，提高页面调试效率。

一种网页调用native功能的方法，包括如下步骤：

通过浏览器组件获取网页页面的资源请求；

根据所述资源请求解析出所述资源的统一资源定位符；

根据所述统一资源定位符获取并执行native指令。

一种网页调用native功能的系统，包括：

获取模块，用于通过浏览器组件获取网页页面的资源请求；

接管模块，用于根据所述资源请求解析出所述资源的统一资源定位符；

调用模块，用于根据所述统一资源定位符获取并执行native指令。

上述网页调用native功能的方法和系统，通过在浏览器组件进行加载资源时接管资源请求，解析资源的统一资源定位符并获取native指令执行，以加载资源的形式实现网页页面与native的互调，使得在网页页面调试中，无需修改页面跳转方式，即可借助开发工具进行页面调试，降低了调试复杂度，提高了调试效率。

附图说明

图1为一个实施例的网页调用native的方法流程图；

图2为一个实例的页面调用native功能的流程图；

图3为基于现有监听URL加载事件的网页调试结果示意图；

图4为基于本发明网页调用native功能的方法的网页调试结果示意图；

图5为一个实施例的网页调用native功能的系统结构示意图；

图6为另一实施例的网页调用native功能的系统结构示意图；

图7为一个实施例的接管模块结构示意图；

图8为一个实施例的调用模块结构示意图；

图9中为一个实施例的终端设备的部分结构框图。

具体实施方式

下面结合附图对本发明的网页调用native功能的方法和系统的具体实施方式作详细描述。

参考图1所示，图1为一个实施例的网页调用native的方法流程图，包括如下步骤：

步骤S10，通过浏览器组件获取网页页面的资源请求。

在此步骤中，可以通过浏览器组件接收网页页面的发起的资源请求，浏览器组件接收到网页页面的资源请求后，会访问并加载相关资源，由此，可在此接管浏览器组件的加载资源请求，实现监听浏览器组件所有的资源加载行为。

对于网页页面的资源请求，可以通过JS(JavaScript的简写，指一种广泛用于客户端Web开发的脚本语言)代码来实现，所以，用户可以通过JS创建调用浏览器组件扩展功能的资源请求，将资源请求添加到所述网页页面中，这里所说的资源可以为网页的图片、视频等。

步骤S20，根据所述资源请求解析出所述资源的统一资源定位符。

在此步骤中，可以根据接管的网页页面的资源请求，解析资源的统一资源定位符，监听浏览器组件所有的资源加载行为，从而使得网页页面可以通过伪协议调用native扩展功能。

对于上述处理过程，可以通过缓存代理来完成，作为一个实施例，步骤S20的步骤具体可以包括：

将所述资源请求转发至缓存代理；通过缓存代理解析所述资源请求获得统一资源定位符。

对于缓存代理的接管功能实现，可以首先创建一个系统缓存代理，然后设置缓存代理解析的伪协议，扩展接管资源请求的功能，将缓存代理注册生效，实现接管浏览器组件的资源请求功能。

步骤S30，根据所述统一资源定位符获取并执行native指令。

在此步骤中，主要是将统一资源定位符转换为native指令并执行，实现了网页页面对native扩展功能的调用。

在一个实施例中，步骤S30具体可以包括如下：

判断所述统一资源定位符是否为伪协议，若是，通知所述浏览器组件结束资源请求，将所述统一资源定位符转换为native指令并执行该指令，否则根据统一资源定位符从服务器加载相应资源。

进一步地，对于所述将所述统一资源定位符转换为native指令并执行该指令的步骤，可以根据约定的伪协议将所述统一资源定位符转换为native调用的指令和参数，根据所述指令和参数调用相应的方法(method)，即在面向对象编程中native实现的函数，其中，面向对象编程(ObjectOrientedProgramming，OOP)，也称面向对象程序设计，是一种计算机编程架构，其基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成，以达到重用性、灵活性和扩展性的目标，每个对象都能够接收信息、处理数据和向其它对象发送信息。

另外，对于所述浏览器组件的运行环境，可以为电脑操作系统，例如windows系统，也可以移动操作系统(Mobileoperatingsystem，简称MobileOS)，例如iOS系统或android系统等。

由于本发明的技术方案是以加载资源的形式实现网页页面对native代码的调用。所以，可以实现跨平台的使用，在借助开发工具对网页页面调试过程中，调试的网页页面通过该方式调用native功能，无需对浏览器组件的页面地址进行任何改动，只需要在网页页面中创建一个资源请求即可实现消息传递，接管并监听浏览器组件所有的资源加载行为，在浏览器组件有资源加载行为时，根据约定的伪协议调用native扩展功能，从而可以降低页面调试难度，提高调试效率。

参考图2所示，图2为一个实例的页面调用native功能的流程图；包括如下步骤：

步骤S201，用户页面发出资源请求；

步骤S202，浏览器组件将接收的资源请求转发至缓存代理；

步骤S203，缓存代理解析资源请求得到资源的URL；

步骤S204，判断URL是否为伪协议；若是，进入步骤S206，否则进入步骤S205；

步骤S205，浏览器组件根据URL访问服务器并加载相应资源；

步骤S206，截断浏览器组件的资源请求；

步骤S207，将URL转换为native指令并执行。

下面阐述本发明的网页调用native功能的方法在iOS、android系统上实现的两个实例。

(1)在iOS系统上实现

iOS系统自带有缓存代理类，当浏览器发出资源请求时必须会通过所述缓存代理，因此可以通过扩展所述缓存代理类，设置其接管资源请求的功能，处理自定义的伪协议。具体的，可以通过注册一个NSURLProtocol来实现，以下是iOS系统上实现的具体过程：

Step1：创建一个类，继承NSURLProtocol，即创建一个系统缓存代理的副本，以便后续进行扩展。

Step2：对缓存代理进行功能扩展，实现NSURLProtocol提供的方法，使其具备解析伪协议的功能，包括判断schema(XMLSchema，可扩展标记语言架构)是否为约定的伪协议，返回告知浏览器是否要接管本次资源请求，确定为伪协议后拿到请求后截取并解析URL，将URL转换成native指令，调用相应的方法。

Step3：将扩展好的缓存代理注册到系统中，使其生效，缓存代理在浏览器的资源请求过程中就可以接管请求。

另外，iOS系统还可以通过NSURLCache来实现缓存代理，通过NSURLCache实现会比NSURLProtocol迟一些，资源请求可能会被NSURLProtocol先截断。

(2)在Android系统上实现

与iOS系统的情况相似，Android系统也自带有缓存代理类，当浏览器发出资源请求时必须会通过所述缓存代理，因此可以通过扩展所述缓存代理类，设置其接管资源请求的功能，处理自定义的伪协议。具体的，可以通过注册一个ContentProvider来实现，以下是Android系统上实现的具体过程：

Step1：创建一个类，继承ContentProvide。

Step2：对缓存代理进行功能扩展，实现ContentProvide提供的方法。

Step3：在AndroidManifest.xml中注册这个ContentProvider类，使其生效，其中，Android要调用ContentProvider，schema必须是content。在native端注册完缓存代理的接管协议功能后，缓存代理在浏览器的资源请求过程中就可以接管请求。例如，对于html(HyperTextMarkuplanguage，超级文本标记语言)页面就可以通过JS创建img(即image，图像)来调用各种预先实现好的native指令了。

另外，Android系统也可以通过jsInterface来直接扩展浏览器组件的JS功能，相对于接管缓存代理更易于实现，但只能在Android系统中应用，无法进行跨平台应用。

如前面所述，本发明的网页调用native功能的方法，可以实现跨平台的使用，应用于网页页面调试时，可以降低页面调试难度，提高调试效率，下面结合附图来阐述基于本发明的网页调用native功能的方法的页面调试示例。

假设开发一款手机应用，应用里面包含了一个浏览器组件，使用时浏览器组件会打开一个网页(a.html)，而这个网页是类似大众点评的“附近的美食”相关的内容推荐，则该网页首先要知道用户当前位置才能进行对应内容的推荐，由于一般网页不具备可以获取地理位置的接口，此时就需要对浏览器组件开发扩展，使得网页可以调用native功能，实现调取地理位置服务的接口。

在对浏览器组件进行扩展后，浏览器组件加载的网页就可以通过JS代码获取地理位置，网页开发出来后，需要调试页面UI(UserInterface，用户界面)和兼容性，如果当把网页放到普通浏览器里使用开发工具进行调试，使用传统的调试方法，对地理位置接口的调用则会让网页URL跳转到一个不存在的伪协议地址，参考图3所示，图3为基于现有监听URL加载事件的网页调试结果示意图，最终返回的是一个“404网页不存在(404notfound)”的结果，无法借助开发工具进行调试，如果进行调试则需要对浏览器组件的网页地址进行相应修改，这就增加了页面调试难度，降低了页面调试效率。

而采用本发明的网页调用native功能的方法，对地理位置接口的调用，只需要在网页上创建一个资源请求，并不会影响到网页本身，例如创建一个空白图片，通过伪协议关联至地理位置接口，这样就可以借助开发工具进行调试，参考图4所示，图4为基于本发明网页调用native功能的方法的网页调试结果示意图，最终返回的是一个图片的空白结果(none)，降低了页面调试难度，提高了调试效率。

参见图5所示，图5为一个实施例的网页调用native功能的系统结构示意图，包括：获取模块10、接管模块20和调用模块30。

所述获取模块10，用于通过浏览器组件获取网页页面的资源请求。

对于获取模块10，可以通过浏览器组件接收网页页面的发起的资源请求，浏览器组件接收到网页页面的资源请求后，会访问并加载相关资源，由此，可在此接管浏览器组件的加载资源请求，实现监听浏览器组件所有的资源加载行为。

进一步地，对于网页页面的资源请求，可以通过特定的JS代码来实现，所以，参考图6所示，图6为另一实施例的网页调用native功能的系统结构示意图；在获取模块10前还可以包括创建模块40，用于通过JS创建调用浏览器组件扩展功能的资源请求，将所述资源请求添加到所述网页页面中；据此，用户通过创建模块40就可以设置网页页面的资源请求。

所述接管模块20，用于根据所述资源请求解析出所述资源的统一资源定位符。

对于接管模块20，可以根据接管的网页页面的资源请求，解析资源的统一资源定位符，监听浏览器组件所有的资源加载行为，从而使得网页页面可以通过伪协议调用native扩展功能。

作为一个实施例，接管模块20的功能可以通过缓存代理来完成，参考图7所示，图7为一个实施例的接管模块结构示意图，接管模块20进一步可以包括：转发单元210和解析单元220。

所述转发单元210，用于将所述资源请求转发至缓存代理；

所述解析单元220，用于通过缓存代理解析所述资源请求获得统一资源定位符。

对于缓存代理的接管功能实现，可以首先创建一个系统缓存代理，然后设置缓存代理解析的伪协议，扩展接管资源请求的功能，将缓存代理注册生效，实现接管浏览器组件的资源请求功能。

所述调用模块30，用于根据所述统一资源定位符获取并执行native指令。

对于调用模块30，主要是将统一资源定位符转换为native指令并执行，实现了网页页面对native扩展功能的调用。

在一个实施例中，参考图8所示，图8为一个实施例的调用模块结构示意图；调用模块30进一步可以包括：判断单元310、调用单元320和加载单元330。

所述判断单元310，用于判断所述统一资源定位符是否为伪协议；

所述调用单元320，用于在判断单元310的判断结果为是时，通知所述浏览器组件结束资源请求，将所述统一资源定位符转换为native指令并执行；具体的，可以根据约定的伪协议将所述统一资源定位符转换为native调用的指令和参数，根据所述指令和参数调用相应的方法。

所述加载单元330，用于在若判断单元310的判断结果为否时，根据统一资源定位符从服务器加载相应资源。

另外，对于所述浏览器组件的运行环境，可以为电脑操作系统，例如windows系统，也可以移动操作系统，例如iOS系统或android系统等。

本发明的网页调用native功能的系统与本发明的网页调用native功能的方法一一对应，在上述网页调用native功能的方法的实施例阐述的技术特征及其有益效果均适用于网页调用native功能的系统的实施例中，特此声明。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序控制相关的硬件来完成的，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory，ROM)或随机存储记忆体(RandomAccessMemory，RAM)等。

根据上述本发明实施例方案，本发明还提供一种包含计算机可读程序的存储介质，当该存储介质中的计算机可读程序执行时，可以实现上述任何一种方式中的本发明的网页调用native的方法。

如上所述的本发明实施例的方法，可以以软件的形式安装于相应的机器设备上，并在该软件运行时通过控制相关的处理设备来完成上述的网页调用native的过程。相应地，上述浏览器组件可以是设置安装在相应的终端设备上，这里的终端设备可以是手机、平板电脑、PDA(PersonalDigitalAssistant，个人数字助理)、POS(PointofSales，销售终端)、车载电脑等任意终端设备。

据此，基于上述本发明的网页调用native功能的方法和系统，本发明还提供一种终端设备，该终端设备可以是手机、平板电脑、PDA(PersonalDigitalAssistant，个人数字助理)、POS(PointofSales，销售终端)、车载电脑等任意一种可能需要群组提供服务的终端设备。

据此，以下以其中一种终端设备为例，图9中示出了该终端设备的部分结构框图。参考图9，该终端设备包括：存储器910、输入单元920、显示单元930、处理器940、通信模块950等部件。本领域技术人员可以理解，图9中示出的结构，仅仅是与本发明实施例方案相关的部分结构的框图，并不构成对应用在本发明方案中的终端设备的限定，具体的终端设备可以包括比图示中更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图9对该终端设备的各个构成部件进行具体的介绍。

存储器910可用于存储软件程序以及模块，处理器940通过运行存储在存储器910的软件程序以及模块，从而执行与该终端设备相关的各种功能应用以及数据处理。存储器910可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储器910可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

输入单元920可用于接收输入的数字、字符或者其他信息，以及产生与终端设备的用户设置以及功能控制有关的键信号输入。具体在本发明实施例的方案中，可以通过该输入单元920来输入用户调试操作。

具体地，以终端设备为手机为例，该输入单元920可包括触控面板以及其他输入设备。触控面板，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器940，并能接收处理器940发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板。除了触控面板，输入单元920还可以包括其他输入设备。具体地，其他输入设备可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元930可用于显示由用户输入的信息或提供给用户的信息以及各种菜单。显示单元930可包括显示面板，可选的，可以采用液晶显示器(LiquidCrystalDisplay，LCD)、有机发光二极管(OrganicLight-EmittingDiode,OLED)等形式来配置显示面板。具体在本实施例中，通过该显示单元930，可以将调试结果显示给用户。

终端设备通过通信模块950可以实现与服务器之间的通信，该通信模块950可以采用任何可能的方式实现，例如WiFi模块、蓝牙通信、光纤通信等等，通过通信模块950实现了终端设备与服务器之间的通信，从而可以使得终端设备能够向服务端发送相关信息(例如本发明实施例中的根据统一资源定位符从服务器加载相应资源等等)，并接收由服务端返回的相关信息(例如浏览器组件加载的资源等等)。

处理器940是终端设备的控制中心，利用各种接口和线路连接整个终端设备的各个部分，通过运行或执行存储在存储器910内的软件程序和/或模块，以及调用存储在存储器910内的数据，执行终端设备的各种功能和数据处理，从而对终端设备进行整体监控。可选的，处理器940可包括一个或多个处理单元。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (12)

1.一种网页调用native功能的方法，其特征在于，包括如下步骤：

通过浏览器组件获取网页页面的资源请求；

根据所述资源请求解析出所述资源的统一资源定位符；

根据所述统一资源定位符获取并执行native指令。

2.根据权利要求1所述的网页调用native功能的方法，其特征在于，所述根据所述资源请求解析出所述资源的统一资源定位符的步骤包括：

将所述资源请求转发至缓存代理；

通过缓存代理解析所述资源请求，获得统一资源定位符。

3.根据权利要求1所述的网页调用native功能的方法，其特征在于，所述根据所述统一资源定位符获取并执行native指令的步骤包括：

判断所述统一资源定位符是否为伪协议；

若是，通知所述浏览器组件结束资源请求，将所述统一资源定位符转换为native指令并执行；

否则根据统一资源定位符从服务器加载相应资源。

4.根据权利要求3所述的网页调用native功能的方法，其特征在于，所述将所述统一资源定位符转换为native指令并执行的步骤包括：

根据约定的伪协议将所述统一资源定位符转换为native调用的指令和参数，根据所述指令和参数调用相应的方法。

5.根据权利要求1所述的网页调用native功能的方法，其特征在于，在通过浏览器组件获取网页页面的资源请求的步骤前，还包括：

通过JS创建调用浏览器组件扩展功能的资源请求，将所述资源请求添加到所述网页页面中。

6.根据权利要求1所述的网页调用native功能的方法，其特征在于，所述浏览器组件的运行环境包括电脑操作系统、移动操作系统。

7.一种网页调用native功能的系统，其特征在于，包括：

获取模块，用于通过浏览器组件获取网页页面的资源请求；

接管模块，用于根据所述资源请求解析出所述资源的统一资源定位符；

调用模块，用于根据所述统一资源定位符获取并执行native指令。

8.根据权利要求7所述的网页调用native功能的系统，其特征在于，所述接管模块包括：

转发单元，用于将所述资源请求转发至缓存代理；

解析单元，用于通过缓存代理解析所述资源请求获得统一资源定位符。

9.根据权利要求7所述的网页调用native功能的系统，其特征在于，所述调用模块包括：

判断单元，用于判断所述统一资源定位符是否为伪协议；

调用单元，用于在判断单元的判断结果为是时，通知所述浏览器组件结束资源请求，将所述统一资源定位符转换为native指令并执行；

加载单元，用于在若判断单元的判断结果为否时，根据统一资源定位符从服务器加载相应资源。

10.根据权利要求9所述的网页调用native功能的系统，其特征在于，所述调用单元，进一步用于根据约定的伪协议将所述统一资源定位符转换为native调用的指令和参数，根据所述指令和参数调用相应的方法。

11.根据权利要求7所述的网页调用native功能的系统，其特征在于，在获取模块前，还包括创建模块，用于通过JS创建调用浏览器组件扩展功能的资源请求，将所述资源请求添加到所述网页页面中。

12.根据权利要求7所述的网页调用native功能的系统，其特征在于，所述浏览器组件的运行环境包括电脑操作系统、移动操作系统。