CN102999598B - 改变网页中的内容的显示状态的方法及设备 - Google Patents
改变网页中的内容的显示状态的方法及设备 Download PDFInfo
- Publication number
- CN102999598B CN102999598B CN201210466763.6A CN201210466763A CN102999598B CN 102999598 B CN102999598 B CN 102999598B CN 201210466763 A CN201210466763 A CN 201210466763A CN 102999598 B CN102999598 B CN 102999598B
- Authority
- CN
- China
- Prior art keywords
- interactive elements
- interactive
- webpage
- elements
- user
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 37
- 230000008859 change Effects 0.000 title claims abstract description 14
- 230000002452 interceptive effect Effects 0.000 claims abstract description 236
- 230000003993 interaction Effects 0.000 claims abstract description 9
- 230000008569 process Effects 0.000 claims description 10
- 230000015654 memory Effects 0.000 claims description 9
- 230000001960 triggered effect Effects 0.000 claims description 4
- 230000009286 beneficial effect Effects 0.000 abstract description 3
- 230000000694 effects Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 238000007430 reference method Methods 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 230000001143 conditioned effect Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000007689 inspection Methods 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- OROGSEYTTFOCAN-DNJOTXNNSA-N codeine Chemical compound C([C@H]1[C@H](N(CC[C@@]112)C)C3)=C[C@H](O)[C@@H]1OC1=C2C3=CC=C1OC OROGSEYTTFOCAN-DNJOTXNNSA-N 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- OROGSEYTTFOCAN-UHFFFAOYSA-N hydrocodone Natural products C1C(N(CCC234)C)C2C=CC(O)C3OC2=C4C1=CC=C2OC OROGSEYTTFOCAN-UHFFFAOYSA-N 0.000 description 1
- 230000001846 repelling effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000009897 systematic effect Effects 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种改变网页中的内容的显示状态的方法,包括:根据预设的查找条件查找网页中的第一交互元素,第一交互元素为要改变显示状态的网页内容;创建与第一交互元素相对应的第二交互元素,其中第二交互元素具有与第一交互元素相对应的外观和相同的用户交互方式;以及隐藏所查找到的第一交互元素,并在网页中与第一交互元素相对应的位置处显示第二交互元素。由此解决了目前第一交互元素的样式固定且无法调整,从而影响页面的整体美观的问题,取得了能够用第二交互元素取代第一交互元素显示在网页中,从而达到顺应网页的整体风格,改善网页的整体美观程度的有益效果。
Description
技术领域
本发明涉及通信领域,具体涉及一种改变网页中的内容的显示状态的方法及设备。
背景技术
目前,网页中通常会设置一些供用户选择的交互接口,以便与用户进行交互。例如,在html页面中,通常会使用默认的标签,如select(下拉式菜单)、radio(单选按钮)或checkbox(多选框),来实现与用户交互的目的。
采用默认标签虽然可以实现交互的目的,但是,随着网页风格的多样化,html页面中的色彩越来越绚烂,视觉效果也逐步提升。可是,默认标签的显示样式(例如颜色、形状)却都是固定的,无法根据网页的整体页面风格进行调整,因此,这些用于提供交互功能的标签以其固定样式出现在各式花花绿绿的网页中,导致网页的整体风格非常不协调,破坏了网页整体的美观程度,严重降低了用户的视觉享受。
发明内容
鉴于上述问题,提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的改变网页中的内容的显示状态的方法及相应的设备。
依据本发明的一个方面,提供了一种改变网页中的内容的显示状态的方法,包括:根据预设的查找条件查找网页中的第一交互元素,第一交互元素为要改变显示状态的网页内容;创建与第一交互元素相对应的第二交互元素,其中第二交互元素具有与第一交互元素相对应的外观和相同的用户交互方式;以及隐藏所查找到的第一交互元素,并在网页中与第一交互元素相对应的位置处显示第二交互元素。
依据本发明的另一方面,提供了一种改变网页中的内容的显示状态的设备,包括:查找单元,适于根据预设的查找条件查找网页中的第一交互元素,第一交互元素为要改变显示状态的网页内容;创建单元,适于创建与第一交互元素相对应的第二交互元素,其中第二交互元素具有与第一交互元素相对应的外观和相同的用户交互方式;显示单元,适于隐藏所查找到的第一交互元素,并在网页中与第一交互元素相对应的位置处显示第二交互元素。
根据本发明的改变网页中的内容的显示状态的方法及相应的设备,为网页中的第一交互元素创建对应的第二交互元素,该第二交互元素具有与第一交互元素相对应的外观和相同的交互方式,并在网页中与第一交互元素相对应的位置显示第二交互元素,由此解决了目前第一交互元素的样式固定且无法调整,从而影响页面的整体美观的问题,取得了能够用第二交互元素取代第一交互元素显示在网页中,从而达到顺应网页的整体风格,改善网页的整体美观程度的有益效果。
上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1示出了根据本发明一个实施例的改变网页中的内容的显示状态的方法流程图;
图2示出了根据本发明一个实施例的select标签对应的展现效果示意图;
图3示出了根据本发明一个实施例的radio标签对应的展现效果示意图;
图4示出了根据本发明一个实施例的checkbox标签对应的展现效果示意图;
图5a示出了本发明一个实施例中以第一交互元素进行展现的示意图;
图5b示出了本发明一个实施例中以第二交互元素进行展现的示意图;
图6根据本发明一个实施例的改变网页中的内容的显示状态的设备结构图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
图1示出了本发明实施例提供的改变网页中的内容的显示状态的方法流程图。如图1所示,该方法始于步骤S110,在步骤S110中,根据预设的查找条件查找网页中的第一交互元素,该第一交互元素为要改变显示状态的网页内容。
第一交互元素可以是html页面中用于实现交互功能的默认元素。通常,可以将第一交互元素按照类型分为:单选按钮元素(也叫radio元素)、多选框元素(也叫checkbox元素)和下拉菜单元素(也叫select元素)。
Select元素适用于需要以下拉式菜单的形式为用户提供若干个候选选项,然后由用户从若干个候选选项中选择一个选项的情况。例如,当用户选择居住地省份的时候,传统的实现方式是使用select元素来实现。具体代码如下:
该代码对应的展现效果如图2所示。通过这段代码可以使用户从多个地区中选择一个地区。
Radio元素适用于需要以单选按钮的形式为用户提供两个候选选项,然后由用户从中选择一个选项的情况。例如,用户选择性别的时候,传统的实现方式是使用radio元素实现,具体代码如下:
该代码对应的展现效果如图3所示。通过这段代码可以使用户从“男”、“女”两个选项中选择一个。
Checkbox元素适用于需要以多选框的形式为用户提供多个候选选项,然后由用户从中选择一个或多个选项的情况。例如,当用户进行多项选择的时候,传统的实现方式是使用checkbox元素实现,具体代码如下:
该代码对应的展现效果如图4所示。通过这段代码可以使用户从“网游”、“电影”、“音乐”等多个选项中选择一个或多个。
上述的预设的查找条件包括:第一交互元素的元素类型,和/或待查找的网页的页面范围。其中,第一交互元素的元素类型包括上述的单选按钮元素(radio)、多选框元素(checkbox)和下拉菜单元素(select)中的一个或多个。网页的页面范围包括整个网页范围或部分网页范围。
具体地,在步骤S110中,可以通过调用javascript的方法qtool.beautify(dom,type,option)来实现对符合预设条件的第一交互元素的查找。其中,第一个参数(dom参数)为必须参数,该参数是一个jquery对象,用于设定待查找的网页的页面范围,也就是设定需要对网页中哪些范围内出现的第一交互元素进行查找,例如,dom的值可以是整个网页范围,或者,也可以是部分网页范围。第二个参数(type参数)也为必须参数,该参数为string类型,用于指示第一交互元素的元素类型,该参数的值例如可以为“checkbox”(表示多选框元素)、“radio”(表示单选按钮元素)或“select”(表示下拉菜单元素)。第三个参数(option参数)为可选参数,该参数为array类型。举例来说,在qtool.beautify($(‘body’),’checkbox’)中,第一个参数值为body,表示是在网页的主体范围内进行查找;第二个参数值为checkbox,表示要查找的第一交互元素的类型为多选框元素;第三个参数值不是必须参数,值为空。所以,qtool.beautify($(‘body’),’checkbox’)语句就表示在网页的主体范围内查找多选框元素。
在通过上面的方式调用qtool.beautify方法并输入该方法中的参数值之后,为了避免错误,可以先对该方法中的dom参数和type参数的参数值进行检查。如果dom参数的值设定错误,可以默认在整个网页范围内进行查找。如果type参数的值设定错误或者为空则无法进行查找,需要重新输入。例如,可通过如下代码完成对dom参数和type参数的参数值的检查:
通过步骤S110,就查找到了所有符合预设查找条件的第一交互元素。可选地,在执行完步骤S110之后,还可以进一步获取并缓存第一交互元素的相关信息,以便为后续步骤做准备。其中,第一交互元素的相关信息包括元素值和/或元素属性。
下面详细介绍一下第一交互元素的元素值以及元素属性的具体内容:元素值表示第一交互元素可供用户选择的取值范围,元素属性表示元素值的具体取值。例如,以上述的select元素为例来说,元素值就是指相应的代码段中的value的值,包括“北京”、“上海”、“重庆”等,元素属性就是指用户具体选择的值,例如,图2中的用户选择了“北京”,所以该select元素的元素属性就是“北京”。以上述的radio元素为例来说,元素值就是指相应的代码段中的value的值,包括“male”和“female”。元素属性就是指用户具体选择的值。例如,图3中的用户选择了“女”,所以该radio标签的元素属性就是“female”。以上述的checkbox元素为例来说,元素值就是指相应的代码段中的value的值,包括“网游”、“电影”、“音乐”、“读书”和“户外”,元素属性就是指用户具体选择的值,例如,图4中的用户选择了“网游”,所以该checkbox元素的元素属性就是“网游”。其中,当用户尚未进行选择的时候,元素属性可以设置为默认值,当用户选择之后,相应地将默认值修改为用户选择的值。通俗的说,元素属性可以体现元素值处于选中状态或非选中状态。
通过上面的方式获取并缓存了第一交互元素的相关信息之后,执行步骤S120,在步骤S120中,创建与查找到的第一交互元素相对应的第二交互元素,其中第二交互元素具有与第一交互元素相对应的外观和相同的用户交互方式。
可选地,在创建与查找到的第一交互元素相对应的第二交互元素时,可以基于缓存的第一交互元素的相关信息来创建第二交互元素。其中,在创建与第一交互元素对应的第二交互元素时可以通过JS语言和级联样式表(CascadingStyleSheet,简称CSS)来实现。CSS通常又称为“风格样式表(StyleSheet),用来进行网页风格的设计。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。本发明中通过级联样式表可以设置第二交互元素的外观,例如形状、颜色等,从而使得第二交互元素更加美观、更适应网页的整体风格。
具体地,在通过JS语言获取到第一交互元素的元素值和元素属性后,需要构造与第一交互元素相对应的第二交互元素,并利用CSS来根据需要设置第二交互元素的外观。例如可通过如下代码来构造第二交互元素:
上述代码中的content就表示第二交互元素的元素值。
构造好第二交互元素之后,可以通过下述代码来设置第二交互元素的元素值和元素属性:
//获取下拉菜单的内容和value;并且创建美化后的下拉菜单
其中,第二交互元素的元素值和元素属性是与第一交互元素相对应的。具体地,在上述代码中,第一交互元素的元素值通过option来表示,第一交互元素的元素属性通过assign表示。相应地,第二交互元素的元素值通过dd来表示,第二交互元素的元素属性通过dt来表示。lidata-value用于在元素值为多个时,以列表的形式对各个元素值进行存储,其中的一个li元素就表示一个元素值。
通过上述方式创建的第二交互元素具有与第一交互元素相对应的外观和相同的用户交互方式。其中,相对应的外观主要是指第二交互元素与第一交互元素在网页中显示的位置是相对应的,而且,第二交互元素和第一交互元素所显示出来的元素类型也是相对应的。相同的交互方式是指用户通过点击第二交互元素就能实现与点击第一交互元素相同的交互目的。
通过步骤S120创建了与第一交互元素相对应的第二交互元素之后,在后续的步骤S130中,隐藏所查找到的第一交互元素,并在网页中与第一交互元素相对应的位置处显示第二交互元素。也就是说,当第二交互元素创建之后,第一交互元素将被隐藏,而第二交互元素将代替第一交互元素显示在网页上。
具体地,在隐藏第一交互元素时,可通过JS语言实现。例如,可通过如下代码实现:
在上面的代码中,通过调用hide函数即可实现对第一交互元素的隐藏。通过步骤S130,就实现了将第一交互元素隐藏,并在第一交互元素的对应位置处显示第二交互元素的效果。其中,由于第二交互元素的外观可以灵活设置,因此,可以显示为与页面风格相统一的样式。
另外,为了实现第二交互元素与用户之间的交互,该方法还可以进一步包括步骤:捕获用户与第二交互元素交互所触发的交互事件,将该交互事件传递给与第二交互元素相对应的第一交互元素进行处理。也就是说,第二交互元素可以代替第一交互元素接收并处理用户触发的交互事件,同时,第二交互元素还将该交互事件传递给第一交互元素,由第一交互元素根据该交互事件执行相应的处理。上述过程也可以称之为“事件绑定”,顾名思义,“事件绑定”就是指,第二交互元素在受到点击时,能够模拟原有的第一交互元素的相关展现和选中状态。“事件绑定”的处理过程可通过如下代码实现:
当用户点击美化后的li列表元素的时候,获取该li的data-value的值,这个值是原有的select表情的option元素的值。获取到该值之后,再对为收起状态的美化后的select标签进行展现的修改。
在上述代码中,dd元素用于存储第二交互元素的元素值,dt元素用于指示当前用户点击的结果。因此,在接收到用户的点击行为后,根据用户的点击行为相应地改变dt元素的值,以达到用户触发第二交互元素改变选中状态的效果。
另外,由于本发明实施例中的第一交互元素只是被隐藏起来,而并没有被删除,因此,第一交互元素仍然担负着与网页中的其他功能模块进行调用或被调用的作用,所以,在第二交互元素捕获并处理用户触发的交互事件之后或同时,还需要将该交互事件传递给与第二交互元素相对应的第一交互元素进行相应的处理。举例来说,如果用户将图2中的地区从“北京”更换为“上海”,则不仅第二交互元素中的元素属性要更新为“上海”,而且,第一交互元素中的元素属性也要相应地更新为“上海”。
图5a表示采用本发明美化前,以第一交互元素进行展现的显示界面,图5b表示采用本发明美化后,以第二交互元素进行展现的显示界面。经过比较可以看出,美化后的第二交互元素的大小和颜色都比第一交互元素更加美观,与页面的整体风格更加协调。
通过本发明实施例提供的改变网页中的内容的显示状态的方法,美化后的第二交互元素可以代替默认的第一交互元素呈现在网页中,从而改善了网页的视觉效果。对于用户界面来讲,页面的效果更加完美;对于前端使用者来讲,只要引入JS和CSS调用该美化方法后即可实现美化效果,而不用改变html页面的结构,实现方式简便。
另外,由于本发明实施例是通过JS语言和CSS配合来构造第二交互元素的,而不是仅仅利用CSS来构造第二交互元素的,况且JS语言所对应的JS脚本是在网页的页面加载完毕后延迟执行的,因此,当用户手动设置浏览器禁止JS脚本运行的时候,或者,当网页调用第二交互元素对应的JS脚本之前JS脚本就已经出错的时候,网页还会正常显示默认的第一交互元素而不至于造成网页无法查看或使用的严重后果。由此可见,本发明实施例中的方法的鲁棒性较好,在第二交互元素出错时还可以正常使用第一交互元素,不会为用户带来使用上的不便。
图6示出了本发明实施例提供的改变网页中的内容的显示状态的设备600的结构图。该设备包括:查找单元61、创建单元62和显示单元63。
查找单元61根据预设的查找条件查找网页中的第一交互元素,该第一交互元素为要改变显示状态的网页内容。
其中,第一交互元素可以是html页面中用于实现交互功能的默认元素。通常,可以将第一交互元素按照类型分为:单选按钮元素(也叫radio元素)、多选框元素(也叫checkbox元素)和下拉菜单元素(也叫select元素)。
相应地,预设的查找条件包括:第一交互元素的元素类型,和/或待查找的网页的页面范围。其中,第一交互元素的元素类型包括上述的单选按钮元素(radio)、多选框元素(checkbox)和下拉菜单元素(select)中的一个或多个。网页的页面范围包括整个网页范围或部分网页范围。
具体地,查找单元61可以通过调用javascript的方法qtool.beautify(dom,type,option)来实现对符合预设条件的第一交互元素的查找。其中,第一个参数(dom参数)为必须参数,该参数是一个jquery对象,用于设定待查找的网页的页面范围,也就是设定需要对网页中哪些范围内出现的第一交互元素进行查找,例如,dom的值可以是整个网页范围,或者,也可以是部分网页范围。第二个参数(type参数)也为必须参数,该参数为string类型,用于指示第一交互元素的元素类型,该参数的值例如可以为“checkbox”(表示多选框元素)、“radio”(表示单选按钮元素)或“select”(表示下拉菜单元素)。第三个参数(option参数)为可选参数,该参数为array类型。举例来说,在qtool.beautify($(‘body’),’checkbox’)中,第一个参数值为body,表示是在网页的主体范围内进行查找;第二个参数值为checkbox,表示要查找的第一交互元素的类型为多选框元素;第三个参数值不是必须参数,值为空。所以,qtool.beautify($(‘body’),’checkbox’)语句就表示在网页的主体范围内查找多选框元素。
在查找单元61通过上面的方式调用qtool.beautify方法并输入该方法中的参数值之后,为了避免错误,可以先对该方法中的dom参数和type参数的参数值进行检查。如果dom参数的值设定错误,可以默认在整个网页范围内进行查找。如果type参数的值设定错误或者为空则无法进行查找,需要重新输入。例如,可通过如下代码完成对dom参数和type参数的参数值的检查:
关于查找单元61的具体查找方式可参照方法实施例中步骤S110的描述。
可选地,该设备还可以进一步包括缓存单元64,用于在查找单元61查找到第一交互元素后,获取并缓存第一交互元素的相关信息。其中,第一交互元素的相关信息包括元素值和/或元素属性。关于第一交互元素的元素值以及元素属性的具体内容可参照方法实施例相应部分的描述,此处不再赘述。
在查找单元61查找到第一交互元素后,创建单元62创建与查找到的第一交互元素相对应的第二交互元素,其中第二交互元素具有与第一交互元素相对应的外观和相同的用户交互方式。
可选地,创建单元62在创建与查找到的第一交互元素相对应的第二交互元素时,可以基于缓存单元64缓存的第一交互元素的相关信息来创建第二交互元素。其中,在创建与第一交互元素对应的第二交互元素时可以通过JS语言和级联样式表(CascadingStyleSheet,简称CSS)来实现。关于创建单元62的具体创建方式可参照方法实施例中步骤S120的描述。
然后,显示单元63隐藏查找单元61所查找到的第一交互元素,并在网页中与第一交互元素相对应的位置处显示创建单元62创建的第二交互元素。也就是说,当第二交互元素创建之后,第一交互元素将被隐藏,而第二交互元素将代替第一交互元素显示在网页上。关于显示单元63的具体显示方式可参照方法实施例中步骤S130的描述。
另外,为了实现第二交互元素与用户之间的交互,该设备还可以进一步包括捕获单元65,用于捕获用户与第二交互元素交互所触发的交互事件,将该交互事件传递给与第二交互元素相对应的第一交互元素进行处理。也就是说,第二交互元素可以代替第一交互元素接收并处理用户触发的交互事件,同时,第二交互元素还将该交互事件传递给第一交互元素,由第一交互元素根据该交互事件执行相应的处理。上述过程也可以称之为“事件绑定”,顾名思义,“事件绑定”就是指,第二交互元素在受到点击时,能够模拟原有的第一交互元素的相关展现和选中状态。
根据本发明的改变网页中的内容的显示状态的方法及相应的设备,为网页中的第一交互元素创建对应的第二交互元素,该第二交互元素具有与第一交互元素相对应的外观和相同的交互方式,并在网页中与第一交互元素相对应的位置显示第二交互元素,由此解决了目前第一交互元素的样式固定且无法调整,从而影响页面的整体美观的问题,取得了能够用第二交互元素取代第一交互元素显示在网页中,从而达到顺应网页的整体风格,改善网页的整体美观程度的有益效果。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述,构造这类系统所要求的结构是显而易见的。此外,本发明也不针对任何特定编程语言。应当明白,可以利用各种编程语言实现在此描述的本发明的内容,并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
类似地,应当理解,为了精简本公开并帮助理解各个发明方面中的一个或多个,在上面对本发明的示例性实施例的描述中,本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说,如下面的权利要求书所反映的那样,发明方面在于少于前面公开的单个实施例的所有特征。因此,遵循具体实施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解,可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件,以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外,可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外,本领域的技术人员能够理解,尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征,但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现,或者以在一个或者多个处理器上运行的软件模块实现,或者以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的测试设备和测试系统中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如,计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上,或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到,或者在载体信号上提供,或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中,这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
Claims (8)
1.一种改变网页中的内容的显示状态的方法,包括:
根据预设的查找条件查找网页中的第一交互元素,所述第一交互元素为要改变显示状态的网页内容;
创建与所述第一交互元素相对应的第二交互元素,其中第二交互元素具有与第一交互元素相对应的外观和相同的用户交互方式,其中,相对应的外观是指第二交互元素与第一交互元素在网页中显示的位置是相对应的,而且,第二交互元素和第一交互元素所显示出来的元素类型也是相对应的,相同的交互方式是指用户通过点击第二交互元素就能实现与点击第一交互元素相同的交互目的;
隐藏所查找到的第一交互元素,并在网页中与所述第一交互元素相对应的位置处显示所述第二交互元素;以及
捕获用户与所述第二交互元素交互所触发的交互事件,将所述交互事件传递给与所述第二交互元素相对应的第一交互元素进行处理。
2.如权利要求1所述的方法,所述预设的查找条件包括:第一交互元素的元素类型,其中,所述元素类型包括下述中的一个或者多个:单选按钮元素、多选框元素和下拉菜单元素。
3.如权利要求1或2所述的方法,还包括步骤,在查找网页中的第一交互元素之后,获取并缓存所述第一交互元素的相关信息,所述第一交互元素的相关信息包括元素值和/或元素属性;
所述创建与所述第一交互元素相对应的第二交互元素的步骤包括:基于缓存的所述第一交互元素的相关信息创建所述第二交互元素。
4.如权利要求1或2所述的方法,所述隐藏查找到的第一交互元素通过JS语言实现,以及所述创建与所述第一交互元素对应的第二交互元素通过JS语言和级联样式表CSS来实现。
5.一种改变网页中的内容的显示状态的设备,包括:
查找单元,适于根据预设的查找条件查找网页中的第一交互元素,所述第一交互元素为要改变显示状态的网页内容;
创建单元,适于创建与所述第一交互元素相对应的第二交互元素,其中第二交互元素具有与第一交互元素相对应的外观和相同的用户交互方式,其中,相对应的外观是指第二交互元素与第一交互元素在网页中显示的位置是相对应的,而且,第二交互元素和第一交互元素所显示出来的元素类型也是相对应的,相同的交互方式是指用户通过点击第二交互元素就能实现与点击第一交互元素相同的交互目的;
显示单元,适于隐藏所查找到的第一交互元素,并在网页中与所述第一交互元素相对应的位置处显示所述第二交互元素;以及
捕获单元,适于捕获用户与所述第二交互元素交互所触发的交互事件,将所述交互事件传递给与所述第二交互元素相对应的第一交互元素进行处理。
6.如权利要求5所述的设备,所述预设的查找条件包括:第一交互元素的元素类型,其中,所述元素类型包括下述中的一个或者多个:单选按钮元素、多选框元素和下拉菜单元素。
7.如权利要求5或6所述的设备,还包括:
缓存单元,适于在所述查找单元查找网页中的第一交互元素之后,获取并缓存所述第一交互元素的相关信息,所述第一交互元素的相关信息包括元素值和/或元素属性;以及
所述创建单元适于基于缓存的所述第一交互元素的相关信息创建所述第二交互元素。
8.如权利要求5或6所述的设备,所述显示单元隐藏查找到的第一交互元素通过JS语言实现;所述创建单元创建与所述第一交互元素对应的第二交互元素通过JS语言和级联样式表CSS来实现。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210466763.6A CN102999598B (zh) | 2012-11-16 | 2012-11-16 | 改变网页中的内容的显示状态的方法及设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210466763.6A CN102999598B (zh) | 2012-11-16 | 2012-11-16 | 改变网页中的内容的显示状态的方法及设备 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN102999598A CN102999598A (zh) | 2013-03-27 |
CN102999598B true CN102999598B (zh) | 2016-05-11 |
Family
ID=47928166
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201210466763.6A Active CN102999598B (zh) | 2012-11-16 | 2012-11-16 | 改变网页中的内容的显示状态的方法及设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN102999598B (zh) |
Families Citing this family (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104484362B (zh) * | 2014-12-02 | 2017-11-17 | 百度在线网络技术(北京)有限公司 | 搜索结果的展现方法及装置 |
CN104462410B (zh) * | 2014-12-11 | 2018-06-26 | 北京国双科技有限公司 | 网页选项处理方法及装置 |
US10212061B2 (en) * | 2016-04-25 | 2019-02-19 | Google Llc | Dynamically rendering interaction statistics data for content elements of an information resource using visual styles |
CN113377264A (zh) * | 2021-06-02 | 2021-09-10 | 浪潮软件股份有限公司 | 一种网页中反馈式交互方法 |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2011150289A1 (en) * | 2010-05-26 | 2011-12-01 | Todotornot Ventures Pty. Ltd. | End user viewable web element |
CN102663056B (zh) * | 2012-03-29 | 2014-05-28 | 北京奇虎科技有限公司 | 一种图片元素显示方法和装置 |
CN102915378B (zh) * | 2012-11-16 | 2016-05-04 | 北京奇虎科技有限公司 | 网页中内容显示状态改变方法和装置 |
-
2012
- 2012-11-16 CN CN201210466763.6A patent/CN102999598B/zh active Active
Also Published As
Publication number | Publication date |
---|---|
CN102999598A (zh) | 2013-03-27 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN104951099B (zh) | 一种基于输入法的展示候选项的方法和装置 | |
US9582601B2 (en) | Combining server-side and client-side user interface elements | |
US10049151B2 (en) | External action suggestions in search results | |
EP2987088B1 (en) | Client side page processing | |
CN102915378B (zh) | 网页中内容显示状态改变方法和装置 | |
US20110246880A1 (en) | Interactive application assistance, such as for web applications | |
CN105868096B (zh) | 用于在浏览器中显示web页面测试结果的方法、装置及设备 | |
US9477762B2 (en) | Search controls using sliders and lightboxes | |
CN102999598B (zh) | 改变网页中的内容的显示状态的方法及设备 | |
US20170255445A1 (en) | Translation of natural language into user interface actions | |
CN102982117B (zh) | 信息搜索方法和装置 | |
CN105022776A (zh) | 与模块化搜索对象框架相关联的增强搜索结果 | |
US20150205561A1 (en) | Multiple display alignment | |
CN104021016A (zh) | 加载浏览器插件图标的方法及浏览器 | |
CN104156391A (zh) | 一种在移动搜索结果中展现菜谱的装置和方法 | |
CN103309553B (zh) | 数据放大输入的方法及终端 | |
CN105164669A (zh) | 信息处理设备、信息处理方法以及程序 | |
CN107423204A (zh) | 应用程序的操作日志的处理方法、装置以及终端 | |
CN105989046A (zh) | 网站显示方法及系统、以及用户终端 | |
CN103793128A (zh) | 浏览器的文件操作方法及装置 | |
CN104376125B (zh) | 一种业务表单动态增减内容的方法 | |
CN104462417A (zh) | 通过搜索器窗口显示鼠标搜索结果网页的系统和方法 | |
CN110377859A (zh) | 一种控制网页操作的控制方法及控制装置 | |
CN104063118B (zh) | 一种网页内容的点击显示方法及装置 | |
CN103513872A (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 | ||
C14 | Grant of patent or utility model | ||
GR01 | Patent grant | ||
TR01 | Transfer of patent right | ||
TR01 | Transfer of patent right |
Effective date of registration: 20220725 Address after: Room 801, 8th floor, No. 104, floors 1-19, building 2, yard 6, Jiuxianqiao Road, Chaoyang District, Beijing 100015 Patentee after: BEIJING QIHOO TECHNOLOGY Co.,Ltd. Address before: 100088 room 112, block D, 28 new street, new street, Xicheng District, Beijing (Desheng Park) Patentee before: BEIJING QIHOO TECHNOLOGY Co.,Ltd. Patentee before: Qizhi software (Beijing) Co.,Ltd. |