CN111813468A - 屏蔽网页操作的方法、装置及电子设备 - Google Patents

Abstract

本申请公开了三种屏蔽网页操作的方法、装置及电子设备。其中，一种屏蔽网页操作的方法为：获取待屏蔽区域的显示内容；根据待屏蔽区域的显示内容，生成图片化的显示内容；将待屏蔽区域的显示内容替换为图片化的显示内容。采用该方法，即使在浏览器工具中也无法看到图片化的待屏蔽区域的本身内容，因而能够达到彻底屏蔽用户操作的效果，并实现无缝浏览。

Description

屏蔽网页操作的方法、装置及电子设备

本申请是申请日为2015年04月03日，申请号为201510158339.9，发明名称为“屏蔽网页操作的方法、装置及电子设备”的中国专利申请的分案申请。

技术领域

本申请涉及互联网技术领域，具体涉及屏蔽网页操作的方法和装置。本申请同时涉及电子设备。

背景技术

随着互联网技术的不断发展，基于互联网的应用也日益增多，例如：网络金融、网络购物、社交媒体、电子商务、即时通讯等，各种应用为用户提供了丰富多彩的服务。随着互联网应用的日益增多，网页上的信息越来越丰富，有越来越多的网页信息需要得到保护。同时，随着网站功能的丰富，更有因用户误操作引起的各种问题，例如：通过网页操作改变源数据等问题。因此，很多页面需要限制用户对特定的待屏蔽区域进行鼠标点击、拖选等操作，而只保留对用户的只读浏览功能。

目前，解决上述需求的常用方法为：在待屏蔽区域对应的网页元素位置，覆盖一个与待屏蔽区域尺寸相同且透明的网页元素。该网页元素的作用相当于一个遮罩层，用于遮盖待屏蔽区域。通过设置该遮罩层，使得用户无法操作遮罩层下面的网页内容，从而达到屏蔽用户对待屏蔽区域进行鼠标点击、拖选等操作的效果。然而，该方法具有如下缺点：

1)对待屏蔽区域进行屏蔽用户操作的处理时，必须首先计算待屏蔽区域的尺寸，然后才能将与待屏蔽区域尺寸相同且透明的网页元素覆盖在待屏蔽区域上方。由此可见，计算待屏蔽区域的尺寸的步骤将降低页面显示速度。

2)只有在加载完成待屏蔽区域后，才能够计算待屏蔽区域的尺寸，因而在真正屏蔽用户对待屏蔽区域的操作生效之前，用户仍可以操作待屏蔽区域。

3)对浏览器熟悉度较高的用户，能够通过浏览器自带的工具，将遮罩层隐藏或移除，从而解除了对待屏蔽区域的用户操作屏蔽处理，因而实际的屏蔽效果较差。

综上所述，现有技术存在必须首先计算待屏蔽网页区域的尺寸，才能屏蔽用户对网页中待屏蔽区域进行操作的问题。

发明内容

本申请提供屏蔽网页操作的方法和装置，以解决现有技术存在必须首先计算待屏蔽网页区域的尺寸，才能屏蔽用户对网页中待屏蔽区域进行操作的问题。本申请另外提供电子设备。

本申请提供一种屏蔽网页操作的方法，包括：

将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片；

存储所述网页文件。

可选的，所述网页文件中包括所述待屏蔽区域的父级网页元素；所述将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片，采用如下方式：

将所述父级网页元素对应的所述光标样式设置为所述透明图片。

可选的，在所述将所述父级网页元素对应的所述光标样式设置为所述透明图片之前，还包括：

获取所述待屏蔽区域的父级网页元素。

可选的，所述将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片，采用如下方式：

将所述待屏蔽区域包括的各个网页元素分别对应的所述光标样式设置为所述透明图片。

可选的，在所述将所述待屏蔽区域包括的各个网页元素分别对应的所述光标样式设置为所述透明图片之前，还包括：

获取所述待屏蔽区域包括的各个网页元素。

可选的，所述网页元素为可操作的网页元素。

可选的，所述将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片，采用如下方式：

通过层叠样式的鼠标光标属性，将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片。

相应的，本申请还提供一种屏蔽网页操作的装置，包括：

设置单元，用于将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片；

存储单元，用于存储所述网页文件。

可选的，还包括：

第一获取单元，用于获取所述待屏蔽区域包括的各个网页元素。

可选的，还包括：

第二获取单元，用于获取所述待屏蔽区域的父级网页元素。

此外，本申请还提供一种电子设备，所述电子设备包括：

显示器；

处理器；以及

存储器，所述存储器被配置成存储包括待屏蔽区域的网页文件，所述待屏蔽区域对应的光标样式被设置为预设尺寸的透明图片；所述网页文件被浏览器打开时，在所述显示器显示所述网页文件，当鼠标光标移动到所述待屏蔽区域时，所述鼠标光标不可见。

