CN102915349A - 在浏览器中显示网页的方法及在浏览器中显示的网页组件 - Google Patents

Abstract

本发明公开了一种在浏览器中显示网页的方法，所述网页包括多个网页对象，所述网页对象至少包括媒体对象和要显示在所述媒体对象之上的目标网页对象，该方法包括步骤：在网页对象在浏览器中显示的层叠顺序的方向上，在目标网页对象的下方添加窗口级别网页对象，且该窗口级别网页对象位于所述媒体对象的上方，以使得该网页在浏览器中显示时，该窗口级别网页对象遮挡住所述媒体对象而不遮挡所述目标网页对象。另外，本发明还提供一种适于与媒体对象一起在浏览器中显示的网页组件。利用本发明，可以使得浏览器既能够显示被插入的媒体对象，又能够显示不想被所插入的媒体对象遮挡的组件，提高了用户界面友好度。

Description

在浏览器中显示网页的方法及在浏览器中显示的网页组件

技术领域

本发明涉及互联网技术领域，具体涉及一种在浏览器上显示网页的方法及适于和媒体对象一起在浏览器中显示的网页组件。

背景技术

随着互联网的快速发展，网络已经深刻地影响人类生活的各个方面。浏览器作为一种最为普通的网络应用，已经为绝大多数网络用户采用。浏览器适于在网络客户端处呈现来自网络服务器的内容，从而使得网络客户端处的用户参与网络服务器提供的应用中。

浏览器通常呈现以HTML格式编码的网络内容。随着网络技术的发展，在浏览器上呈现的内容也日益丰富，为了增加HTML网页的表现力，现在可以在网页中嵌入各种格式的多媒体信息。例如，Adobe公司开发的Flash可以呈现各种动画信息，经常被插入在HTML网页中，以便在浏览器处向网络客户端用户呈现动画。

然而在浏览器中呈现在网页中的Flash等媒体对象时，Flash等媒体对象可能会遮挡住网络页面中的一些组件，例如可能遮挡住网络页面中的导航条，使得用户在浏览动画的同时，不能进行导航的操作，因此不方便用户使用。

因此需要一种可以解决诸如Flash之类的媒体对象会遮挡网页中的其它必须显示的组件的解决方案。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的在浏览器中显示网页的方法和适于与媒体对象一起在浏览器中显示的网页组件。

依据本发明的一个方面，提供了在浏览器中显示网页的方法，所述网页包括多个网页对象，所述网页对象至少包括媒体对象和要显示在所述媒体对象之上的目标网页对象，该方法包括步骤：在网页对象在浏览器中显示的层叠顺序的方向上，在目标网页对象的下方添加窗口级别网页对象，且该窗口级别网页对象位于所述媒体对象的上方，以使得该网页在浏览器中显示时，该窗口级别网页对象遮挡住所述媒体对象而不遮挡所述目标网页对象。

可选地，上述的浏览器中显示网页的方法包括步骤：设置分层对象，将所述目标网页对象和窗口级别网页对象包括在所述分层对象中，所述分层对象在所述定义层叠顺序的方向上位于所述媒体对象的上方；根据所述目标网页对象的网页属性来设置该分层对象的网页属性，使得所述分层对象与所述目标网页对象在浏览器中显示的位置和大小一致；根据所述目标网页对象的网页属性来设置所述窗口级别网页对象的网页属性，使得所述目标网页对象和窗口级别网页对象在浏览器中显示的位置和大小一致。

根据本发明的另一方面，提供了一种适于与媒体对象一起在浏览器中显示的网页组件，该网页组件包括:要显示在所述媒体对象之上的目标网页对象；其中所述网页组件具有与所述目标网页对象一致的网页属性，所述网页属性包括在浏览器上显示的位置和大小；以及窗口级别网页对象，其在浏览器上显示的位置和大小的网页属性与所述目标网页对象相同，且在定位网页对象在浏览器中显示的层叠顺序的方向上，位于所述媒体对象的上方但位于所述目标网页对象的下方。

