CN103514202A

CN103514202A - 一种网页显示的实现方法和装置

Info

Publication number: CN103514202A
Application number: CN201210214728.5A
Authority: CN
Inventors: 张程; 王熙宇
Original assignee: Beijing Feinno Communication Technology Co Ltd
Current assignee: Beijing Feinno Communication Technology Co Ltd
Priority date: 2012-06-25
Filing date: 2012-06-25
Publication date: 2014-01-15
Anticipated expiration: 2032-06-25
Also published as: CN103514202B

Abstract

本发明公开了一种网页显示的实现方法和装置，能够使网页浏览和视频观看互不影响，提高了网页显示方式的灵活性，增强了用户体验。本发明实施例提供的一种网页显示的实现方法，为网页中的富媒体数据设置独立于网页主体数据的复本数据，并为所述复本数据的展现界面设置位置信息，该方法包括：在网页的显示界面上对网页主体数据进行显示；当接收到对富媒体数据的显示指令时，运行复本数据生成与显示界面相分离的复本数据的展现界面，并利用位置信息将展现界面定位在所述显示界面前方的预定位置；通过在展现界面上显示所述复本数据，以对富媒体数据进行显示。

Description

一种网页显示的实现方法和装置

技术领域

本发明涉及互联网技术领域，特别涉及一种网页显示的实现方法和装置。

背景技术

网页是承载各种网站应用的平台，网页中可以包含文字、图片、音视频等多种资源，网页通常都由超文本标记语言（Hyper Text Markup Language，HTML）文件构成。

浏览网页是用户从网络中获取信息的一种最常见的方式。当网页中的内容较多，而无法一次在屏幕上的显示界面中全部显示出来时，用户可以通过鼠标上下滚动网页来进行浏览。

然而，现有的网页显示方案中仍存在一些问题，例如，对存在视频资源的网页，尤其是浏览社交动态时，当用户滚动网页进行浏览时，网页中视频播放的界面也会随着网页一起滚动，一旦视频播放界面滚动出网页的显示界面，就会导致用户无法观看视频。当用户想在观看视频的同时滚动网页进行浏览时就会出现冲突，用户只能两者之中选择其一，要么停止浏览网页而观看视频，要么浏览网页而不观看视频。现有的网页显示方式过于单一，导致用户体验较低。

发明内容

本发明提供的一种网页显示的实现方法和装置，以解决现有网页显示方案显示方式过于单一，用户体验较低的问题。

为达到上述目的，本发明实施例采用了如下技术方案：

本发明实施例提供了一种网页显示的实现方法，为网页中的富媒体数据设置独立于网页主体数据的复本数据，并为所述复本数据的展现界面设置位置信息，所述方法包括：

在网页的显示界面上对网页主体数据进行显示；

当接收到对所述富媒体数据的显示指令时，运行所述复本数据生成与所述显示界面相分离的复本数据的展现界面，并利用所述位置信息将所述展现界面定位在所述显示界面前方的预定位置；

通过在所述展现界面上显示所述复本数据，以对所述富媒体数据进行显示。

本发明实施例还提供了一种网页显示的实现装置，所述装置包括：

设置单元，用于为网页中的富媒体数据设置独立于网页主体数据的复本数据，并为所述复本数据的展现界面设置位置信息；

主体数据显示单元，用于在网页的显示界面上对网页主体数据进行显示；

富媒体数据显示单元，用于当接收到对所述富媒体数据的显示指令时，运行所述复本数据生成与所述显示界面相分离的复本数据的展现界面，并利用所述位置信息将所述展现界面定位在所述显示界面前方的预定位置；通过在所述展现界面上显示所述复本数据，以对所述富媒体数据进行显示。

本发明实施例的有益效果是：

本发明实施例的技术方案通过为网页中的富媒体数据设置独立于网页主体数据的复本数据，生成与网页的显示界面相分离的复本数据的展现界面并将展现界面定位在显示界面前方的技术手段等，能够使网页滚动时展示界面不会随着网页的滚动而滚动，从而使用户能够在滚动网页进行浏览的同时观看网页中的视频，提高了网页显示方式的灵活性，增强了用户体验。

附图说明

图1为本发明实施例一提供的一种网页显示的实现方法流程示意图；

图2为本发明实施例二提供的一种简化的网页节点结构示意图；

