CN104424318A - 页面元素的控制方法及装置 - Google Patents

页面元素的控制方法及装置 Download PDF

Info

Publication number
CN104424318A
CN104424318A CN201310406716.7A CN201310406716A CN104424318A CN 104424318 A CN104424318 A CN 104424318A CN 201310406716 A CN201310406716 A CN 201310406716A CN 104424318 A CN104424318 A CN 104424318A
Authority
CN
China
Prior art keywords
size
page
target pages
secondary page
page element
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.)
Pending
Application number
CN201310406716.7A
Other languages
English (en)
Inventor
贺鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201310406716.7A priority Critical patent/CN104424318A/zh
Priority to TW102145371A priority patent/TW201510746A/zh
Priority to US14/480,360 priority patent/US20150074519A1/en
Priority to PCT/US2014/054589 priority patent/WO2015035319A1/en
Publication of CN104424318A publication Critical patent/CN104424318A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/12Use of codes for handling textual entities
    • G06F40/14Tree-structured documents
    • G06F40/143Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/103Formatting, i.e. changing of presentation of documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本申请提供一种页面元素的控制方法及装置。本申请实施例通过根据Web页面,创建辅助页面元素,辅助页面元素的尺寸为Web页面的尺寸,进而根据辅助页面元素的尺寸和目标页面元素的尺寸和位置,获得辅助页面元素的边框的尺寸,使得能够设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式,能够避免现有技术中由于复制的页面元素即目标页面元素脱离了Web页面的文档流而导致的重新设置复制的页面元素的样式的问题,操作简单,且正确率高,从而提高了页面元素控制的效率和可靠性。

Description