根据本发明的在浏览器上显示网页的方法及适于与媒体对象一起在浏览器中显示的网页组件，可以使得浏览器既能够显示被插入的媒体对象，又能够显示不想被所插入的媒体对象遮挡的组件，由此解决了媒体对象遮挡想被显示的组件的问题，使浏览器在显示的网页内容方面具有更大的自由度，可以呈现更为友好的用户界面。

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

附图说明

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

图1示出了根据本发明的一个实施例的在浏览器上显示网页的方法的一个例子的流程图；

图2示出了根据本发明的一个实施例的包含适于与媒体对象一起在浏览器中显示的网页组件的网页的方框示意图。

具体实施方式

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

如今，浏览器在其有限大小的空间上显示的对象越来越多，不仅需要显示网页本身所包括的多个网页对象，而且还经常显示一些插入的媒体对象，例如可以显示各种动画信息的Adobe公司开发的Flash对象等，从而使浏览器能够向用户提供更加多样的信息，但由于所述媒体对象并非原生的HTML元素，其显示的时候可能会不遵循HTML规范，甚至有可能在其被显示时会不恰当地遮挡住一些本应显示在其上方的网页对象。

以被插入的媒体对象为Fla sh对象为例。当在浏览器上显示的HTML网页中具有Flash对象时，例如具有下面所示的代码：

在上面的代码中，定义了一个div层，其起一个导航条的作用。另外还插入了一个Flash对象。为了使用户在浏览Flash对象展现的动画的同时，可以方便地进行导航的操作，希望导航div层可以覆盖在Flash动画之上，为此，对导航div层的z-index属性设置了一个较大值，在上述代码中，导航div层的z-index设置为10。然而，在实际的显示过程中，由于浏览器对Flash对象的显示处理等原因，Flash对象有可能会遮挡住网页中的其他元素，包括起导航条作用的导航div层，从而使得导航效果无法实现。具体而言，Flash对象中决定Flash的渲染方式的参数wmode决定了Flash对象能否被恰当显示。当把Flash对象的wmode设置为"transparent（透明）"或"opaque（半透明）"时，Flash动画由网页渲染引擎负责渲染，此时它在浏览器中显示的位置由CSS（Cascading Style Sheet，级联样式表）中的用来控制上下层位置关系的网页属性参数'z-index'控制，这时候Flash不会遮挡z-index值为10的导航div层，显示效果正常。然而，当参数wmode没有被设置时，其默认值是“window”，在这种情形下，Flash对象将在window窗口级别渲染，其相应元素拥有系统级的窗口句柄，它就不再遵循网页属性参数'z-index'设定的网页属性，而会处于所有未拥有窗口句柄特性的网页元素之上，从而导致Flash对象遮挡其他本应显示在其上方的网页对象。

为此，本发明提出的一种在浏览器中显示网页的方法和一种适于与媒体对象一起在浏览器中显示的网页组件。为了说明方便，在下面的描述中，设浏览器显示网页的平面为XY平面，网页对象在浏览器中显示的层叠顺序的方向设为浏览器的Z轴方向。

本发明提出的在浏览器中显示网页的方法主要是，在浏览器的Z轴方向上，在目标网页对象的下方添加窗口级别网页对象，且该窗口级别网页对象位于媒体对象的上方，以使得网页在浏览器中显示时，该窗口级别网页对象遮挡住媒体对象而不遮挡目标网页对象。下面结合图1具体说明根据本发明一个实施例的、适于解决上述问题的在浏览器中显示网页的方法100的流程图。

如图1所示，本发明的方法100始于步骤S105，随后，在步骤S110中，确定不希望被媒体对象遮挡的目标网页对象。就上面的Flash示例而言，在步骤S110中，确定不希望被Flash对象遮挡的目标网页对象，例如确定目标网页对象为一导航div层，该导航div层在HTML网页中可以采用如下代码表示：