本申请还提供又一种屏蔽网页操作的方法，包括：

监听预定的鼠标事件；

当所述预定的鼠标事件表明鼠标光标位于待屏蔽区域内，则在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方。

可选的，所述预定的鼠标事件为鼠标移动事件；

当监听到所述鼠标移动事件时，在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方之前，还包括：

获取所述鼠标光标的当前位置；

判断所述鼠标光标的当前位置是否位于所述待屏蔽区域内；

若上述判断结果为是，则判定所述鼠标光标位于所述待屏蔽区域内。

可选的，所述判断所述鼠标光标的当前位置是否位于所述待屏蔽区域内，包括：

获取所述待屏蔽区域在浏览器可视区域中的当前位置；

判断所述鼠标光标的当前位置是否位于所述待屏蔽区域在浏览器可视区域中的当前位置。

可选的，所述预定的鼠标事件为鼠标光标移动到所述待屏蔽区域上事件。

可选的，所述网页元素包括图片元素。

可选的，所述网页元素预先包括在网页文件中。

相应的，本申请还提供又一种屏蔽网页操作的装置，包括：

监听单元，用于监听预定的鼠标事件；

显示单元，用于当所述预定的鼠标事件表明鼠标光标位于待屏蔽区域内，则在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方。

可选的，所述预定的鼠标事件为鼠标移动事件；所述装置还包括：

判断单元，用于判断所述鼠标光标是否位于所述待屏蔽区域内。

可选的，所述判断单元包括：

获取子单元，用于获取所述鼠标光标的当前位置；

判断子单元，用于判断所述鼠标光标的当前位置是否位于所述待屏蔽区域内；

判定子单元，用于若上述判断结果为是，则判定所述鼠标光标位于所述待屏蔽区域内。

可选的，所述判断子单元包括：

第一获取子单元，用于获取所述待屏蔽区域在浏览器可视区域中的当前位置；

第一判断子单元，用于判断所述鼠标光标的当前位置是否位于所述待屏蔽区域在浏览器可视区域中的当前位置。

此外，本申请还提供又一种电子设备，其特征在于，所述电子设备包括：

显示器；

处理器；以及

存储器，所述存储器被配置成存储包括待屏蔽区域的网页文件；所述网页文件被浏览器打开时，监听预定的鼠标事件；当监听到所述预定的鼠标事件时，若鼠标光标位于待屏蔽区域中，则在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方。

本申请还提供再一种屏蔽网页操作的方法，包括：

获取待屏蔽区域的显示内容；

根据所述待屏蔽区域的显示内容，生成图片化的显示内容；

将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

可选的，当加载网页时，包括：

启动监听页面滚动事件；

当监听到所述页面滚动事件时，判断所述待屏蔽区域是否位于浏览器可视区域内；

若上述判断结果为是，则执行所述屏蔽网页操作的方法。

可选的，在加载网页文件时，执行所述屏蔽网页操作的方法。

可选的，所述将所述待屏蔽区域的显示内容替换为所述图片化的显示内容，包括：

删除所述待屏蔽区域的显示内容；

将所述图片化的显示内容插入到所述待屏蔽区域在网页文件中的原有位置。

可选的，在所述将所述图片化的显示内容插入到所述待屏蔽区域在网页文件中的原有位置之前，还包括：

获取所述待屏蔽区域在所述网页文件中的原有位置。

可选的，在所述生成图片化的显示内容之后，还包括：

存储所述图片化的显示内容。

相应的，本申请还提供再一种屏蔽网页操作的装置，包括：

获取单元，用于获取待屏蔽区域的显示内容；

生成单元，用于根据所述待屏蔽区域的显示内容，生成图片化的显示内容；

替换单元，用于将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

可选的，还包括：

监听单元，用于启动监听页面滚动事件；

判断单元，用于当监听到所述页面滚动事件时，判断所述待屏蔽区域是否位于浏览器可视区域内；

判定单元，用于若上述判断结果为是，则执行所述屏蔽网页操作的方法。

可选的，所述替换单元包括：

删除子单元，用于删除所述待屏蔽区域的显示内容；

插入子单元，用于将所述图片化的显示内容插入到所述待屏蔽区域在网页文件中的原有位置。

可选的，所述替换单元还包括：

获取子单元，用于获取所述待屏蔽区域在所述网页文件中的原有位置。

可选的，还包括：

存储单元，用于存储所述图片化的显示内容。

此外，本申请还提供再一种电子设备，所述电子设备包括：

显示器；

处理器；以及

存储器，所述存储器被配置成存储包括待屏蔽区域的网页文件；所述网页文件被浏览器打开时，获取待屏蔽区域的显示内容；根据所述待屏蔽区域的显示内容，生成图片化的显示内容；将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

与现有技术相比，本申请具有以下优点:

本申请提供的屏蔽网页操作的方法、装置及电子设备，通过根据待屏蔽区域的显示内容，生成图片化的显示内容，并将所述待屏蔽区域的显示内容替换为所述图片化的显示内容，能够无需计算待屏蔽区域的尺寸，即可对网页中待屏蔽区域进行鼠标操作的屏蔽处理，从而达到提高网页显示速度的效果。

附图说明

图1是本申请的屏蔽网页操作的方法实施例的流程图；

图2是本申请的屏蔽网页操作的装置实施例的示意图；

图3是本申请的屏蔽网页操作的方法实施例的又一流程图；

图4是本申请的屏蔽网页操作的装置实施例的又一示意图；

图5是本申请的屏蔽网页操作的方法实施例的再一流程图；

图6是本申请的屏蔽网页操作的装置实施例的再一示意图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。

在本申请中，提供了屏蔽网页操作的方法、装置及电子设备。在下面的实施例中逐一进行详细说明。

本申请实施例提供一种屏蔽网页操作的方法，其设计思想为：当鼠标光标移动到待屏蔽区域时，隐藏处于待屏蔽区域的鼠标光标。由于光标在待屏蔽区域内不可见，因而能够减少用户操作待屏蔽区域的大部分可能性。

请参考图1，其为本申请的屏蔽网页操作的方法实施例的流程图。所述方法包括如下步骤：

步骤S101：将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片。

本申请实施例所述的待屏蔽区域位于网页中，待屏蔽区域至少包括一个网页元素。按照用户对网页元素的操作性质，待屏蔽区域包括的网页元素分为不可操作的网页元素和可操作的网页元素，例如：图像、标签属于不可操作的网页元素，文本框、下拉框、选项按钮、提交按钮属于可操作的网页元素。从本质上讲，本申请实施例提供的方法真正需要屏蔽用户操作的对象为可操作的网页元素。

本申请实施例所述的透明图片实质为一个空白图片，将其作为待屏蔽区域对应的光标样式，并使其透明地显示在待屏蔽区域的上方，使得鼠标光标在待屏蔽区域内不可见，从而达到隐藏鼠标光标、减少大部分操作可能性的效果。

要实施本申请实施例提供的方法，可以采用两种不同的方式实现步骤S101，将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片。两种方式具体为：1)逐个将待屏蔽区域包括的各个网页元素分别对应的光标样式设置为预设尺寸的透明图片；2)将待屏蔽区域的父级网页元素对应的光标样式设置为预设尺寸的透明图片。上述两种方式，都只是具体实施方式的变更，都不偏离本申请的核心，因此都在本申请的保护范围之内。下面分别对上述两种具体实施方式进行说明。

方式一、逐个将待屏蔽区域包括的各个网页元素分别对应的光标样式设置为预设尺寸的透明图片

采用方式一实施本申请实施例提供的方法，首先需要获取所述待屏蔽区域包括的各个网页元素。在获取各个网页元素后，逐个将网页元素对应的光标样式设置为预设尺寸的透明图片。由于网页中真正需要屏蔽用户操作的对象为可操作的网页元素，为了减少开发人员的编码量，在本实施例中，仅将待屏蔽区域包括的各个可操作的网页元素分别对应的光标样式设置为预设尺寸的透明图片。

CSS(层叠样式表)技术提供为网页元素自定义光标样式的功能。具体地，通过cursor属性规定要显示的光标的类型(形状)，该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。CSS里的cursor属性能接受很多种光标样式属性，如表一所示：

鼠标光标属性值	描述
		hand	手
crosshair	交叉十字
		text	文本选择符号
wait	Windows的沙漏形状
		default	默认的鼠标形状
help	带问号的鼠标
		e-resize	向东的箭头
ne-resize	指向东北方的箭头
		n-resize	向北的箭头
nw-resize	指向西北方的箭头
		w-resize	向西的箭头
sw-resize	指向西南方的箭头
		s-resize	向南的箭头
se-resize	指向东南方的箭头

表一、cursor属性值表

表一中列举了各种常用的光标样式，分别应用于各种具体的需求场景。除了表一中列举的光标样式属性值，cursor属性还提供了url()表达式，用于根据指定的特定图片自定义光标图案样式。

在本实施例中，采用CSS技术提供的cursor属性中的url()表达式，将待屏蔽区域包括的各个网页元素对应的光标样式设置为预设尺寸的透明图片。自定义光标样式的CSS代码的示例语句为：custom_cursor{cursor:url('some-cursor.ico'),default；}，其中some-cursor.ico为指定的特定图片。在本实施例中，指定的特定图片为预设尺寸的透明图片。例如：网页元素为文本框，则通过代码<textarea class＝"custom_cursor">文本内容</textarea>，或者<textarea style＝"cursor:url('some-cursor.ico')">文本内容</textarea>，将该网页元素对应的光标样式设置为自定义的光标样式。

