一種網頁換膚方法、裝置及瀏覽器的制造方法
【專利摘要】本發(fā)明提供了一種網頁換膚方法、裝置及瀏覽器，其包括：接收用戶的更換界面風格的請求，其中，更換界面風格的請求包括界面風格的屬性信息；根據該界面風格的屬性信息生成相應的腳本；在網頁文檔對象模型開始加載時注入并執(zhí)行該腳本，使相應的界面風格生效。采用本發(fā)明的技術方案，通過向頁面中注入腳本，使得即使在沒有提供界面風格更換功能的頁面上，也能通過瀏覽器內置的該項功能來滿足用戶個性化需求。
【專利說明】一種網頁換膚方法、裝置及瀏覽器
【技術領域】
[0001]本發(fā)明涉及瀏覽器開發(fā)【技術領域】，尤其涉及一種網頁換膚方法、裝置及瀏覽器。
【背景技術】
[0002]在萬維網(WEB)前端開發(fā)中，一些網頁提供給用戶根據自己喜好選擇界面風格的個性化功能，例如，背景色、文字顏色以及字體大小等，也即，為網頁添加換膚效果。這既可以提供美觀的界面又可以滿足用戶的個性化需求。
[0003]該功能的實現，是在網頁設計時為網頁提供幾個不同的級聯(lián)樣式表(CascadingStyle Sheet, CSS)文件，WEB頁面是根據該文件中描述的樣式對頁面進行渲染，因此，根據用戶的選擇在超文本標記語言(Hypertext Markup Language, HTML)中加載不同的CSS文件，可以使得網頁具有相應的界面。
[0004]但是，如果網頁在前端開發(fā)時沒有給用戶提供這種功能，用戶將無法選擇自己喜歡的界面，不能滿足用戶個性化需求。

【發(fā)明內容】

[0005]本發(fā)明針對上述問題，提出了一種網頁換膚方法及裝置，將換膚功能由瀏覽器本身來實現，即使網頁沒有提供換膚功能也可以讓用戶選擇自己喜歡的界面皮膚，使得所有的網頁都具有換膚功能。
[0006]本發(fā)明提供了一種網頁換膚方法，主要技術方案如下:
[0007]接收用戶的更換界面風格的請求，其中，所述更換界面風格的請求包括界面風格的屬性信息；
[0008]根據所述界面風格的屬性信息，生成相應的腳本；
[0009]在網頁文檔對象模型開始加載時，注入并執(zhí)行所述腳本，使相應的界面風格生效。
[0010]本發(fā)明還提供了一種網頁換膚裝置，主要技術方案如下:
[0011]接收單元，用于接收用戶的更換界面風格的請求，該請求包括界面風格的屬性信息；
[0012]腳本生成單元，用于根據所述界面風格的屬性信息，生成相應的腳本；
[0013]腳本注入和執(zhí)行單元，用于在網頁文檔對象模型開始加載時，注入所述腳本，使相應的界面風格生效。
[0014]本發(fā)明還提供了 一種瀏覽器，包括上述網頁換膚裝置。
[0015]采用本發(fā)明的技術方案，通過向頁面中注入腳本，使得用戶在任何網頁上都能實現界面風格的更換，滿足用戶個性化的需求。
【專利附圖】

