CN101685447A

CN101685447A - 在Web页面片段剪切和混搭中处理CSS的方法和系统

Info

Publication number: CN101685447A
Application number: CN200810166018A
Authority: CN
Inventors: 赵石顽; 高伟; 俞益琴; 付荣耀; 张强
Original assignee: International Business Machines Corp
Current assignee: International Business Machines Corp
Priority date: 2008-09-28
Filing date: 2008-09-28
Publication date: 2010-03-31

Abstract

本发明公开了用于在Web页面片段剪切和混搭中对CSS进行处理的方法和系统。该方法包括：解析该Web页面，并构造相应的DOM树；识别希望从该Web页面剪切出的至少一个片段，从而找到片段的片段根节点和片段子节点；发现从片段根节点到DOM树根节点的片段根节点的祖先节点；获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值；为片段根节点的样式计算这样一个计算值，该计算值不但继承了片段根节点的祖先节点的样式的指定值，而且结合了片段根节点本身的样式的指定值；将片段根节点的样式的计算值和片段子节点的样式的指定值关联到DOM树的该片段，使得与混搭WEB页面的其他片段的样式不互相影响。

Description

在Web页面片段剪切和混搭中处理CSS的方法和系统

技术领域

本发明涉及计算机技术，更具体地，本发明涉及在Web页面片段剪切和混搭中对CSS进行处理的方法和系统。

背景技术

层叠样式表(Cascading Style Sheets，CSS)用来描述以标记语言(例如超文本标记语言(HTML))编写的文档的表现(例如颜色、字体、布局以及其他方面)。目前，Web页面开发人员广泛使用CSS来表现Web页面。并且，绝大多数浏览器也支持CSS。

随着互联网的高速发展，越来越多的服务正在通过Web应用向用户提供。为了利用各个Web应用提供的资源，混搭技术，即剪切不同的Web页面的片段，并将剪切的片段混搭在一起，以组成新的Web页面，变得非常流行。

混搭技术的一个挑战是，在进行Web页面片段剪切时，怎样有效地处理该Web页面片段相关联的CSS。特别是当从具有不同的样式表的Web页面剪切片段，并把片段混搭在一起时，怎么样避免样式冲突。

一种简单、直接的现有方案是，当从一个Web页面剪切片段时，从该Web页面的HTML代码的“头部(head)”剪切所有的样式，并且不做任何修改地将剪切的所有样式移到新的Web页面的HTML代码中。如果剪切的片段中所包含的元素具有内联样式，那么将内联样式与元素一起剪切出来，并保持它们不动。

图1示意性地示出了当从一个Web页面剪切片段时，在现有方案中，如何处理该Web页面片段相关联的CSS。

如图1所示，在从该Web页面剪切出希望的DOM树之外(110)，只是简单地从该Web页面的HTML代码的“头部(head)”剪切所有的样式(120)。

这样的现有方案的问题是：第一，样式分布于整个HTML代码文件，而现有方案只剪切所要混搭的Web页面的HTML头部中的样式；第二，尽管所要剪切的部分Web页面可能只涉及HTML代码的头部中很小一部分CSS样式，现有方案也要剪切HTML代码的头部中的所有CSS样式；第三，当混搭来自不同Web页面的片段时，很有可能发生样式冲突，与一个片段相关的样式可能影响另外一个片段的样式，导致混搭的Web页面混乱。

发明内容

为此，本发明提出一种用于在Web页面片段剪切和混搭中处理CSS的方法和系统。

根据本发明的第一方面，提出了一种用于在Web页面片段剪切和混搭中对层叠样式表CSS进行处理的方法，包括：a)解析该Web页面，并构造相应的文档对象模型DOM树；b)识别希望从该Web页面剪切出的至少一个片段，从而找到片段的片段根节点和片段子节点；c)发现从片段根节点到DOM树根节点的片段根节点的祖先节点；d)获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值；e)为片段根节点的样式计算这样一个计算值，该计算值不但继承了片段根节点的祖先节点的样式的指定值，而且结合了片段根节点本身的样式的指定值；以及f)将片段根节点的样式的计算值和片段子节点的样式的指定值关联到DOM树的该片段，使得与混搭WEB页面的其他片段的样式不互相影响。

