CN110362304A - 网页显示的方法和装置 - Google Patents

Abstract

本申请实施例公开了网页显示的方法和装置。该方法的一具体实施方式包括：响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在网页中的第一位置信息；基于第一位置信息，创建显示部分的截图层，以使截图层覆盖显示部分；弹出待弹出浮层，以使待弹出浮层呈现在截图层之上。该实施方式可以使得网页在弹出浮层时，在显示窗口显示的网页内容保持不变。

Description

网页显示的方法和装置

技术领域

本申请实施例涉及计算机技术领域，具体涉及网页显示的方法和装置。

背景技术

随着前端技术的发展和对用户体验的重视，越来越多的网页选择使用浮层交互，比如在网页的浮层上展示对话框、图片等等。而使用浮层交互通常会面临一个严重的问题，就是在浮层上滑动手指(或鼠标)，整个网页也会跟随滑动。因此，我们需要寻找一种既不会影响浮层滑动又可以锁定网页滚动的方案。

现有技术中，在利用锁定网页滚动的方案锁定网页时，网页通常会出现回滚到顶端后才会被锁定的现象，而用户在网页锁定的过程会明显得感知到浏览器中网页位置的变化。

发明内容

本申请实施例提出了网页显示的方法和装置。

第一方面，本申请实施例提供了一种网页显示的方法，该方法包括：响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在网页中的第一位置信息；基于第一位置信息，创建显示部分的截图层，以使截图层覆盖显示部分；弹出待弹出浮层，以使待弹出浮层呈现在截图层之上。

在一些实施例中，在弹出待弹出浮层之前，方法还包括：对网页的HTML标签进行解析，获取预设的层叠式样式表CSS信息以固定该网页，其中，CSS信息携带有禁止该网页滚动的属性信息。

在一些实施例中，方法还包括：响应于接收到关闭浮层的指令，基于第一位置信息设置显示窗口显示网页的显示部分，移除截图层，关闭所弹出的浮层。

在一些实施例中，基于第一位置信息，创建显示部分的截图层，以使截图层覆盖显示部分，包括：创建指定尺寸的画布Canvas，其中，指定尺寸为显示窗口的尺寸；利用网页的HTML代码，生成矢量图形；基于第一位置信息，将矢量图形绘制到画布Canvas以生成截图层；将截图层固定在网页所在的图层之上，以使显示窗口显示截图层。

在一些实施例中，响应于接收到关闭浮层的指令，基于第一位置信息设置显示窗口显示网页的显示部分，移除截图层，关闭所弹出的浮层，包括：响应于接收到关闭浮层的指令，移除CSS信息；将网页滚动到第一位置信息所指示的位置处；移除截图层，隐藏或移除所弹出的浮层。

第二方面，本申请实施例提供了一种网页显示的装置，装置包括：第一位置信息获取单元，配置用于响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在网页中的第一位置信息；截图层创建单元，配置用于基于第一位置信息，创建显示部分的截图层，以使截图层覆盖显示部分；浮层弹出单元，配置用于弹出待弹出浮层，以使待弹出浮层呈现在截图层之上。

在一些实施例中，装置还包括：CSS信息获取单元，配置用于对网页的HTML标签进行解析，获取预设的层叠式样式表CSS信息以固定该网页，其中，CSS信息携带有禁止该网页滚动的属性信息。

在一些实施例中，装置还包括：浮层关闭单元，配置用于响应于接收到关闭浮层的指令，基于第一位置信息设置显示窗口显示网页的显示部分，移除截图层，关闭所弹出的浮层。

在一些实施例中，截图层创建单元进一步配置用于：创建指定尺寸的画布Canvas，其中，指定尺寸为显示窗口的尺寸；利用网页的HTML代码，生成矢量图形；基于第一位置信息，将矢量图形绘制到画布Canvas以生成截图层；将截图层固定在网页所在的图层之上，以使显示窗口显示截图层。

在一些实施例中，浮层关闭单元进一步配置用于：响应于接收到关闭浮层的指令，移除CSS信息；将网页滚动到第一位置信息所指示的位置处；移除截图层，隐藏或移除所弹出的浮层。

本申请实施例提供的网页显示的方法和装置，响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在该网页中的第一位置信息，而后基于第一位置信息创建网页的显示部分的截图层，并使得该截图层可以覆盖显示部分，最后弹出待弹出浮层以使该待弹出浮层呈现在截图层之上，从而使得显示窗口在弹出浮层时显示的内容保持不变。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是本申请可以应用于其中的示例性系统架构图；

