CN112099791B - 设置浏览器中页面的样式的方法、装置、设备和存储介质 - Google Patents
设置浏览器中页面的样式的方法、装置、设备和存储介质 Download PDFInfo
- Publication number
- CN112099791B CN112099791B CN202010948312.0A CN202010948312A CN112099791B CN 112099791 B CN112099791 B CN 112099791B CN 202010948312 A CN202010948312 A CN 202010948312A CN 112099791 B CN112099791 B CN 112099791B
- Authority
- CN
- China
- Prior art keywords
- variable
- style sheet
- cascading style
- text content
- browser
- 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 62
- 230000004044 response Effects 0.000 claims abstract description 22
- 230000015654 memory Effects 0.000 claims description 17
- 238000001514 detection method Methods 0.000 claims description 3
- 238000000605 extraction Methods 0.000 claims description 3
- 238000003780 insertion Methods 0.000 claims description 3
- 230000037431 insertion Effects 0.000 claims description 3
- 238000004891 communication Methods 0.000 description 6
- 238000012423 maintenance Methods 0.000 description 6
- 238000012545 processing Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 5
- 238000004590 computer program Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000000977 initiatory effect Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000036632 reaction speed Effects 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请的实施例公开了一种设置浏览器中页面的样式的方法和装置,涉及界面生成技术领域。具体实现方案为:响应于检测到当前浏览器不支持层叠样式表变量,获取当前页面的层叠样式表变量的文本内容,层叠样式表变量的文本内容包括变量定义语句和变量使用语句,变量定义语句包括变量名和变量值,变量使用语句包括属性名和属性值,属性值用于调用变量定义语句中的变量名;从层叠样式表变量的文本内容中提取变量定义语句中的变量值,以及变量使用语句;采用变量定义语句中的变量值替代变量使用语句中的属性值,生成包括属性名和变量值的目标层叠样式表文件;将目标层叠样式表文件插入到当前页面中,可以抹平终端差异,提高浏览器的兼容性。
Description
技术领域
本申请涉及计算机技术领域,具体涉及界面生成技术领域,尤其涉及设置浏览器中页面的样式的方法、装置、设备和存储介质。
背景技术
层叠样式表(Cascading Style Sheets,简称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可以是硬件,也可以是软件。当终端设备101、102、103为硬件时,可以是支持文档处理应用的各种电子设备,包括但不限于智能终端、平板电脑、膝上型便携计算机和台式计算机等等。当终端设备101、102、103为软件时,可以安装在上述所列举的电子设备中。其可以实现成例如用来提供分布式服务的多个软件或软件模块,也可以实现成单个软件或软件模块。在此不做具体限定。
服务器105可以是提供各种服务的服务器,例如对终端设备101、102、103提供支持的后台服务器。后台服务器可以对接收到的请求等数据进行分析等处理,并将处理结果反馈给终端设备。
需要说明的是,服务器可以是硬件,也可以是软件。当服务器为硬件时,可以实现成多个服务器组成的分布式服务器集群,也可以实现成单个服务器。当服务器为软件时,可以实现成例如用来提供分布式服务的多个软件或软件模块,也可以实现成单个软件或软件模块。在此不做具体限定。
在实践中,本申请实施例所提供的提供设置浏览器中页面的样式的方法可以由终端设备101、102、103或服务器105执行,设置浏览器中页面的样式的方法也可以设置于终端设备101、102、103或服务器105中。
应该理解,图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。
请参考图2,图2示出了根据本申请的设置浏览器中页面的样式的方法的一个实施例的流程200。该设置浏览器中页面的样式的方法包括以下步骤:
S201,响应于检测到当前浏览器不支持层叠样式表变量,获取当前页面的层叠样式表变量的文本内容,层叠样式表变量的文本内容包括变量定义语句和变量使用语句,变量定义语句包括变量名和变量值,变量使用语句包括属性名和属性值,属性值用于调用变量定义语句中的变量名。
本实施例中,设置浏览器中页面的样式的方法的执行主体(例如图1所示的终端或服务器)可以获取浏览器的内核信息,通过浏览器内核信息判断当前浏览器是否支持层叠样式表变量。
其中,浏览器的内核信息主要包括浏览器内核的类型,浏览器内核类型可以为现有技术或未来发展的技术中的内核类型,例如,可以为Trident内核、Gecko内核以及Webkit内核等。
根据浏览器的技术标准,浏览器均有提供应用程序编程接口(ApplicationProgramming Interface,简写为API),通过API接口,可以获知当前浏览器的信息,包括浏览器的版本号和内核信息,进而判断当前浏览器是否支持层叠样式表变量。
本领域技术人员公知的是,CSS是用来设置页面样式的规则,用于控制页面的外观,CSS使用之后,能够将页面的内容与表现的内容分离。上述层叠样式表变量,则是一种变量形式的CSS,即,CSS变量。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以响应于检测到当前浏览器不支持层叠样式表变量,获取当前页面的层叠样式表变量的文本内容。可选的,上述执行主体可以从本地或远程获取层叠样式表变量的文本内容。
例如,浏览器可以根据接收到的页面数据呈现当前页面,层叠样式表变量可以包含在页面数据中随页面数据发送至浏览器,此时,执行主体可以从浏览器接收到的页面数据中获取层叠样式表变量的文本内容。
又例如,浏览器接收到的页面数据不包含层叠样式表变量,浏览器根据接收到的页面数据和浏览器中本地存储的层叠样式表变量设置页面样式呈现当前页面,此时,执行主体可以从浏览器本地获取层叠样式表变量的文本内容。
上述层叠样式表变量的文本内容可以包括变量定义语句和变量使用语句。其中,变量定义语句可以包括:变量名和变量值。变量值可以位于变量名之后且用“:”隔开。变量使用语句可以包括:属性名和属性值。属性值用于调用变量定义语句中的变量名,属性值可以位于属性名之后且用“:”隔开。
举例来说,层叠样式表变量的文本内容可以为如下形式:
变量定义语句:
该示例中,“box”和“root”为标签,用于表明语句的类别。变量定义语句中定义变量名“--textcolor”的变量值为“red”,表示文本颜色为红色。“color”为属性名,表示该层叠样式表变量用于指示页面样式中的颜色属性。“var(--textcolor)”为属性值,其通过var()函数调用变量名“--textcolor”以获取变量值“red”。该文本内容对应的层叠样式表变量,用于设置页面的文本颜色显示为红色。
S202,从层叠样式表变量的文本内容中提取变量定义语句中的变量值,以及变量使用语句。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以从层叠样式表变量的文本内容中提取变量定义语句中的变量值,以及变量使用语句。
如上述示例中给出的层叠样式表变量的文本内容,可以从中提取变量定义语句中的变量值“red”,以及变量定义语句
“.box{
color:var(--textcolor);
}”。
S203,采用变量定义语句中的变量值替代变量使用语句中的属性值,生成包括属性名和变量值的目标层叠样式表文件。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以采用变量定义语句中的变量值替代变量使用语句中的属性值,生成包括属性名和变量值的目标层叠样式表文件。
其中,上述采用变量定义语句中的变量值替代变量使用语句中的属性值,意指删除变量使用语句中的属性值字段中的属性值,然后将变量定义语句中的变量值放置在属性值字段。
如上述示例中提取的变量定义语句中的变量值,以及变量定义语句,进行替代后生成的目标层叠样式表文件如下:
.box{
color:red;
}
S204,将目标层叠样式表文件插入到当前页面中,以使浏览器使用目标层叠样式表文件设置当前页面的样式。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以将目标层叠样式表文件插入到当前页面中,以使浏览器使用目标层叠样式表文件设置当前页面的样式。
其中,目标层叠样式表文件为直接表明属性名和属性值的CSS文件,不兼容层叠样式表变量的浏览器也可以使用该目标层叠样式表文件设置当前页面的样式。
综上所述,本实施例提供的设置浏览器中页面的样式的方法,在不兼容层叠样式表变量的浏览器环境中,对当前页面的层叠样式表变量进行转化,生成浏览器支持的目标层叠样式表文件,使得当前浏览器可以使用目标层叠样式表文件设置当前页面的样式,抹平终端差异,使采用层叠样式表变量设置页面的样式的方案可以跨平台,跨终端的使用,使用者只需要维护一套样式方案,降低维护成本。
请参考图3,图3示出了根据本申请的设置浏览器中页面的样式的方法的另一个实施例的流程300。该设置浏览器中页面的样式的方法包括以下步骤:
S301,响应于检测到当前浏览器支持层叠样式表变量,不对当前页面的层叠样式表变量执行操作。
本实施例中,设置浏览器中页面的样式的方法的执行主体(例如图1所示的终端或服务器)可以获取浏览器的内核信息,通过浏览器内核信息判断当前浏览器是否支持层叠样式表变量。
响应于检测到当前浏览器支持层叠样式表变量,浏览器可以直接根据当前页面的层叠样式表变量进行当前页面的样式变更,无需对当前页面的层叠样式表变量进行转化。即,设置浏览器中页面的样式的方法的执行主体可以响应于检测到当前浏览器支持层叠样式表变量,不对当前页面的层叠样式表变量执行操作。
通过该步骤,支持层叠样式表变量的浏览器可以直接根据当前页面的原生的层叠样式表变量设置页面的样式,简化处理过程,提高当前页面的呈现速度。
S302,响应于检测到当前浏览器不支持层叠样式表变量,确定当前页面的层叠样式表变量的链接方式;响应于层叠样式表变量的链接方式为内链,通过当前页面中的第一预设标签获取层叠样式表变量的文本内容;响应于层叠样式表变量的链接方式为外链,基于当前页面中的第二预设标签发送获取请求获取层叠样式表变量的文本内容,层叠样式表变量的文本内容包括变量定义语句和变量使用语句,变量定义语句包括变量名和变量值,变量使用语句包括属性名和属性值,属性值用于调用变量定义语句中的变量名。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以响应于检测到当前浏览器不支持层叠样式表变量,确定当前页面的层叠样式表变量的链接方式。
其中,确定当前页面的层叠样式表变量的链接方式可以通过当前页面的数据中和CSS相关的编程语言(即,CSS规则)确定。外链式,是将层叠样式表变量内容单独写在一个以.css为扩展名的文件,然后在当前页面中通过link标签指向该文件的地址,将层叠样式表变量链接到当前页面中。内链式,是直接在当前页面的style标签中写明层叠样式表变量的内容。因此,通过当前页面的style和/或link标签可以直接确定层叠样式表变量的链接方式。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以响应于层叠样式表变量的链接方式为内链,通过当前页面中的第一预设标签获取层叠样式表变量的文本内容。其中,第一预设标签可以为当前页面中的style标签。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以响应于层叠样式表变量的链接方式为外链,基于当前页面中的第二预设标签发送获取请求获取层叠样式表变量的文本内容。其中,当前页面中的第二预设标签可以为当前页面中的link标签。
其中,基于当前页面中的link标签发送获取请求获取层叠样式表变量的文本内容可以通过下述方式进行:通过XMLHttpRequest(可扩展超文本传输请求)发起获取link标签指向内容的请求,获取层叠样式表变量的文本内容。或者,发送JavaScript请求信息以获取link标签指向内容,获取层叠样式表变量的文本内容。再或者,发送Ajax(AsynchronousJavascript And XML,非同步的JS&XML)请求信息以获取link标签指向的内容,获取层叠样式表变量的文本内容。
该步骤中,获取到的层叠样式表变量的文本内容的形式与上述S201中基本一致,本实施例中不再赘述。
通过该步骤给出的获取层叠样式表变量的文本内容的方法可以适用于不同的CSS链接方式,在不同链接方式下均能快速获得层叠样式表变量的文本内容。
S303,从层叠样式表变量的文本内容中提取变量定义语句中的变量值,以及变量使用语句。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以从层叠样式表变量的文本内容中提取变量定义语句中的变量值,以及变量使用语句。
S304,采用变量定义语句中的变量值替代变量使用语句中的属性值,生成包括属性名和变量值的目标层叠样式表文件。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以采用变量定义语句中的变量值替代变量使用语句中的属性值,生成包括属性名和变量值的目标层叠样式表文件。
S305,将目标层叠样式表文件插入到当前页面中,以使浏览器使用目标层叠样式表文件设置当前页面的样式。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以将目标层叠样式表文件插入到当前页面中,以使浏览器使用目标层叠样式表文件进行设置当前页面的样式。
本实施例中的步骤S303~S305与上述实施例中的步骤S202~S204的操作基本相同,本实施例中不再赘述。
综上所述,本实施例提供的设置浏览器中页面的样式的方法,在兼容层叠样式表变量的浏览器环境中,直接使用当前页面原生的层叠样式表变量设置当前页面的样式,处理速度较快。在不兼容层叠样式表变量的浏览器环境中,对当前页面的层叠样式表变量进行转化,生成浏览器支持的目标层叠样式表文件,使得当前浏览器可以使用目标层叠样式表文件设置当前页面的样式,抹平终端差异,使采用层叠样式表变量设置页面的样式的方案可以跨平台,跨终端的使用,使用者只需要维护一套样式方案,降低维护成本。且在不同链接方式下均能快速获得层叠样式表变量的文本内容。
请参考图4,图4示出了根据本申请的设置浏览器中页面的样式的方法的又一个实施例的流程400。该设置浏览器中页面的样式的方法包括以下步骤:
S401,响应于检测到当前浏览器不支持层叠样式表变量,确定当前页面的层叠样式表变量的链接方式;响应于层叠样式表变量的链接方式为内链,通过当前页面中的第一预设标签获取层叠样式表变量的文本内容;响应于层叠样式表变量的链接方式为外链,基于当前页面中的第二预设标签发送获取请求获取层叠样式表变量的文本内容,层叠样式表变量的文本内容包括变量定义语句和变量使用语句,变量定义语句包括变量名和变量值,变量使用语句包括属性名和属性值,属性值用于调用变量定义语句中的变量名。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以响应于检测到当前浏览器不支持层叠样式表变量,确定当前页面的层叠样式表变量的链接方式。
其中,确定层叠样式表变量的链接方式可以通过当前页面的数据中和CSS相关的编程语言(即,CSS规则)确定。外链式,是将层叠样式表变量内容单独写在一个以.css为扩展名的文件,然后在当前页面中通过link标签指向该文件的地址,将层叠样式表变量链接到当前页面中。内链式,是直接在当前页面的style标签中写明层叠样式表变量的内容。因此,通过当前页面的link标签和/或style标签可以直接确定层叠样式表变量的链接方式。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以响应于层叠样式表变量的链接方式为内链,通过当前页面中的第一预设标签获取层叠样式表变量的文本内容。其中,第一预设标签可以为style标签。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以响应于层叠样式表变量的链接方式为外链,基于当前页面中的第二预设标签发送获取请求获取层叠样式表变量的文本内容。其中,第二预设标签可以为link标签。
该步骤的操作与上述实施例中步骤S302的操作基本相同,本实施例中不再赘述。
S402,响应于检测到第一预设标签和/或第二预设标签被更新,根据被更新的标签获取层叠样式表变量的文本内容。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以响应于检测到第一预设标签和/或第二预设标签被更新,根据被更新的标签获取层叠样式表变量的层叠样式表变量的文本内容。其中,第一预设标签可以为style标签,第二预设标签可以为link标签。
其中,style标签被更新,可以指style标签中写明的层叠样式表变量的内容被更新。link标签被更新,可以指link标签指向的地址被更新。
本实施例中,在检测第一预设标签和/或第二预设标签是否被更新时,可以编写Javascript程序,以预设频率获取style标签和/或link标签的内容,检测style标签和/或link标签是否被更新。
或者,还可以采用观察器或监听器检测style标签和/或link标签是否被更新,例如,可以采用MutationObserver(变异观察器)或HttpSessionAttributeListener(监听器)进行检测。通过观察器或监听器检测第一预设标签和/或第二预设标签是否被更新,结构简单且反应速度较快。
通过该步骤,可以根据被更新的标签实时更新层叠样式表变量的文本内容,层叠样式表变量的文本内容的时效性较强,进而使生成的目标层叠样式表文件的准确率较高。
S403,从层叠样式表变量的文本内容中提取变量定义语句中的变量值,以及变量使用语句。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以从层叠样式表变量的文本内容中提取变量定义语句中的变量值,以及变量使用语句。
S404,采用变量定义语句中的变量值替代变量使用语句中的属性值,生成包括属性名和变量值的目标层叠样式表文件。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以采用变量定义语句中的变量值替代变量使用语句中的属性值,生成包括属性名和变量值的目标层叠样式表文件。
S405,将目标层叠样式表文件插入到当前页面中,以使浏览器使用目标层叠样式表文件设置当前页面的样式。
本实施例中,设置浏览器中页面的样式的方法的执行主体可以将目标层叠样式表文件插入到当前页面中,以使浏览器使用目标层叠样式表文件进行设置当前页面的样式。
本实施例中的步骤S403~S405与上述实施例中的步骤S202-S204的操作基本相同,在此不再赘述。
综上所述,本实施例提供的设置浏览器中页面的样式的方法,在不兼容层叠样式表变量的浏览器环境中,对当前页面的层叠样式表变量进行转化,生成浏览器支持的目标层叠样式表文件,使得当前浏览器可以使用目标层叠样式表文件设置当前页面的样式,抹平终端差异,使采用层叠样式表变量呈现页面样式的方案可以跨平台,跨终端的使用,使用者只需要维护一套样式方案,降低维护成本。且可以根据被更新的标签实时更新层叠样式表变量的文本内容,层叠样式表变量的文本内容的时效性较强,进而使生成的目标层叠样式表文件的准确率较高。
请参考图5,图5示出了根据本申请的设置浏览器中页面的样式的装置的一个实施例的示意图。该设置浏览器中页面的样式的装置包括:
文本内容获取模块501,被配置为响应于检测到当前浏览器不支持层叠样式表变量,获取当前页面的层叠样式表变量的文本内容,层叠样式表变量的文本内容包括变量定义语句和变量使用语句,变量定义语句包括变量名和变量值,变量使用语句包括属性名和属性值,属性值用于调用变量定义语句中的变量名。文本内容提取模块502,被配置为从层叠样式表变量的文本内容中提取变量定义语句中的变量值,以及变量使用语句。目标文件生成模块503,被配置为采用变量定义语句中的变量值替代变量使用语句中的属性值,生成包括属性名和变量值的目标层叠样式表文件。目标文件插入模块504,被配置为将目标层叠样式表文件插入到当前页面中,以使浏览器使用目标层叠样式表文件设置当前页面的样式。
综上所述,本实施例提供的设置浏览器中页面的样式的装置,在不兼容层叠样式表变量的浏览器环境中对当前页面的层叠样式表变量进行转化,生成浏览器支持的目标层叠样式表文件,使得当前浏览器可以根据目标层叠样式表文件设置当前页面的样式,抹平终端差异,使采用层叠样式表变量设置页面的样式的方案可以跨平台,跨终端的使用,使用者只需要维护一套样式方案,降低维护成本。
在本实施例的一些可选的实现方式中,文本内容获取模块501包括:确定单元(图中未示出),被配置确定当前页面的层叠样式表变量的链接方式。第一文本内容获取单元(图中未示出),被配置为响应于层叠样式表变量的链接方式为内链,通过当前页面中的第一预设标签获取层叠样式表变量的文本内容。第二文本内容获取单元(图中未示出),被配置为响应于层叠样式表变量的链接方式为外链,基于当前页面中的第二预设标签发送获取请求获取层叠样式表变量的文本内容。
在本实施例的一些可选的实现方式中,文本内容获取模块501,进一步被配置为响应于检测到第一预设标签和/或第二预设标签被更新,根据被更新的标签获取层叠样式表变量的文本内容。
在本实施例的一些可选的实现方式中,文本内容获取模块501,进一步被配置为响应于观察器或监听器检测到第一预设标签和/或第二预设标签被更新,根据被更新的标签获取层叠样式表变量的文本内容。
根据本申请的实施例,本申请还提供了一种电子设备和一种可读存储介质。
如图6所示,是根据本申请实施例的设置浏览器中页面的样式的方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和/或者要求的本申请的实现。
如图6所示,该电子设备包括:一个或多个处理器601、存储器602,以及用于连接各部件的接口,包括高速接口和低速接口。各个部件利用不同的总线互相连接,并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理,包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如,耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中,若需要,可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样,可以连接多个电子设备,各个设备提供部分必要的操作(例如,作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图6中以一个处理器601为例。
存储器602即为本申请所提供的非瞬时计算机可读存储介质。其中,所述存储器存储有可由至少一个处理器执行的指令,以使所述至少一个处理器执行本申请所提供的设置浏览器中页面的样式的方法。本申请的非瞬时计算机可读存储介质存储计算机指令,该计算机指令用于使计算机执行本申请所提供的设置浏览器中页面的样式的方法。
存储器602作为一种非瞬时计算机可读存储介质,可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块。处理器601通过运行存储在存储器602中的非瞬时软件程序、指令以及模块,从而执行服务器的各种功能应用以及数据处理,即实现上述方法实施例中的设置浏览器中页面的样式的方法。
存储器602可以包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需要的应用程序;存储数据区可存储根据提高浏览器兼容性的电子设备的使用所创建的数据等。此外,存储器602可以包括高速随机存取存储器,还可以包括非瞬时存储器,例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中,存储器602可选包括相对于处理器601远程设置的存储器,这些远程存储器可以通过网络连接至提高浏览器兼容性的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
设置浏览器中页面的样式的电子设备还可以包括:输入装置603和输出装置604。处理器601、存储器602、输入装置603和输出装置604可以通过总线或者其他方式连接,图6中以通过总线连接为例。
输入装置603可接收输入的数字或字符信息,以及产生与设置浏览器中页面的样式的电子设备的用户设置以及功能控制有关的键信号输入,例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置604可以包括显示设备、辅助照明装置(例如,LED)和触觉反馈装置(例如,振动电机)等。该显示设备可以包括但不限于,液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中,显示设备可以是触摸屏。
此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令,并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的,术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如,磁盘、光盘、存储器、可编程逻辑装置(PLD)),包括,接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。
为了提供与用户的交互,可以在计算机上实施此处描述的系统和技术,该计算机具有:用于向用户显示信息的显示装置(例如,CRT(阴极射线管)或者LCD(液晶显示器)监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网(LAN)、广域网(WAN)和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。
应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本申请公开的技术方案所期望的结果,本文在此不进行限制。
上述具体实施方式,并不构成对本申请保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等,均应包含在本申请保护范围之内。
Claims (11)
1.一种设置浏览器中页面的样式的方法,包括:
响应于检测到当前浏览器不支持层叠样式表变量,获取当前页面的层叠样式表变量的文本内容,所述层叠样式表变量的文本内容包括变量定义语句和变量使用语句,所述变量定义语句包括变量名和变量值,所述变量使用语句包括属性名和属性值,所述属性值用于调用所述变量定义语句中的变量名;
从所述层叠样式表变量的文本内容中提取所述变量定义语句中的变量值,以及所述变量使用语句;
采用所述变量定义语句中的变量值替代所述变量使用语句中的属性值,生成包括所述属性名和所述变量值的目标层叠样式表文件;
将所述目标层叠样式表文件插入到所述当前页面中,以使所述浏览器使用所述目标层叠样式表文件设置所述当前页面的样式。
2.根据权利要求1所述的方法,所述方法还包括:
响应于检测到当前浏览器支持层叠样式表变量,不对当前页面的层叠样式表变量执行操作。
3.根据权利要求1所述的方法,其中,所述获取当前页面的层叠样式表变量的文本内容,包括:
确定所述当前页面的层叠样式表变量的链接方式;
响应于所述层叠样式表变量的链接方式为内链,通过所述当前页面中的第一预设标签获取层叠样式表变量的文本内容;
响应于所述层叠样式表变量的链接方式为外链,基于所述当前页面中的第二预设标签发送获取请求获取层叠样式表变量的文本内容。
4.根据权利要求3所述的方法,其中,所述获取当前页面的层叠样式表变量的文本内容,还包括:
响应于检测到所述第一预设标签和/或所述第二预设标签被更新,根据被更新的标签获取所述层叠样式表变量的文本内容。
5.根据权利要求4所述的方法,所述检测到所述第一预设标签和/或所述第二预设标签被更新,包括:
采用观察器或监听器检测到所述第一预设标签和/或所述第二预设标签被更新。
6.一种确定浏览器中页面的样式的装置,包括:
文本内容获取模块,被配置为响应于检测到当前浏览器不支持层叠样式表变量,获取当前页面的层叠样式表变量的文本内容,所述层叠样式表变量的文本内容包括变量定义语句和变量使用语句,所述变量定义语句包括变量名和变量值,所述变量使用语句包括属性名和属性值,所述属性值用于调用所述变量定义语句中的变量名;
文本内容提取模块,被配置为从所述文本内容中提取所述变量定义语句中的变量值,以及所述变量使用语句;
目标文件生成模块,被配置为采用所述变量定义语句中的变量值替代所述变量使用语句中的属性值,生成包括所述属性名和所述变量值的目标层叠样式表文件;
目标文件插入模块,被配置为将所述目标层叠样式表文件插入到所述当前页面中,以使所述浏览器使用所述目标层叠样式表文件设置所述当前页面的样式。
7.根据权利要求6所述的装置,其中,所述文本内容获取模块包括:
链接方式确定单元,被配置为确定所述当前页面的层叠样式表变量的链接方式;
第一文本内容获取单元,被配置为响应于所述层叠样式表变量的链接方式为内链,通过所述当前页面中的第一预设标签获取文本内容;
第二文本内容获取单元,被配置为响应于所述层叠样式表变量的链接方式为外链,基于所述当前页面中的第二预设标签发送获取请求获取层叠样式表变量的文本内容。
8.根据权利要求7所述的装置,所述文本内容获取模块,进一步被配置为响应于检测到所述第一预设标签和/或所述第二预设标签被更新,根据被更新的标签获取所述层叠样式表变量的文本内容。
9.根据权利要求8所述的装置,所述文本内容获取模块,进一步被配置为响应于采用观察器或监听器检测到所述第一预设标签和/或所述第二预设标签被更新,根据被更新的标签获取所述层叠样式表变量的文本内容。
10.一种电子设备,包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行权利要求1-5中任一项所述的方法。
11.一种存储有计算机指令的非瞬时计算机可读存储介质,所述计算机指令用于使所述计算机执行权利要求1-5中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010948312.0A CN112099791B (zh) | 2020-09-10 | 2020-09-10 | 设置浏览器中页面的样式的方法、装置、设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010948312.0A CN112099791B (zh) | 2020-09-10 | 2020-09-10 | 设置浏览器中页面的样式的方法、装置、设备和存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112099791A CN112099791A (zh) | 2020-12-18 |
CN112099791B true CN112099791B (zh) | 2023-11-10 |
Family
ID=73752355
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010948312.0A Active CN112099791B (zh) | 2020-09-10 | 2020-09-10 | 设置浏览器中页面的样式的方法、装置、设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112099791B (zh) |
Citations (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110083383A (zh) * | 2019-03-18 | 2019-08-02 | 平安普惠企业管理有限公司 | 浏览器式样兼容方法、装置、计算机设备及存储介质 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20130159839A1 (en) * | 2011-12-14 | 2013-06-20 | Microsoft Corporation | Semantic compression of cascading style sheets |
-
2020
- 2020-09-10 CN CN202010948312.0A patent/CN112099791B/zh active Active
Patent Citations (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110083383A (zh) * | 2019-03-18 | 2019-08-02 | 平安普惠企业管理有限公司 | 浏览器式样兼容方法、装置、计算机设备及存储介质 |
Non-Patent Citations (1)
Title |
---|
CSS样式表在网页设计与制作中的应用;袁野;;河南科技(第20期);全文 * |
Also Published As
Publication number | Publication date |
---|---|
CN112099791A (zh) | 2020-12-18 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
EP3822828A2 (en) | Method, apparatus, device and storage medium for determining page theme and computer program product | |
US11829436B2 (en) | Method and apparatus of pre-rendering page, electronic device, and storage medium | |
CN111625738B (zh) | App目标页面的唤起方法、装置、设备和存储介质 | |
CN113010827B (zh) | 页面渲染方法、装置、电子设备以及存储介质 | |
CN110727434B (zh) | 渲染方法、装置、电子设备及存储介质 | |
CN109558323B (zh) | 用于调试页面的系统、方法和装置 | |
US20210209526A1 (en) | Landing page processing method, device and medium | |
CN109582317B (zh) | 用于调试寄宿应用的方法和装置 | |
CN113031946A (zh) | 一种渲染页面组件的方法和装置 | |
CN112346612B (zh) | 页面显示方法和装置 | |
CN115309470B (zh) | 微件的加载方法、装置、设备以及存储介质 | |
US11294651B2 (en) | Code execution method, device, and rendering apparatus | |
CN114398023A (zh) | 生成文件的方法、配置页面的方法和装置 | |
CN113656737A (zh) | 网页内容展示方法、装置、电子设备以及存储介质 | |
US20210117170A1 (en) | Wrapping method, registration method, device, and rendering apparatus | |
WO2023169193A1 (zh) | 用于生成智能合约的方法和装置 | |
CN112099791B (zh) | 设置浏览器中页面的样式的方法、装置、设备和存储介质 | |
CN109408057B (zh) | 自动生成代码的方法、装置、介质和计算设备 | |
CN113342450B (zh) | 页面处理的方法、装置、电子设备及计算机可读介质 | |
US11977850B2 (en) | Method for dialogue processing, electronic device and storage medium | |
CN112148596B (zh) | 生成深度学习框架的报错内容的方法、装置 | |
CN112148279B (zh) | 日志信息处理方法、装置、电子设备和存储介质 | |
CN113656041A (zh) | 数据处理方法、装置、设备及存储介质 | |
CN114489639A (zh) | 文件生成方法、装置、设备及存储介质 | |
CN112947918A (zh) | 数据展示方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |