CN104063484A - 一种网页呈现方法、装置及电子设备 - Google Patents

Abstract

本发明公开了一种网页呈现方法、装置及电子设备。所述网页呈现方法包括：检测到对当前页面中链接的预定类型操作；从服务器端获取该链接所引用网页的预定部分的数据；在当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。本发明有效提高了用户访问网页的速度。

Description

一种网页呈现方法、装置及电子设备

技术领域

本发明涉及互联网技术领域，具体涉及一种网页呈现方法、装置及电子设备。

背景技术

随着智能移动终端的普及，触屏版网页越来越成为用户访问网站，获取资讯的重要手段，触屏版网页的使用比例逐年上升且上升速度远超PC版网页。对于现有的触屏版网页站点，其采用传统的网页跳转方式，即在列表页面A中点击文章页面B的链接进入文章页面B，看完文章页面B后点击浏览器后退按钮退回列表页面A，再点击文章页面C的链接进入文章页面C，从而浏览文章页面C。

在这种访问方式下，B、C页面是作为一个独立的网页来打开的，此时浏览器需要经历如下流程：根据页面链接进行DNS查找服务器的IP地址；向服务器端请求链接的页面；等待服务器端返回数据；接收服务器端返回的数据(可能还会有资源阻塞)；页面样式文件加载；页面渲染；呈现网页。

根据上述的网页访问流程，时间资源和网络资源有一部分浪费在非文章内容(例如CSS文件，JS文件和多媒体文件等)的获取上；在低端浏览器，尤其是在网络不稳定的慢速网络下，这个过程会变得难以忍受。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的网页呈现方法、装置及电子设备。

根据本发明的一个方面，提供了一种网页呈现方法，适于在浏览器中执行，所述方法包括：

检测到对当前页面中链接的预定类型操作；

从服务器端获取该链接所引用网页的预定部分的数据；以及

在当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。

可选地，所述预定类型操作包括长按操作和滑动操作。

可选地，按照如下方式检测对当前页面中链接的长按操作：

检测到对链接的触控开始时，启动一定时时长为预设时长的定时器；

在对链接的触控持续期间，判断定时器的定时时长是否到达；

当定时器的定时时长到达时，确定对链接的长按操作发生。

可选地，所述预设时长为100～300ms。

可选地，所述方法还包括：当对链接的触控结束时，清空定时器。

可选地，采用AJAX技术从服务器端获取该链接所引用网页的预定部分的数据。

可选地，所述预定部分的数据包括网页的标题和正文。

根据本发明的另一方面，提供了一种网页呈现装置，驻留在浏览器中，所述装置包括：

检测单元，适于检测对当前页面中链接的预定类型操作；

获取单元，适于当检测单元检测到对当前页面中链接的预定类型操作时，从服务器端获取该链接所引用网页的预定部分的数据；以及

显示单元，适于在当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。

可选地，所述预定类型操作包括长按操作和滑动操作。

可选地，所述检测单元按照如下方式检测对当前页面中链接的长按操作：

检测到对链接的触控开始时，启动一定时时长为预设时长的定时器；

在对链接的触控持续期间，判断定时器的定时时长是否到达；

当定时器的定时时长到达时，确定对链接的长按操作发生。

可选地，所述预设时长为100～300ms。

可选地，所述检测单元进一步适于，当对链接的触控结束时，清空定时器。

可选地，所述获取单元采用AJAX技术从服务器端获取该链接所引用网页的预定部分的数据。

可选地，所述预定部分的数据包括网页的标题和正文。

根据本发明的又一个方面，提供了一种电子设备，该电子设备包括上述的网页呈现装置。

根据本发明的网页呈现方案，当检测到用户对当前页面中链接的预定类型操作例如长按操作和滑动操作时，不需要按照传统方式打开链接所引用的网页，而是从服务器端获取网页的部分数据，以弹出窗口的方式呈现所获取的部分数据，有效提高了访问网页的速度，进而提升了用户的使用体验和阅读效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的网页呈现***的结构图；

图2示出了根据本发明一个实施例的网页呈现装置的结构图；

图3示出了本发明实施例中智能手机的呈现界面变化过程图；以及

图4示出了根据本发明一个实施例的网页呈现方法的流程图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的网页呈现***的结构图。如图1所示，网页呈现***包括多个电子设备110(图中示出了3个)、为这些电子设备110提供各种网络资源的服务器端120，电子设备110和服务器端120经由互联网络而相互通信。