图2是根据本申请的网页显示的方法的一个实施例的流程图；

图3是根据本申请的网页显示的方法的一个应用场景的示意图；

图4是根据本申请的网页显示的方法的另一个实施例的流程图；

图5是根据本申请的网页显示的装置的一个实施例的结构示意图；

图6是适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图1示出了可以应用本申请的网页显示的方法或网页显示的装置的实施例的示例性系统架构100。

如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的网页提供支持的后台网页服务器。后台网页服务器可以对网页数据等进行分析等处理，并将处理结果(例如网页页面)反馈给终端设备。

需要说明的是，本申请实施例所提供的网页显示的方法一般由服务器105执行，相应地，网页显示的装置一般设置于服务器105中。

需要指出的是，本申请实施例所提供的网页显示的方法还可以由终端设备101、102、103执行，相应地，图像生成装置也可以设置于终端设备101、102、103中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的网页显示的方法的一个实施例的流程200。该网页显示的方法，包括以下步骤：

步骤201，响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在网页中的第一位置信息。

在本实施例中，网页显示的方法运行于其上的电子设备(例如图1所示的服务器)可以用过有线连接或者无线连接方式从用户利用其进行网页浏览的的终端获取用户浏览的网页，而后确定用户所浏览的网页否存在待弹出浮层。响应于检测到用户所浏览的网页中存在待弹出浮层，可以确定该网页中呈现在显示窗口的显示部分，从而获取该显示部分在网页中位置信息，该位置信息即为第一位置信息。需要指出的是，上述无线连接方式可以包括但不限于3G/4G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultrawideband)连接、以及其他现在已知或将来开发的无线连接方式。

通常，浮层是为了在网页中呈现更多的内容而设置的悬浮在网页上的页面。其中，浮层具有一定的透明度，从而避免用户在利用终端上安装的网页浏览器浏览网页时受到浮层的影响。这里，浮层可以呈现如对话框、图片、文字、动画等多种形式的内容。这里，可以通过将话框、图片、文字、动画等嵌入浮层中的形式来实现对各内容的呈现，或者还可以通过将对话框、图片、文字、动画等设置在图层之上来实现对各内容的呈现。

步骤202，基于第一位置信息，创建显示部分的截图层，以使截图层覆盖显示部分。

在本实施例中，基于步骤201得到的第一位置信息，上述电子设备(如图1所示的服务器)可以确定网页在显示窗口的显示部分，而后创建该网页的显示部分的截图层。该截图层中显示的内容与显示窗口显示的网页的内容相同。进一步的，上述电子设备可以将截图层设置在网页所在图层之上，并使得该截图层可以覆盖网页的显示部分。此时，显示窗口显示的是创建的截图层，而且该截图层显示的内容与网页的显示部分的内容相同，因此，不论位于截图层之下的网页如何滚动，用户均不会感知到网页位移的变化。

在本实施例的一些可选的实现方式中，上述电子设备可以利用画布Canvas来创建网页的截图层。具体地，上述电子设备可以获取用于显示网页的显示窗口的尺寸，从而创建与该显示窗口尺寸相同的画布Canvas；而后，利用网页的HTML(Hyper Text MarkupLanguage，超文本标记语言)代码生成矢量图形，即生成SVG(Scalable Vector Graphics，可缩放矢量图形)对象；最后，基于网页的显示部分在该网页中的第一位置信息将生成的矢量图形绘制到画布Canvas，从而生成该网页的显示部分的截图层。上述电子设备可以将该截图层固定在网页所在的图层之上，从而使得网页浏览器的显示窗口可以显示该截图层。

其中，截图层的生成具体可以包括如下步骤：

第一步，创建画布Canvas且使该画布Canvas的长宽与网页浏览器的显示窗口的长宽相同，而后利用层叠式样式表CSS将该画布Canvas固定悬浮在网页的上层。最后，通过getcontext()方法返回用于在画布Canvas上绘图的上下文环境。

第二步，创建包含foreignObject元素的SVG字符串，这里的foreignObject元素可以用于在SVG内部嵌入HTML元素。因此，网页的HTML代码格式化之后可以放入foreignObject元素中，从而实现了利用foreignObject元素将HTML代码嵌入SVG内部。而后，通过层叠式样式表CSS控制SVG滚动到网页的第一位置信息所指示的位置处。

