CN103425794A - 基于双WebView的网页预览方法和装置 - Google Patents

Abstract

本发明提供一种基于双WebView的网页预览方法，包括步骤：当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档；其中，所述原始WebView为用户不可见的；对所述目的网页的主文档进行解析获取页面的DOM结构；在动态WebView中加载本地页面模板；根据所述页面的DOM结构抽取所述目的网页的正文；将所述目的网页的正文按照所述本地页面模板显示在所述动态WebView中。本发明提供一种基于双WebView的网页预览装置，可以将网页预览的内容按照预定的网页模板在网页中进行显示，提高网页预览的显示效果。

Description

基于双WebView的网页预览方法和装置

技术领域

本发明涉及移动通信技术领域，更为具体地，涉及基于双WebView的网页预览方法和装置。

 

背景技术

随着移动互联网技术的发展，越来越多的人喜欢通过移动终端设备浏览网页，享受着把互联网装入口袋的便利。在移动终端中安装的网页浏览装置，通过wifi网络或者是通过移动通信网络与服务器的资源建立连接，根据接收的网页链接向服务器的资源获取对应的内容；由于在获取网页内容的过程会消耗网络流量，而某些网页是用户不希望访问的页面，这样会造成不必要的网络流量浪费；因此，在接收到网页链接请求后，先进行网页预览，以供用户筛选网页，这样可以避免不必要的网络流量的产生。然而，当前的网页预览仅仅是通过正文抽取到正文字符串后，将其显示在控件中，网页预览效果单一。

发明内容

本发明的目的在于提出一种基于双WebView的网页预览方法和装置，可以将网页预览的内容按照预定的网页模板在网页中进行显示，提高网页预览的显示效果。

根据本发明的一个方面，提供了一种基于双WebView的网页预览方法，包括：

当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档；对所述目的网页的主文档进行解析获取页面的DOM结构；根据所述页面的DOM结构抽取所述目的网页的正文；将所述目的网页的正文按照在动态WebView中加载的本地页面模板显示在所述动态WebView中。

本发明的另一方面提供了一种基于双WebView的网页预览装置，包括：

主文档加载模块，用于当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档；结构解析模块，用于对所述目的网页的主文档进行解析获取页面的DOM结构；正文抽取模块，用于根据所述页面的DOM结构抽取所述目的网页的正文；显示模块，用于将所述目的网页的正文按照在动态WebView中加载的本地页面模板显示在所述动态WebView中。

本发明方法及系统公开的技术，在进入预览模式时，在原始WebView中加载网页链接请求指向的目的页面的主文档；然后对该主文档进行解析获取目的页面的DOM结构；根据目的页面的DOM结构抽取其中的正文内容；然后将正文内容在动态WebView中按照预定的页面模板显示；在原始WebView中只加载目的网页的主文档，不加载外部资源，不执行Javascript, 不进行排版和渲染，可以节省页面解析的时间；将抽取的网页正文在动态WebView中按照预定的本地页面模板进行显示，实现了网页预览显示的可定制性，也更加灵活，提高了网页预览的显示效果。

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

在包括所有这些方面以及它们的等同物。

 

附图说明

根据下述参照附图进行的详细描述，本发明的上述和其他目的、特征和优点将变得更加显而易见。在附图中：

图1示出了根据本发明的实施例的网页预览方法的一个流程图；

图2示出了根据本发明的实施例的网页预览方法的另一个流程图； 

图3示出了根据本发明的网页预览装置的一个方框示意图；

图4示出了根据本发明的网页预览装置的另一个方框示意图。

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

 

具体实施方式