图3为本发明实施例三提供的一种网页显示的实现装置的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

参见图1，为本发明实施例一提供的一种网页显示的实现方法，所述方法包括：

11：为网页中的富媒体数据设置独立于网页主体数据的复本数据，并为所述复本数据的展现界面设置位置信息。

上述网页主体数据包括网页中显示的所有数据，网页主体数据包含富媒体数据。上述富媒体数据可以包括二维、三维的视频或图片数据、以及音频数据等。上述复本数据为与富媒体数据相同的数据。复本数据独立于网页主体数据是指复本数据的运行不依赖于网页主体数据的运行，复本数据和网页主体数据可以分别独立运行。

本实施例同时设置富媒体数据和相应的复本数据，一方面保证了原有网页的完整性和美观性，使本方案能够较好地兼容现有的网页资源；另一方面能够利用复本数据使富媒体数据的展示与网页主体数据的展示相分离，提高显示方式的灵活性。

12：在网页的显示界面上对网页主体数据进行显示。

13：当接收到对所述富媒体数据的显示指令时，运行所述复本数据生成与所述显示界面相分离的复本数据的展现界面，并利用所述位置信息将所述展现界面定位在所述显示界面前方的预定位置。

根据富媒体数据的类型不同上述展现界面也不同，例如，对于视频数据，上述展现界面为视频数据的播放界面，利用该播放界面向用户显示视频影像；对于音频数据，上述展现界面为音频数据的控制界面，利用该控制界面对音频的播放进度，声音大小等进行控制。

注：上述复本数据中除了包括用于在展现界面中向用户显示的数据（如用于播放的视频数据）之外，还包含有用于生成展现界面的数据（如界面控制数据和界面样式数据等）

14：通过在所述展现界面上显示所述复本数据，以对所述富媒体数据进行显示。

在具体实践中，网页主体数据在网页的显示界面中的显示与复本数据在其展现界面中的显示相互独立，互不影响，用户在显示界面中滚动浏览网页主体数据同时，展现界面可以保持在显示界面前方的预定位置，处于可见状态，向用户展示富媒体数据，达到使用户在滚动浏览网页的同时观看网页中的视频、图片等富媒体数据的技术效果。

本发明实施例一的技术方案通过为网页中的富媒体数据设置独立于网页主体数据的复本数据，生成与网页的显示界面相分离的复本数据的展现界面，并将展现界面定位在显示界面前方的技术手段等，能够使网页滚动时展示界面不会随着网页的滚动而滚动，从而使用户能够在滚动网页进行浏览的同时观看网页中的视频，提高了网页显示方式的灵活性，增强了用户体验。

下面对本发明实施例二提供的网页显示的实现方法进行说明。本发明实施例二以网页主体数据为包含富媒体数据的社交动态（Feed）为例进行说明，其中，社交动态为社会性网络服务（Social Networking Services，SNS）网站或微博网站中，系统将某用户的好友最新发布内容按照时间顺序进行汇聚，形成的一个列表结构。主要包括如下处理：

11：为网页中的富媒体数据设置独立于网页主体数据的复本数据，并为复本数据的展现界面设置位置信息。

网页由HTML节点组成，各个HTML节点之间具有层次结构，最顶层的HTML节点表示为<body>，<body>可以包含若干HTML节点，如<div>或<span>，则<div>或<span>为位于同一层次的节点，<div>或<span>为<body>的HTML子节点，<body>为<div>或<span>的HTML父节点，HTML子节点中数据的运行依赖于其HTML父节点中数据的运行。当一个HTML节点下包含多个HTML节点（具有多个HTML子节点）时，也可以将这一个HTML节点称为容器节点。

本实施例中，将复本数据的超文本标记语言HTML节点设置为不从属于网页主体数据的HTML节点的HTML节点的步骤包括：将复本数据的HTML节点和网页主体数据的HTML节点设置为从属于相同的HTML父节点。这种设置保证了复本数据和网页主体数据能够分别独立运行，从而能够将复本数据运行时生成的展现界面从整体网页的显示界面中抽离出来形成一个独立的界面，从而保证了展现界面的观看与社交动态的上下滚动浏览互不影响。

具体的，参见图2，示例性地显示了一种简化的网页节点结构。