第三步，利用上述嵌入HTML代码的SVG字符串创建Blob(binary large object，二进制大对象)实例，并设置mime类型(Multipurpose Internet Mail Extensions，多用途互联网邮件扩展类型)为image/svg+xml，从而可以得到矢量图形，即得到SVG对象。

第四步，将上一步得到的SVG对象传给URL.createObject URL()，从而得到URL对象。而后，创建一个Image()对象实例，监听该实例的加载事件，并在监听到加载事件时调用drawImage()把图形绘制到创建的画布Canvas上，生成网页的显示部分的截图层。最后，调用上述URL对象的revokeObject URL()将其释放，从而避免了影响浏览器的性能。

步骤203，弹出待弹出浮层，以使待弹出浮层呈现在截图层之上。

在本实施例中，基于步骤202创建的截图层，上述电子设备在设置该截图层覆盖网页的显示部分的同时，设置该截图层位于待弹出浮层之下，即将截图层设置在网页所在图层和浮层之间。因此，上述电子设备可以控制上述待弹出浮层弹出并呈现在截图层之上。当用户对浮层进行滑动等操作时，显示窗口均显示浮层以及固定在浮层下的截图层，因此，不论位于截图层之下的网页层如何滚动，用户均无法感知到网页的变化，从而提升了用户体验。

继续参见图3，图3是根据本实施例的网页显示的方法的应用场景的一个示意图。在图3的应用场景中，用户在利用网页浏览器浏览网页时，后台服务器响应于检测到待弹出浮层302，可以确定网页中呈现在显示窗口的显示部分301，并获取该显示部分301在网页中的第一位置信息；而后，基于该第一位置信息，后台服务器可以创建网页的显示部分301的截图层303，并将该截图层303固定在网页301的上方，如图3所示，该截图层303显示的内容与显示部分301显示的内容相同；最后，后台服务器可以在截图层303之上弹出待弹出浮层302，从而实现了网页在弹出浮层302或对浮层302进行操作时，显示窗口所显示的网页内容不变。可以理解的是，上述浮层302上可以设置对话框304，如图3所示，以使用户可以通过对话框304获取浮层302所呈现的内容，从而实现网页的浮层交互显示。

本申请的上述实施例提供的网页显示的方法，响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在该网页中的第一位置信息，而后基于第一位置信息创建网页的显示部分的截图层，并使得该截图层可以覆盖显示部分，最后弹出待弹出浮层以使该待弹出浮层呈现在截图层之上，从而使得显示窗口在弹出浮层时显示的内容保持不变。

进一步参考图4，其示出了网页显示的方法的另一个实施例的流程400。该网页显示的方法的流程400，包括以下步骤：

步骤401，响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在网页中的第一位置信息。

在本实施例中，网页显示的方法运行于其上的电子设备(例如图1所示的服务器)可以用过有线连接或者无线连接方式从用户利用其进行网页浏览的的终端获取用户浏览的网页，而后确定用户所浏览的网页否存在待弹出浮层。响应于检测到用户所浏览的网页中存在待弹出浮层，可以确定该网页中呈现在显示窗口的显示部分，从而获取该显示部分在网页中位置信息，该位置信息即为第一位置信息。

步骤402，基于第一位置信息，创建显示部分的截图层，以使截图层覆盖显示部分。

在本实施例中，基于步骤401得到的第一位置信息，上述电子设备(如图1所示的服务器)可以确定网页在显示窗口的显示部分，而后创建该网页的显示部分的截图层。该截图层中显示的内容与显示窗口显示的网页的内容相同。进一步的，上述电子设备可以将截图层设置在网页所在图层之上，并使得该截图层可以覆盖网页的显示部分。此时，显示窗口显示的是创建的截图层，而且该截图层显示的内容与网页的显示部分的内容相同，因此，不论位于截图层之下的网页如何滚动，用户均不会感知到网页位移的变化。

步骤403，对网页的HTML标签进行解析，获取预设的层叠式样式表CSS信息以固定该网页。

在本实施例中，上述电子设备可以预先给网页的HTML的标签设置层叠式样式表CSS信息，该CSS信息可以携带有禁止该网页滚动的属性信息。而后，上述电子设备可以获取并解析网页HTML标签，获取层叠式样式表CSS信息，以便于电子设备运行该CSS信息固定上述网页。由于步骤402将创建的截图层覆盖在网页的显示部分之上，因此该截图层可以完全遮挡住显示窗口中显示的网页，因此，在位于截图层之下的网页出现滚动时，用户通过显示窗口看到的网页内容不变。