由于待屏蔽区域包括的各个网页元素对应的光标样式均被设置为预设尺寸的透明图片，因此当鼠标移动到各个网页元素区域内时，鼠标光标将显示为预设尺寸的透明图片，而非默认的鼠标光标样式，使得鼠标光标在待屏蔽区域包括的各个网页元素范围内均不可见，从而达到减少用户对待屏蔽区域的大部分操作可能性的效果。

在实际应用中，可以自定义透明图片的尺寸。需要注意的是，为避免透明图片覆盖到待屏蔽区域以外的区域，优选地，将透明图片的尺寸设置为1像素大小，以精确表示当前鼠标位置。将透明图片的尺寸设置为1像素大小的原因在于：当鼠标移动到待屏蔽区域的边界时，如果透明图片的尺寸过大，则透明图片将覆盖到待屏蔽区域以外的区域。

方式二、将待屏蔽区域的父级网页元素对应的光标样式设置为预设尺寸的透明图

采用方式一，网页开发人员需要针对待屏蔽区域包括的各个网页元素，逐个将其对应的光标样式分别设置为预设尺寸的透明图片。可见，采用方式一实现步骤S101，存在网页开发人员工作量大的问题。进一步地，大量的人工编码将增加网页出现错误的可能性。

为了减少人工工作量，在实际应用中，优先选用将待屏蔽区域的父级网页元素对应的光标样式设置为预设尺寸的透明图片的方式。为此，首先需要获取待屏蔽区域的父级网页元素。本申请实施例所述的父级网页元素可以为段落、表格等能够包括待屏蔽区域的网页元素。在本实施例中，通过JavaScript选择器能够获取待屏蔽区域的父级网页元素。

在获取了待屏蔽区域的父级网页元素后，只需要将所述父级网页元素对应的所述光标样式设置为所述透明图片，即可实现将整个待屏蔽区域对应的光标样式设置为预设尺寸的透明图片。CSS具有样式继承特性，即子级网页元素能够自动继承其所属的父级网页元素的样式属性。在设置完待屏蔽区域的父级网页元素对应的光标样式后，待屏蔽区域包括的每一个网页元素所对应的光标样式将自动被设置为待屏蔽区域的父级网页元素的光标样式，从而达到隐藏处于待屏蔽区域的鼠标光标的效果。相对于方式一而言，采用方式二实现本申请实施例提供的方法，能够达到人工编码量最少的效果。

步骤S103：存储所述网页文件。

网页开发人员通过步骤S101，将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片后，就可以执行步骤S103，保存所做的鼠标光标样式的设置。当客户端浏览器打开该网页文件时，隐藏鼠标光标的CSS规则被解析并生效，当用户将鼠标光标移动到待屏蔽区域内时，鼠标光标样式变为透明显示在待屏蔽区域的上方的空白图片，即：鼠标光标在待屏蔽区域内不可见，从而达到隐藏鼠标光标、减少大部分操作可能性的效果。

在上述的实施例中，提供了一种屏蔽网页操作的方法，与之相对应的，本申请还提供一种屏蔽网页操作的装置。该装置是与上述方法的实施例相对应。

请参看图2，其为本申请的屏蔽网页操作的装置实施例的示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。

本实施例的一种屏蔽网页操作的装置，包括：

设置单元201，用于将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片；

存储单元203，用于存储所述网页文件。

可选的，所述装置还包括：

第一获取单元，用于获取所述待屏蔽区域包括的各个可操作的网页元素。

第二获取单元，用于获取所述待屏蔽区域的父级网页元素。

本申请实施例还提供一种电子设备，该电子设备包括：

显示器；

处理器；以及

存储器，所述存储器被配置成存储包括待屏蔽区域的网页文件，所述待屏蔽区域对应的光标样式被设置为预设尺寸的透明图片；所述网页文件被浏览器打开时，在所述显示器显示所述网页文件，当鼠标光标移动到所述待屏蔽区域时，所述鼠标光标不可见。

本申请提供的一种屏蔽网页操作的方法、装置及电子设备，通过将网页文件中待屏蔽区域对应的光标样式设置为预设尺寸的透明图片，并存储所述网页文件，能够无需计算待屏蔽区域的尺寸，即可对网页中待屏蔽区域进行鼠标操作的屏蔽处理，从而达到提高网页显示速度的效果。

与上述的屏蔽网页操作的方法相对应(以下简称：第一种方法)，本申请还提供又一种屏蔽网页操作的方法(以下简称：第二种方法)。请参考图3，其为本申请提供的一种屏蔽网页操作的方法的实施例的又一流程图，本实施例与第一实施例内容相同的部分不再赘述，请参见实施例一中的相应部分。