<div style-"position：absolute；z index：10；bottom：0px；left：0px；width：100％；height：31px；″>这个是导航div层</div>

随后，在步骤S120中，创建分层对象，并且将目标网页对象包括在分层对象中，从而使分层对象处于目标网页对象的上层。分层对象可以是任何可以将各种网页对象组合在一起的容器类对象，根据本发明的一个实施例，分层对象可以是div层。

随后，在步骤S130中，根据目标网页对象的网页属性来设置上述分层对象的网页属性。具体而言，为了不破坏原有网页的显示方式，将目标网页对象有关的在浏览器的XY平面中显示的位置和大小等的属性复制给分层对象，使得分层对象与目标网页对象在浏览器的XY平面中显示的位置和大小一致。另外为了恰当显示，需要将分层对象在浏览器的Z轴方向上设置为位于媒体对象的上方。根据本发明的一个示例，定义的网页对象在浏览器的Z轴方向上显示的层叠顺序的属性值可以利用网页属性参数z-index来设置；z-index值越高，对象在浏览器的Z轴方向上就越显示在上方；z-index值越低，对象在浏览器的Z轴方向上就越显示在下方。当然，本发明不受限于网页属性参数z-index，所有可以定义网页对象在浏览器中显示的层叠顺序的网页属性都在本发明的保护范围之内。

就媒体对象为Flash而言，在步骤S120中，在导航div层的外层新增一DIV层，该新增的DIV层为导航div层的父元素或者父层。然后，在步骤S130中，使该新增的DIV层的样式被设置得与导航div层的样式相同，而导航div层的样式可以只需保留网页属性参数宽度“width”和高度“height”即可，具体可以由如下代码表示：

由于新增的DIV层具有与导航div层相同的样式，所以DIV层可以显示导航div层的信息，这样的设置提高了导航div层的信息在浏览器的Z轴方向上的显示层次，即在浏览器的Z轴方向上可以显示在更上方。

随后，在步骤S140中，添加窗口级别网页对象，在浏览器的Z轴方向上，该窗口级别网页对象在目标网页对象的下方且在媒体对象的上方，这样当在浏览器中显示网页时，该窗口级别网页对象遮挡住媒体对象而不遮挡目标网页对象。

应当注意的是，步骤S140是本发明的关键步骤，通过在媒体对象和目标网页对象之间添加窗口级别网页对象，即使媒体对象以高级别运行，其也会被窗口级别网页对象所遮挡，而窗口级别网页对象本身又属于HTML的标准对象，自然遵循HTML定义的层叠顺序，因而也会被目标网页对象所遮挡。因此，本发明通过在媒体对象和目标网页对象之间添加窗口级别网页对象而解决了有关媒体对象有可能不遵循HTML定义而显示在目标网页对象之上的问题。

可选地，窗口级别网页对象可以为HTML规范中的iframe元素，然而根据需要，窗口级别网页对象还可以是任何可以遮挡媒体对象的其他HTML元素。

在步骤S140之后，可以直接进入结束步骤S160。但是，为了让新添加的窗口级别网页对象不会干扰其他网页对象的显示，在步骤S140之后还可以进行步骤S150，在步骤S150中，将窗口级别网页对象同样包括在步骤S120创建的分层对象中，并根据目标网页对象的网页属性来设置窗口级别网页对象的网页属性，使得目标网页对象和窗口级别网页对象在浏览器的XY平面内显示的位置和大小一致。

就上面的Flash对象示例来说，在DIV层中增加一个iframe对象，该iframe对象在浏览器XY平面上的显示尺寸与导航div层的尺寸一致，但在浏览器的Z轴方向上定位在Flash之上且在导航div层之下，具体地可以通过如下代码来实现：