在本发明实施例中，电子设备110可以是本领域任何可以呈现从服务器端120获取的网络资源的设备，包括但不限于智能移动终端、个人数字助理和平板电脑等。电子设备110具有操作***，利用操作***来管理电子设备110中的硬件资源，操作***上运行有浏览器，所述浏览器能够呈现从服务器端120获取的网络资源，例如网页文件。电子设备110还具有触控接口和显示屏幕，通过触控接口获取用户的触控输入，当根据所述触控输入确定用户对显示屏幕中显示的网页链接执行了预定类型的操作，例如长按操作和滑动操作时，从服务器端120获取该链接所引用网页的预定部分的数据(例如网页的标题和正文)，然后，在显示屏幕上显示的当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。

图2示出了根据本发明一个实施例的网页呈现装置200的结构图，所述网页呈现装置200设置在电子设备110中，例如驻留在电子设备110的浏览器中。参照图2，所述网页呈现装置200包括检测单元210、获取单元220和显示单元230。

检测单元210适于检测对当前页面中链接的预定类型操作。用户需要浏览服务器端120的网页时，在浏览器中输入该网页的网址或者在浏览器的收藏夹中选择相应的条目后，通过浏览器发送请求(例如http请求)到服务器端120，服务器端120根据浏览器的请求将相应的网页数据返回给浏览器，由浏览器在电子设备110的显示屏幕上进行显示。浏览器当前显示的页面中往往会提供多个链接，例如，当前页面中显示的是文章列表页，则在文章列表页中会显示着文章列表链接(文章标题列表)。

然后，用户需要浏览文章列表中的某篇文章时，通常会点击该文章的链接，此时，浏览器会重新发送请求到服务器端，获取该链接引用的网页数据，并以打开一个新窗口的方式或者以覆盖当前窗口的方式显示网页的内容。如前所述，打开一个新网页会耗费较多的时间资源和网络资源。为此，在本发明实施例中，还进一步检测用户对当前页面中链接的操作是否为预定类型的操作，当检测到对当前页面中链接的预定类型操作时，执行与打开新的网页所不同的处理。其中，所述预定类型的操作可以是长按操作和滑动操作，当然，也可以是其他不同于点击链接的操作，本发明实施例对此不作限制。

检测单元210通过触控接口获取用户的触控输入，并根据用户的触控输入确定用户在电子设备110的触摸屏上所执行的操作，例如，确定用户对页面中链接的长按操作或活动操作。

在一种实现方式中，检测单元210按照如下方式检测用户对当前页面中链接的长按操作：

首先，检测到对链接的触控开始时(例如，用户手指触碰屏幕中的链接位置)，启动一定时时长为预设时长的定时器，其中，所述预设时长为100～300ms；

然后，在对链接的触控持续期间(例如，手指未离开触碰的链接位置)，判断定时器的定时时长是否到达；

最后，当定时器的定时时长到达时，确定对链接的长按操作发生。

为防止误触发长按操作，例如误将点击操作确定为长按操作，检测单元210还在当确定用户对链接的触控结束(手指离开触碰的链接位置)时，清空所述定时器，等待下一次启动后重新开始计时。

以下给出检测单元210对长按操作进行检测的示例性代码，如下：

获取单元220适于当检测单元210检测到对当前页面中链接的预定类型操作时，从服务器端120获取该链接所引用网页的预定部分的数据。所述预定部分的数据可以包括网页(例如阅读的文章)的标题和正文。

在一种实现方式中，获取单元220采用AJAX技术来从服务器端120获取该链接所引用网页的预定部分的数据。即发送AJAX请求到服务器端120，该AJAX请求的参数包括所述预定部分的数据的标识，服务器端120发送AJAX响应来将所请求的网页的预定部分的数据返回给电子设备110。

AJAX是一种用于创建快速动态网页的技术，浏览器通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。与传统的网页在更新内容时，需要重载整个页面相比，能够显著提高网页的呈现速度。而且，通过AJAX，浏览器无需等待服务器的响应，而是在等待服务器响应时执行其他脚本，当响应就绪后再对响应进行处理。

检测单元210检测到长按操作发生后，获取单元220通过AJAX技术从服务器端120获取网页的预定部分的数据的示例性代码如下：

//检测到长按发生后，执行longTap回调函数，向服务器获取数据

longTap('#btn',function(){

//这里执行AJAX数据操作，请求地址为http://www.autohome.com.cn/service/，带有参数为id和category(分类)，成功后执行showWindow函数

$.get('http://www.autohome.com.cn/service/',{id:1,category:1},showWindow)；

})

显示单元230适于在当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。获取单元220获取到服务器端120返回的所述预定部分的数据(例如文章的标题和正文)之后，显示单元230可以在当前页面弹出窗口进行内容的显示，这里，“弹出”的动作可以使用多种动画效果，如翻转、渐变和缩放等。

