CN104035753A - 一种双WebView展示定制页面的方法及系统 - Google Patents

Abstract

本发明提供了一种双WebView展示定制页面的方法及系统，其中的方法包括：根据加载的原始网页信息确定定制页面的模板类型；根据所确定的定制页面的模板类型，构建新的WebView，并在所构建的新WebView上加载根据所述原始网页信息确定的定制页面模板；在所述新WebView中创建内置JS对象以使运行在所述新WebView上的定制页面模板访问原网页的WebView以获取所述原网页的页面数据；根据所获取的原网页的页面数据，在所述新WebView内生成一个新页面作为定制页面；展示定制页面。本发明能够在无需定制服务器支持及修改原始页面的情况下，实现对网页的定制，并实现在原始页面及定制页面中无缝切换，基本无需任何时间上的开销，并且能屏蔽网页的广告。

Description

一种双WebView展示定制页面的方法及系统

技术领域

本发明涉及移动互联网技术领域，更为具体地，涉及一种双WebView展示定制页面的方法及系统。

背景技术

随着移动互联网技术的发展，越来越多的人喜欢通过移动终端设备浏览网页，享受着把互联网装入口袋的便利。由于受到移动终端设备的硬件限制，其浏览器的浏览效果远远比不上PC浏览器的浏览效果，再者如果把在PC浏览器上浏览的网页照搬到移动终端设备的浏览器上，又将会耗费大量的流量。因此，目前很多移动终端设备的浏览器都实现了对网页的定制。

一般情况下，浏览器对网页的定制主要有以下两种方式：

1、将用户的浏览器对网页的请求转至对浏览器厂商服务器的请求，由厂商的服务器到网页的真实地址获取网页数据，在厂商的服务器作网页的定制。

2、通过正常途径获取网页数据，也就是不通过厂商服务器的中转和定制，但是浏览器在获取了网页数据后，浏览器通过注入JS（JavaScript，Java脚本语言）或者通过其他途径对DOM（HTML Document Object Model，文档对象模型）树进行修改，通过对DOM树的修改，修改网页的展示效果和功能，达到定制的目的。

然而，现有的这两种实现方式都存在着较大的不足。

首先，通过厂商服务器对网页进行定制，那么就必须要有一些后台服务器一直维持着页面的定制功能，从而加大了维护的成本；并且一旦服务器出现问题，就会影响网页的定制功能。同时，通过这种中转的形式，也会降低网页打开的速度。

其次，通过注入JS或者其他途径修改DOM树，会破坏原有网页的DOM树结构，对网页的缓存和保存网页源代码等功能造成影响。由于旧页面已经被改动，重新打开网页时已经无法利用这棵已经缓存的DOM树，而保存网页源代码的过程其实就是重新将DOM树解析成字符串，因此，原有的网页缓存和保存源代码功能就失去了作用。同时，使用这种注入JS或者修改DOM树的实现方式无法在定制后屏蔽网页JS控制的广告。

最后，现有的这两种网页定制实现方式都无法在进入定制模式与退出定制模式时进行无缝切换。

发明内容

鉴于上述问题，本发明的目的是提供一种双WebView展示定制页面的方法及系统，以实现对网页的定制和在原始页面以及定制页面中进行无缝切换。

根据本发明的一个方面，提供了一种双WebView展示定制页面的方法，包括：

根据加载的原始网页信息确定定制页面的模板类型；

根据所确定的定制页面的模板类型，构建新的WebView，并在所构建的新WebView上加载根据所述原始网页信息确定的定制页面模板；

在所述新WebView中创建内置JS对象以使运行在所述新WebView上的定制页面模板访问原网页的WebView以获取所述原网页的页面数据；

根据所获取的原网页的页面数据，在所述新WebView内生成一个新页面作为定制页面；

展示所生成的定制页面。

其中，所述根据加载的原始网页信息确定定制页面的模板类型的过程包括：在原始网页加载到预先设置的阶段时，根据加载的原始网页信息此外，优选的方案是，所述预先设置的阶段为所述原始网页的DOM树开始构建时、所述原始网页的DOM树构建完成时或者所述原始网页的BODY节点开始建构时。

此外，优选的方案是，在所述新WebView中创建内置JS对象的过程中，在所述内置JS对象中添加两个接口以访问所述原网页的WebView中的Document对象和Window对象。

此外，优选的方案是，通过对新WebView和原网页的WebView之间的相互切换，完成网页在定制模式和非定制模式之间的相互转换。