本申请实施例提供又一种屏蔽网页操作的方法(即：第二种方法)，其设计思想为：通过一个能够跟随鼠标光标移动的网页元素，使鼠标的所有操作都作用在该网页元素上，从而达到屏蔽用户操作的效果。该方法与第一种方法的区别在于：第一种方法隐藏了鼠标光标，而第二种方法并不隐藏鼠标光标，而是使得鼠标的所有操作都作用在一个预设的网页元素上，该网页元素的作用为一个遮罩层。由于鼠标的所有操作都作用在遮罩层上，因而能够减少操作待屏蔽区域的大部分可能性。

本申请实施例提供的又一种屏蔽网页操作的方法包括如下步骤：

步骤S301：监听预定的鼠标事件。

本申请实施例所述的预定的鼠标事件，既可以为鼠标移动事件，还可以为鼠标光标移动到待屏蔽区域上事件。其中，鼠标移动事件是在用户移动鼠标光标时触发的，而鼠标光标移动到待屏蔽区域上事件只是当用户将鼠标光标移动到待屏蔽区域上时才被触发。

针对鼠标移动事件，在实际应用中，可以通过JavaScript脚本语言为网页设置监听鼠标移动事件，即：onMouseMove事件，onMouseMove事件为鼠标移动时触发的事件。

针对鼠标光标移动到待屏蔽区域上事件，在实际应用中，可以通过JavaScript脚本语言为网页设置监听鼠标光标移动到所述待屏蔽区域上事件，即：onMouseOver事件，onMouseOver事件为当鼠标移动到某对象范围(在本申请实施例中为待屏蔽区域)的上方时触发的事件。相应的，通过设置onMouseOut事件(即：当鼠标离开某对象范围时触发的事件)，能够在监听到鼠标离开待屏蔽区域时恢复默认的鼠标光标。

采用JavaScript脚本语言，支持onMouseOver事件的HTML标签包括<a>、<address>、<area>、<b>、<bdo>、<big>、<blockquote>、<body>、<button>、<caption>、<cite>、<code>、<dd>、<dfn>、<div>、<dl>、<dt>、<em>、<fieldset>、<form>、<h1>to<h6>、<hr>、<i>、<img>、<input>、<kbd>、<label>、<legend>、<li>、<map>、<ol>、<p>、<pre>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<table>、<tbody>、<td>、<textarea>、<tfoot>、<th>、<thead>、<tr>、<tt>、<ul>、<var>。

在实际应用中，既可以为待屏蔽区域的父级网页元素设置onMouseOver事件，也可以单独为待屏蔽区域包括的每一个网页元素分别设置onMouseOver事件。网页元素应该为上述支持onMouseOver事件的HTML标签所代表的各种常见的网页元素。

为了减少人工工作量，优选采用为待屏蔽区域的父级网页元素设置onMouseOver事件的方法。要为待屏蔽区域的父级网页元素设置onMouseOver事件，首先需要获取包括待屏蔽区域的父级网页元素。本申请实施例所述的父级网页元素可以为段落、表格等能够包括待屏蔽区域的网页元素。在本实施例中，通过JavaScript选择器能够获取待屏蔽区域的父级网页元素。在获取了待屏蔽区域的父级网页元素后，只需要为父级网页元素设置对应的onMouseOver事件即可。由于父级网页元素包括待屏蔽区域，因此父级网页元素的onMouseOver事件对待屏蔽区域自动生效。

步骤S303：当所述预定的鼠标事件表明鼠标光标位于待屏蔽区域内，则在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方。

当本申请实施例提供的方法的监听对象为鼠标光标移动到待屏蔽区域上事件时，如果监听的事件被触发，则表明鼠标光标位于待屏蔽区域内。在该事件被触发后，可以立即执行在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方的步骤。由此，当鼠标处于待屏蔽区域内时，鼠标的所有操作都将作用在预设的网页元素上，从而能够减少操作待屏蔽区域的大部分可能性。

当本申请实施例提供的方法的监听对象为鼠标移动事件时，如果鼠标移动事件被触发，则首先需要判断鼠标光标是否位于待屏蔽区域内。为此，当监听到所述鼠标移动事件时，在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方之前，还包括：

步骤S401：获取所述鼠标光标的当前位置。

步骤S403：判断所述鼠标光标的当前位置是否位于所述待屏蔽区域内。

步骤S405：若上述判断结果为是，则判定所述鼠标光标位于所述待屏蔽区域内。

为了判断鼠标光标是否位于待屏蔽区域内，首先需要获取鼠标光标的当前位置。在获取鼠标光标的当前位置后，就可以根据鼠标光标的当前位置和待屏蔽区域的位置，判断鼠标光标的当前位置是否位于待屏蔽区域内。如果判断结果为是，则判定鼠标光标位于待屏蔽区域内。

在本实施例中，判断鼠标光标的当前位置是否位于待屏蔽区域内，包括：