根据本发明的第二方面，提出了一种用于在Web页面片段剪切和混搭中对层叠样式表CSS进行处理的系统，包括：解析和构造装置，用于解析该Web页面，并构造相应的DOM树；识别装置，用于识别希望从该Web页面剪切出的至少一个片段，从而找到片段的片段根节点和片段子节点；发现装置，用于发现从片段根节点到DOM树根节点的片段根节点的祖先节点；获得装置，用于获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值；计算装置，用于为片段根节点的样式计算这样一个计算值，该计算值不但继承了片段根节点的祖先节点的样式的指定值，而且结合了片段根节点本身的样式的指定值；关联装置，用于将片段根节点的样式的计算值和片段子节点的样式的指定值关联到DOM树的该片段，使得与混搭WEB页面的其他片段的样式不互相影响。

根据本发明，与一个片段相关的样式不会影响另外一个片段的样式，从而不会导致混搭的Web页面混乱。

附图说明

通过以下结合附图的说明，并且随着对本发明的更全面了解，本发明的其他目的和效果将变得更加清楚和易于理解，其中：

图2示出了根据本发明的实施方式的用于在Web页面片段剪切和混搭中对CSS进行处理的方法的流程图。

图3示意性地示出了一个DOM树。

图4示意性地示出了从一个DOM树剪切多个片段的情形。

图5示意性地示出了将Web页面的所有CSS样式映射到样式列表过程。

图6示出了根据本发明的实施方式的用于在Web页面片段剪切和混搭中对CSS进行处理的系统的方框图。

在所有的上述附图中，相同的标号表示具有相同、相似或相应的特征或功能。

具体实施方式

首先介绍将CSS样式加入到HTML代码中的方式。现有技术中存在以下四种主要方式。

1.链接到外部样式表，例如：

2.在HTML代码中嵌入样式，例如：

<！--

body{font:10pt″Arial″}

h1{font:15pt/17pt″Arial″；font-weight:bold；color:maroon}

p{font:10pt/12pt″Arial″；color:black}

-->

</style>

3.引进样式表，例如：

<！--

@import url(http://www.example.com/example2.css)；

@import url(/stylesheets/example3.css)；

p{font:10pt/12pt″Arial″；color:black}

-->

</STYLE>

4.内联样式，例如：

可以使用上述4种方式中的一种或多种将CSS样式加入到HTML代码。当使用上述4种方式中的多种将CSS样式加入到HTML代码，并且样式定义有重叠时，浏览器在应用样式时根据就近原则来应用样式。例如，假定在一个Web页面中有三处对某个元素的样式的定义，一处是在外部的CSS文件中，一处是在HTML代码的head标签中的样式块中，另一处是在这个元素的标签内，那么根据就近原则此元素最终使用的样式是在标签内定义的样式。

样式的层叠性就是继承性，样式的继承规则是，外部的元素样式会保留下来继承给这个元素所包含的其他元素的样式。事实上，所有嵌套在外层元素中的内层元素的样式都会继承指定给外层元素的样式。

考虑如下的例子(其中div标签中嵌套有p标签)：

div{color:red；font-size:9pt}

p{color:blue}

根据上述样式，段落的文字为蓝色9号字。

可以看到，段落的文字大小样式(9号字)是继承div的样式的，而颜色样式(蓝色)则是依照最后定义的。

首先，在步骤S202，对Web页面进行解析，并构造DOM(文档对象模型)树。

例如，可利用如下的JavaScript代码来解析Web页面，得到相对应的DOM树。

var widget＝document.createElement(″div″)；

dojo.io.bind({

url:URL，

mimetype:″text/plain″，

load:function(type，text，e){

widget.innerHTML＝text；

var parser＝new dojo.xml.Parse()；

var dom＝parser.parseElement(widget，null，true)；

}//load

})；//bind

}

又例如，可以采用Firefox浏览器中的DOM Inspector工具来获得一个Web页面的DOM树。

然后，在步骤S204，通过搜索在步骤S202得到的DOM树来识别希望从该Web页面剪切出的至少一个片段，从而找到片段的片段根节点和片段子节点。

在本发明的该实施方式中，例如，可以通过这样的一个JavaScript函数document.getElementsByTags(“input”)，来找到DOM树的所有输入节点。

图3示意性地示出了一个DOM树。