其中，所述定制模式和非定制模式之间的相互转换的过程包括：当退出定制模式时，将所述原网页的WebView覆盖在所述新WebView上；当退出定制页面后再进入定制模式时，将所述新WebView覆盖在所述原网页的WebView上。

其中，通过对新WebView的操作，完成对原网页的WebView的数据更改，进而更改定制页面的数据，完成新WebView和所述原网页的WebView之间的数据传递。

另一方面，本发明提供一种双WebView展示定制页面的系统，包括：

模板类型确定单元，用于根据加载的原始网页信息确定定制页面的模板类型；

模板加载单元，用于根据所确定的定制页面的模板类型，构建新的WebView，并在所构建的新WebView上加载根据所述原始网页信息确定的定制页面模板；

页面数据获取单元，用于在所述新WebView中创建内置JS对象以使运行在所述新WebView上的定制页面模板访问原网页的WebView以获取所述原网页的页面数据；

定制页面生成单元，用于根据所获取的原网页的页面数据，在所述新WebView内生成一个新页面作为定制页面；

定制页面展示单元，用于展示所述定制页面。

利用上述根据本发明的双WebView展示定制页面的方法及系统，在无需定制服务器支持及修改原网页页面的情况下，能够实现对网页的定制，并能够实现在原网页页面及定制页面中的切换，基本无需任何时间上的开销，并且能屏蔽网页的广告。同时，原网页页面会在定制结束后一直保留，与定制页面并存。用户对定制页面的操作都能有效的传递给原网页，原网页对用户操作的反馈能给定制页面捕捉，从而使得定制页面能及时的局部更新或者全局更新。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中：

图1为根据本发明实施例的双WebView展示定制页面的方法流程示意图；

图2为根据本发明实施例的生成定制页面的流程示意图；

图3为根据本发明实施例的新WebView和原始网页的WebView之间的数据传递过程示意图；

图4为根据本发明实施例的双WebView展示定制页面的系统方框示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

以下将结合附图对本发明的具体实施例进行详细描述。

需要说明的是，本发明中所涉及的移动终端设备主要指手机等利用移动终端浏览器和移动互联网进行网络访问的终端设备。另外，为了清楚地说明本发明的技术方案，以下先对描述本发明的过程中涉及的一些名词作出解释。

浏览器内核：负责对网页进行加载、显示、以及JS的执行的部分，是浏览器的核心。

WebView：是一个用来显示网页页面的视图，浏览器内核排版渲染出来的画面，会在WebView上显示出来，用户通过移动终端浏览器所看到的网页内容都是在WebView上显示。

Document对象：Javascript语言提供的一个内置对象，用来操纵网页的Dom树、事件等。

Window对象：Javascript语言提供的一个内置对象，能用来访问网页的一些变量等。

模板：一些JS文件和html文件的集合，利用这些文件能够对原始网页的页面数据进行抽取，并构建出新的定制页面。

DOM：文档对象模型。

BODY节点：网页的一个特殊节点。

原始网页：移动终端浏览器最初请求加载的网页，根据该原始网页息确定定制页面的模板类型。

原网页：是与定制页面相对的直接通过移动互联网加载的网页，它可以是移动终端浏览器最初请求加载的网页，即原始网页；也可以是在原始网页的基础上经过刷新、搜索等操作演变的网页。

现有技术中，在没有服务器的支持和必须修改原网页的情况下才能实现网页的定制，并且在原网页和定制页面中切换耗时久，也不能很好屏蔽网页广告。为了解决这一问题，本发明通过网页的WebView覆盖，在无需浏览器厂商服务器支持的情况下对页面进行定制；同时，在这种页面定制的过程中，无需对页面的内容进行修改，还可以快速地在定制页面与原网页中进行切换，并且屏蔽网页的广告。

以下以安卓平台为例对本发明的双WebView展示定制页面的方法做更为详细地介绍，其他平台实现方法类似。

图1示出了根据本发明实施例的双WebView展示定制页面的方法流程示意图，如图1所示：

S110：根据加载的原始网页信息确定定制页面的模板类型；

S120：根据所确定的定制页面的模板类型，构建新的WebView，并在所构建的新WebView上加载根据原始网页信息确定的定制页面模板；

S130：在所构建的新WebView中创建内置JS对象以使运行在该新WebView上的定制页面模板访问原网页的WebView以获取所述原网页的页面数据。

其中，在新WebView中创建内置JS对象的过程中，在该内置JS对象中添加两个接口以使新WebView能够通过这两个接口访问原网页的WebView中的Document对象和Window对象，从而获取原网页的所有页面数据。