下面描述本公开的各个方面。应该明白的是，本文的教导可以以多种多样形式具体体现，并且在本文中公开的任何具体结构、功能或两者仅仅是代表性的。基于本文的教导，本领域技术人员应该明白的是，本文所公开的一个方面可以独立于任何其它方面实现，并且这些方面中的两个或多个方面可以按照各种方式组合。例如，可以使用本文所阐述的任何数目的方面，实现装置或实践方法。另外，可以使用其它结构、功能、或除了本文所阐述的一个或多个方面之外或不是本文所阐述的一个或多个方面的结构和功能，实现这种装置或实践这种方法。此外，本文所描述的任何方面可以包括权利要求的至少一个元素。

下面将参照附图描述本发明的各个实施例。

本发明提供了一种基于双WebView(网页视图对象)的网页预览方法，图1示出了根据本发明的实施例的网页预览方法的一个流程图，包括步骤：

S1、当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取网页链接指向的目的网页的主文档；接着进行步骤S2。

其中，原始WebView为用户不可见的。

S2、对目的网页的主文档进行解析获取页面的DOM结构；

其中，DOM（HTML Document Object Model，文档对象模型）。

S3、在动态WebView中加载本地页面模板；接着进行步骤S4。

S4、根据页面的DOM结构抽取目的网页的正文；接着进行步骤S5。

S5、将目的网页的正文按照本地页面模板显示在动态WebView中。

本发明方法公开的技术，在进入预览模式时，在原始WebView中加载网页链接请求指向的目的页面的主文档；然后对该主文档进行解析获取目的页面的DOM结构；根据目的页面的DOM结构抽取其中的正文内容；然后将正文内容在动态WebView中按照预定的页面模板显示；在原始WebView中只加载目的网页的主文档，不加载外部资源，不执行Javascript, 不进行排版和渲染，可以节省页面解析的时间；将抽取的网页正文在动态WebView中按照预定的本地页面模板进行显示，实现了网页预览显示的可定制性，也更加灵活，提高了网页预览的显示效果。

更优选的，步骤S1中，在原始WebView中只加载页面的主文档(.html，.htm，.xml等)；不加载外部资源，包括外部的CSS， JavaScript（JavaScript，Java脚本语言），Image（类），Ajax（一种创建交互式网页应用的网页开发技术）；不加载子frame（框架）中的内容；不执行页面内的JavaScript，不对页面进行排版和渲染，在步骤S2中完成对目的页面的解析，建立页面的Dom结构。

更优选的，在步骤S3中，在预览窗口中创建动态WebView，浏览器通过动态的WebView加载预定的本地模板页面，该模板页面包含了通用的本地CSS（Cascading Style Sheet，级联样式表）资源文件，模板页面加载完成后，会执行一段本地的JavaScript脚本，该脚本基于浏览器内核扩展的JavaScript对象，可以获得原始WebView中网页的内容(DOM结构)；并对原始WebView中网页的内容进行抽取得到页面正文；在步骤S4    中将抽取得到的正文内容显示在动态WebView中的本地模板页面

上，实现预览效果。

其中，预览窗口是通过系统提供的视图对象，作为WebView对象的显示容器。原始WebView和动态WebView都作为预览窗口的子对象，但原始WebView处于隐藏状态。

 

在本发明的一个或者多个实施方式中，原始WebView、动态WebView可以是在弹出预览窗口时，即时创建的，也可以是预先创建的，当满足原始WebView的调用条件时，调用对应的原始WebView；当满足动态WebView的调用条件时，调用对应的动态WebView；同时，本领域的技术人员可以理解，原始WebView、动态WebView可以使用其他名称代替，其本质是这2者之间存在区别性；如可以将原始WebView称之为第一WebView，将动态WebView称之为第二WebView。

本领域的技术人员可以理解，步骤S3与步骤S1之间，步骤S3与步骤S2之间，并没有严格的执行顺序；步骤S3与步骤S1可以同时执行，也可以步骤S3在步骤S1之前执行；步骤S3与步骤S2之间可以同时执行，也可以步骤S3在步骤S2之前执行；在执行完S1、S2、S3后，进行步骤S4，再进行步骤S5。

 

更优选的，在本发明的一个或者多个实施方式中，S1步骤可以包括但不限于以下步骤：