页面元素的控制方法及装置
【技术领域】
本申请涉及万维网(World Wide Web,Web)页面处理技术,尤其涉及一种页面元素的控制方法及装置。
【背景技术】
随着通信技术的发展,终端集成了越来越多的功能,从而使得终端的系统功能列表中包含了越来越多相应的应用程序,例如,电脑中安装的应用程序、第三方智能手机中安装的应用程序(Application,APP)等。有些应用程序中会涉及一些万维网(World Wide Web,Web)页面,Web页面可以包括由一个或者多个超文本标记语言(HyperText Markup Language,HTML)标签组成的一个显示区块,称为页面元素,例如,文字、标签、超链接、按钮、输入框、下拉框等。在一些情况下,需要突出显示指定的页面元素,例如,Web页面的布局发生变化之后,需要突出显示变化的页面元素。现有技术中,首先在整个页面上方设置一个半透明层,然后,复制需要突出显示的页面元素,并将复制的页面元素设置在半透明层的上方,以实现突出显示所复制的页面元素的目的。由于复制的页面元素是单独设置在Web页面的半透明层上方,使得复制的页面元素脱离了Web页面的文档流,因此,需要重新设置复制的页面元素,以保持原始的显示效果。其中,Web页面的文档流就是Web页面上可显示对象即页面元素在排列时所占用的位置。
然而,由于复制的页面元素脱离了Web页面的文档流,使得无法根据文档流设置该页面元素的样式,只能单独计算该页面元素的样式,操作复杂,且容易出错,从而导致了页面元素控制的效率和可靠性的降低。
【发明内容】
本申请的多个方面提供一种页面元素的控制方法及装置,用以提高页面元素控制的效率和可靠性。
本申请的一方面,提供一种页面元素的控制方法,包括:
确定万维网Web页面上待控制的目标页面元素;
根据所述Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸;
根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸;
设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式,包括:
根据预先设置的透明度参数,设置所述辅助页面元素的边框的透明度,所述透明度参数大于或等于0且小于1。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸,包括:
根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素与所述目标页面元素在每个方向上的尺寸差值;
根据所述每个方向上的尺寸差值,获得所述辅助页面元素的边框的尺寸。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述根据所述Web页面,创建辅助页面元素,包括:
在所述Web页面的主体body标签下,创建所述辅助页面元素。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸之前,还包括:
利用JavaScript语言,确定所述目标页面元素的尺寸和位置。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述辅助页面元素为块级元素。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,
所述辅助页面元素的垂直高度大于所述Web页面上除了所述目标页面元素之外的任一其他页面元素的垂直高度。
本申请的另一方面,提供一种页面元素的控制装置,包括:
确定单元,用于确定万维网Web页面上待控制的目标页面元素;
创建单元,用于根据所述Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸;
获得单元,用于根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸;
设置单元,用于设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述设置单元,具体用于
根据预先设置的透明度参数,设置所述辅助页面元素的边框的透明度,所述透明度参数大于或等于0且小于1。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述获得单元,具体用于
根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素与所述目标页面元素在每个方向上的尺寸差值;以及
根据所述每个方向上的尺寸差值,获得所述辅助页面元素的边框的尺寸。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述创建单元,具体用于
在所述Web页面的主体body标签下,创建所述辅助页面元素。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述确定单元,还用于
利用JavaScript语言,确定所述目标页面元素的尺寸和位置。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,所述辅助页面元素为块级元素。
如上所述的方面和任一可能的实现方式,进一步提供一种实现方式,
所述辅助页面元素的垂直高度大于所述Web页面上除了所述目标页面元素之外的任一其他页面元素的垂直高度。
由上述技术方案可知,本申请实施例通过根据Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸,进而根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸,使得能够设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式,由于目标页面元素始终没有脱离Web页面的文档流,因此,能够避免现有技术中由于复制的页面元素即目标页面元素脱离了Web页面的文档流而导致的重新设置复制的页面元素的样式的问题,操作简单,且正确率高,从而提高了页面元素控制的效率和可靠性。
【附图说明】
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本申请一实施例提供的页面元素的控制方法的流程示意图;
图2为图1对应的实施例中一Web页面的示意图;
图3为图1对应的实施例中另一Web页面的示意图;
图4为图1对应的实施例中另一Web页面的示意图;
图5为本申请另一实施例提供的页面元素的控制装置的结构示意图。
【具体实施方式】
为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的全部其他实施例,都属于本申请保护的范围。
需要说明的是,本申请实施例中所涉及的终端可以包括但不限于手机、个人数字助理(Personal Digital Assistant,PDA)、无线手持装置、无线上网本、个人电脑、便携电脑、个人电脑(Personal Computer,PC)、MP3播放器、MP4播放器等。
另外,本文中术语“和/或”,仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
图1为本申请一实施例提供的页面元素的控制方法的流程示意图,如图1所示。
101、确定Web页面上待控制的目标页面元素。
具体地,所述目标页面元素可以包括但不限于下列中的至少一项:文字、标签、超链接、按钮、输入框和下拉框,本实施例对此不进行限定。这个目标页面元素就是需要突出显示的页面元素。
102、根据所述Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸。
通过执行102,在Web页面上,创建了一个整个Web页面大小的辅助页面元素,这个辅助页面元素与Web页面上除了所述目标页面元素之外的其他页面元素相对应。例如,所述辅助页面元素可以位于Web页面上除了所述目标页面元素之外的任一其他页面元素之上,也可以是与Web页面上除了所述目标页面元素之外的任一其他页面元素相重叠。
优选的,所述辅助页面元素的垂直高度大于所述Web页面上除了所述目标页面元素之外的任一其他页面元素的垂直高度,以便在后续步骤中将所述辅助页面元素设置为不透明状态时可以完整的遮盖住Web页面上除目标页面元素之外的其他页面元素。
可以理解的是,辅助页面元素的垂直高度与目标页面元素的垂直高度无关,也就是说,辅助页面元素的垂直高度既可以大于目标页面元素的垂直高度,又可以小于目标页面元素的垂直高度,甚至可以等于目标页面元素的垂直高度,本实施例对此不进行限定。
103、根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸。
具体地,所述辅助页面元素的边框可以为辅助页面元素的外边缘与所述目标页面元素的外边缘之间的部分。可以根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素与所述目标页面元素在每个方向上的尺寸差值。然后,则可以根据所述每个方向上的尺寸差值,获得所述辅助页面元素的边框的尺寸,即上边框的宽度、下边框的宽度、左边框的宽度和右边框的宽度。
这样,可以实现辅助页面元素的边框设置在所述Web页面上除了所述目标页面元素之外的任一其他页面元素的地方。
104、根据预先设置的透明度参数,设置所述覆盖页面元素的边框的透明度,所述透明度参数大于或等于0且小于1。
这样,由于只设置了辅助页面元素的边框的透明度,使其处于非完全透明状态,辅助页面元素的其他部分的透明度缺省设置为完全透明,即透明度参数为1,因此,可以突出显示目标页面元素。
可以理解的是,步骤104只是本申请实施例中优选实施例,在具体应用中可以将辅助页面元素的边框展现方式设置为不同于目标页面元素的展现方式,以便突出显示目标页面元素。例如,当目标页面元素的主色调为红色时,可以将辅助页面元素的边框设置为浅绿色。其他任何可实现本申请目的的实施方式均在本申请保护范围之内,本申请对此并不做限定。
可以理解的是,本申请所涉及的页面,可以是基于超文本标记语言(HyperText Markup Language,HTML)编写的网页(Web Page),也可以称为Web页面。
需要说明的是,101~104的执行主体可以是控制装置,例如,Web页面编辑器等,可以位于本地的客户端中,以进行离线控制,或者还可以位于网络侧的服务器中,以进行在线控制,本实施例对此不进行限定。
可以理解的是,所述客户端可以是安装在终端上的应用程序,或者还可以是浏览器的一个网页,只要能够实现页面元素控制,以实现该页面元素的突出显示的客观存在形式都可以,本实施例对此不进行限定。
采用本实施例提供的技术方案,没有对目标页面元素进行任何操作,致使目标页面元素没有发生任何的位置变化,并没有脱离Web页面的文档流。
这样,由于并没有对目标页面元素进行任何操作,使得目标页面元素的位置没有发生任何变化,也就是说,目标页面元素始终没有脱离Web页面的文档流,因此,能够避免现有技术中由于复制的页面元素即目标页面元素脱离了Web页面的文档流而导致的重新设置复制的页面元素的样式的问题,操作简单,且正确率高,从而提高了页面元素控制的效率和可靠性。
另外,采用本申请提供的技术方案,由于目标页面元素始终没有脱离Web页面的文档流,因此,目标页面元素原始的样式仍然有效,无需重新设置复制的页面元素的样式,能够省去大量设置样式的操作,从而能够有效提高页面元素控制的效率。
另外,采用本申请提供的技术方案,通过采用页面元素即辅助页面元素的边框的方式,来处理半透明层或不透明层,从而实现了无需改变原始的Web页面的文档流,就能够突出显示网页元素即目标网页元素的目的。
现有的页面元素的控制方法,首先在整个页面上方设置一个半透明层,然后,复制需要突出显示的页面元素,并将复制的页面元素设置在半透明层的上方,以实现突出显示所复制的页面元素的目的。由于复制的页面元素是单独设置在Web页面的半透明层上方,使得复制的页面元素脱离了Web页面的文档流,因此,需要重新设置复制的页面元素,以保持原始的显示效果。这样,由于复制的页面元素脱离了Web页面的文档流,使得无法根据文档流设置该页面元素的样式,只能单独计算该页面元素的样式,操作复杂,且容易出错,从而导致了页面元素控制的效率和可靠性的降低。
可选地,在本实施例的一个可能的实现方式中,在103之前,控制装置还可以进一步利用JavaScript语言,确定所述目标页面元素的尺寸和位置。如图2所示,图中单向箭头所指的即为所述目标页面元素。
具体地,在103中,控制装置具体可以根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素与所述目标页面元素在每个方向上的尺寸差值,即上方的尺寸差值、下方的尺寸差值、左方的尺寸差值和右方的尺寸差值。然后,所述控制装置则可以根据所述每个方向上的尺寸差值,获得所述辅助页面元素的边框的尺寸,即上边框的宽度、下边框的宽度、左边框的宽度和右边框的宽度。如图3所示,图中双向箭头所指的即为辅助页面元素的边框的尺寸。
这样,如图4所示,即为控制装置通过执行104,所获得处理之后的Web页面。
需要说明的是,在图2~图4所示出的Web页面上,只需要关注Web页面的布局即页面元素的尺寸和位置,而不需要关注每个页面元素的内容,也就是说,页面元素的内容所包含的英文字符只是示意性质的,并没有特别含义,可以忽略。
可选地,在本实施例的一个可能的实现方式中,在102中,控制装置具体可以在所述Web页面的主体(body)标签下,创建所述辅助页面元素。具体地,所述辅助页面元素为块级元素。其中,所述辅助页面元素可以采用绝对定位方式,坐标可以为(0,0);或者还可以采用相对定位方式,坐标则可以为(0,0),本实施例对此不进行限定。
本实施例中,通过根据Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸,进而根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸,使得能够设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式,由于并没有对目标页面元素进行任何操作,使得目标页面元素的位置没有发生任何变化,也就是说,目标页面元素始终没有脱离Web页面的文档流,因此,能够避免现有技术中由于复制的页面元素即目标页面元素脱离了Web页面的文档流而导致的重新设置复制的页面元素的样式的问题,操作简单,且正确率高,从而提高了页面元素控制的效率和可靠性。
另外,采用本申请提供的技术方案,由于目标页面元素始终没有脱离Web页面的文档流,因此,目标页面元素原始的样式仍然有效,无需重新设置复制的页面元素的样式,能够省去大量设置样式的操作,从而能够有效提高页面元素控制的效率。
另外,采用本申请提供的技术方案,通过采用页面元素即辅助页面元素的边框的方式,来处理半透明层或不透明层,从而实现了无需改变原始的Web页面的文档流,就能够突出显示网页元素即目标网页元素的目的。
需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本申请所必须的。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
图5为本申请另一实施例提供的页面元素的控制装置的结构示意图,如图5所示。本实施例的页面元素的控制装置可以包括确定单元51、创建单元52、获得单元53和设置单元54。其中,确定单元51,用于确定Web页面上待控制的目标页面元素;创建单元52,用于根据所述Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸;获得单元53,用于根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸;设置单元54,用于设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式。
具体地,所述目标页面元素可以包括但不限于下列中的至少一项:文字、标签、超链接、按钮、输入框和下拉框,本实施例对此不进行限定。这个目标页面元素就是需要突出显示的页面元素。
所述创建单元52通过执行相应的操作,在Web页面上,创建了一个整个Web页面大小的辅助页面元素,这个辅助页面元素与Web页面上除了所述目标页面元素之外的其他页面元素相对应。例如,所述辅助页面元素可以位于Web页面上除了所述目标页面元素之外的任一其他页面元素之上,也可以是与Web页面上除了所述目标页面元素之外的任一其他页面元素相重叠。
优选的,所述辅助页面元素的垂直高度大于所述Web页面上除了所述目标页面元素之外的任一其他页面元素的垂直高度,以便在后续步骤中将所述辅助页面元素设置为不透明状态时可以完整的遮盖住Web页面上除目标页面元素之外的其他页面元素。
可以理解的是,辅助页面元素的垂直高度与目标页面元素的垂直高度无关,也就是说,辅助页面元素的垂直高度既可以大于目标页面元素的垂直高度,又可以小于目标页面元素的垂直高度,甚至可以等于目标页面元素的垂直高度,本实施例对此不进行限定。
可以理解的是,本申请所涉及的页面,可以是基于超文本标记语言(HyperText Markup Language,HTML)编写的网页(Web Page),也可以称为Web页面。
具体地,所述辅助页面元素的边框可以为辅助页面元素的外边缘与所述目标页面元素的外边缘之间的部分。所述获得单元53具体可以根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素与所述目标页面元素在每个方向上的尺寸差值。然后,所述获得单元53则可以根据所述每个方向上的尺寸差值,获得所述辅助页面元素的边框的尺寸,即上边框的宽度、下边框的宽度、左边框的宽度和右边框的宽度。
这样,可以实现辅助页面元素的边框设置在所述Web页面上除了所述目标页面元素之外的任一其他页面元素的地方。
可选地,在本实施例的一个可能的实现方式中,所述设置单元54具体可以根据预先设置的透明度参数,设置所述覆盖页面元素的边框的透明度,所述透明度参数大于或等于0且小于1。由于设置单元54只设置了辅助页面元素的边框的透明度,使其处于非完全透明状态,辅助页面元素的其他部分的透明度缺省设置为完全透明,即透明度参数为1,因此,可以突出显示目标页面元素。
可以理解的是,当目标页面元素的主色调为红色时,所述设置单元54具体还可以将辅助页面元素的边框设置为浅绿色。其他任何可实现本申请目的的实施方式均在本申请保护范围之内,本申请对此并不做限定。
需要说明的是,本实施例提供的装置可以是控制装置,例如,Web页面编辑器等,可以位于本地的客户端中,以进行离线控制,或者还可以位于网络侧的服务器中,以进行在线控制,本实施例对此不进行限定。
可以理解的是,所述客户端可以是安装在终端上的应用程序,或者还可以是浏览器的一个网页,只要能够实现页面元素控制,以实现该页面元素的突出显示的客观存在形式都可以,本实施例对此不进行限定。
采用本实施例提供的技术方案,没有对目标页面元素进行任何操作,致使目标页面元素没有发生任何的位置变化,并没有脱离Web页面的文档流。
这样,由于并没有对目标页面元素进行任何操作,使得目标页面元素的位置没有发生任何变化,也就是说,目标页面元素始终没有脱离Web页面的文档流,因此,能够避免现有技术中由于复制的页面元素即目标页面元素脱离了Web页面的文档流而导致的重新设置复制的页面元素的样式的问题,操作简单,且正确率高,从而提高了页面元素控制的效率和可靠性。
另外,采用本申请提供的技术方案,由于目标页面元素始终没有脱离Web页面的文档流,因此,目标页面元素原始的样式仍然有效,无需重新设置复制的页面元素的样式,能够省去大量设置样式的操作,从而能够有效提高页面元素控制的效率。
另外,采用本申请提供的技术方案,通过采用页面元素即辅助页面元素的边框的方式,来处理半透明层或不透明层,从而实现了无需改变原始的Web页面的文档流,就能够突出显示网页元素即目标网页元素的目的。
现有的页面元素的控制装置,首先在整个页面上方设置一个半透明层,然后,复制需要突出显示的页面元素,并将复制的页面元素设置在半透明层的上方,以实现突出显示所复制的页面元素的目的。由于复制的页面元素是单独设置在Web页面的半透明层上方,使得复制的页面元素脱离了Web页面的文档流,因此,需要重新设置复制的页面元素,以保持原始的显示效果。这样,由于复制的页面元素脱离了Web页面的文档流,使得无法根据文档流设置该页面元素的样式,只能单独计算该页面元素的样式,操作复杂,且容易出错,从而导致了页面元素控制的效率和可靠性的降低。
可选地,在本实施例的一个可能的实现方式中,所述确定单元51,还可以进一步用于利用JavaScript语言,确定所述目标页面元素的尺寸和位置。如图2所示,图中单向箭头所指的即为所述目标页面元素。
具体地,所述获得单元53,具体可以用于根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素与所述目标页面元素在每个方向上的尺寸差值,即上方的尺寸差值、下方的尺寸差值、左方的尺寸差值和右方的尺寸差值;以及根据所述每个方向上的尺寸差值,获得所述辅助页面元素的边框的尺寸,即上边框的宽度、下边框的宽度、左边框的宽度和右边框的宽度。如图3所示,图中双向箭头所指的即为辅助页面元素的边框的尺寸。
这样,如图4所示,即为设置单元54通过执行根据预先设置的透明度参数,设置所述覆盖页面元素的边框的透明度的操作,所获得的处理之后的Web页面。其中,所述透明度参数大于或等于0且小于1。
需要说明的是,在图2~图4所示出的Web页面上,只需要关注Web页面的布局即页面元素的尺寸和位置,而不需要关注每个页面元素的内容,也就是说,页面元素的内容所包含的英文字符只是示意性质的,并没有特别含义,可以忽略。
可选地,在本实施例的一个可能的实现方式中,所述创建单元52,具体用于在所述Web页面的body标签下,创建所述辅助页面元素。具体地,所述辅助页面元素为块级元素。其中,所述辅助页面元素可以采用绝对定位方式,坐标可以为(0,0);或者还可以采用相对定位方式,坐标则可以为(0,0),本实施例对此不进行限定。
本实施例中,通过创建单元根据Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸,进而由获得单元根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸,使得设置单元能够设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式,由于并没有对目标页面元素进行任何操作,使得目标页面元素的位置没有发生任何变化,也就是说,目标页面元素始终没有脱离Web页面的文档流,因此,能够避免现有技术中由于复制的页面元素即目标页面元素脱离了Web页面的文档流而导致的重新设置复制的页面元素的样式的问题,操作简单,且正确率高,从而提高了页面元素控制的效率和可靠性。
另外,采用本申请提供的技术方案,由于目标页面元素始终没有脱离Web页面的文档流,因此,目标页面元素原始的样式仍然有效,无需重新设置复制的页面元素的样式,能够省去大量设置样式的操作,从而能够有效提高页面元素控制的效率。
另外,采用本申请提供的技术方案,通过采用页面元素即辅助页面元素的边框的方式,来处理半透明层或不透明层,从而实现了无需改变原始的Web页面的文档流,就能够突出显示网页元素即目标网页元素的目的。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统,装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本申请所提供的几个实施例中,应该理解到,所揭露的系统,装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用硬件加软件功能单元的形式实现。
上述以软件功能单元的形式实现的集成的单元,可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器(processor)执行本申请各个实施例所述方法的部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (14)