从上述代码中可知，iframe对象通过参数“z-index：-1”而被定位，其中“z-index：-1”表示iframe对象在新增DIV层中的位置位于导航div层的下面，同时由于新增DIV层具有属性“z-index：10”，所以新增的DIV层在浏览器的Z轴方向上位于Flash对象之上。由此可知，DIV层可以显示导航div层的信息，且最终的效果是导航div层的信息遮挡住iframe对象。另外，iframe可以遮挡住Flash对象，例如通过将iframe的背景设定为不透明，即设定为“background:#FFFFFF”，使得iframe能够遮挡住Flash，由此，结合前面所述可知，导航div层的信息显示在Flash对象之上，即不会被Flash对象遮挡。

通过上述步骤，即使在Flash对象的显示参数被设置为wmode=“window”时，也可使可能被Flash对象所遮挡的目标网页对象显示在Flash对象上方。

需要说明的是，图1所示的方法并不限定按所示的各步骤的顺序进行，可以根据需要调整各步骤的先后顺序，另外，所述步骤也不限定于上述步骤划分，上述步骤可以进一步拆分成更多步骤也可以合并成更少步骤。

下面结合图2说明根据本发明一个实施例的、适于解决上述问题的一种适于与媒体对象一起在浏览器中显示的网页组件200。

如图2所示，本发明的适于与媒体对象220一起在浏览器中显示的网页组件200包括：要显示在所述媒体对象220之上的目标网页对象210、以及窗口级别网页对象230。为了说明方便起见，图2中还示出了网页20、以及在网页20中显示的媒体对象220。

其中，网页组件200具有与目标网页对象210一致的网页属性，所述网页属性包括目标网页对象210在浏览器的XY平面上显示的位置和大小。由于网页组件200在目标网页对象210的上层且与目标网页对象210具有一致的网页属性，所以，目标网页对象210的内容在浏览器上的显示转换为由网页组件200代为显示。这里，网页组件200可以是任何可以将各种网页对象组合在一起的容器类对象，根据本发明的一个实施例，网页组件200可以是div层。另外，为了恰当显示，需要将网页组件200在浏览器的Z轴方向上设置为位于媒体对象220的上方。根据本发明的一个示例，定义在浏览器的Z轴方向上的显示层叠顺序的属性值可以利用网页属性参数z-index来设置；z-index值越高，对象在浏览器的Z轴方向上就越显示在上方；z-index值越低，对象在浏览器的Z轴方向上就越显示在下方。当然，本发明不受限于网页属性参数z-index，所有可以定义网页对象在浏览器的Z轴方向上显示的层叠顺序的网页属性都在本发明的保护范围之内。

以媒体对象220为Flash对象而言，以在浏览器XY平面中显示的导航div层作为目标网页对象210，希望Flash对象220在浏览器XY平面中显示时不遮挡导航div层210。为此，本发明提供的网页组件200设置为导航div层210的父元素或者父层，其为位于导航div层210的外层的一DIV层200，该DIV层200的样式被设置得与导航div层210的样式相同，而导航div层210的样式可以只需保留网页属性参数宽度“width”和高度“height”即可，具体可以由如下代码表示：

由于DIV层200具有与导航div层210相同的样式，所以DIV层200可以显示所述导航div层210的信息，这样的设置提高了导航div层的信息在浏览器的Z轴方向上的显示层次，即在浏览器的Z轴方向上可以显示在更上方

在图2所示的网页组件200中，窗口级别网页对象230在浏览器的Z轴方向上位于媒体对象220的上方但位于目标网页对象210的下方，而且在浏览器XY平面上显示的位置和大小的网页属性与目标网页对象210的相同。这样，当在浏览器中显示网页时，由于网页组件200位于窗口级别网页对象230的上层，而窗口级别网页对象230又位于媒体对象220的上方，所以网页组件200位于媒体对象220的上方。而根据前面所述，网页组件200又能够显示目标网页对象210的内容，所以目标网页对象210的内容在浏览器上显示时不会被媒体对象220遮挡。