【附圖說明】
[0016]下面將參照附圖描述本發(fā)明的具體實施例，其中:
[0017]圖1示出了本發(fā)明實施例的網頁換膚方法的流程圖；[0018]圖2示出了本發(fā)明實施例的網頁換膚裝置的結構示意圖。
【具體實施方式】
[0019]為了使本發(fā)明的技術方案及優(yōu)點更加清楚明白，以下結合附圖對本發(fā)明的示例性實施例進行進一步詳細的說明，顯然，所描述的實施例僅是本發(fā)明的一部分實施例，而不是所有實施例的窮舉。
[0020]本發(fā)明實施例提供了一種利用瀏覽器實現網頁換膚的方法，圖1示出了本發(fā)明實施例的網頁換膚方法的流程圖，包括:
[0021]在瀏覽器客戶端開發(fā)階段或二次開發(fā)階段，首先要確定瀏覽器客戶端具備腳本注入和執(zhí)行的能力。
[0022]S101、接收用戶的更換界面風格的請求，其中，更換界面風格的請求包括界面風格的屬性信息。
[0023]在本發(fā)明實施例中，當用戶需要修改網頁的界面風格時，在瀏覽器客戶端頁面，通過交互式操作發(fā)起更換界面風格的請求。該更換界面風格的請求中包含有界面風格的屬性信息，例如，可以是界面風格標識、背景顏色、字體顏色等，對于每個屬性又可以有不同的顏色，比如背景色為海洋藍、玫瑰紅等等，但不僅限于此。
[0024]用戶通過交互式操作發(fā)起更換界面風格的請求的方式可以有多種形式，比如說，可以在瀏覽器客戶端開發(fā)時添加一個新的菜單，比如:在現有“工具”菜單下面增加一個子菜單，提供幾個默認的可選皮膚，如背景色為海洋藍或玫瑰紅等。還可以通過在網頁瀏覽器的地址欄輸入一個預設的網址，該網址對應的站點預先存有一段腳本，在地址欄上輸入該網址便可以在瀏覽器頁面上注入該腳本，用戶可以在打開的頁面上或彈出的窗口中進行選擇自己喜歡的界面風格等。當然，為了進一步滿足用戶個性化的需求，本發(fā)明實施例還提出可以給用戶提供一個編輯頁面，讓用戶自己定義喜歡的主題，自行選擇背景色、字體顏色等皮膚樣式屬性信息。本發(fā)明實施例對選擇的方式不作限制。
[0025]S102、根據界面風格的屬性信息生成對應的腳本。
[0026]一般情況下，可以根據界面風格的屬性信息生成相應的腳本，例如，CSS代碼，替換掉瀏覽器腳本中的相應部分，從而構造幾個不同界面風格。
[0027]優(yōu)選的，可以將這些樣式表的優(yōu)先級設置為高于原有界面風格的樣式表的優(yōu)先級，以覆蓋原有的網頁皮膚。例如，可以使用！important來標注，這樣該樣式表具有最高的優(yōu)先級。
[0028]比如:
[0029]瀏覽器的腳本為:
[0030]var e=document.createElement(' style')；
[0031]e.setAttribute (' type' , ' text / css')；
[0032]e.setAttribute {' id','界面風格標識')；
[0033]e.appendChi Id (document.createTextNode ('界面風格所使用的 css 代碼'))；
[0034]var head=document.getElementsByTagName{' HEAD' ) [0]；
[0035]head.appendChild (e)；
[0036]對于上述腳本中“界面風格所使用的CSS代碼”，舉例如下:[0037]第一個界面風格所使用的CSS代碼:
[0038]body {font-size: 12px!important ；background-color:black!important ；color:white!important ；}
[0039]第二個界面風格所使用的CSS代碼:
[0040]body {font-size:20px!important ；background-color:white!important ；color:black!important ；}
[0041]S103、在網頁文檔對象模型(HTML DOM)開始加載時，注入并執(zhí)行上述腳本，使相應的界面風格生效。
[0042]當然，如果不需要該界面風格或要取消自定義的界面風格時，則可以向該網頁注入刪除樣式腳本，根據“界面風格標識”來找到該界面風格的樣式表并將其刪除即可。刪除樣式腳本舉例如下:
[0043]var e=document.getElementById(/ 界面風格唯一標識')；
[0044]if (e) e.parentNode.removeNode (e)。
[0045]瀏覽器客戶端還 可以記錄用戶針對當前網頁所選的皮膚樣式，當用戶下一次打開該網頁時，網頁依然可以呈現為用戶本次所選的皮膚樣式。
[0046]采用本發(fā)明實施例所提供的技術方案，通過向頁面中注入腳本，使得用戶在任何網頁上，都能實現界面風格的更換。
[0047]基于同一發(fā)明構思，本發(fā)明實施例還提供了一種網頁換膚裝置，如圖2所示，該裝置包括:
[0048]接收單元201，用于接收用戶的更換界面風格的請求，其中，該更換界面風格的請求中包括界面風格的屬性信息。
[0049]腳本生成單元202，用于根據界面風格的屬性信息，生成相應的腳本。
[0050]腳本注入和執(zhí)行單元203，用于在網頁文檔對象模型DOM開始加載時,注入并執(zhí)行上述腳本，使相應的界面風格生效。
[0051]可選的，當不需要該界面風格或要取消自定義的界面風格時，腳本注入和執(zhí)行單元203還用于，注入刪除樣式腳本，根據界面風格標識來找到該界面風格的樣式表并將其刪除。
[0052]采用本發(fā)明實施例所提供的技術方案，通過向頁面中注入腳本，使得用戶在任何網頁上，都能實現界面風格的更換。
[0053]基于同一發(fā)明構思，本發(fā)明實施例還提供了一種瀏覽器，該瀏覽器包括上述所提供的網頁換膚裝置。
[0054]本發(fā)明實施例所提供的瀏覽器，可通過向網頁中注入腳本、在頁面中構造樣式表，使得用戶在任何網頁上都可以享受個性化的界面風格更換服務。
[0055]以上實施例僅用以說明本發(fā)明的技術方案，而非對其進行限制。因此，在不背離本發(fā)明的精神及其實質的情況下，本領域技術人員可作出各種改變、替換和變型。很顯然，但這些改變、替換和變型都應涵蓋于本發(fā)明權利要求的保護范圍之內。
【權利要求】
1.一種網頁換膚方法，包括以下步驟: 接收用戶的更換界面風格的換膚請求，其中，所述更換界面風格的請求中包括界面風格的屬性信息； 根據所述界面風格的屬性信息，生成相應的腳本； 在網頁文檔對象模型開始加載時，注入并執(zhí)行所述腳本，使相應的界面風格生效。
2.如權利要求1所述的網頁換膚方法，其特征在于，所述界面風格的屬性信息包括界面風格標識、背景顏色和字體顏色中的一個或幾個。
3.如權利要求2所述的網頁換膚方法，其特征在于，當需要取消所述界面風格時，注入刪除樣式腳本，根據所述界面風格標識找到對應的界面風格的腳本，并將其刪除。
4.一種網頁換膚裝置，其特征在于，包括: 接收單元，用于接收用戶的更換界面風格的請求，該請求包括界面風格的屬性信息； 腳本生成單元，用于根據所述界面風格的屬性信息，生成相應的腳本； 腳本注入和執(zhí)行單元，用于在網頁文檔對象模型開始加載時，注入所述腳本，使相應的界面風格生效。
5.如權利要求4所述的網頁換膚裝置，其特征在于，所述接收單元具體用于接收用戶發(fā)送的界面風格標識、背景顏色以及字體顏色中的一個或幾個。
6.如權利要求4所述的網頁換膚裝置，其特征在于，當需要取消所述界面風格時，所述腳本注入和執(zhí)行單元，還用于向所述網頁注入刪除樣式腳本，根據所述界面風格標識找到相應的界面風格的腳本并將其刪除。
7.—種瀏覽器，其特征在于，包括如權利要求4-6中任一所述的網頁換膚裝置。
【文檔編號】G06F9/44GK103761098SQ201410032321
【公開日】2014年4月30日 申請日期:2014年1月23日 優(yōu)先權日:2014年1月23日
【發(fā)明者】徐友春, 馬健, 李丁盼 申請人:貝殼網際（北京）安全技術有限公司