步骤S4031：获取所述待屏蔽区域在浏览器可视区域中的当前位置。

步骤S4033：判断所述鼠标光标的当前位置是否位于所述待屏蔽区域在浏览器可视区域中的当前位置。

本申请实施例所述的待屏蔽区域具有两个位置坐标值，分别为：1)待屏蔽区域在整个网页中的绝对位置坐标值；2)待屏蔽区域在浏览器可视区域中的当前位置坐标值。在判断鼠标光标的当前位置是否位于待屏蔽区域内时，待屏蔽区域的位置是指其在浏览器可视区域中的当前位置坐标值。通过步骤S4031和步骤S4033，能够判断鼠标光标的当前位置是否位于待屏蔽区域内。

当预定的鼠标事件为鼠标移动事件时，本申请实施例提供的方法的具体过程为：当鼠标在网页上移动时，鼠标移动事件被触发，事件处理程序实时判断鼠标光标的当前位置是否位于待屏蔽区域中，若判断结果为是，则在鼠标光标的当前位置处插入一个能够覆盖在待屏蔽区域上的、且透明显示的预设尺寸的网页元素。因此，只要当鼠标光标移动到待屏蔽区域，就能够使得鼠标的动作仅作用在透明显示的预设尺寸的网页元素上，而非待屏蔽区域本身，从而减少操作待屏蔽区域的大部分可能性。

在本实施例中，所述网页元素采用图片，所述网页元素预先包括在网页文件中。

在上述的实施例中，提供了一种屏蔽网页操作的方法，与之相对应的，本申请还提供一种屏蔽网页操作的装置。该装置是与上述方法的实施例相对应。

请参看图4，其为本申请的屏蔽网页操作的装置实施例的又一示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。

本实施例的一种屏蔽网页操作的装置，包括：

监听单元401，用于监听预定的鼠标事件；

显示单元403，用于当所述预定的鼠标事件表明鼠标光标位于待屏蔽区域内，则在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方。

可选的，所述预定的鼠标事件为鼠标移动事件；所述装置还包括：

判断单元405，用于判断所述鼠标光标是否位于所述待屏蔽区域内。

可选的，所述判断单元405包括：

获取子单元，用于获取所述鼠标光标的当前位置；

判断子单元，用于判断所述鼠标光标的当前位置是否位于所述待屏蔽区域内；

判定子单元，用于若上述判断结果为是，则判定所述鼠标光标位于所述待屏蔽区域内。

可选的，所述判断子单元包括：

第一获取子单元，用于获取所述待屏蔽区域在浏览器可视区域中的当前位置；

第一判断子单元，用于判断所述鼠标光标的当前位置是否位于所述待屏蔽区域在浏览器可视区域中的当前位置。

本申请实施例还提供一种电子设备，该电子设备包括：

显示器；

处理器；以及

存储器，所述存储器被配置成存储包括待屏蔽区域的网页文件；所述网页文件被浏览器打开时，当鼠标光标移动到待屏蔽区域上时，将预设尺寸的网页元素透明显示在所述鼠标光标的当前位置处；所述网页元素覆盖在所述待屏蔽区域上方。

本申请提供的又一种屏蔽网页操作的方法、装置及电子设备，通过监听预定的鼠标事件，当鼠标光标移动到待屏蔽区域上时，在所述鼠标光标的当前位置处，将预设尺寸的网页元素透明显示在所述待屏蔽区域上方，能够无需计算待屏蔽区域的尺寸，即可对网页中待屏蔽区域进行鼠标操作的屏蔽处理，从而达到提高网页显示速度的效果。

与上述的屏蔽网页操作的方法相对应，本申请还提供又一种屏蔽网页操作的方法(以下简称：第三种方法)。请参考图5，其为本申请提供的一种屏蔽网页操作的方法的实施例的再一流程图，本实施例与第一实施例和第二实施例内容相同的部分不再赘述，请参见实施例一、实施例二中的相应部分。

本申请实施例提供又一种屏蔽网页操作的方法(即：第三种方法)，其设计思想为：将待屏蔽区域转成为对应的图片截图，并用该图片截图替换原有的待屏蔽区域。采用第三种方法，即使在浏览器工具中也无法看到图片化的待屏蔽区域的本身内容，因而能够达到彻底屏蔽用户操作的效果，并实现无缝浏览。该方法与第一、第二种方法的区别在于：第一、第二种方法仅能够减少操作待屏蔽区域的大部分可能性，而第三种方法能够彻底消除所有操作待屏蔽区域的可能性。

本申请实施例提供的又一种屏蔽网页操作的方法包括如下步骤：

步骤S501：获取待屏蔽区域的显示内容。

要根据待屏蔽区域的显示内容，生成图片化的显示内容，首先需要获取待屏蔽区域对应的显示内容。本申请实施例所述的待屏蔽区域对应的显示内容包括内容本身及样式，其中样式包括字体、颜色等属性。

