CN105989126A

CN105989126A - 一种网页显示方法及装置

Info

Publication number: CN105989126A
Application number: CN201510083227.1A
Authority: CN
Inventors: 王超
Original assignee: Alibaba Group Holding Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2015-02-15
Filing date: 2015-02-15
Publication date: 2016-10-05
Anticipated expiration: 2035-02-15
Also published as: CN105989126B

Abstract

本申请公开了一种网页显示方法及装置。所述方法包括在当前网页向其他网页载入时获取当前网页的层叠样式表CSS文件和JS文件；分别改写所述CSS文件内的类选择器名称和所述JS文件内的类选择器名称；及基于改写后的CSS文件内的类选择器名称和JS文件内的类选择器名称，显示当前网页。本申请实施例提供的网页显示方法及装置，采用动态生成类选择器名称的方式，使得当前网页的类选择器不会与其他网页的类选择器产生重名冲突，避免了因类选择器重名冲突而带来的网页相互干扰等问题。

Description

一种网页显示方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种网页显示方法及装置。

背景技术

随着互联网的普及，社会真正进入了信息时代，而互联网也已成为了一种有别于电视、广播和报纸的全新媒体，且逐渐成为了工作、生活和学习中不可缺少的一部分。

人们利用电脑、手机等工具，可以从互联网上获取自己感兴趣的信息，而在信息的展示过程中，时常会受到一些干扰，导致最终展示给用户的页面出现错乱，尤其在网页的浏览过程中，这个问题时常出现，其主要发生在异步脚本载入的情况下.

究其原因，主要是类选择器存在重名问题，即当一个异步载入的页面模块载入当前的页面时，异步载入页面模块的样式表内的类选择器很容易与当前页面的类选择器重名，从而导致两个页面相互干扰，影响页面的正常显示。

发明内容

本申请实施例提供一种网页显示方法及装置，用以解决现有技术中页面因类选择器冲突而导致相互干扰的问题。

本申请实施例提供了一种网页显示方法，包括：

在当前网页向其他网页载入时，获取当前网页的层叠样式表CSS文件和JS文件；

分别改写所述CSS文件内的类选择器名称和所述JS文件内的类选择器名称；及

基于改写后的CSS文件内的类选择器名称和JS文件内的类选择器名称，显示当前网页。

本申请实施例还提供一种网页显示方法，包括：

在当前网页向其他网页载入时，读取当前网页的层叠样式表CSS文件和JS文件；

将所述CSS文件转换成待改写的代码串；

将所述待改写的代码串和JS文件发送至终端，以供终端对所述代码串和JS文件内的类选择器名称分别进行改写并基于改写后的类选择器名称来显示当前网页。

本申请实施例还提供一种网页显示装置，包括：

获取模块，用于在当前网页向其他网页载入时获取当前网页的层叠样式表CSS文件和JS文件；

第一改写模块，用于改写所述CSS文件内的类选择器名称；

第二改写模块，用于改写所述JS文件内的类选择器名称使其与所述CSS文件内的类选择器名称保持一致；及

用于基于改写后的CSS文件内的类选择器名称和JS文件内的类选择器名称，显示当前网页。

本申请实施例提供的网页显示方法及装置，采用动态生成类选择器名称的方式，使得当前网页的类选择器不会与其他网页的类选择器产生重名冲突，避免了因类选择器重名冲突而带来的网页相互干扰等问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例提供的网页显示方法的流程图；

图2为本申请实施例提供的网页显示装置的结构图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

请参阅图1和图2所示，本申请公开一种网页显示方法及装置，可用于两个网页或多个网页相互载入时的场景，避免网页之间发生冲突而影响网页的显示。本申请实施例以当前网页向其他网页载入作为应用场景，为了避免当前网页载入时，对其他网页造成干扰影响，采用本申请实施例所述的网页显示方法及装置可有效改善这一问题。所述网页显示方法包括：

S101：在当前网页向其他网页载入时，获取当前网页的层叠样式表(Cascading Style Sheets，CSS)文件和JS(JavaScript，JS)文件。

本申请较佳实施例中，获取所述CSS文件的过程，主要包括：接收由服务器发出的包含有CSS文件代码的JS代码串。

所述JS代码串的形成过程为：

首先，提取CSS文件中的代码，并将代码转换成一个代码串；

然后，将所述代码串转换成JS代码。

值得一提的是，这么做是为了避免当前网页的CSS文件被浏览器直接解析执行，而导致无法对CSS文件进行修改。本申请将CSS文件代码转成一个字符串形式的JS代码，使其可被Java执行，同时阻止CSS文件被浏览器解析。

举例来说，首先，提取CSS文件的代码，如下：

.header{

width:100％；

background:#eee；

height:20px；

background:url(”img/img.jpeg”)；

}