上述将复本数据的超文本标记语言HTML节点设置为不从属于网页主体数据的HTML节点的HTML节点的步骤可以包括：将复本数据的HTML节点和网页主体数据的HTML节点设置为从属于相同的HTML父节点。例如，对于网页主体数据中的视频数据1，若网页主体数据的HTML节点设置在节点3，则视频数据1的复本数据的HTML节点可以设置在节点4，即网页主体数据的HTML节点和视频数据1的复本数据的HTML节点从属于相同的HTML父节点（节点1），其中，图2中每个圆圈表示一个HTML节点。上述方式，不但能够保证复本数据与网页主体数据的相互独立，还便于快速查找到复本数据，提高显示速度。

可以理解，在上述视频数据1的示例中，视频数据1的复本数据的HTML节点可以设置在节点2或节点5的位置上，这种设置同样能够保证复本数据与网页主体数据的相互独立，即只要将复本数据的HTML节点设置为不直接或者间接从属于网页主体数据的HTML节点的位置即可。

本实施例在修改网页结构时，只需按照上述方式在网页结构中增加复本数据的HTML节点即可，网页结构中已有HTML节点的位置保持不变。

进一步的，本实施例中的位置信息包括指示显示界面相对于网页的位置的第一位置信息，以及指示预定位置在显示界面中位置的第二位置信息，该预定位置为复本数据所生成的展现界面在显示界面中显示的位置。

当页面不断滚动时，显示界面中的数据信息也不断发生变化，为了将展现界面定位在显示界面的前方（一般展现界面不超过显示界面的范围），通过上述第一位置信息来指示显示界面相对于网页的当前位置，即显示界面在网页的当前可见区域中的位置，如显示界面中各像素点相对于其最接近的一个已知位置的像素点的位置，或者，相对于网页的起始像素点的位置。然后，可以利用第二位置信息在当前的显示界面中找到展现界面的预定位置，如找到预定位置对应的具体像素点的坐标值。

本实施例中通过设置复本数据的HTML节点中的样式位置参数设置所述第一位置信息，该样式位置参数表示为style.position。在传统的HTML节点中，style.position没有赋值，未被使用，而本实施例设置style.position为fixed（固定定位），从而每当页面滚动导致显示界面相对于网页的位置发生变化时，系统能够自动获取到位于网页可见区域的当前显示界面中的像素点的位置，得到第一位置信息；对于不支持fixed定位的网页，如因特网浏览器版本6（IE6）下的网页，本实施例将复本数据的HTML节点的style.position设置为绝对定位（absolute），并通过监控窗口滚动（window.onScroll）事件实时计算出当前的显示界面中像素点的位置，得到第一位置信息。

本实施例通过设置复本数据的HTML节点中的坐标位置参数设置所述第二位置信息。该坐标位置参数可以表示为x和y，坐标位置参数表示预定位置对应的坐标点相对于显示界面的边界的值，根据预定位置设置在显示界面前的具体位置，x和y可以从左（left）、右（right）、顶（top）、底（bottom）四个属性参数中选取，例如，预定位置设置在显示界面的右下角时，可以选取right属性参数作为x，以指示预定位置相对于显示界面右边界的位置，选取bottom属性参数作为y以指示预定位置相对于显示界面顶部边界的位置。

为了便于清楚描述本发明实施例的技术方案，在发明的实施例中，采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分，本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定。

12：在网页的显示界面上对网页主体数据进行显示。

上述网页的显示界面为用于显示网页中内容的界面，例如，该显示界面为显示社交动态的界面。

在用户通过点击网页中富媒体数据（视频数据1）的播放按键，发送对视频数据1的显示指令时，本实施例禁止视频数据1的运行，而启动视频数据1的复本数据的运行。或者，本实施例在网页中为富媒体数据的复本数据专门设置一个命令接口，用户可以通过该命令接口直接发送运行复本数据的显示指令，选择采用独立于网页主体数据的方式播放视频数据1。

在运行复本数据时，由于复本数据与网页主体数据相独立，所以复本数据所生成的展现界面与网页的显示界面相分离，该展现界面嵌套在显示界面的前方。

本实施例在每次显示界面相对于网页的位置发生变化时，利用第一位置信息定位显示界面的当前位置，如通过计算显示界面中各像素点的当前坐标值，得到第一位置信息，从而定位显示界面相对于整个网页的当前位置。