S140：根据所获取的原网页的页面数据，利用JS语言在新WebView内生成一个新页面作为定制页面。

S150：展示生成的定制页面。

在步骤S110中确定定制页面的模板类型的过程包括：在原始网页加载到预先设置的阶段时，根据加载的原始网页信息确定定制页面的模板类型。在本发明的实施例中，预先设置的阶段也就是网页加载到的某个具体阶段，该具体阶段可以是原始网页的DOM树开始构建时，或者原始网页的DOM树构建完成时，也可以原始网页的BODY节点开始建构时。

根据网页功能的不同，网页的页面模式也是各不相同，例如具有论坛功能的网页，其页面模式为论坛模式；阅读功能的网页，其页面模式则为阅读模式。不同功能的网页，其页面模式有其自己的特点，但是，并不是所有的页面模式都能定制，也不是所有的页面模式都具有定制的必要和定制的意义。对于某些功能单一、页面特点突出的页面，如论坛网页页面、小说浏览网页页面等，可以通过定制滤除一些与网页主要功能无关的广告等内容。而对于某些综合性的网站，由于其包括的内容模块复杂并且功能多样，因此无法以单一的页面模式对其进行定制。

根据网页加载过程中的DOM的结构或者BODY节点的特点，就可以判断出该网页是否单一的功能性网页，从而确定该网页是否可以定制。相应地，在本发明的一个具体实施方式中，定制页面的模板类型包括论坛模式、阅读模式和小说模式。

作为本发明的一个优选实施方式，当原始网页加载到某个具体阶段时，需要对该页面进行定制判断，用以判断该网页是否可以定制，如果该网页不能定制，那么正常加载该网页；否则，利用网页加载到的具体阶段判断出定制页面的模板类型。例如，当原始网页加载到某个具体阶段时，利用原始网页的URL（Uniform/Universal Resource Locator，统一资源定位符）或者是原始网页的Metal标签信息也可以判断出该网页是否能定制，同样利用该信息也能判断出定制页面需要用到哪种类型的模板。

在上述思路的基础上，对于本领域技术人员来说，可以采用多种手段根据加载的网页数据信息判断定制的模板类型，例如，当获取了所加载的网页的head标签的数据后，检查是否有name为generator的meta标签，若有，则获取这个meta标签的content值，content值则为论坛的类型。如：若head存在这样的一个标签<meta name="generator"content="Discuz!X2">那么就知道这个网页是Discuz!X2论坛，可以使用Discuz!X2的订制模板。

另外，如果用户访问的网址域名为www.qidian.com等常用的小说网站，可以通过预置的记录特定网站的白名单来判断出该网站是一个小说网站，则加载网页的过程中就可以直接使用小说网站的定制模式。其中，预置的记录特定网站的白名单可以包括小说网站列表、论坛网站列表等。

其中，根据原始网页页面模式的不同，定制页面的模板类型可以是论坛模式，或者是阅读模式，或者是小说模式。

为了清楚说明双WebView展示定制页面的方法，图2示出了根据本发明实施例的生成定制页面的流程示意图，以下将结合图2对定制页面的生成作详细说明。如图2所示：

S210：当原始网页加载到某个具体阶段时，判断原始网页是否可以定制，如果可定制，执行步骤S230，否则执行步骤S220；

S220：正常加载原始网页；

S230：确定定制页面的模板类型；

S240：根据定制页面的模板类型，构建新的WebView；

S250：在所构建的新WebView上加载根据所述原始网页信息确定的定制页面模板；

S260：在新WebView中创建一个内置JS对象，使内置JS对象访问原网页的WebView的Document对象和Window对象；

S270：新WebView所运行的模板利用原网页的WebView中的Document对象和Window对象获取原网页DOM节点数据和原网页的其他数据；

S280：新WebView利用获取的原网页DOM节点数据和原网页的其他数据原始网页，在新WebView页面的DOM树上构建定制页面；

S290：持续根据定制页面的模板信息和原网页的页面信息进行定制，直到完成定制页面构建。

在本实施例中，定制页面的模板是由一些HTML文件及JS文件组成，定制页面模板的JS能使用一个特殊的JS对象。作为示例，假设这个对象名字为JSController，通过JSController获取到被覆盖的原网页的WebView所打开的Document对象和Window对象。通过Document对象和Window对象，就能获取到原网页的所有页面数据。利用这些原网页的页面数据和信息用JS语言提供的方法在新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之间的数据传递。

图3示出了根据本发明实施例的新WebView和原网页的WebView之间的数据传递过程示意图，如图3所示：