可选地，上述电子设备预先给网页的HTML标签设置层叠式样式表CSS样式的overflow属性为“overflow：hidden”，以裁剪网页溢出部分。该方法可以将网页固定在第一位置信息所指示的位置处，即将网页固定在当前显示部分，但是此种设置在将网页固定在第一位置信息所指示的位置处之前会使网页先回滚到顶部。这时，固定在网页之上的截图层可以遮挡住网页，从而使得当网页由当前显示部分回滚到顶部再固定在当前显示部分的过程可以被上述截图层完全遮挡，因此使得用户不会感知到网页的变化，提高了用户的体验。

步骤404，弹出待弹出浮层，以使待弹出浮层呈现在截图层之上。

在本实施例中，基于步骤402创建的截图层，显示窗口可以显示该截图层。上述电子设备在基于获得的CSS信息固定网页之后，可以控制上述待弹出浮层弹出并呈现在截图层之上。在显示窗口中显示弹出的浮层时，用户可以对浮层进行信息输入、页面滚动等操作，而显示窗口显示的、位于浮层之下的网页内容不会发生变化。需要说明的是，上述电子设备在利用CSS信息固定网页时，不会固定浮层，用户可以通过手指或鼠标等对浮层进行滑动。

步骤405，响应于接收到关闭浮层的指令，移除CSS信息。

在本实施例中，基于步骤404弹出的浮层，用户可以通过终端设备向上述电子设备发送关闭浮层的指令。当上述终端设备接收到关闭浮层的指令时，其可以移除上述CSS信息，从而解除网页的固定以使网页可滚动。

步骤406，将网页滚动到第一位置信息所指示的位置处。

在本实施例中，在确定出CSS信息已移除，上述电子设备可以控制网页滚动到第一位置信息所指示的位置处，以使该网页中的显示部分保持不变。需要说明的是，此时上述截图层还固定在网页所在的图层之上，并未发生改变。例如，上述电子设备可以预先设置JavaScript脚本，在确定CSS信息移除后可以调用该avaScript脚本将网页滚动到第一位置信息所指示的位置处。

步骤407，移除截图层，隐藏或移除所弹出的浮层。

在本实施例中，在上述电子设备控制网页滚动到第一位置信息所指示的位置之后，其可以移除固定在网页上层的截图层。此时，显示窗口显示的网页的显示内容与截图层中的内容相同，因此用户感知不到截图层被删除。而后，上述电子设备可以执行接收到的关闭浮层的指令，隐藏或删除所弹出的浮层。由此可见，从上述电子设备检测到待弹出浮层到浮层关闭，显示窗口显示的内容不变，用户不会感知到网页的变化。

本申请的上述实施例提供的网页显示的方法，利用CSS信息可以实现固定网页的同时不影响浮层的滚动，利用固定在网页上方的截图层可以避免用户感知到因固定网页引起的网页滑动，从而提升了用户体验。

进一步参考图5，作为对上述各图所示方法的实现，本申请提供了一网页显示的装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图5所示，本实施例的网页显示的装置500包括：第一位置信息获取单元501、截图层创建单元502和浮层弹出单元503。其中，第一位置信息获取单元501配置用于响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在网页中的第一位置信息；截图层创建单元502配置用于基于第一位置信息，创建显示部分的截图层，以使截图层覆盖显示部分；浮层弹出单元503配置用于弹出待弹出浮层，以使待弹出浮层呈现在截图层之上。

在本实施例的一些可选的实现方式中，网页显示的装置500还包括：CSS信息获取单元，配置用于对网页的HTML标签进行解析，获取预设的层叠式样式表CSS信息以固定该网页，其中，CSS信息携带有禁止该网页滚动的属性信息。

在本实施例的一些可选的实现方式中，网页显示的装置500还包括：浮层关闭单元，配置用于响应于接收到关闭浮层的指令，基于第一位置信息设置显示窗口显示网页的显示部分，移除截图层，关闭所弹出的浮层。

在本实施例的一些可选的实现方式中，截图层创建单元进一步配置用于：创建指定尺寸的画布Canvas，其中，指定尺寸为显示窗口的尺寸；利用网页的HTML代码，生成矢量图形；基于第一位置信息，将矢量图形绘制到画布Canvas以生成截图层；将截图层固定在网页所在的图层之上，以使显示窗口显示截图层。