1.一种页面元素的控制方法,其特征在于,包括:
确定万维网Web页面上待控制的目标页面元素;
根据所述Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸;
根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸;
设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式。
2.根据权利要求1所述的方法,其特征在于,设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式,包括:
根据预先设置的透明度参数,设置所述辅助页面元素的边框的透明度,所述透明度参数大于或等于0且小于1。
3.根据权利要求1所述的方法,其特征在于,所述根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸,包括:
根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素与所述目标页面元素在每个方向上的尺寸差值;
根据所述每个方向上的尺寸差值,获得所述辅助页面元素的边框的尺寸。
4.根据权利要求1~3任一权利要求所述的方法,其特征在于,所述根据所述Web页面,创建辅助页面元素,包括:
在所述Web页面的主体body标签下,创建所述辅助页面元素。
5.根据权利要求1~3任一权利要求所述的方法,其特征在于,所述根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸之前,还包括:
利用JavaScript语言,确定所述目标页面元素的尺寸和位置。
6.根据权利要求1~3任一权利要求所述的方法,其特征在于,所述辅助页面元素为块级元素。
7.根据权利要求1~3任一权利要求所述的方法,其特征在于,
所述辅助页面元素的垂直高度大于所述Web页面上除了所述目标页面元素之外的任一其他页面元素的垂直高度。
8.一种页面元素的控制装置,其特征在于,包括:
确定单元,用于确定万维网Web页面上待控制的目标页面元素;
创建单元,用于根据所述Web页面,创建辅助页面元素,所述辅助页面元素的尺寸为所述Web页面的尺寸;
获得单元,用于根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素的边框的尺寸;
设置单元,用于设置所述辅助页面元素的边框展现方式为不同于所述目标页面元素的展现方式。
9.根据权利要求8所述的装置,其特征在于,所述设置单元,具体用于
根据预先设置的透明度参数,设置所述辅助页面元素的边框的透明度,所述透明度参数大于或等于0且小于1。
10.根据权利要求8所述的装置,其特征在于,所述获得单元,具体用于
根据所述辅助页面元素的尺寸和所述目标页面元素的尺寸和位置,获得所述辅助页面元素与所述目标页面元素在每个方向上的尺寸差值;以及
根据所述每个方向上的尺寸差值,获得所述辅助页面元素的边框的尺寸。
11.根据权利要求8~10任一权利要求所述的装置,其特征在于,所述创建单元,具体用于
在所述Web页面的主体body标签下,创建所述辅助页面元素。
12.根据权利要求8~10任一权利要求所述的装置,其特征在于,所述确定单元,还用于
利用JavaScript语言,确定所述目标页面元素的尺寸和位置。
13.根据权利要求8~10任一权利要求所述的装置,其特征在于,所述辅助页面元素为块级元素。
14.根据权利要求8~10任一权利要求所述的装置,其特征在于,
所述辅助页面元素的垂直高度大于所述Web页面上除了所述目标页面元素之外的任一其他页面元素的垂直高度。
CN201310406716.7A 2013-09-09 2013-09-09 页面元素的控制方法及装置 Pending CN104424318A (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
CN201310406716.7A CN104424318A (zh) 2013-09-09 2013-09-09 页面元素的控制方法及装置
TW102145371A TW201510746A (zh) 2013-09-09 2013-12-10 網頁元件的控制方法及裝置
US14/480,360 US20150074519A1 (en) 2013-09-09 2014-09-08 Method and apparatus of controlling page element
PCT/US2014/054589 WO2015035319A1 (en) 2013-09-09 2014-09-08 Method and apparatus of controlling page element

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310406716.7A CN104424318A (zh) 2013-09-09 2013-09-09 页面元素的控制方法及装置

Publications (1)

Publication Number Publication Date
CN104424318A true CN104424318A (zh) 2015-03-18

Family

ID=51626591

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310406716.7A Pending CN104424318A (zh) 2013-09-09 2013-09-09 页面元素的控制方法及装置

Country Status (4)

Country Link
US (1) US20150074519A1 (zh)
CN (1) CN104424318A (zh)
TW (1) TW201510746A (zh)
WO (1) WO2015035319A1 (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106648821A (zh) * 2016-12-29 2017-05-10 北京奇艺世纪科技有限公司 一种网页优化方法及装置
CN108351706A (zh) * 2015-11-18 2018-07-31 三星电子株式会社 具有可卷动的显示器的电子设备及其控制方法
CN108573027A (zh) * 2018-03-15 2018-09-25 北京雷石天地电子技术有限公司 一种界面显示方法和装置
US10977771B2 (en) 2015-11-18 2021-04-13 Samsung Electronics Co., Ltd. Electronic device having rollable display and method of controlling the same

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105373593B (zh) * 2015-10-14 2018-12-21 北京锤子数码科技有限公司 一种展示网页中目标元素的方法及装置
CN107193815B (zh) * 2016-03-14 2021-03-12 阿里巴巴集团控股有限公司 一种页面代码的处理方法、装置及设备
CN112417344B (zh) * 2021-01-25 2021-10-08 北京小米移动软件有限公司 渲染方法、装置、电子设备及存储介质
CN113608647B (zh) * 2021-10-11 2022-01-04 广东新空电子科技股份有限公司 一种辅助记忆的笔记遮盖方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101882432A (zh) * 2010-02-01 2010-11-10 深圳市同洲电子股份有限公司 一种焦点元素显示方法、装置及数字电视接收终端
CN102024028A (zh) * 2010-11-22 2011-04-20 百度在线网络技术(北京)有限公司 在移动终端上突出显示网页的主体内容的方法及设备
CN102609414A (zh) * 2011-01-20 2012-07-25 中兴通讯股份有限公司 一种基于浏览器的图片热区突出显示方法、装置及系统
US20120254729A1 (en) * 2009-12-30 2012-10-04 Beijing Sogou Technology Development Co., Ltd. Web page element presenting method and system

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7721225B2 (en) * 2005-05-03 2010-05-18 Novell, Inc. System and method for creating and presenting modal dialog boxes in server-side component web applications
JP5306078B2 (ja) * 2009-06-30 2013-10-02 キヤノン株式会社 情報処理装置、情報処理方法、およびプログラム
KR20110081040A (ko) * 2010-01-06 2011-07-13 삼성전자주식회사 투명 디스플레이를 구비한 휴대단말에서 컨텐츠 운용 방법 및 장치
JP6099961B2 (ja) * 2012-12-18 2017-03-22 キヤノン株式会社 画像表示装置、画像表示装置の制御方法およびコンピュータプログラム

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120254729A1 (en) * 2009-12-30 2012-10-04 Beijing Sogou Technology Development Co., Ltd. Web page element presenting method and system
CN101882432A (zh) * 2010-02-01 2010-11-10 深圳市同洲电子股份有限公司 一种焦点元素显示方法、装置及数字电视接收终端
CN102024028A (zh) * 2010-11-22 2011-04-20 百度在线网络技术(北京)有限公司 在移动终端上突出显示网页的主体内容的方法及设备
CN102609414A (zh) * 2011-01-20 2012-07-25 中兴通讯股份有限公司 一种基于浏览器的图片热区突出显示方法、装置及系统

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108351706A (zh) * 2015-11-18 2018-07-31 三星电子株式会社 具有可卷动的显示器的电子设备及其控制方法
US10817022B2 (en) 2015-11-18 2020-10-27 Samsung Electronics Co., Ltd. Electronic device and control method therefor
US10977771B2 (en) 2015-11-18 2021-04-13 Samsung Electronics Co., Ltd. Electronic device having rollable display and method of controlling the same
US11348201B2 (en) 2015-11-18 2022-05-31 Samsung Electronics Co., Ltd. Electronic device having rollable display and method of controlling the same
CN106648821A (zh) * 2016-12-29 2017-05-10 北京奇艺世纪科技有限公司 一种网页优化方法及装置
CN106648821B (zh) * 2016-12-29 2020-02-11 北京奇艺世纪科技有限公司 一种网页优化方法及装置
CN108573027A (zh) * 2018-03-15 2018-09-25 北京雷石天地电子技术有限公司 一种界面显示方法和装置

Also Published As

Publication number Publication date
TW201510746A (zh) 2015-03-16
US20150074519A1 (en) 2015-03-12
WO2015035319A1 (en) 2015-03-12

Similar Documents

Publication Publication Date Title
CN104424318A (zh) 页面元素的控制方法及装置
US9389759B2 (en) Environment for responsive graphical designs
US10592211B2 (en) Generation of application behaviors
KR102118223B1 (ko) 크로스 윈도우 애니메이션
US8881032B1 (en) Grouped tab document interface
CN105630939B (zh) 一种通用画布输入接口设计方法及装置
US9507480B1 (en) Interface optimization application
CN111881662A (zh) 表单生成方法、装置、处理设备及存储介质
CN104281677A (zh) 页面的展现方法及装置
CN104331474A (zh) 页面处理方法及装置
US9946806B2 (en) Exporting responsive designs from a graphical design tool
AU2019205973A1 (en) Responsive resize
CN103019557B (zh) 页面切换方法和装置
US9460059B2 (en) Method and apparatus for visualizing the underlying structure of a document using an interactive viewport overlay
CN105404647A (zh) 一种页面内容的定位方法及装置
CN105094841A (zh) 一种页面评论方法及装置
CN107368511A (zh) 一种信息展示方法及装置
CN103777866A (zh) 用于放大镜的数据编辑方法及装置
CN104765528A (zh) 一种虚拟键盘显示方法及装置
CN104199917A (zh) 一种网页页面内容的翻译方法、装置以及客户端
CN105335383A (zh) 输入信息的处理方法及装置
CN104267867A (zh) 内容输入方法及装置
CN110941428A (zh) 一种网站创建方法和装置
CN104268273A (zh) 推送信息的处理方法、装置及浏览器、浏览器插件
CN106033387A (zh) 测试flash内部控件的方法和装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20150318