S310：用户在新WebView上进行操作；

S320：新WebView的JS被触发，通过原网页的Document对象和Windows对象将操作发送给原网页的WebView；

S330：原网页的WebView响应操作；

S340：当原网页的WebView响应操作后，新WebView将原网页的WebView的改变定制在新WebView上；本步骤中的新WebView监听到原网页的WebView的改变后利用页面定制的规则将原网页的WebView的改变实时定制在新WebView上。

S350：判断是否继续监听用户在新WebView上的操作，如果是执行步骤S310，否则结束。

通过上述的实施例可以看出，本发明提供的双WebView展示定制页面的方法，能够在无需浏览器厂商服务器支持的情况下对页面进行定制；同时，在这种定制过程中，无需对页面的内容进行修改；另外，由于原网页的WebView在定制结束后不会被销毁，因此可以快速、无缝地在原网页和定制页面中进行切换；并且更好地利用缓存。

更为重要的是，现有的网页定制技术在对页面的定制过程中，无法彻底的隐藏原始网页的一些特殊元素，由于原网页的JS可能会通过一些定时器生成一些其他的网页元素，这些元素会给原本的定制页面造成干扰，例如弹出广告。但是，本发明提供的双WebView展示定制页面的方法是将定制页面的WebView覆盖在原网页的WebView上，因此，原网页弹出的其他元素，都不会对定制页面造成影响，由于原网页的WebView被盖在下方，无法影响到定制页面的WebView，而原网页的WebView又不会在定制结束后进行销毁。这两个WebView相互依存，协同工作，原网页的WebView通过新WebView获取用户输入，又充当新WebView的事件处理者和数据提供者。

下面将以几个具体的应用实施例对本发明双WebView展示定制页面的技术效果进行说明。

实例一：

现有的某移动终端浏览器通过中间件服务器协助进行页面的定制，如论坛模式，小说阅读模式的定制等。但随着WIFI的普遍应用，通过这种中转的方式，速度可能会有所降低。同时，这样会导致客户端与服务器耦合，某些不确定因素还会导致浏览器的中间件服务器无法正常运行，从而致使这些需要用到定制服务的功能也都无法使用。然而，使用本发明提供的双WebView展示定制页面的方法，由于无需服务器的支持也能进行页面的定制，因此不会受到服务器性能的影响。

实例二：

假设某定制模式是在浏览器客户端本地进行通过注入JS修改网页DOM树完成的，当想退出定制模式时，这个时候只能刷新页面，或者移除对DOM树的修改。刷新会很耗时，而删除对DOM树的修改也需要执行大量的JS，耗费了机器的资源，且因为执行了这个耗时的JS操作，无法做到无缝切换。

但是，使用本发明提供的双WebView展示定制页面的方法，当想退出定制模式时，只需将定制页面的WebView与原始网页的WebView交换位置就行，无需执行任何的JS，当又想重新进入阅读模式，又可以通过交换原网页的WebView与定制页面的WebView的位置来实现。

实例三：

假设某定制模式是在浏览器客户端本地进行通过注入JS修改网页DOM树完成的，但这个原页面的JS启动了一些定时器，这些定时器会每隔一段时间弹一个广告出来。这样的话，定制页面也会显示这些广告，因为定制页面无法判断出这些广告，无法将这些广告隐藏或删除。

而使用本发明提供的双WebView展示定制页面的方法，原页面弹出的广告只会在原页面中显示，但是由于原页面被另外一个新WebView覆盖，也就是被定制页面的WebView覆盖，因而不会对定制页面有任何的影响。

实例四：

当打开定制页面，想要保存原网页时，浏览器的保存功能会导致的定制页面的信息也被保存。同时浏览器也很难100%还原原网页的网页代码。而使用本发明提供的双WebView展示定制页面的方法，由于没有对原网页的DOM树进行修改，因此能够完整地保存原始网页的数据。

通过以上具体应用实施例，可以看出，使用本发明提供的双WebView展示定制页面的方法，能够实现对网页的定制，并能够在原网页的页面及定制页面之间实现无缝切换，并且能很好地屏蔽网页的广告。

与上述方法相对应，本发明还提供了一种双WebView展示定制页面的系统。图4示出了根据本发明实施例的双WebView展示定制页面的系统方框示意图，如图4所示，本发明提供的双WebView展示定制页面的系统400包括模板类型确定单元410、模板加载单元420、页面数据获取单元430、定制页面生成单元440和定制页面展示单元450，其中，页面数据获取单元430还可以包括内置JS对象创建单元（图中未示出）。