显示单元230进行内容显示的示例性代码如下：

//showWindow函数，在取得服务器返回的文章数据后执行，进行数据处理，排版，最后显示在页面中

function showWindow(data){

//处理返回数据data，进行弹窗操作

var title＝data.title；//文章标题变量赋值

var content＝data.content；//文章内容变量赋值

//下面由数据拼装HTML结构

var htm＝“<div class＝”info-window”>”；

htm+＝“<h4>”+title+”<span class＝’close’></span></h4>”；

htm+＝“<div class＝”window-content>”+content+”</div>”；

htm+＝“</div>”；

//下面给该窗口定义样式

var dom＝$(htm).hide().css({

“postion”:”fixed”,

“width”:”80％”,

“height”:”80％”,

“overflow-x”:”hidden”,

“overflow-y”:”auto”

}).find(‘.close’).css({

“position”:”absolute”,

“right”:”.5em”,

“top”:”.5em”,

“width”:”20px”,

“height”:”20px”

})

//下面将结构附加的页面中，渐变出现

dom.appendTo($('body')).show(200)；

})

图3示出了本发明实施例中智能手机的呈现界面变化过程图。如图3所示，在智能手机的第一个界面中呈现有文章列表；在第二个界面中，用户手指触控文章标题“Article Title3”并保持300ms；之后，浏览器发送AJAX请求到服务器，请求获取“Article Title3”对应的正文数据；服务器通过AJAX响应将相应的标题和正文数据返回给浏览器；在第三个界面中呈现的是文章列表，此时，浏览器准备呈现标题和正文数据；在第四个界面中，在文章列表页面中弹出窗口，在弹出的窗口中显示文章标题“Article Title3”和对应的文章内容。并且，在弹出的窗口中，会显示滚动条和关闭窗口按钮。这样，窗口里面的文章内容可以在该窗口中滚动查阅，同时窗口带有固定文章标题和关闭窗口的功能，通过点击关闭窗口按钮，能够关闭弹出窗口的显示，并呈现出下方的文章列表。

上述网页呈现方案结合了触摸电子设备的使用特点，用户在列表页面A通过长按文章标题(页面B的链接)的手指交互动作，触发一个请求，浏览器通过AJAX异步访问服务器，获得文章内容后，采用当前页面开窗口的方式可以快速预览文章(部分/主要)内容。在此种访问方式下，使用了AJAX技术，将网络资源和访问时间降低到较低标准，在低速网络环境下效果更为突出，用户体验更佳。

图4示出了根据本发明一个实施例的网页呈现方法的流程图，该网页呈现方法由浏览器执行。参照图4，该方法起始于步骤S402。在步骤S402中，检测到对当前页面中链接的预定类型操作。用户需要浏览服务器端120的网页时，在浏览器中输入该网页的网址或者在浏览器的收藏夹中选择相应的条目后，通过浏览器发送请求(例如http请求)到服务器端120，服务器端120根据浏览器的请求将相应的网页数据返回给浏览器，由浏览器在电子设备110的显示屏幕上进行显示。浏览器当前显示的页面中往往会提供多个链接，例如，当前页面中显示的是文章列表页，则在文章列表页中会显示着文章列表链接(文章标题列表)。

然后，用户需要浏览文章列表中的某篇文章时，通常会点击该文章的链接，此时，浏览器会重新发送请求到服务器端，获取该链接引用的网页数据，并以打开一个新窗口的方式或者以覆盖当前窗口的方式显示网页的内容。如前所述，打开一个新网页会耗费较多的时间资源和网络资源。为此，在本发明实施例中，还进一步检测用户对当前页面中链接的操作是否为预定类型的操作，当检测到对当前页面中链接的预定类型操作时，执行与打开新的网页所不同的处理。其中，所述预定类型的操作可以是长按操作和滑动操作，当然，也可以是其他不同于点击链接的操作，本发明实施例对此不作限制。

在一种实现方式中，按照如下方式检测用户对当前页面中链接的长按操作：

首先，检测到对链接的触控开始时(例如，用户手指触碰屏幕中的链接位置)，启动一定时时长为预设时长的定时器，其中，所述预设时长为100～300ms；

然后，在对链接的触控持续期间(例如，手指未离开触碰的链接位置)，判断定时器的定时时长是否到达；

最后，当定时器的定时时长到达时，确定对链接的长按操作发生。

为防止误触发长按操作，例如误将点击操作确定为长按操作，还在当确定用户对链接的触控结束(手指离开触碰的链接位置)时，清空所述定时器，等待下一次启动后重新开始计时。

