CN102279854A - 显示网页内容的方法和装置 - Google Patents
显示网页内容的方法和装置 Download PDFInfo
- Publication number
- CN102279854A CN102279854A CN2010102000845A CN201010200084A CN102279854A CN 102279854 A CN102279854 A CN 102279854A CN 2010102000845 A CN2010102000845 A CN 2010102000845A CN 201010200084 A CN201010200084 A CN 201010200084A CN 102279854 A CN102279854 A CN 102279854A
- Authority
- CN
- China
- Prior art keywords
- web page
- webpage
- visual range
- current visual
- page contents
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种显示网页内容的方法和装置，属于网络领域。所述方法包括：获取当前可视范围在网页中的位置；根据所述当前可视范围在网页中的位置和网页内容在所述网页中的位置，确定位于所述当前可视范围中的网页内容；获取并显示所述当前可视范围中的网页内容。所述装置包括：获取模块、确定模块和显示模块。本发明通过获取当前可视范围在网页中的位置，根据当前可视范围在网页中的位置和网页内容在网页中的位置，确定位于当前可视范围中的网页内容，然后获取并显示当前可视范围中的网页内容，对于不在当前可视范围中的网页内容则无须获取并显示，从而节省了网络带宽。
Description
技术领域
本发明涉及网络领域，特别涉及一种显示网页内容的方法和装置。
背景技术
网页是构成网站的基本要素。用户通过浏览器访问网站时，往往通过网页以及网页承载的内容来获取相关信息。
目前网页内容的显示机制是，获取一个网页中包含的所有网页内容，并将所有网页内容一起显示出来的。然而，一个网页的高度往往大于浏览器的可视范围，这种情况下，该网页内容需要分多屏显示。此时，即使用户没有浏览二屏、甚至三屏的网页内容，也会获取二屏、三屏的网页内容，并进行显示。
综合上述，现有技术至少存在以下问题：现有的显示机制是粗放型的，无须显示的网页内容也会被获取，造成了网络带宽的浪费。
发明内容
为了节约网络带宽，本发明实施例提供了一种显示网页内容的方法和装置。所述技术方案如下：
一种显示网页内容的方法，所述方法包括：
获取当前可视范围在网页中的位置；
根据所述当前可视范围在网页中的位置和网页内容在所述网页中的位置，确定位于所述当前可视范围中的网页内容；
获取并显示所述当前可视范围中的网页内容。
进一步的，所述获取当前可视范围在网页中的位置包括：
通过监听滚动条拖动事件或浏览器窗口大小改变事件，触发获取所述当前可视范围在所述网页中的位置。
进一步的，所述当前可视范围在网页中的位置包括：所述当前可视范围顶部与所述网页顶部之间的距离、以及所述当前可视范围的高度；
所述网页内容在所述网页中的位置包括：所述网页内容顶部与所述网页顶部之间的距离、以及所述网页内容的高度；
所述根据所述当前可视范围在网页中的位置和网页内容在所述网页中的位置，确定位于所述当前可视范围中的网页内容包括：
当所述网页内容顶部与所述网页顶部之间的距离与所述网页内容的高度之和大于所述当前可视范围顶部与所述网页顶部之间的距离、且所述当前可视范围顶部与所述网页顶部之间的距离与所述当前可视范围的高度之和大于所述网页内容顶部与所述网页顶部之间的距离时，所述网页内容位于所述当前可视范围中。
进一步的，所述获取并显示所述当前可视范围中的网页内容之后包括：
将所述当前可视范围中的网页内容对应的被用户查看的次数增加一次。
进一步的，所述网页内容包括：图片、视频、动画或文字。
一种显示网页内容的装置，所述装置包括：
获取模块，用于获取当前可视范围在网页中的位置；
确定模块，用于根据所述获取模块获取的当前可视范围在网页中的位置和网页内容在所述网页中的位置，确定位于所述当前可视范围中的网页内容；
显示模块，用于获取并显示所述确定模块确定的当前可视范围中的网页内容。
进一步的，所述获取模块，具体用于通过监听滚动条拖动事件或浏览器窗口大小改变事件，触发获取所述当前可视范围在所述网页中的位置。
进一步的，所述当前可视范围在网页中的位置包括：所述当前可视范围顶部与所述网页顶部之间的距离、以及所述当前可视范围的高度；
所述网页内容在所述网页中的位置包括：所述网页内容顶部与所述网页顶部之间的距离、以及所述网页内容的高度；
所述确定模块，具体用于当所述网页内容顶部与所述网页顶部之间的距离与所述网页内容的高度之和大于所述当前可视范围顶部与所述网页顶部之间的距离、且所述当前可视范围顶部与所述网页顶部之间的距离与所述当前可视范围的高度之和大于所述网页内容顶部与所述网页顶部之间的距离时，所述网页内容位于所述当前可视范围中。
进一步的，所述装置还包括统计模块，用于执行所述显示模块的功能之后，将所述当前可视范围中的网页内容对应的被用户查看的次数增加一次。
其中，所述网页内容包括：图片、视频、动画或文字。
本发明实施例提供的技术方案带来的有益效果是：
通过获取当前可视范围在网页中的位置，根据当前可视范围在网页中的位置和网页内容在网页中的位置，确定位于当前可视范围中的网页内容，然后获取并显示当前可视范围中的网页内容，对于不在当前可视范围中的网页内容则无须获取并显示，从而节省了网络带宽。另外，根据当前可视范围中的网页内容统计被用户查看的次数(或称曝光率)，相对于现有技术中将网页中所有内容，即使用户没有浏览内容的曝光率都增加一次的方法，曝光率的统计更加准确。
附图说明
图1是本发明实施例1中提供的显示网页内容的方法流程图；
图2是本发明实施例1中提供的显示网页内容的方法流程图；
图3是本发明实施例1中提供的网页内容及当前可视范围的示意图；
图4是本发明实施例1中提供的初始的当前可视范围的示意图；
图5是本发明实施例1中提供的改变后的当前可视范围的示意图；
图6是本发明实施例2中提供的显示网页内容的结构示意图；
图7是本发明实施例2中提供的显示网页内容的另一结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。
实施例1
参见图1，本实施例提供了一种显示网页内容的方法，包括：
101：获取当前可视范围在网页中的位置；
具体的，通过监听滚动条拖动事件或浏览器窗口大小改变事件，触发获取当前可视范围在网页中的位置。
102：根据当前可视范围在网页中的位置和网页内容在网页中的位置，确定位于当前可视范围中的网页内容；
其中，当前可视范围在网页中的位置包括：当前可视范围顶部与网页顶部之间的距离、以及当前可视范围的高度。网页内容在网页中的位置包括：网页内容顶部与网页顶部之间的距离、以及网页内容的高度。
具体的，当网页内容顶部与网页顶部之间的距离与网页内容的高度之和大于当前可视范围顶部与网页顶部之间的距离、且当前可视范围顶部与网页顶部之间的距离与当前可视范围的高度之和大于网页内容顶部与网页顶部之间的距离时，该网页内容位于当前可视范围中。
其中，网页内容包括：图片、视频、动画或文字，例如，网页内容可以是以图片、视频、动画或文字等形式展示的广告。
103：获取并显示当前可视范围中的网页内容。
进一步的，获取并显示当前可视范围中的网页内容之后，将当前可视范围中的网页内容对应的被用户查看的次数(或称曝光率)增加一次。相对于现有技术中将网页中所有内容，即使用户没有浏览内容的曝光率都增加一次的方法，曝光率的统计更加准确。
本实施例提供的方法，通过获取当前可视范围在网页中的位置，根据当前可视范围在网页中的位置和网页内容在网页中的位置，确定位于当前可视范围中的网页内容，然后获取并显示当前可视范围中的网页内容，对于不在当前可视范围中的网页内容则无须获取并显示，从而节省了网络带宽。
参见图2，下面结合具体的实例详细介绍显示网页内容的方法。
201：确定各个网页内容在网页中的位置；
其中，网页内容在网页中的位置包括：网页内容顶部与网页顶部之间的距离(设为AT)、以及网页内容的高度(设为AH)。参见图3，通过AT和AH，就能够描述一个网页内容在该网页中的位置。具体的，AT可以通过循环获取网页内容所在元素及它的offsetParent的offsetTop相加得出，AH可以通过该元素的offsetHeight获取。
其中，网页内容包括：图片、视频、动画或文字，例如，网页内容可以是以图片、视频、动画或文字等形式展示的广告。
202：获取当前可视范围在网页中的位置；
其中，当前可视范围在网页中的位置包括：当前可视范围顶部与网页顶部之间的距离(设为VT)、以及当前可视范围的高度(设为VH)。参见图3，通过VT和VH，就能够描述当前可视范围在网页中的位置。具体的，VT可以通过documentElement.scrollTop获取，VH可以通过document.documentElement.clientHeight获取。
另外，可以通过浏览器自身支持的接口监听滚动条拖动事件或浏览器窗口大小改变事件，触发获取当前可视范围在网页中的位置。滚动条拖动事件是：window.onresize＝function(){....}，浏览器窗口大小改变事件是：window.onscroll＝function(){....}。
203：根据当前可视范围在网页中的位置和网页内容在网页中的位置，确定位于当前可视范围中的网页内容；
具体的，当网页内容顶部与网页顶部之间的距离AT与网页内容的高度AH之和大于当前可视范围顶部与网页顶部之间的距离VT、且当前可视范围顶部与网页顶部之间的距离VT与当前可视范围的高度VH之和大于网页内容顶部与网页顶部之间的距离AT时，该网页内容位于当前可视范围中。
公式表示为：AT+AH＞VT且VT+VH＞AT，同时满足两个公式，则网页内容位于当前可视范围中，否则，仅有一个公式满足或两个公式都不满足，则该网页内容位于当前可视范围之外。另外，网页内容的任何部分位于当前可视范围中，均符合本实施例所指的网页内容位于当前可视范围中。
204：获取并显示当前可视范围中的网页内容；
其中，获取当前可视范围中的网页内容是指从服务器拉取当前可视范围中的网页内容，并加载的过程。
例如，参见图4，用户打开一网页，页面内容加载完毕后，在显示网页内容之前，确定该网页需要分屏显示，第一屏(初始的当前可视范围中)包括网页内容A和B，因此，网页内容A和B会首先被获取并显示。若当前可视范围发生改变，例如用户向下拖动滚动条或浏览器窗口大小改变，参见图5，第二屏(改变后的当前可视范围中)包括网页内容B和C，此时网页内容C会被获取并显示。同理，当前可视范围再往下包括网页内容D的时候，网页内容D会被获取并显示。
205：根据当前可视范围中的网页内容统计曝光率；
具体的，将当前可视范围中的网页内容对应的被用户查看的次数(或称曝光率)增加一次。相对于现有技术中将网页中所有内容，即使用户没有浏览内容的曝光率都增加一次的方法，曝光率的统计更加准确。
本实施例提供的方法，通过获取当前可视范围在网页中的位置，根据当前可视范围在网页中的位置和网页内容在网页中的位置，确定位于当前可视范围中的网页内容，然后获取并显示当前可视范围中的网页内容，对于不在当前可视范围中的网页内容则无须获取并显示，从而节省了网络带宽。
实施例2
参见图6，本实施例提供了一种显示网页内容的装置，包括：
获取模块301，用于获取当前可视范围在网页中的位置；
确定模块302，用于根据获取模块301获取的当前可视范围在网页中的位置和网页内容在网页中的位置，确定位于当前可视范围中的网页内容；
显示模块303，用于获取并显示确定模块302确定的当前可视范围中的网页内容。
进一步的，获取模块301，具体用于通过监听滚动条拖动事件或浏览器窗口大小改变事件，触发获取当前可视范围在网页中的位置。
进一步的，当前可视范围在网页中的位置包括：当前可视范围顶部与网页顶部之间的距离、以及当前可视范围的高度；
网页内容在网页中的位置包括：网页内容顶部与网页顶部之间的距离、以及网页内容的高度；
确定模块302，具体用于当网页内容顶部与网页顶部之间的距离与网页内容的高度之和大于当前可视范围顶部与网页顶部之间的距离、且当前可视范围顶部与网页顶部之间的距离与当前可视范围的高度之和大于网页内容顶部与网页顶部之间的距离时，网页内容位于当前可视范围中。
进一步的，参见图7，该装置还包括统计模块304，用于执行显示模块303的功能之后，将当前可视范围中的网页内容对应的被用户查看的次数增加一次。相对于现有技术中将网页中所有内容，即使用户没有浏览内容的曝光率都增加一次的方法，曝光率的统计更加准确。
其中，网页内容包括：图片、视频、动画或文字。
本实施例提供的装置，与方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。
本实施例提供的装置，通过获取当前可视范围在网页中的位置，根据当前可视范围在网页中的位置和网页内容在网页中的位置，确定位于当前可视范围中的网页内容，然后获取并显示当前可视范围中的网页内容，对于不在当前可视范围中的网页内容则无须获取并显示，从而节省了网络带宽。
以上实施例提供的技术方案中的全部或部分内容可以通过软件编程实现，其软件程序存储在可读取的存储介质中，存储介质例如：计算机中的硬盘、光盘或软盘。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.一种显示网页内容的方法，其特征在于，所述方法包括：
获取当前可视范围在网页中的位置；
根据所述当前可视范围在网页中的位置和网页内容在所述网页中的位置，确定位于所述当前可视范围中的网页内容；
获取并显示所述当前可视范围中的网页内容。
2.如权利要求1所述的方法，其特征在于，所述获取当前可视范围在网页中的位置包括：
通过监听滚动条拖动事件或浏览器窗口大小改变事件，触发获取所述当前可视范围在所述网页中的位置。
3.如权利要求1所述的方法，其特征在于，所述当前可视范围在网页中的位置包括：所述当前可视范围顶部与所述网页顶部之间的距离、以及所述当前可视范围的高度；
所述网页内容在所述网页中的位置包括：所述网页内容顶部与所述网页顶部之间的距离、以及所述网页内容的高度；
所述根据所述当前可视范围在网页中的位置和网页内容在所述网页中的位置，确定位于所述当前可视范围中的网页内容包括：
当所述网页内容顶部与所述网页顶部之间的距离与所述网页内容的高度之和大于所述当前可视范围顶部与所述网页顶部之间的距离、且所述当前可视范围顶部与所述网页顶部之间的距离与所述当前可视范围的高度之和大于所述网页内容顶部与所述网页顶部之间的距离时，所述网页内容位于所述当前可视范围中。
4.如权利要求1所述的方法，其特征在于，所述获取并显示所述当前可视范围中的网页内容之后包括：
将所述当前可视范围中的网页内容对应的被用户查看的次数增加一次。
5.如权利要求1-4任一权利要求所述的方法，其特征在于，所述网页内容包括：图片、视频、动画或文字。
6.一种显示网页内容的装置，其特征在于，所述装置包括：
获取模块，用于获取当前可视范围在网页中的位置；
确定模块，用于根据所述获取模块获取的当前可视范围在网页中的位置和网页内容在所述网页中的位置，确定位于所述当前可视范围中的网页内容；
显示模块，用于获取并显示所述确定模块确定的当前可视范围中的网页内容。
7.如权利要求6所述的装置，其特征在于，所述获取模块，具体用于通过监听滚动条拖动事件或浏览器窗口大小改变事件，触发获取所述当前可视范围在所述网页中的位置。
8.如权利要求6所述的装置，其特征在于，所述当前可视范围在网页中的位置包括：所述当前可视范围顶部与所述网页顶部之间的距离、以及所述当前可视范围的高度；
所述网页内容在所述网页中的位置包括：所述网页内容顶部与所述网页顶部之间的距离、以及所述网页内容的高度；
所述确定模块，具体用于当所述网页内容顶部与所述网页顶部之间的距离与所述网页内容的高度之和大于所述当前可视范围顶部与所述网页顶部之间的距离、且所述当前可视范围顶部与所述网页顶部之间的距离与所述当前可视范围的高度之和大于所述网页内容顶部与所述网页顶部之间的距离时，所述网页内容位于所述当前可视范围中。
9.如权利要求6所述的装置，其特征在于，所述装置还包括统计模块，用于执行所述显示模块的功能之后，将所述当前可视范围中的网页内容对应的被用户查看的次数增加一次。
10.如权利要求6-9任一权利要求所述的装置，其特征在于，所述网页内容包括：图片、视频、动画或文字。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010102000845A CN102279854A (zh) | 2010-06-08 | 2010-06-08 | 显示网页内容的方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010102000845A CN102279854A (zh) | 2010-06-08 | 2010-06-08 | 显示网页内容的方法和装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN102279854A true CN102279854A (zh) | 2011-12-14 |
Family
ID=45105308
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2010102000845A Pending CN102279854A (zh) | 2010-06-08 | 2010-06-08 | 显示网页内容的方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102279854A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103853417A (zh) * | 2012-11-30 | 2014-06-11 | 腾讯科技（深圳）有限公司 | 网络动态图片的滚动分页显示方法和装置 |
| CN104423839A (zh) * | 2013-08-30 | 2015-03-18 | 中兴通讯股份有限公司 | 浏览器资源显示方法和装置 |
| CN107463318A (zh) * | 2017-06-26 | 2017-12-12 | 北京小度信息科技有限公司 | 界面元素处理方法及装置 |
| US20180088744A1 (en) * | 2016-09-26 | 2018-03-29 | Wp Company Llc | Method and system for delivering real-time content |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030158916A1 (en) * | 1997-02-12 | 2003-08-21 | Digital Paper Corporation | Network image view server using efficient client-server, tiling and caching architecture |
| CN101051316A (zh) * | 2007-05-11 | 2007-10-10 | 杭州华三通信技术有限公司 | 数据查找方法、系统及设备 |
| CN101299688A (zh) * | 2008-06-13 | 2008-11-05 | 北京缔元信互联网数据技术有限公司 | 一种获取网页区域点击数量的方法 |
-
2010
- 2010-06-08 CN CN2010102000845A patent/CN102279854A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030158916A1 (en) * | 1997-02-12 | 2003-08-21 | Digital Paper Corporation | Network image view server using efficient client-server, tiling and caching architecture |
| CN101051316A (zh) * | 2007-05-11 | 2007-10-10 | 杭州华三通信技术有限公司 | 数据查找方法、系统及设备 |
| CN101299688A (zh) * | 2008-06-13 | 2008-11-05 | 北京缔元信互联网数据技术有限公司 | 一种获取网页区域点击数量的方法 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103853417A (zh) * | 2012-11-30 | 2014-06-11 | 腾讯科技（深圳）有限公司 | 网络动态图片的滚动分页显示方法和装置 |
| CN103853417B (zh) * | 2012-11-30 | 2017-08-04 | 腾讯科技（深圳）有限公司 | 网络动态图片的滚动分页显示方法和装置 |
| CN104423839A (zh) * | 2013-08-30 | 2015-03-18 | 中兴通讯股份有限公司 | 浏览器资源显示方法和装置 |
| US20180088744A1 (en) * | 2016-09-26 | 2018-03-29 | Wp Company Llc | Method and system for delivering real-time content |
| CN107463318A (zh) * | 2017-06-26 | 2017-12-12 | 北京小度信息科技有限公司 | 界面元素处理方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20180052943A1 (en) | Systems and methods for controlling webpage pre-rendering | |
| US8135616B2 (en) | Browsing and quality of service features | |
| KR102278657B1 (ko) | 웹 페이지에 대한 컨텐츠 아이템에 대한 사이즈 자동 결정 | |
| CN103970894B (zh) | 自适应调整的界面流式布局显示的方法和系统 | |
| JP5001474B2 (ja) | 表示制御プログラム、表示制御プログラムが記録された記録媒体、表示制御装置、及び表示制御方法 | |
| KR20140012664A (ko) | 웹페이지 재배치 방법 | |
| US20110035263A1 (en) | Process for increasing user-interaction rates for document elements | |
| CN102855270B (zh) | 信息处理装置、关注内容判定方法、终端装置及信息提供系统 | |
| US20170134561A1 (en) | Display controlling method, terminal, information processing apparatus, and storage medium | |
| CN101908076A (zh) | 页面布局自适应方法及装置 | |
| CN103546498A (zh) | 一种为移动终端提供访问网页的方法与设备 | |
| KR20130018706A (ko) | 모바일 디바이스의 고정된 스케일 콘텐트를 디스플레이하기 위한 시스템들 및 방법들 | |
| CN105210051A (zh) | 估计内容项的可见性 | |
| WO2014124417A1 (en) | Comprehensive measurement of the opportunity to see online advertisements | |
| CN104133884A (zh) | 显示网页的方法及装置 | |
| US20190320222A1 (en) | Content item display states on user devices | |
| US20140180828A1 (en) | Information processing apparatus, information processing method, information processing program, and recording medium having stored therein information processing program | |
| CN103678497A (zh) | 提供调整检索页浏览显示的方法和系统 | |
| CN108322359A (zh) | 一种页面首屏时间的获取方法和装置 | |
| CN109388317B (zh) | 一种图片加载方法、终端设备及存储介质 | |
| CN103324521A (zh) | 一种测量网页首屏时间的方法 | |
| CN102279854A (zh) | 显示网页内容的方法和装置 | |
| US10198147B2 (en) | Object management and visualization using a computing device | |
| CN105653724A (zh) | 一种页面曝光量的监控方法和装置 | |
| CN102722308B (zh) | 显示方法和电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C12 | Rejection of a patent application after its publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20111214 |