当进入网页预览模式时，弹出预览窗口，在预览窗口中创建原始WebView；

在原始WebView中根据接收的网页链接请求获取网页链接指向的目的网页的主文档。

 

更优选的，在本发明的一个或者多个实施方式中，S3步骤包括但不限于以下步骤：

当根据页面的DOM结构判定目的网页存在正文时，先在预览窗口中创建动态WebView，然后在动态WebView中加载本地页面模板；其中，本页面模板为预定的html页面。

 

更优选的，在本发明的一个或者多个实施方式中，步骤S4包括但不限于以下步骤：

根据页面的DOM结构获取目的网页的主文档所对应的HTML（Hypertext Markup Language，超文本标记语言）节点；

获取 HTML节点中内容，得到目的网页的正文。

 

更优选的，在本发明的一个或者多个实施方式中，在S1步骤前包括步骤：

判断网页中的网页链接数是否超过预定的阈值，若超过预定的阈值，则进入网页预览模式，即进入步骤S1；

若没有超过预定的阈值，则进行正常的页面加载流程，即根据网页链接请求获取网页链接指向的目的网页，将目的网页进行排版和渲染后显示。

 

为更好的理解本发明的思想，下面以一具体的流程来进行说明，图2示出了根据本发明的实施例的网页预览方法的另一个流程图；本实施包括步骤：

S201、开始流程；接着进行步骤S202；

S202、在当前网页页面点击网页链接；接着进行步骤S203；

用户首先会打开任意页面，这个页面可能包含有锚链接（Anchor标签）。

S203、判断当前页面中的链接数是否超过预定的阈值；

如果锚链接的数目countForAnchor大于或者等于阈值M，该页面是一个目录页面，即判断结果为是；否则是非目录页面，即判断结果为否；其中，M值没有统一的标准，可以根据实际需要进行确定。

若判断结果为是则进行步骤S204；若判断结果为否，则进行步骤S213。

S204、弹出预览窗口；接着进行步骤S205；

其中，预览窗口是通过系统提供的视图对象，作为WebView对象的显示容器。

S205、在预览窗口中创建原始WebView；接着进行步骤S206；

根据网页链接请求在原始的WebView中开始加载流程，只加载网页链接指向的页面的主文档，即在原始WebView中禁止所有的外部JavaScript，CSS， Image，Ajax等资源请求；虽然外部JavaScript的运行可能会改变页面的结构，但是大多数情况下主文档的内容已经能够满足快速预览的需求。

S206、加载网页链接指向的目的页面的主文档；接着进行步骤S207；

S207、解析页面主文档，得到页面的DOM结构；接着进行步骤S208；

解析过程禁止排版和渲染，禁止JavaScritp的执行，仅创建页面的DOM树，获取DOM树的页面的DOM结构。

S208、根据页面的DOM结构，判断是否有正文；

基于开源的Readability判定算法，判定页面是否有可以预览的正文；

若判断有正文，则进行步骤S209；若判断无正文，则进行步骤S214。

S209、在预览窗口中创建动态WebView；接着进行步骤S210；

S210、在建动态WebView中加载本地页面模板；接着进行步骤S211；

本地页面模板包括：模板页面、CSS文件 和JavaScript文件；模板页面提供了预览显示的页面模板；CSS文件则为预览内容提供了基本的显示效果； 基于内核JavaScript扩展的JavaScript对象，用于抽取原始WebView中页面的正文内容。

S211、根据页面的DOM结构抽取目的网页的正文；接着进行步骤S212；

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问；当动态WebView中的Document对象建立以后，首先在内核扩展JavaScript对象，通过扩展的JavaScript对象，在动态WebView中，能够获得原始WebView中页面的DOM结构； 

本地模板页面body（主体）标签中的内容加载完成后，产生onload事件，触发动态WebView中本地JavaScript（即扩展的JavaScript对象）的执行；该本地JavaScript根据DOM结构获取原始页面的正文部分所对应的HTML节点，把这些HTML节点的内容取出后即得到原始WebView中的正文内容。