再将上述格式的代码转化成一个代码串，并转换成JS代码，例如：转换成JSONP(JSON with Padding，是JSON的一种“使用模式”)的请求，如下：

callback(“.header{width:100％；background: #eee； height: 20px；background:url(\”img/img.jpeg\”)；}”)

所述新增的“callback”，在实际应用中可以是任意代码，不做限制，其转换的过程为，在原代码的首尾处添加callback(“和”)字符，形成callback(“原代码”)样式，其中，若原代码中存在”字符，则在”字符前添加\字符，即原代码中的”字符被改成了\”字符。

S102：分别改写所述CSS文件内的类选择器名称和所述JS文件内的类选择器名称。

本申请较佳实施例中，改写CSS文件内的类选择器(即class选择器)名称，主要包括：

首先，找出CSS文件内的类选择器，由于CSS文件的代码已在S101中被转换成一串JS代码，因此，从该串JS代码中找出的类选择器即是原CSS文件的类选择器。

然后，采用JS随机函数生成随机字符串，并将该随机生成的字符串添加至所述类选择器的名称中。

举例来说：首先，找出CSS文件中的类选择器，由于在CSS文件中类选择器的名称通常以“.class_name”的形式出现，因而，在如下述JS代码串中：

.content{background:#f5f5f5；}.model.banner{margin:5px auto；}

所述JS代码串中，“.content”、“.model”及“.banner”即为CSS文件的类选择器，字符“.”后面的“content”、“model”及“banner”即为类选择器的名称。

然后，用JS随机函数生成随机字符串“c1234”，并写入至前述JS代码串内的类选择器名称中，从而形成新的类选择器名称，如下：

.c1234content{background:#f5f5f5；}.c1234model.c1234banner{margin:5pxauto；}

值得注意的是，所述随机字符串“c1234”直接添加至原类选择器中字符“.”的后面，且仅针对字符“}”和“{”之间的“.”进行添加，而在“{”和“}”以内的代码均为该类选择器对应的属性和属性值，需保持原貌，不做更改。

由此，将原类选择器“.content”、“.model”及“.banner”分别更改成了“.c1234content”、“.c1234model”及“.c1234banner”，改变了类选择器的名称。

对于所述JS文件内的类选择器名称的更改，可采用以上相同的改写方式。由于JS文件是通过类选择器名称(即class_name)来访问CSS文件中类选择器的属性的，因此，当CSS文件内的类选择器名称发生改变后，其对应的JS文件也需作出相应的修改，使JS文件内类选择器的名称与CSS文件内改名后的类选择器名称保持一致。

具体来说，可采用相同的方式改写JS文件内的类选择器名称，主要包括：将CSS文件中更名后的类选择器名称替换JS文件中的类选择器名称，实践中，可以将所述JS随机函数所生成的随机字符串以相同的方式添加至JS文件中的类选择器名称中，保持JS文件和CSS文件内所对应的类选择器的名称相同，用于实现JS文件对CSS文件的调用。

举例来说，找到JS文件内中包含的如下超文本标记语言(Hyper TextMark-up Language，HTML)代码：<div class＝"model banner test">，再将前述JS随机函数所生成的随机字符串“c1234”添加至前述html代码内的类选择器名称中，得到代码：<div class＝"c1234model c1234banner c1234content">，由此完成对JS文件内类选择器的更名。

值得注意的是，本申请较佳实施例中，需对JS文件和CSS文件内的所有类选择器进行更名处理，而本实施例以CSS文件和JS文件内的“.content”、“.model”及“.banner”类选择器为例进行的阐述，仅为举例示范，对于未列出的其他类选择器的更名过程，在此不再赘述。

可见，由于所述CSS文件和JS文件内的类选择器名称中包含有随机字符串，因而，将当前网页载入到其他网页中去时，当前网页的这些类选择器的名称与其他网页CSS文件内的类选择器名称不会产生重名冲突，从而避免当前网页与其他网页之间后续发生相互干扰，影响页面展示。

S103：基于改写后的CSS文件内的类选择器名称和JS文件内的类选择器名称，显示当前网页。

本申请较佳实施例中，显示当前网页，主要包括：

首先，获取当前网页的超文本标记语言(Hyper Text Mark-up Language，HTML)文件；

其次，将类选择器名称更改后的CSS文件代码全部插入HTML文件中，且以页内<STYLE>的方式插入，即将CSS文件代码置于<STYLE>...</STYLE>标签之间，而整个<STYLE>...</STYLE>结构可插入于html文件内的代码中。

然后，通过JS文件调用所述CSS文件代码；

最后，通过浏览器解析执行所述HTML文件、CSS文件和JS文件。

本申请还公开一种网页显示装置，如图2所示，该装置包括：

获取模块，用于在当前网页向其他网页载入时获取当前网页的CSS文件和JS文件；

第一改写模块，用于改写所述CSS文件内的类选择器名称；

第二改写模块，用于改写所述JS文件内的类选择器名称使其与所述CSS文件内的类选择器名称保持一致；

显示模块，用于基于改写后的CSS文件内的类选择器名称和JS文件内的类选择器名称，显示当前网页。

在本申请较佳实施例中，所述获取模块中包含：

接收单元，用于接收由服务器端发出的包含有CSS文件代码的JS代码串。

在本申请较佳实施例中，所述第一改写模块包括：

随机数生成单元，其内设JS随机函数，用于生成随机字符串；及

第一写入单元，用于将所述随机字符串写入至所述JS代码串内的类选择器名称中。

在本申请较佳实施例中，所述第二改写模块包含：

第二写入单元，用于将所述随机字符串写入至JS文件内的类选择器名称中使得JS文件和所述CSS文件内所对应的类选择器的名称保持一致。

在本申请较佳实施例中，所述显示模块包含：

读取模块，用于读取当前网页的超文本标记语言HTML文件；

插入模块，用于将所述CSS文件代码全部插入所述HTML文件中；

调用模块，用于调用所述CSS文件代码；及

执行模块，用于解析所述HTML文件、CSS文件和JS文件。

当然，在本申请另一实施方式中，还公开了一种网页显示方法，其可广泛应用于服务器端，该网页显示方法包括：

在当前网页向其他网页载入之前读取当前网页的层叠样式表CSS文件和JS文件；

将所述CSS文件转换成待改写的代码串；

其中，将所述CSS文件转换成待改写的代码串的过程，包括：提取所述CSS文件中的代码并将该代码转换成包含有类选择器名称的JS代码串。本实施例中的方法步骤的原理可参前文所述，在此不再赘述。

综上所述，本申请所述的网页显示方法及装置，可应用于网页异步载入过程中，例如，当异步载入一个广告网页插件至当前页面时，通过将动态生成的随机字符加入至类选择器名称中，达到对该广告网页CSS文件中类选择器更名的目的，从而避免了该广告网页内的类选择器与当前页面中其他的类选择器发生重名冲突，防止了两个页面因类选择器冲突的影响而导致相互干扰、无法正常显示的问题。

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

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

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

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

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

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

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

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims

1.一种网页显示方法，其特征在于，包括：

2.如权利要求1所述的方法，其特征在于，获取当前网页的层叠样式表CSS文件，包括：

接收由服务器发出的包含有CSS文件代码的JS代码串。

3.如权利要求2所述的方法，其特征在于，改写所述CSS文件内的类选择器名称，包括：

采用JS随机函数生成随机字符串；

将所述随机生成的字符串写入至所述CSS文件内类选择器的名称中。

4.如权利要求3所述的方法，其特征在于，将所述随机生成的字符串写入至所述CSS文件内类选择器的名称中，包括：

将所述随机生成的字符串添加至所述JS代码串内类选择器名称的前面。

5.如权利要求3或4所述的方法，其特征在于，改写所述JS文件内的类选择器名称，包括：

将所述随机生成的字符串写入至JS文件中的类选择器名称中，使得JS文件和所述CSS文件内所对应的类选择器的名称保持一致。

6.如权利要求1所述的方法，其特征在于，显示当前网页，包括：

读取当前网页的超文本标记语言HTML文件；

将改写后的CSS文件内的代码插入所述HTML文件中；

通过JS文件调用所述CSS文件代码；

通过浏览器解析执行所述HTML文件、CSS文件和JS文件。

7.一种网页显示方法，其特征在于，包括：

将所述CSS文件转换成待改写的代码串；

将所述待改写的代码串和JS文件发送至终端，以供终端对所述代码串和JS文件内的类选择器名称分别进行改写，并基于改写后的类选择器名称来显示当前网页。

8.如权利要求7所述的方法，其特征在于，将所述CSS文件转换成待改写的代码串，包括：

提取所述CSS文件中的代码并将该代码转换成包含有类选择器名称的JS代码串。

9.一种网页显示装置，其特征在于，包括：

第一改写模块，用于改写所述CSS文件内的类选择器名称；

10.如权利要求9所述的装置，其特征在于，所述获取模块中包含：

11.如权利要求10所述的装置，其特征在于，所述第一改写模块包括：

12.如权利要求11所述的装置，其特征在于，所述第二改写模块包含：

13.如权利要求12所述的装置，其特征在于，所述显示模块包含：

读取模块，用于读取当前网页的超文本标记语言HTML文件；

插入模块，用于将所述CSS文件代码全部插入所述HTML文件中；

调用模块，用于调用所述CSS文件代码；及

执行模块，用于解析所述HTML文件、CSS文件和JS文件。