如图3所示，方框302中的节点是希望剪切的节点，包括作为片段根节点的节点303和作为片段子节点的节点304、305、306、307、308。

当然，可以从一个DOM树剪切多个片段。

图4示意性地示出了从一个DOM树剪切多个片段的情形。

如图4所示，方框402和方框404中的这些节点是希望剪切的节点。其中方框402包括作为片段根节点的节点405和作为片段子节点的节点406、407、408，方框404包括作为片段根节点的节点409和作为片段子节点的节点410、411、412、413、414。

然后，在步骤S206，发现从片段根节点到DOM树根节点的片段根节点的祖先节点。

如图3所示，从片段根节点303到DOM树根节点301的路径包括节点309和310。其中节点309是片段根节点303的父节点，节点310是节点309的父节点，而DOM树根节点301是节点310的父节点。总之，节点309、310、301都是片段根节点303的祖先节点。

然后，在步骤S208，将该Web页面的所有CSS样式映射到样式列表。

图5的左边是CSS样式，而右边是样式列表。

左边的CSS样式500，例如可以是通过前文介绍的四种方法中的一种或多种加入到HTML代码中的。

右边包括3个样式列表。最上面的是标签样式列表510。列表510包括列512和列514。其中列512指示的是标签名称，而列514指示的是每个标签的样式。列表510示意性地示出了两个标签“ul”和“li”的样式。

中间的是标识符样式列表520。列表520包括列522和列524。其中列522指示的是标识符值，而列524指示的是每个标识符的样式。列表520示意性地示出了一个标识符“Additional-links”的样式。

最下面的是类样式列表530。列表530包括列532和列534。其中列532指示的是类名称，而列534指示的是每个类的样式。列表530示意性地示出了一个类“portlet-content”的样式。

当然，步骤S208可以发生在步骤S202-S206之前。更具体地，步骤S208只要发生在下面将要描述的步骤S210之前即可。

本领域的技术人员应该理解，步骤S208是可选的，执行步骤S208只是为了方便以后的步骤，例如步骤S210。

在步骤S210，根据在前面步骤S208中得到的样式列表，获得片段根节点、片段子节点、以及片段根节点的祖先节点的样式的指定值。

其中，指定值是使用前面所述的将CSS样式加入到HTML代码的4种方法中的一种或多种明确指定的。

由于在前面步骤S208中得到的样式列表中记载了每一个元素(节点)的样式(指定值)，当碰到片段根节点、片段子节点、以及片段根节点的祖先节点中的一个节点时，可以通过查找在前面步骤S208中得到的样式列表，来获得样式的指定值。

例如，如果碰到的片段根节点、片段子节点、以及片段根节点的祖先节点中的一个节点是ul，那么通过查询列表510，得到其指定值：

margin:0pt；

padding:0.5em 0pt 0.5em 1.5em。

然后，在步骤S212，为片段根节点的样式计算这样一个计算值，该计算值不但继承了片段根节点的祖先节点的样式的指定值，而且结合了片段根节点本身的样式的指定值。

这样，由于片段子节点可以继承片段根节点的样式，而片段根节点又继承了其祖先节点的所有样式，因此剪切的整个片段将具有与原始Web页面中的效果相同的表现效果。

接下来，在步骤S214，对片段根节点的样式的计算值和/或片段子节点的样式的指定值进行处理。

例如，考虑布局因素，对片段根节点的样式的计算值进行处理。

如果片段根节点的样式中具有位置样式，那么将位置样式从中移除。将位置样式从片段根节点的样式中移除，是为了避免可能与其他剪切的片段重叠。

此外，如果有，计算片段根节点的不但与其祖先节点相关，而且与其兄弟节点相关的属性样式(例如大小样式)信息。

在本发明的另一个实施方式中，在步骤S214中，根据用户的指令，修改片段根节点的样式的计算值和/或片段子节点的样式的指定值。例如，用户可能希望将剪切的片段中的某个段落的文字的颜色从原来的红色变成绿色。

本领域的技术人员应当理解，步骤S214不是必需的，而是可选的。

然后，在步骤S216，将处理后的片段根节点的样式的计算值和片段子节点的样式的指定值关联到DOM树的该片段，使得与混搭WEB页面的其他片段的样式不互相影响。

在本发明的一个实施方式中，将片段根节点的样式的计算值和片段子节点的样式的指定值以内联样式的形式插入到DOM树中。