其中，模板类型确定单元410用于根据加载的原始网页信息确定定制页面的模板类型；模板加载单元420用于根据定制页面模板确定单元410所确定的定制页面的模板类型，构建新的WebView，并在所构建的新WebView上加载根据原始网页信息确定的定制页面模板；页面数据获取单元430用于在所构建的新WebView中创建内置JS对象以使运行在该新WebView上的定制页面模板访问原网页的WebView以获取原网页的页面数据；定制页面生成单元440用于根据页面数据获取单元430所获取的原网页的页面数据，在新WebView内生成一个新页面作为定制页面；定制页面展示单元450用于展示页面定制单元440所生成的定制页面。

页面数据获取单元430进一步包括内置JS对象创建单元，用于在新WebView中创建内置JS对象，并在所创建的内置JS对象中添加两个接口以访问原网页的WebView中的Document对象和Window对象

如上参照附图以示例的方式描述了根据本发明的双WebView展示定制页面的方法及系统。但是，本领域技术人员应当理解，对于上述本发明所提出的双WebView展示定制页面的方法及系统，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (10)

1.一种双WebView展示定制页面的方法，包括：

根据加载的原始网页信息确定定制页面的模板类型；

根据所确定的定制页面的模板类型，构建新的WebView，并在所构建的新WebView上加载根据所述原始网页信息确定的定制页面模板；

在所述新WebView中创建内置JS对象以使运行在所述新WebView上的定制页面模板访问原网页的WebView以获取所述原网页的页面数据；

根据所获取的原网页的页面数据，在所述新WebView内生成一个新页面作为定制页面；

展示所述定制页面。

2.如权利要求1所述的双WebView展示定制页面的方法，其中，所述根据加载的原始网页信息确定定制页面的模板类型的过程包括：

在原始网页加载到预先设置的阶段时，根据加载的原始网页信息，确定所述定制页面的模板类型。

3.如权利要求2所述的双WebView展示定制页面的方法，其中，所述预先设置的阶段为所述原始网页的DOM树开始构建时、所述原始网页的DOM树构建完成时或者所述原始网页的BODY节点开始建构时。

4.如权利要求1所述的双WebView展示定制页面的方法，其中，在所述新WebView中创建内置JS对象的过程中，在所述内置JS对象中添加两个接口以访问所述原网页的WebView中的Document对象和Window对象。

5.如权利要求1所述的双WebView展示定制页面的方法，其中，通过对所述新WebView和原网页的WebView之间的相互切换，完成网页在定制模式和非定制模式之间的相互转换。

6.如权利要求5所述的双WebView展示定制页面的方法，其中，所述定制模式和非定制模式之间的相互转换的过程包括：

当退出定制模式时，将所述原网页的WebView覆盖在所述新WebView上；

当退出定制页面后再进入定制模式时，将所述新WebView覆盖在所述原网页的WebView上。

7.如权利要求1所述的双WebView展示定制页面的方法，其中，通过对所述新WebView的操作，完成对所述原网页的WebView的数据更改，进而更改所述定制页面的数据，完成所述新WebView和所述原网页的WebView之间的数据传递。

8.如权利要求7所述的双WebView展示定制页面的方法，其中，所述新WebView和所述原网页的WebView之间的数据传递过程包括：

当用户在所述新WebView上进行操作时触发创建的所述内置JS对象，即通过所述原网页的Document对象和Windows对象将所述操作发送给所述原网页的WebView；

所述原网页的WebView响应操作后，所述新WebView将所述原网页的WebView的改变定制在所述新WebView上。

9.一种双WebView展示定制页面的系统，包括：

模板类型确定单元，用于根据加载的原始网页信息确定定制页面的模板类型；

模板加载单元，用于根据所确定的定制页面的模板类型，构建新的WebView，并在所构建的新WebView上加载根据所述原始网页信息确定的定制页面模板；

页面数据获取单元，用于在所述新WebView中创建内置JS对象以使运行在所述新WebView上的定制页面模板访问原网页的WebView以获取所述原网页的页面数据；

定制页面生成单元，用于根据所获取的原网页的页面数据，在所述新WebView内生成一个新页面作为定制页面；

定制页面展示单元，用于展示所述定制页面。

10.如权利要求9所述的双WebView展示定制页面的系统，其中，所述页面数据获取单元进一步包括：

内置JS对象创建单元，用于在所述新WebView中创建内置JS对象，并在所述内置JS对象中添加两个接口以访问所述原网页的WebView中的Document对象和Window对象。