在本实施例的一些可选的实现方式中，浮层关闭单元进一步配置用于：响应于接收到关闭浮层的指令，移除CSS信息；将网页滚动到第一位置信息所指示的位置处；移除截图层，隐藏或移除所弹出的浮层。

下面参考图6，其示出了适于用来实现本申请实施例的电子设备的计算机系统600的结构示意图。图6示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有系统600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本申请的操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括第一位置信息获取单元、截图层创建单元、浮层弹出单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一位置信息获取单元还可以被描述为“响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在网页中的第一位置信息的单元”。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的装置中所包含的；也可以是单独存在，而未装配入该装置中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该装置执行时，使得该装置：响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在网页中的第一位置信息；基于第一位置信息，创建显示部分的截图层，以使截图层覆盖显示部分；弹出待弹出浮层，以使待弹出浮层呈现在截图层之上。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (12)

1.一种网页显示的方法，包括：

响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在所述网页中的第一位置信息；

基于所述第一位置信息，创建所述显示部分的截图层，以使所述截图层覆盖所述显示部分；

弹出所述待弹出浮层，以使所述待弹出浮层呈现在所述截图层之上。

2.根据权利要求1所述的方法，其中，在弹出所述待弹出浮层之前，所述方法还包括：

对所述网页的HTML标签进行解析，获取预设的层叠式样式表CSS信息以固定该网页，其中，所述CSS信息携带有禁止该网页滚动的属性信息。

3.根据权利要求2所述的方法，其中，所述方法还包括：

响应于接收到关闭浮层的指令，基于所述第一位置信息设置所述显示窗口显示所述网页的显示部分，移除所述截图层，关闭所弹出的浮层。

4.根据权利要求1所述的方法，其中，所述基于所述第一位置信息，创建所述显示部分的截图层，以使所述截图层覆盖所述显示部分，包括：

创建指定尺寸的画布Canvas，其中，所述指定尺寸为所述显示窗口的尺寸；

利用所述网页的HTML代码，生成矢量图形；

基于所述第一位置信息，将所述矢量图形绘制到所述画布Canvas以生成所述截图层；

将所述截图层固定在所述网页所在的图层之上，以使所述显示窗口显示所述截图层。

5.根据权利要求3所述的方法，其中，所述响应于接收到关闭浮层的指令，基于所述第一位置信息设置所述显示窗口显示所述网页的显示部分，移除所述截图层，关闭所弹出的浮层，包括：

响应于接收到关闭所述浮层的指令，移除所述CSS信息；

将所述网页滚动到所述第一位置信息所指示的位置处；

移除所述截图层，隐藏或移除所弹出的浮层。

6.一种网页显示的装置，包括：

第一位置信息获取单元，配置用于响应于检测到待弹出浮层，获取网页中呈现在显示窗口的显示部分在所述网页中的第一位置信息；

截图层创建单元，配置用于基于所述第一位置信息，创建所述显示部分的截图层，以使所述截图层覆盖所述显示部分；

浮层弹出单元，配置用于弹出所述待弹出浮层，以使所述待弹出浮层呈现在所述截图层之上。

7.根据权利要求6所述的装置，其中，所述装置还包括：

CSS信息获取单元，配置用于对所述网页的HTML标签进行解析，获取预设的层叠式样式表CSS信息以固定该网页，其中，所述CSS信息携带有禁止该网页滚动的属性信息。

8.根据权利要求7所述的装置，其中，所述装置还包括：

浮层关闭单元，配置用于响应于接收到关闭浮层的指令，基于所述第一位置信息设置所述显示窗口显示所述网页的显示部分，移除所述截图层，关闭所弹出的浮层。

9.根据权利要求6所述的装置，其中，所述截图层创建单元进一步配置用于：

创建指定尺寸的画布Canvas，其中，所述指定尺寸为所述显示窗口的尺寸；

利用所述网页的HTML代码，生成矢量图形；

基于所述第一位置信息，将所述矢量图形绘制到所述画布Canvas以生成所述截图层；

将所述截图层固定在所述网页所在的图层之上，以使所述显示窗口显示所述截图层。

10.根据权利要求8所述的装置，其中，所述浮层关闭单元进一步配置用于：

响应于接收到关闭所述浮层的指令，移除所述CSS信息；

将所述网页滚动到所述第一位置信息所指示的位置处；

移除所述截图层，隐藏或移除所弹出的浮层。

11.一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。

12.一种计算机可读介质，其上存储有计算机程序，其中，所述程序被处理器执行时实现如权利要求1-5中任一所述的方法。