在检测到对当前页面中链接的预定类型操作后，方法进入步骤S404。在步骤S404中，从服务器端获取该链接所引用网页的预定部分的数据。所述预定部分的数据可以包括网页(例如阅读的文章)的标题和正文。

在一种实现方式中，采用AJAX技术来从服务器端120获取该链接所引用网页的预定部分的数据。即发送AJAX请求到服务器端120，该AJAX请求的参数包括所述预定部分的数据的标识，服务器端120发送AJAX响应来将所请求的网页的预定部分的数据返回给电子设备110。

AJAX是一种用于创建快速动态网页的技术，浏览器通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。与传统的网页在更新内容时，需要重载整个页面相比，能够显著提高网页的呈现速度。而且，通过AJAX，浏览器无需等待服务器的响应，而是在等待服务器响应时执行其他脚本，当响应就绪后再对响应进行处理。

在获取到所述预定部分的数据之后，方法进入步骤S406。在步骤S406中，在当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。这里，“弹出”的动作可以使用多种动画效果，如翻转、渐变和缩放等。

根据本发明实施例的网页呈现方案，当检测到用户对当前页面中链接的预定类型操作例如长按操作和滑动操作时，不需要按照传统方式打开链接所引用的网页，而是从服务器端获取网页的部分数据，以弹出窗口的方式呈现所获取的部分数据，有效提高了访问网页的速度，进而提升了用户的使用体验和阅读效率。

B8、一种网页呈现装置，驻留在浏览器中，所述装置包括：

检测单元，适于检测对当前页面中链接的预定类型操作；

获取单元，适于当检测单元检测到对当前页面中链接的预定类型操作时，从服务器端获取该链接所引用网页的预定部分的数据；以及

显示单元，适于在当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。

B9、如B8所述的网页呈现装置，其中，所述预定类型操作包括长按操作和滑动操作。

B10、如B9所述的网页呈现装置，其中，所述检测单元按照如下方式检测对当前页面中链接的长按操作：

检测到对链接的触控开始时，启动一定时时长为预设时长的定时器；

在对链接的触控持续期间，判断定时器的定时时长是否到达；

当定时器的定时时长到达时，确定对链接的长按操作发生。

B11、如B10所述的网页呈现装置，其中，所述预设时长为100～300ms。

B12、如B10所述的网页呈现装置，其中，所述检测单元进一步适于，当对链接的触控结束时，清空定时器。

B13、如B8所述的网页呈现装置，其中，所述获取单元采用AJAX技术从服务器端获取该链接所引用网页的预定部分的数据。

B14、如B8所述的网页呈现装置，其中，所述预定部分的数据包括网页的标题和正文。

B15、一种电子设备，包括如权B8至B14任一项所述的网页呈现装置。

在此提供的算法和显示不与任何特定计算机、虚拟***或者其它设备固有相关。各种通用***也可以与基于在此的示教一起使用。根据上面的描述，构造这类***所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的网页呈现装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (10)

1.一种网页呈现方法，适于在浏览器中执行，所述方法包括：

检测到对当前页面中链接的预定类型操作；

从服务器端获取该链接所引用网页的预定部分的数据；以及

在当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。

2.如权利要求1所述的网页呈现方法，其中，所述预定类型操作包括长按操作和滑动操作。

3.如权利要求2所述的网页呈现方法，其中，按照如下方式检测对当前页面中链接的长按操作：

检测到对链接的触控开始时，启动一定时时长为预设时长的定时器；

在对链接的触控持续期间，判断定时器的定时时长是否到达；

当定时器的定时时长到达时，确定对链接的长按操作发生。

4.如权利要求3所述的网页呈现方法，其中，所述预设时长为100～300ms。

5.如权利要求3所述的网页呈现方法，其中，还包括：当对链接的触控结束时，清空定时器。

6.如权利要求1所述的网页呈现方法，其中，采用AJAX技术从服务器端获取该链接所引用网页的预定部分的数据。

7.如权利要求1所述的网页呈现方法，其中，所述预定部分的数据包括网页的标题和正文。

8.一种网页呈现装置，驻留在浏览器中，所述装置包括：

检测单元，适于检测对当前页面中链接的预定类型操作；

获取单元，适于当检测单元检测到对当前页面中链接的预定类型操作时，从服务器端获取该链接所引用网页的预定部分的数据；以及

显示单元，适于在当前页面中弹出窗口，并在所弹出的窗口中呈现所述预定部分的数据。

9.如权利要求8所述的网页呈现装置，其中，所述预定类型操作包括长按操作和滑动操作。

10.一种电子设备，包括如权利要求8或9所述的网页呈现装置。