CN103761098A - 一种网页换肤方法、装置及浏览器 - Google Patents

Abstract

本发明提供了一种网页换肤方法、装置及浏览器，其包括：接收用户的更换界面风格的请求，其中，更换界面风格的请求包括界面风格的属性信息；根据该界面风格的属性信息生成相应的脚本；在网页文档对象模型开始加载时注入并执行该脚本，使相应的界面风格生效。采用本发明的技术方案，通过向页面中注入脚本，使得即使在没有提供界面风格更换功能的页面上，也能通过浏览器内置的该项功能来满足用户个性化需求。

Description

一种网页换肤方法、装置及浏览器

技术领域

本发明涉及浏览器开发技术领域，尤其涉及一种网页换肤方法、装置及浏览器。

背景技术

在万维网(WEB)前端开发中，一些网页提供给用户根据自己喜好选择界面风格的个性化功能，例如，背景色、文字颜色以及字体大小等，也即，为网页添加换肤效果。这既可以提供美观的界面又可以满足用户的个性化需求。

该功能的实现，是在网页设计时为网页提供几个不同的级联样式表(Cascading Style Sheet，CSS)文件，WEB页面是根据该文件中描述的样式对页面进行渲染，因此，根据用户的选择在超文本标记语言(Hypertext MarkupLanguage，HTML)中加载不同的CSS文件，可以使得网页具有相应的界面。

但是，如果网页在前端开发时没有给用户提供这种功能，用户将无法选择自己喜欢的界面，不能满足用户个性化需求。

发明内容

本发明针对上述问题，提出了一种网页换肤方法及装置，将换肤功能由浏览器本身来实现，即使网页没有提供换肤功能也可以让用户选择自己喜欢的界面皮肤，使得所有的网页都具有换肤功能。

本发明提供了一种网页换肤方法，主要技术方案如下：

接收用户的更换界面风格的请求，其中，所述更换界面风格的请求包括界面风格的属性信息；

根据所述界面风格的属性信息，生成相应的脚本；

在网页文档对象模型开始加载时，注入并执行所述脚本，使相应的界面风格生效。

本发明还提供了一种网页换肤装置，主要技术方案如下：

接收单元，用于接收用户的更换界面风格的请求，该请求包括界面风格的属性信息；

脚本生成单元，用于根据所述界面风格的属性信息，生成相应的脚本；

脚本注入和执行单元，用于在网页文档对象模型开始加载时，注入所述脚本，使相应的界面风格生效。

本发明还提供了一种浏览器，包括上述网页换肤装置。

采用本发明的技术方案，通过向页面中注入脚本，使得用户在任何网页上都能实现界面风格的更换，满足用户个性化的需求。

附图说明

下面将参照附图描述本发明的具体实施例，其中：

图1示出了本发明实施例的网页换肤方法的流程图；

图2示出了本发明实施例的网页换肤装置的结构示意图。

具体实施方式

为了使本发明的技术方案及优点更加清楚明白，以下结合附图对本发明的示例性实施例进行进一步详细的说明，显然，所描述的实施例仅是本发明的一部分实施例，而不是所有实施例的穷举。

本发明实施例提供了一种利用浏览器实现网页换肤的方法，图1示出了本发明实施例的网页换肤方法的流程图，包括：

在浏览器客户端开发阶段或二次开发阶段，首先要确定浏览器客户端具备脚本注入和执行的能力。

S101、接收用户的更换界面风格的请求，其中，更换界面风格的请求包括界面风格的属性信息。

在本发明实施例中，当用户需要修改网页的界面风格时，在浏览器客户端页面，通过交互式操作发起更换界面风格的请求。该更换界面风格的请求中包含有界面风格的属性信息，例如，可以是界面风格标识、背景颜色、字体颜色等，对于每个属性又可以有不同的颜色，比如背景色为海洋蓝、玫瑰红等等，但不仅限于此。

用户通过交互式操作发起更换界面风格的请求的方式可以有多种形式，比如说，可以在浏览器客户端开发时添加一个新的菜单，比如：在现有“工具”菜单下面增加一个子菜单，提供几个默认的可选皮肤，如背景色为海洋蓝或玫瑰红等。还可以通过在网页浏览器的地址栏输入一个预设的网址，该网址对应的站点预先存有一段脚本，在地址栏上输入该网址便可以在浏览器页面上注入该脚本，用户可以在打开的页面上或弹出的窗口中进行选择自己喜欢的界面风格等。当然，为了进一步满足用户个性化的需求，本发明实施例还提出可以给用户提供一个编辑页面，让用户自己定义喜欢的主题，自行选择背景色、字体颜色等皮肤样式属性信息。本发明实施例对选择的方式不作限制。

S102、根据界面风格的属性信息生成对应的脚本。