步骤S503：根据所述待屏蔽区域的显示内容，生成图片化的显示内容。

在获取待屏蔽区域对应的显示内容之后，将显示内容图片化，即：生成一个图片文件，该图片文件是显示内容的网页截图。在本实施例中，在所述生成图片化的显示内容之后，还包括：存储所述图片化的显示内容。

步骤S505：将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

在实际应用中，可以采用两种不同的方式实施本申请实施例提供的方法，具体为：1)在浏览器中打开包括所述待屏蔽区域的网页时，直接删除原有可操作的待屏蔽区域的显示内容，而将图片化的显示内容插入到待屏蔽区域在网页文件中的原有位置；2)在浏览器中打开包括所述待屏蔽区域的网页时，如果待屏蔽区域不处于浏览器的可视区域，则不对待屏蔽区域做任何处理；只有当待屏蔽区域处于浏览器的可视区域中，才执行将待屏蔽区域的显示内容替换为图片化的显示内容的处理步骤。上述两种方式，都只是具体实施方式的变更，都不偏离本申请的核心，因此都在本申请的保护范围之内。下面分别对上述两种具体实施方式进行说明。

方式一、在浏览器中打开包括所述待屏蔽区域的网页时，直接删除原有可操作的待屏蔽区域的显示内容，而将图片化的显示内容插入到待屏蔽区域在网页文件中的原有位置。

由于浏览器具有可视区域的范围限制，因此在可视区域中只能显示网页的部分内容，而对于超出浏览器可视区域的网页内容，通过鼠标滚动等方式逐步进行显示。采用方式一实施本申请提供的方法，无论待屏蔽区域是否处于浏览器当前可视区域范围，在网页对应的源文件中，均将待屏蔽区域的显示内容替换为图片化的显示内容。

采用方式一实施本申请提供的方法，在将图片化的显示内容插入到所述待屏蔽区域在网页文件中的原有位置之前，还包括：获取所述待屏蔽区域在所述网页文件中的原有位置。在获取待屏蔽区域的原有位置后，就可以将预先生成的图片化的显示内容插入到待屏蔽区域在网页文件中的原有位置。本申请实施例所述的待屏蔽区域在网页文件中的原有位置，是指待屏蔽区域在网页文件中的绝对位置。

方式二、在浏览器中打开包括所述待屏蔽区域的网页时，如果待屏蔽区域不处于浏览器的可视区域，则不对待屏蔽区域做任何处理；只有当待屏蔽区域处于浏览器的可视区域中，才执行步骤S501和步骤S503，根据所述显示内容，生成图片化的显示内容，然后再执行步骤S505，将待屏蔽区域的显示内容替换为图片化的显示内容。

采用方式二实施本申请提供的方法，在根据待屏蔽区域的显示内容，生成图片化的显示内容之前，在浏览器中打开包括所述待屏蔽区域的网页时，还包括如下步骤：

步骤S601：启动监听页面滚动事件。

在实际应用中，可以通过JavaScript脚本语言为网页设置监听页面滚动事件，即：window.onScroll事件，window.onScroll事件为页面发生滚动时触发的事件。当通过鼠标或键盘等方式使得页面发生滚动时，页面滚动事件被触发，进入相应的事件处理函数，执行步骤S602。

步骤S602：当监听到所述页面滚动事件时，判断所述待屏蔽区域是否位于浏览器可视区域内。

步骤S603：若上述判断结果为是，则执行所述屏蔽网页操作的方法。

采用方式二实施本申请提供的方法，只有在页面监听到页面滚动事件时，并判定待屏蔽区域位于浏览器可视区域内，才执行本申请实施例提供的方法，即：步骤S501、步骤S503和步骤S505，能够避免不必要的图片替换操作，从而达到提高网页显示速度的效果。

采用方式一实施本申请提供的方法，在浏览器中打开网页时，网页源文件中的待屏蔽区域在网页打开的初始时刻即被替换为网页截图，即将待屏蔽区域图片化。因此，即使在浏览器工具中也无法看到图片化的待屏蔽区域的本身内容。可见，相对于方式二，方式一能够达到彻底屏蔽用户操作的效果，并实现无缝浏览。然而，由于方式一是在浏览器中打开网页时，就用图片替换待屏蔽区域的显示内容，因此，如果采用方式一显示网页，当网页打开的初始时刻待屏蔽区域并不处于浏览器可见区域时，方式一的显示速度显然慢于方式二的显示速度。在实际应用中，根据具体需求选取上述两种方式之一实施本申请提供的方法。

在上述的实施例中，提供了一种屏蔽网页操作的方法，与之相对应的，本申请还提供一种屏蔽网页操作的装置。该装置是与上述方法的实施例相对应。