在本发明的另一个实施方式中，用一个元素，例如<DIV>元素或其他元素作为封装器，来封装片段根节点和片段子节点，并为该元素分配一个唯一的ID(只作为例子，在其他实施方式中，也可以使用唯一的类名称，唯一的属性名称)，通过增加封装器作为容器，来修改片段根节点的样式和片段子节点的样式的选择符，然后，将片段根节点的样式和片段子节点的样式封装进一个CSS文件或块，并将CSS文件或块链接到封装器。

以下用一个例子来具体说明上述实施方式。

参看如下代码：

<table style＝″margin:0pt；padding:0pt 0pt 0.5em；color:rgb(68，68，

68)；display:inline；″>

some text

</td>

some text

</td>

</tr>

</table>

该代码包括4个元素：table、tr、td、td，每个元素具有相应的样式，其中，table元素对应于片段根节点，tr元素、td元素、td元素对应于片段子节点。

通过上述实施方式对上述代码进行处理后，得到如下的代码：

<style>

#wrapper_id table{

margin:0pt；padding:0pt 0pt 0.5em；color:rgb(68，68，68)；

display:inline；

}

#wrapper_id table tr{

color:rgb(68，68，68)；

}

#wrapper_id table tr td{

font-size:85％；font-weight:normal；

}

</style>

<table>

<tr>

</tr>

</table>

</div>

这里，用元素<DIV>作为封装器，并为该元素分配一个唯一的ID：wrapper_id。通过增加封装器作为容器，来修改table样式和tr、td样式的选择符。然后，将table的样式和tr、td的样式封装进一个CSS文件或块，并将CSS文件或块链接到封装器。

在本发明的一个实施方式中，在步骤S216之前，将片段根节点和片段子节点从DOM树中剪切出来。

在本发明的另一个实施方式中，在步骤S216之后，将片段根节点和片段子节点从DOM树中剪切出来。

图6示出了根据本发明的一种实施方式的、用于在Web页面片段剪切和混搭中对CSS进行处理的系统的方框图。

如图6所示，该系统600包括：解析和构造装置610，用于解析该Web页面，并构造相应的DOM树；识别装置620，用于识别希望从该Web页面剪切出的至少一个片段，从而找到片段的片段根节点和片段子节点；发现装置630，用于发现从片段根节点到DOM树根节点的片段根节点的祖先节点；获得装置640，用于获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值；计算装置650，用于为片段根节点的样式计算这样一个计算值，该计算值不但继承了片段根节点的祖先节点的样式的指定值，而且结合了片段根节点本身的样式的指定值；处理装置660，用于对片段根节点的样式的计算值和/或片段子节点的样式的指定值进行处理；关联装置670，用于将处理后的片段根节点的样式的计算值和片段子节点的样式的指定值关联到DOM树的该片段，使得与混搭WEB页面的其他片段的样式不互相影响。

例如，处理装置660考虑布局因素，对片段根节点的样式的计算值进行处理。

在本发明的另一个实施方式中，处理装置660根据用户的指令，修改片段根节点的样式的计算值和/或片段子节点的样式的指定值。例如，用户可能希望将剪切的片段中的某个段落的文字的颜色从原来的红色变成绿色。

本领域的技术人员应当理解，处理装置660不是必需的，而是可选的。

在本发明的一个实施方式中，关联装置670将片段根节点的样式的计算值和片段子节点的样式的指定值以内联样式的形式插入到DOM树中。

在本发明的又一个实施方式中，关联装置670用一个元素作为封装器，来封装片段根节点和片段子节点，并为该元素分配一个唯一的能识别它的标识，通过增加封装器作为容器，来修改片段根节点的样式和片段子节点的样式的选择符，然后，将片段根节点的样式和片段子节点的样式封装进一个CSS文件或块，并将CSS文件或块链接到封装器。

在本发明的一个实施方式中，获得装置640通过查找事先准备好的映射有Web页面的所有CSS样式的样式列表，获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值。

应当注意，为了使本发明更容易理解，上面的描述省略了对于本领域的技术人员来说是公知的、并且对于本发明的实现可能是必需的更具体的一些技术细节。