一般情况下，可以根据界面风格的属性信息生成相应的脚本，例如，CSS代码，替换掉浏览器脚本中的相应部分，从而构造几个不同界面风格。

优选的，可以将这些样式表的优先级设置为高于原有界面风格的样式表的优先级，以覆盖原有的网页皮肤。例如，可以使用!important来标注，这样该样式表具有最高的优先级。

比如：

浏览器的脚本为：

var e=document.createElement(′style′)；

e.setAttribute(′type′，′text／css′)；

e.setAttribute(′id′，′界面风格标识′)；

e.appendChild(document.createTextNode(′界面风格所使用的css代码′))；

var head=document.getElementsByTagName(′HEAD′)[0]；

head.appendChild(e)；

对于上述脚本中“界面风格所使用的CSS代码”，举例如下：

第一个界面风格所使用的CSS代码：

body{font-size：12px!important；background-color：black!important；color：white!important；}

第二个界面风格所使用的CSS代码：

body{font-size：20px!important；background-color：white!important；color：black!important；}

S103、在网页文档对象模型(HTML DOM)开始加载时，注入并执行上述脚本，使相应的界面风格生效。

当然，如果不需要该界面风格或要取消自定义的界面风格时，则可以向该网页注入删除样式脚本，根据“界面风格标识”来找到该界面风格的样式表并将其删除即可。删除样式脚本举例如下：

var e=document.getElementById(′界面风格唯一标识′)；

if(e)e.parentNode.removeNode(e)。

浏览器客户端还可以记录用户针对当前网页所选的皮肤样式，当用户下一次打开该网页时，网页依然可以呈现为用户本次所选的皮肤样式。

采用本发明实施例所提供的技术方案，通过向页面中注入脚本，使得用户在任何网页上，都能实现界面风格的更换。

基于同一发明构思，本发明实施例还提供了一种网页换肤装置，如图2所示，该装置包括：

接收单元201，用于接收用户的更换界面风格的请求，其中，该更换界面风格的请求中包括界面风格的属性信息。

脚本生成单元202，用于根据界面风格的属性信息，生成相应的脚本。

脚本注入和执行单元203，用于在网页文档对象模型DOM开始加载时，注入并执行上述脚本，使相应的界面风格生效。

可选的，当不需要该界面风格或要取消自定义的界面风格时，脚本注入和执行单元203还用于，注入删除样式脚本，根据界面风格标识来找到该界面风格的样式表并将其删除。

采用本发明实施例所提供的技术方案，通过向页面中注入脚本，使得用户在任何网页上，都能实现界面风格的更换。

基于同一发明构思，本发明实施例还提供了一种浏览器，该浏览器包括上述所提供的网页换肤装置。

本发明实施例所提供的浏览器，可通过向网页中注入脚本、在页面中构造样式表，使得用户在任何网页上都可以享受个性化的界面风格更换服务。

以上实施例仅用以说明本发明的技术方案，而非对其进行限制。因此，在不背离本发明的精神及其实质的情况下，本领域技术人员可作出各种改变、替换和变型。很显然，但这些改变、替换和变型都应涵盖于本发明权利要求的保护范围之内。

Claims (7)

1.一种网页换肤方法，包括以下步骤：

接收用户的更换界面风格的换肤请求，其中，所述更换界面风格的请求中包括界面风格的属性信息；

根据所述界面风格的属性信息，生成相应的脚本；

在网页文档对象模型开始加载时，注入并执行所述脚本，使相应的界面风格生效。

2.如权利要求1所述的网页换肤方法，其特征在于，所述界面风格的属性信息包括界面风格标识、背景颜色和字体颜色中的一个或几个。

3.如权利要求2所述的网页换肤方法，其特征在于，当需要取消所述界面风格时，注入删除样式脚本，根据所述界面风格标识找到对应的界面风格的脚本，并将其删除。

4.一种网页换肤装置，其特征在于，包括：

接收单元，用于接收用户的更换界面风格的请求，该请求包括界面风格的属性信息；

脚本生成单元，用于根据所述界面风格的属性信息，生成相应的脚本；

脚本注入和执行单元，用于在网页文档对象模型开始加载时，注入所述脚本，使相应的界面风格生效。

5.如权利要求4所述的网页换肤装置，其特征在于，所述接收单元具体用于接收用户发送的界面风格标识、背景颜色以及字体颜色中的一个或几个。

6.如权利要求4所述的网页换肤装置，其特征在于，当需要取消所述界面风格时，所述脚本注入和执行单元，还用于向所述网页注入删除样式脚本，根据所述界面风格标识找到相应的界面风格的脚本并将其删除。

7.一种浏览器，其特征在于，包括如权利要求4-6中任一所述的网页换肤装置。

Images