S212、将目的网页的正文在动态WebView中显示；接着进行步骤S213；

按照本地页面模板将目的网页的正文在动态WebView中显示。

S213、获取网页链接指向的目的目的网页，将目的网页进行排版和渲染后显示；进入步骤S215；

S214、预览窗口中弹出提示‘不能预览’； 进入步骤S215；

S215、结束流程。

 

本发明还提出一种基于双WebView的网页预览装置，图3示出了根据本发明的网页预览装置的一个方框示意图，包括：

主文档加载模块，用于当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档； 

结构解析模块，用于对所述目的网页的主文档进行解析获取页面的DOM结构；

页面模板加载模块，用于在动态WebView中加载本地页面模板；

正文抽取模块，用于根据所述页面的DOM结构抽取所述目的网页的正文；

显示模块，用于将所述目的网页的正文按照所述本地页面模板显示在所述动态WebView中。

本发明装置公开的技术，在进入预览模式时，在原始WebView中加载网页链接请求指向的目的页面的主文档；然后对该主文档进行解析获取目的页面的DOM结构；根据目的页面的DOM结构抽取其中的正文内容；然后将正文内容在动态WebView中按照预定的页面模板显示；在原始WebView中只加载目的网页的主文档，不加载外部资源，不执行Javascript, 不进行排版和渲染，可以节省页面解析的时间；将抽取的网页正文在动态WebView中按照预定的本地页面模板进行显示，实现了网页预览显示的可定制性，也更加灵活，提高了网页预览的显示效果。

 

更优选的，在本发明的一个或者多个实施方式中，主文档加载模块包括：

第一窗口创建单元，用于当进入网页预览模式时，弹出预览窗口，在所述预览窗口中创建所述原始WebView；其中，所述原始WebView为用户不可见的；

加载单元，用于在所述原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档。

更优选的，在本发明的一个或者多个实施方式中，所述页面模板加载模块包括：第二窗口创建单元、模板加载单元；

在根据所述页面的DOM结构判定所述目的网页存在正文时，所述第二窗口创建单元先在所述预览窗口中创建所述动态WebView；所述模板加载单元在动态WebView中加载本地页面模板；其中，所述本页面模板为预定的html页面。

更优选的，在本发明的一个或者多个实施方式中，所述正文抽取模块包括：

第一获取单元，用于根据页面的DOM结构获取所述目的网页的主文档所对应的HTML节点；

第二获取单元，用于获取所述 HTML节点中内容，得到所述目的网页的正文。

在本发明的一个或者多个实施方式中，基于双WebView的网页预览装置还包括判断模块和渲染显示模块；图4示出了根据本发明的网页预览装置的另一个方框示意图。

所述判断模块用于判断网页中的链接数是否超过预定的阈值，若超过所述预定的阈值，则进入网页预览模式，所述判断模块通知所述主文档加载模块进行加载目的网页的主文档；若没有超过所述预定的阈值，则所述判断模块通知所述渲染显示模块根据所述网页链接请求获取所述网页链接指向的所述目的网页，将所述目的网页进行排版和渲染后显示。

 

此外，典型地，本发明中的网页预览方法可以应用在移动终端；该移动终端可为各种具有蓝牙功能的手持终端设备，例如具有蓝牙功能的手机、个人数字助理（PDA）。

此外，根据本发明的方法还可以被实现为由移动终端中的处理器（比如CPU）执行的计算机程序，并且存储在移动终端的存储器中。在该计算机程序被处理器执行时，执行本发明的方法中限定的上述功能。

此外，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。

此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储设备实现。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本发明的范围。

尽管前面公开的内容示出了本发明的示例性实施例，但是应当注意，在不背离权利要求限定的本发明的范围的前提下，可以进行多种改变和修改。根据这里描述的发明实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。