利用所述第二位置信息在所定位的显示界面的前方确定所述预定位置对应的坐标点，并以该坐标点作为展现界面的顶点来显示展现界面。例如，将所确定的坐标点作为视频播放界面的左上角顶点，以该顶点为基础点将播放界面展现出来，所展现出的播放界面的具体形状、大小和外观与视频数据的自身设置有关，与本实施例关联较小，在此不再讨论。

本实施例中一方面网页主体数据在显示界面中呈现，与此同时，另一方面富媒体数据在显示界面之上的展现界面中呈现，展现界面在显示界面前方的位置固定，不会随着显示界面中网页的滚动而滚动。

进一步的，本实施例还提供了对网页中同时包括多个富媒体数据时的处理方式，包括如下：

若网页中包括第一富媒体数据和第二富媒体数据，则可以按照上述步骤11至14分别单独处理第一富媒体数据或者第二富媒体数据，如为第一富媒体数据设置独立于网页主体数据的第一复本数据，为第二富媒体数据设置独立于网页主体数据的第二复本数据等等。

然而，当在运行所述第一复本数据的同时接收到对所述第二富媒体数据的显示指令时，本实施例禁止第一复本数据的运行，启动第二复本数据的运行。这种处理方式，主要考虑到富媒体数据尤其是视频数据的使用时具有互斥性的特点，用户通常不会同时观看两种不同的视频数据，从而在接收到对第二富媒体数据的显示指令，即用户打开新的视频时，通过清除加载在内存中的第一复本数据清除的手段等禁止第一复本数据的运行，然后调用并运行第二复本数据呈现出新的视频的播放界面。

可见，本发明实施例的技术方案通过为网页中的富媒体数据设置独立于网页主体数据的复本数据，生成与网页的显示界面相分离的复本数据的展现界面并将展现界面定位在显示界面前方的技术手段等，能够使网页滚动时展示界面不会随着网页的滚动而滚动，从而使用户能够在滚动网页进行浏览的同时观看网页中的视频，提高了网页显示方式的灵活性，增强了用户体验。

本发明实施例还提供了一种网页显示的实现装置，参见图3，所述装置包括：

设置单元31，用于为网页中的富媒体数据设置独立于网页主体数据的复本数据，并为所述复本数据的展现界面设置位置信息；

主体数据显示单元32，用于在网页的显示界面上对网页主体数据进行显示；

富媒体数据显示单元33，用于当接收到对所述富媒体数据的显示指令时，运行所述复本数据生成与所述显示界面相分离的复本数据的展现界面，并利用所述位置信息将所述展现界面定位在所述显示界面前方的预定位置；通过在所述展现界面上显示所述复本数据，以对所述富媒体数据进行显示。

进一步的，所述设置单元31包括网页结构设置模块和位置信息设置模块。

该网页结构设置模块，用于设置与所述富媒体数据的内容相同的复本数据，并将复本数据的HTML节点设置为不从属于网页主体数据的HTML节点的HTML节点，上述富媒体数据的内容与复本数据的内容相同。具体的，网页结构设置模块，用于将复本数据的HTML节点和网页主体数据的HTML节点设置为从属于相同的HTML父节点。

该位置信息包括指示所述显示界面的当前位置的第一位置信息，以及指示所述预定位置在当前的显示界面中位置的第二位置信息，所述位置信息设置模块，用于通过设置复本数据的HTML节点中的样式位置参数设置所述第一位置信息，通过设置复本数据的HTML节点中的坐标位置参数设置所述第二位置信息。

进一步的，所述富媒体数据显示单元，用于在每次所述显示界面的位置发生变化时，利用所述第一位置信息定位所述显示界面的当前位置；利用所述第二位置信息在所定位的显示界面的前方确定所述预定位置对应的坐标点，并以该坐标点作为所述展现界面的顶点来显示展现界面。

进一步的，所述富媒体数据显示单元，还用于当所述显示指令指示运行所述富媒体数据时，禁止所述富媒体数据的运行，启动所述复本数据的运行；当所述显示指令指示运行所述复本数据时，直接启动所述复本数据的运行。

进一步的，所述网页中包括第一富媒体数据和第二富媒体数据，为第一富媒体数据设置独立于网页主体数据的第一复本数据，为第二富媒体数据设置独立于网页主体数据的第二复本数据，所述富媒体数据显示单元，还用于当在运行所述第一复本数据的同时接收到对所述第二富媒体数据的显示指令时，禁止所述第一复本数据的运行，启动所述第二复本数据的运行。