提供本发明的说明书的目的是为了说明和描述，而不是用来穷举或将本发明限制为所公开的形式。对本领域的普通技术人员而言，许多修改和变更都是显而易见的。本领域技术人员还应该理解，可以通过软件、硬件、固件或者它们的结合的方式，来实现本发明实施例中的方法和装置。例如，本发明可以实现为一种计算机程序产品，包含存储在计算机可读的介质上的程序代码，其在被计算机执行时执行本发明实施例中所述的方法。

因此，选择并描述实施方式是为了更好地解释本发明的原理及其实际应用，并使本领域普通技术人员明白，在不脱离本发明实质的前提下，所有修改和变更均落入由权利要求所限定的本发明的保护范围之内。

Claims

1.一种用于在Web页面片段剪切和混搭中对层叠样式表CSS进行处理的方法，包括：

a)解析Web页面，并构造相应的文档对象模型DOM树；

b)识别希望从该Web页面剪切出的至少一个片段，从而找到片段的片段根节点和片段子节点；

c)发现从片段根节点到DOM树根节点的片段根节点的祖先节点；

d)获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值；

e)为片段根节点的样式计算这样一个计算值，该计算值不但继承了片段根节点的祖先节点的样式的指定值，而且结合了片段根节点本身的样式的指定值；

f)将片段根节点的样式的计算值和片段子节点的样式的指定值关联到DOM树的该片段，使得与混搭WEB页面的其他片段的样式不互相影响。

2.根据权利要求1所述的方法，其中在步骤e)和步骤f)之间，还包括步骤：

g)对片段根节点的样式的计算值和/或片段子节点的样式的指定值进行处理。

3.根据权利要求2所述的方法，其中步骤g)包括：

从片段根节点的样式中移除位置样式。

4.根据权利要求2所述的方法，其中步骤g)包括：

计算片段根节点的不但与其祖先节点相关，而且与其兄弟节点相关的属性样式信息。

5.根据权利要求2所述的方法，其中步骤g)包括：

根据用户的指令，修改片段根节点的样式的计算值和/或片段子节点的样式的指定值。

6.根据权利要求1所述的方法，其中步骤f)包括：

将片段根节点的样式的计算值和片段子节点的样式的指定值以内联样式的形式插入到DOM树中。

7.根据权利要求1所述的方法，其中在步骤f)包括：

用一个元素作为封装器，来封装片段根节点和片段子节点，并为该元素分配一个唯一的能识别它的标识，通过增加封装器作为容器，来修改片段根节点的样式和片段子节点的样式的选择符，然后，将片段根节点的样式和片段子节点的样式封装进一个CSS文件或块，并将CSS文件或块链接到封装器。

8.根据权利要求1所述的方法，其中通过查找事先准备好的映射有Web页面的所有CSS样式的样式列表，获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值。

9.一种用于在Web页面片段剪切和混搭中对层叠样式表CSS进行处理的系统，包括：

解析和构造装置，用于解析该Web页面，并构造相应的文档对象模型DOM树；

识别装置，用于识别希望从该Web页面剪切出的至少一个片段，从而找到片段的片段根节点和片段子节点；

发现装置，用于发现从片段根节点到DOM树根节点的片段根节点的祖先节点；

获得装置，用于获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值；

计算装置，用于为片段根节点的样式计算这样一个计算值，该计算值不但继承了片段根节点的祖先节点的样式的指定值，并且结合了片段根节点本身的样式的指定值；

关联装置，用于将片段根节点的样式的计算值和片段子节点的样式的指定值关联到DOM树的该片段，使得与混搭WEB页面的其他片段的样式不互相影响。

10.根据权利要求9所述的系统，其中在计算装置和关联装置之间还包括：

处理装置，用于对片段根节点的样式的计算值和/或片段子节点的样式的指定值进行处理。

11.根据权利要求10所述的系统，其中处理装置用于：

从片段根节点的样式中移除位置样式。

12.根据权利要求10所述的系统，其中处理装置用于：

13.根据权利要求10所述的系统，其中处理装置用于：

14.根据权利要求9所述的系统，其中关联装置用于：

15.根据权利要求9所述的系统，其中关联装置用于：

16.根据权利要求9所述的系统，其中获得装置用于通过查找事先准备好的映射有Web页面的所有CSS样式的样式列表，获得片段子节点、片段根节点、片段根节点的祖先节点的样式的指定值。