虽然如上参照图描述了根据本发明的各个实施例进行了描述，但是本领域技术人员应当理解，对上述本发明所提出的各个实施例，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (10)

1.一种基于双WebView的网页预览方法，包括：

当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档； 

对所述目的网页的主文档进行解析获取页面的DOM结构；

在动态WebView中加载本地页面模板；

根据所述页面的DOM结构抽取所述目的网页的正文；

将所述目的网页的正文按照所述本地页面模板显示在所述动态WebView中。

2.根据权利要求1所述的基于双WebView的网页预览方法，所述当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档的步骤包括：

当进入网页预览模式时，弹出预览窗口，在所述预览窗口中创建所述原始WebView；其中，所述原始WebView为用户不可见的；

在所述原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档。

3.根据权利要求1所述的基于双WebView的网页预览方法，所述在动态WebView中加载本地页面模板的步骤包括：

当根据所述页面的DOM结构判定所述目的网页存在正文时，先在所述预览窗口中创建所述动态WebView，然后在动态WebView中加载所述本地页面模板；其中，所述本页面模板为预定的html页面。

4.根据权利要求1所述的基于双WebView的网页预览方法，所述根据页面的DOM结构抽取所述目的网页的正文的步骤包括：

根据页面的DOM结构获取所述目的网页的主文档所对应的HTML节点；

获取所述 HTML节点中内容，得到所述目的网页的正文。

5.根据权利要求1至4任一项所述的基于双WebView的网页预览方法，在所述当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档的步骤前包括步骤：

判断网页中的链接数是否超过预定的阈值，若超过所述预定的阈值，则进入网页预览模式；若没有超过所述预定的阈值，则根据所述网页链接请求获取所述网页链接指向的所述目的网页，将所述目的网页进行排版和渲染后显示。

6.一种基于双WebView的网页预览装置，包括：

主文档加载模块，用于当进入网页预览模式时，在原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档； 

结构解析模块，用于对所述目的网页的主文档进行解析获取页面的DOM结构；

页面模板加载模块，用于在动态WebView中加载本地页面模板；

正文抽取模块，用于根据所述页面的DOM结构抽取所述目的网页的正文；

显示模块，用于将所述目的网页的正文按照所述本地页面模板显示在所述动态WebView中。

7.根据权利要求6所述的基于双WebView的网页预览装置，所述主文档加载模块包括：

第一窗口创建单元，用于当进入网页预览模式时，弹出预览窗口，在所述预览窗口中创建所述原始WebView；其中，所述原始WebView为用户不可见的；

加载单元，用于在所述原始WebView中根据接收的网页链接请求获取所述网页链接指向的目的网页的主文档。

8.根据权利要求6所述的基于双WebView的网页预览装置，所述页面模板加载模块包括：第二窗口创建单元、模板加载单元；

在根据所述页面的DOM结构判定所述目的网页存在正文时，所述第二窗口创建单元先在所述预览窗口中创建所述动态WebView；所述模板加载单元在动态WebView中加载本地页面模板；其中，所述本页面模板为预定的html页面。

9.根据权利要求6所述的基于双WebView的网页预览装置，所述正文抽取模块包括：

第一获取单元，用于根据页面的DOM结构获取所述目的网页的主文档所对应的HTML节点；

第二获取单元，用于获取所述 HTML节点中内容，得到所述目的网页的正文。

10.根据权利要求6至9任一项所述的基于双WebView的网页预览装置，还包括判断模块和渲染显示模块；

所述判断模块用于判断网页中的链接数是否超过预定的阈值，若超过所述预定的阈值，则进入网页预览模式，所述判断模块通知所述主文档加载模块进行加载目的网页的主文档；若没有超过所述预定的阈值，则所述判断模块通知所述渲染显示模块根据所述网页链接请求获取所述网页链接指向的所述目的网页，将所述目的网页进行排版和渲染后显示。

Images