本发明装置实施例中各单元和模块的具体工作方式可以参见本发明的方法实施例。本实施例的装置能够将视频数据的展现界面从网页主体数据（如社交动态）的显示界面中抽离出来，与社交动态的上下滚动浏览分离，使用户可以同时浏览视频和社交动态，互不影响。

由上所述，本发明实施例的技术方案通过为网页中的富媒体数据设置独立于网页主体数据的复本数据，生成与网页的显示界面相分离的复本数据的展现界面并将展现界面定位在显示界面前方的技术手段等，能够使网页滚动时展示界面不会随着网页的滚动而滚动，从而使用户能够在滚动网页进行浏览的同时观看网页中的视频，提高了网页显示方式的灵活性，增强了用户体验。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims

1.一种网页显示的实现方法，其特征在于，为网页中的富媒体数据设置独立于网页主体数据的复本数据，并为所述复本数据的展现界面设置位置信息，所述方法包括：

在网页的显示界面上对网页主体数据进行显示；

2.根据权利要求1所述的方法，其特征在于，所述为网页中的富媒体数据设置独立于网页主体数据的复本数据包括：

设置与所述富媒体数据的内容相同的复本数据，将复本数据的超文本标记语言HTML节点设置为不从属于网页主体数据的HTML节点的HTML节点。

3.根据权利要求2所述的方法，其特征在于，所述将复本数据的超文本标记语言HTML节点设置为不从属于网页主体数据的HTML节点的HTML节点包括：

将复本数据的HTML节点和网页主体数据的HTML节点设置为从属于相同的HTML父节点。

4.根据权利要求1所述的方法，其特征在于，所述位置信息包括指示所述显示界面相对于网页的位置的第一位置信息，以及指示所述预定位置在显示界面中位置的第二位置信息，所述为所述复本数据的展现界面设置位置信息包括：

通过设置复本数据的HTML节点中的样式位置参数设置所述第一位置信息；

通过设置复本数据的HTML节点中的坐标位置参数设置所述第二位置信息。

5.根据权利要求4所述的方法，其特征在于，所述利用所述位置信息将所述展现界面定位在所述显示界面前方的预定位置包括：

在每次所述显示界面相对于网页的位置发生变化时，利用所述第一位置信息定位所述显示界面的当前位置；

利用所述第二位置信息在所定位的显示界面的前方确定所述预定位置对应的坐标点，并以该坐标点作为所述展现界面的顶点来显示展现界面。

6.根据权利要求1至5任一项所述的方法，其特征在于，

当所述显示指令指示运行所述富媒体数据时，禁止所述富媒体数据的运行，启动所述复本数据的运行；

当所述显示指令指示运行所述复本数据时，直接启动所述复本数据的运行。

7.根据权利要求1至5任一项所述的方法，其特征在于，所述网页中包括第一富媒体数据和第二富媒体数据，为第一富媒体数据设置独立于网页主体数据的第一复本数据，为第二富媒体数据设置独立于网页主体数据的第二复本数据，所述方法还包括：

当在运行所述第一复本数据的同时接收到对所述第二富媒体数据的显示指令时，禁止所述第一复本数据的运行，启动所述第二复本数据的运行。

8.一种网页显示的实现装置，其特征在于，所述装置包括：

9.根据权利要求8所述的装置，其特征在于，所述设置单元包括网页结构设置模块和位置信息设置模块，

所述网页结构设置模块，用于设置与所述富媒体数据的内容相同的复本数据，将复本数据的HTML节点设置为不从属于网页主体数据的HTML节点的HTML节点；

所述位置信息包括指示所述显示界面的当前位置的第一位置信息，以及指示所述预定位置在当前的显示界面中位置的第二位置信息，所述位置信息设置模块，用于通过设置复本数据的HTML节点中的样式位置参数设置所述第一位置信息，通过设置复本数据的HTML节点中的坐标位置参数设置所述第二位置信息。

10.根据权利要求8或9所述的装置，其特征在于，所述富媒体数据显示单元，用于在每次所述显示界面的位置发生变化时，利用所述第一位置信息定位所述显示界面的当前位置；利用所述第二位置信息在所定位的显示界面的前方确定所述预定位置对应的坐标点，并以该坐标点作为所述展现界面的顶点来显示展现界面。