本发明的网页组件200由于包含在浏览器的Z轴方向上设置在媒体对象220和目标网页对象210之间的窗口级别网页对象230，所以，即使媒体对象220以高级别运行，其也会被窗口级别网页对象230所遮挡，而窗口级别网页对象230本身又属于HTML的标准对象，自然遵循HTML定义的层叠顺序，因而也会被目标网页对象210所遮挡。因此，本发明通过在媒体对象220和目标网页对象210之间设置窗口级别网页对象230而解决了有关媒体对象220有可能不遵循HTML定义而显示在目标网页对象210之上的问题。

可选地，窗口级别网页对象230可以由iframe对象来实现，媒体对象220可以为Flash对象。

可选地，网页组件200、媒体对象220、窗口级别网页对象230、以及目标网页对象210在浏览器Z轴上的层叠顺序可以由表示在浏览器Z轴上的层叠顺序的网页属性参数z-index来设置。

另外，可选地，可以将所述窗口级别网页对象230的网页属性设置为不透明，这样可以使得窗口级别网页对象230能够更完全地遮挡住媒体对象220。

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

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

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

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

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

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

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

Claims (10)

1.一种在浏览器中显示网页的方法，所述网页包括多个网页对象，所述网页对象至少包括媒体对象和要显示在所述媒体对象之上的目标网页对象，该方法包括步骤：

在网页对象在浏览器中显示的层叠顺序的方向上，在目标网页对象的下方添加窗口级别网页对象，且该窗口级别网页对象位于所述媒体对象的上方，以使得该网页在浏览器中显示时，该窗口级别网页对象遮挡住所述媒体对象而不遮挡所述目标网页对象。

2.根据权利要求1所述的方法，所述添加窗口级别网页对象的步骤包括步骤：

设置分层对象，将所述目标网页对象和窗口级别网页对象包括在所述分层对象中，所述分层对象在所述定义层叠顺序的方向上位于所述媒体对象的上方；

根据所述目标网页对象的网页属性来设置该分层对象的网页属性，使得所述分层对象与所述目标网页对象在浏览器中显示的位置和大小一致；

根据所述目标网页对象的网页属性来设置所述窗口级别网页对象的网页属性，使得所述目标网页对象和窗口级别网页对象在浏览器中显示的位置和大小一致。

3.如权利要求1或者2所述的方法，其中所述窗口级别网页对象为iframe对象，所述分层对象为div对象。

4.如权利要求1-3中任一项所述的方法，其中所述媒体对象为Flash对象。

5.如权利要求1-4中任一项所述的方法，其中所述窗口级别网页对象被设置为不透明。

6.如权利要求1-5中任一项所述的方法，其中所述媒体对象、分层对象、窗口级别网页对象以及目标网页对象的层叠顺序根据表示该层叠顺序的网页属性参数z-index来设置。

7.一种适于与媒体对象一起在浏览器中显示的网页组件，所述网页组件包括:

要显示在所述媒体对象之上的目标网页对象，其中所述网页组件具有与所述目标网页对象一致的网页属性，所述网页属性包括在浏览器上显示的位置和大小；以及

窗口级别网页对象，其在浏览器上显示的位置和大小的网页属性与所述目标网页对象相同，且在定位网页对象在浏览器中显示的层叠顺序的方向上，位于所述媒体对象的上方但位于所述目标网页对象的下方。

8.根据权利要求7所述的网页组件，其中所述窗口级别网页对象为iframe对象，所述媒体对象为Flash对象，且所述网页组件为div组件。

9.根据权利要求7或8所述的网页组件，其与所述媒体对象、窗口级别网页对象、以及目标网页对象的在浏览器中显示时的层叠顺序根据表示该层叠顺序的网页属性参数z-index来设置。

10.根据权利要求7-9中任一项所述的网页组件，其中所述窗口级别网页对象为不透明。

Images