请参看图6，其为本申请的屏蔽网页操作的装置实施例的再一示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。

本实施例的一种屏蔽网页操作的装置，包括：

获取单元601，用于获取待屏蔽区域的显示内容；

生成单元603，用于根据所述待屏蔽区域的显示内容，生成图片化的显示内容；

替换单元605，用于将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

可选的，还包括：

监听单元，用于启动监听页面滚动事件；

判断单元，用于当监听到所述页面滚动事件时，判断所述待屏蔽区域是否位于浏览器可视区域内；

判定单元，用于若上述判断结果为是，则执行所述屏蔽网页操作的方法。

可选的，所述替换单元605包括：

删除子单元，用于删除所述待屏蔽区域的显示内容；

插入子单元，用于将所述图片化的显示内容插入到所述待屏蔽区域在网页文件中的原有位置。

可选的，所述替换单元605还包括：

获取子单元，用于获取所述待屏蔽区域在所述网页文件中的原有位置。

可选的，还包括：

存储单元，用于存储所述图片化的显示内容。

本申请实施例还提供一种电子设备，该电子设备包括：

显示器；

处理器；以及

存储器，所述存储器被配置成存储包括待屏蔽区域的网页文件；所述网页文件被浏览器打开时，获取待屏蔽区域的显示内容；根据待屏蔽区域的显示内容，生成图片化的显示内容；将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

本申请提供的再一种屏蔽网页操作的方法、装置及电子设备，通过根据待屏蔽区域的显示内容，生成图片化的显示内容，并将所述待屏蔽区域的显示内容替换为所述图片化的显示内容，能够无需计算待屏蔽区域的尺寸，即可对网页中待屏蔽区域进行鼠标操作的屏蔽处理，从而达到提高网页显示速度的效果。

本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

2、本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

Claims (12)

1.一种屏蔽网页操作的方法，其特征在于，包括：

获取待屏蔽区域的显示内容；

根据所述待屏蔽区域的显示内容，生成图片化的显示内容；

将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

2.根据权利要求1所述的屏蔽网页操作的方法，其特征在于，当加载网页时，包括：

启动监听页面滚动事件；

当监听到所述页面滚动事件时，判断所述待屏蔽区域是否位于浏览器可视区域内；

若上述判断结果为是，则执行所述屏蔽网页操作的方法。

3.根据权利要求1所述的屏蔽网页操作的方法，其特征在于，在加载网页文件时，执行所述屏蔽网页操作的方法。

4.根据权利要求1-3任意一项所述的屏蔽网页操作的方法，其特征在于，所述将所述待屏蔽区域的显示内容替换为所述图片化的显示内容，包括：

删除所述待屏蔽区域的显示内容；

将所述图片化的显示内容插入到所述待屏蔽区域在网页文件中的原有位置。

5.根据权利要求4所述的屏蔽网页操作的方法，其特征在于，在所述将所述图片化的显示内容插入到所述待屏蔽区域在网页文件中的原有位置之前，还包括：

获取所述待屏蔽区域在所述网页文件中的原有位置。

6.根据权利要求1-3任意一项所述的屏蔽网页操作的方法，其特征在于，在所述生成图片化的显示内容之后，还包括：

存储所述图片化的显示内容。

7.一种屏蔽网页操作的装置，其特征在于，包括：

获取单元，用于获取待屏蔽区域的显示内容；

生成单元，用于根据所述待屏蔽区域的显示内容，生成图片化的显示内容；

替换单元，用于将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

8.根据权利要求7所述的屏蔽网页操作的装置，其特征在于，还包括：

监听单元，用于启动监听页面滚动事件；

判断单元，用于当监听到所述页面滚动事件时，判断所述待屏蔽区域是否位于浏览器可视区域内；

判定单元，用于若上述判断结果为是，则执行所述屏蔽网页操作的方法。

9.根据权利要求7或8所述的屏蔽网页操作的装置，其特征在于，所述替换单元包括：

删除子单元，用于删除所述待屏蔽区域的显示内容；

插入子单元，用于将所述图片化的显示内容插入到所述待屏蔽区域在网页文件中的原有位置。

10.根据权利要求9所述的屏蔽网页操作的装置，其特征在于，所述替换单元还包括：

获取子单元，用于获取所述待屏蔽区域在所述网页文件中的原有位置。

11.根据权利要求7或8所述的屏蔽网页操作的装置，其特征在于，还包括：

存储单元，用于存储所述图片化的显示内容。

12.一种电子设备，其特征在于，所述电子设备包括：

显示器；

处理器；以及

存储器，所述存储器被配置成存储包括待屏蔽区域的网页文件；所述网页文件被浏览器打开时，获取待屏蔽区域的显示内容；根据所述待屏蔽区域的显示内容，生成图片化的显示内容；将所述待屏蔽区域的显示内容替换为所述图片化的显示内容。

Images