瀏覽器頁面顯示方法、裝置、瀏覽器及終端的制作方法
【專利摘要】本發(fā)明涉及一種瀏覽器頁面顯示方法、裝置、瀏覽器及終端，其方法包括：監(jiān)測用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令；在監(jiān)測到所述指令后且接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至瀏覽器頁面；執(zhí)行腳本代碼，通過渲染引擎將夜間模式的網(wǎng)頁樣式表作用到瀏覽器頁面，得到夜間模式的瀏覽器頁面；顯示夜間模式的瀏覽器頁面。本發(fā)明通過注入動態(tài)創(chuàng)建夜間網(wǎng)頁樣式表的腳本代碼到原本的頁面，并執(zhí)行這段腳本代碼，從而將瀏覽器頁面渲染成夜間的效果，避免了現(xiàn)有技術(shù)加遮罩帶來的頁面顯示模糊的問題，提高了終端瀏覽器夜間模式的頁面顯示效果。
【專利說明】瀏覽器頁面顯示方法、裝置、瀏覽器及終端
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)【技術(shù)領(lǐng)域】，尤其涉及一種瀏覽器頁面顯示方法、裝置、瀏覽器及終端。
【背景技術(shù)】
[0002]通常用戶在使用瀏覽器瀏覽網(wǎng)頁時，由于瀏覽器背景色太亮，如果瀏覽器時間開的長了，眼睛受到較長時間的刺激會感覺越來越不舒服。
[0003]為了解決上述問題，目前在PC終端瀏覽器以及手機瀏覽器上大都設(shè)置了夜間模式功能。在夜間模式下，網(wǎng)頁背景色將變暗，從而可以降低網(wǎng)頁對眼睛的刺激，尤其是減小弱光環(huán)境下網(wǎng)頁對眼睛的刺激，用戶閱讀網(wǎng)頁將感覺更加柔和，因此夜間模式更適合夜間閱讀，而且比較省電。
[0004]目前，終端瀏覽器上的夜間模式大多通過在網(wǎng)頁上添加遮罩，把原來的頁面顯示結(jié)果變暗變淡，以此來達到夜間模式的效果。但是，這種通過加遮罩的方式，在將原本的渲染結(jié)果變暗變淡的同時，也會使頁面渲染結(jié)果變得模糊，甚至難于辨認。
【發(fā)明內(nèi)容】
[0005]本發(fā)明實施例提供一種瀏覽器頁面顯示方法、裝置、瀏覽器及終端，旨在提高終端瀏覽器夜間模式的頁面顯示效果。
[0006]本發(fā)明實施例提出一種瀏覽器頁面顯示方法，包括:
[0007]監(jiān)測用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令；
[0008]在監(jiān)測到所述指令后且接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面；
[0009]執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面；
[0010]顯示所述夜間模式的瀏覽器頁面。
[0011]此外，本發(fā)明實施例還提出一種瀏覽器頁面顯示裝置，包括:
[0012]監(jiān)測模塊，用于監(jiān)測用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令；
[0013]代碼注入模塊，用于在所述監(jiān)測模塊監(jiān)測到所述指令后，且接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面；
[0014]執(zhí)行模塊，用于執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面；
[0015]顯示模塊，用于顯示所述夜間模式的瀏覽器頁面。
[0016]此外，本發(fā)明實施例還提出一種終端瀏覽器，包括如上所述的裝置。
[0017]此外，本發(fā)明實施例還提出一種終端，包括如上所述的裝置。
[0018]本發(fā)明實施例提出的一種瀏覽器頁面顯示方法、裝置、瀏覽器及終端，通過隱藏瀏覽器頁面，接收到頁面數(shù)據(jù)進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至瀏覽器頁面；執(zhí)行腳本代碼，通過渲染引擎將夜間模式的網(wǎng)頁樣式表作用到瀏覽器頁面，得到夜間模式的瀏覽器頁面并顯示，由此通過注入動態(tài)創(chuàng)建夜間網(wǎng)頁樣式表的腳本代碼到原本的頁面，并執(zhí)行這段腳本代碼，從而將瀏覽器頁面渲染成夜間的效果，避免了現(xiàn)有技術(shù)加遮罩帶來的頁面顯示模糊的問題，提高了終端瀏覽器夜間模式的頁面顯示效果O
【專利附圖】
【附圖說明】
[0019]圖1是本發(fā)明瀏覽器頁面顯示方法第一實施例的流程示意圖；
[0020]圖2是本發(fā)明實施例中網(wǎng)頁樣式表的結(jié)構(gòu)示意圖；
[0021]圖3是采用本發(fā)明實施例方案與現(xiàn)有技術(shù)的添加遮罩方案所得到的頁面顯示對比結(jié)果示意圖；
[0022]圖4是本發(fā)明瀏覽器頁面顯示方法第二實施例的流程示意圖；
[0023]圖5是本發(fā)明瀏覽器頁面顯示裝置第一實施例的功能模塊示意圖；
[0024]圖6是本發(fā)明瀏覽器頁面顯示裝置第二實施例的功能模塊示意圖。
[0025]為了使本發(fā)明的技術(shù)方案更加清楚、明了，下面將結(jié)合附圖作進一步詳述。
【具體實施方式】
[0026]本發(fā)明實施例涉及的技術(shù)術(shù)語包括:
[0027]Javascript:一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作；
[0028]css:是Cascading Style Sheet的縮寫,譯為“層疊樣式表單”,也稱級聯(lián)樣式表，用于(增強)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。
[0029]本發(fā)明實施例解決方案主要是:通過注入動態(tài)創(chuàng)建夜間網(wǎng)頁樣式表的腳本代碼到原本的頁面，并執(zhí)行這段腳本代碼，從而將瀏覽器頁面渲染成夜間的效果，避免加遮罩帶來的頁面顯示模糊的問題。
[0030]如圖1所示，本發(fā)明第一實施例提出一種瀏覽器頁面顯示方法，包括:
[0031]步驟S101，監(jiān)測用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令；
[0032]其中，瀏覽器可以為PC終端瀏覽器，也可以為手機等移動終端瀏覽器，比如UC瀏覽器、QQ瀏覽器等。
[0033]當用戶需要將瀏覽器頁面顯示為夜間模式效果時，瀏覽器首先隱藏當前瀏覽器頁面，以防止用于夜間模式的網(wǎng)頁樣式表還沒注入，瀏覽器頁面就已經(jīng)渲染出來，即會出現(xiàn)短暫時間的日間效果。
[0034]其中，判斷用戶是否需要將瀏覽器頁面顯示為夜間模式效果，可以采用以下方式:在用戶首次操作瀏覽器時即觸發(fā)瀏覽器頁面顯示為夜間模式的指令，或者，在終端操作界面上設(shè)置選項按鈕，用戶可以根據(jù)需要選擇相應(yīng)的按鈕來觸發(fā)瀏覽器頁面顯示為夜間模式的指令。此外，該選項按鈕還可以在夜間模式功能設(shè)置成功之后，作為后續(xù)夜間模式與日間模式之間的切換按鈕，同時，用戶還可以根據(jù)需要操作相應(yīng)的選項按鈕，來開啟或關(guān)閉夜間模式功能。
[0035]步驟S102，在監(jiān)測到所述指令后且接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面；
[0036]瀏覽器在接收到用戶端點擊某網(wǎng)址的操作指令后，向后臺服務(wù)器發(fā)送請求，以從后臺服務(wù)器拉取該網(wǎng)址對應(yīng)的頁面數(shù)據(jù)。后臺服務(wù)器收到瀏覽器的請求后，向瀏覽器返回相應(yīng)的頁面數(shù)據(jù)。
[0037]瀏覽器在接收到頁面數(shù)據(jù)后，通過瀏覽器內(nèi)核創(chuàng)建dom樹，開始渲染所述瀏覽器頁面；并將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的代碼注入至所述瀏覽器頁面，以便后續(xù)在執(zhí)行該腳本代碼時，可以生成夜間模式的網(wǎng)頁樣式表，使其產(chǎn)生作用。
[0038]其中，作為一種較佳實施方式，上述腳本代碼具體可以采用Javascript腳本代碼。
[0039]網(wǎng)頁樣式表可以為css或者其他用于控制網(wǎng)頁中標志性的顯示屬性的樣式表單。該網(wǎng)頁樣式表相當于一個用來容納與頁面屬性相關(guān)的樣式規(guī)則的容器，該樣式規(guī)則可以為設(shè)置鏈接、文本的顏色，設(shè)置背景色，去掉背景圖以及設(shè)置border的顏色等。因此，在網(wǎng)頁樣式表中包括樣式規(guī)則的屬性名稱及屬性值的對應(yīng)關(guān)系，如圖2所示，其中樣式規(guī)則涉及的屬性包括鏈接、文本顏色、背景色、去掉背景圖以及邊界顏色等，上述屬性對應(yīng)的值可以根據(jù)實際需要來設(shè)定。
[0040]以css為例，本實施例所涉及的css功能有用于創(chuàng)建夜間模式的設(shè)置鏈接、文本的顏色，設(shè)置背景色，去掉背景圖；以及設(shè)置border的顏色等樣式規(guī)則，所有這些夜間模式的CSS功能所涉及的樣式規(guī)則都可以通過！ important這種設(shè)定的語法來指定相應(yīng)的應(yīng)用優(yōu)先級。比如指定兩種不同的文本的顏色分別具有的應(yīng)用優(yōu)先級為I和2，其中應(yīng)用優(yōu)先級I大于應(yīng)用優(yōu)先級2。
[0041]瀏覽器在解析腳本代碼時，會選取應(yīng)用優(yōu)先級比較高的樣式規(guī)則，將夜間模式的各樣式規(guī)則的應(yīng)用優(yōu)先級提到最高，比如選取應(yīng)用優(yōu)先級I的文本的顏色等等。從而將夜間模式的樣式規(guī)則所設(shè)定的頁面屬性，覆蓋瀏覽器頁面標簽原本的屬性。
[0042]步驟S103，執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面；
[0043]具體地，上述執(zhí)行腳本代碼的過程如下:
[0044]首先解析所述用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼；之后，創(chuàng)建一樣式表，該樣式表用于存儲頁面屬性的樣式規(guī)則的屬性名稱及屬性值的對應(yīng)關(guān)系。
[0045]可以將所述樣式表保存到一全局變量中，保存的目的在于，后續(xù)在日間模式與夜間模式之間切換時，可以對所述樣式表直接引用而不必進行查詢操作。
[0046]然后，從所述腳本代碼中獲取夜間模式的頁面屬性的樣式規(guī)則的屬性值，將此夜間模式的頁面屬性的樣式規(guī)則的屬性值設(shè)置到所述樣式表中，以讓這些夜間模式的頁面屬性的樣式規(guī)則起作用，由此得到夜間模式的網(wǎng)頁樣式表；
[0047]最后，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面。
[0048]以css為例，如前所述，上述夜間模式的頁面屬性的樣式規(guī)則可以包括:設(shè)置鏈接、文本的顏色；設(shè)置背景色；去掉背景圖；以及設(shè)置邊界顏色等，所有這些夜間模式的CSS功能所涉及的樣式規(guī)則都可以通過！ important這種設(shè)定的語法(當然不限定于這種語法)來指定相應(yīng)的應(yīng)用優(yōu)先級，瀏覽器在解析腳本代碼時，根據(jù)上述語法設(shè)定的樣式規(guī)則的應(yīng)用優(yōu)先級，將頁面顯示屬性的優(yōu)先級提到最高，以覆蓋瀏覽器頁面標簽原本的屬性。
[0049]步驟S104，顯示所述夜間模式的瀏覽器頁面。
[0050]由此，通過執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，使網(wǎng)頁樣式表作用生效，得到夜間模式的瀏覽器頁面，然后將此隱藏的瀏覽器頁面以夜間模式顯示出來，從而實現(xiàn)瀏覽器頁面的夜間模式效果。
[0051]采用本實施例方案與現(xiàn)有技術(shù)的添加遮罩方案所得到的頁面顯示對比結(jié)果如圖3所示，圖3中圓形區(qū)域的左側(cè)為現(xiàn)有技術(shù)的添加遮罩方案的顯示效果，圖3中圓形區(qū)域的右側(cè)為采用本實施例方案所得到的頁面顯示效果。從圖3可以看出，圖3中圓形區(qū)域的右側(cè)的顯示效果明顯優(yōu)于圖3中圓形區(qū)域的左側(cè)的顯示效果。
[0052]因此，本實施例通過上述方案，通過注入動態(tài)創(chuàng)建夜間網(wǎng)頁樣式表的腳本代碼到原本的頁面，并執(zhí)行這段腳本代碼，從而將瀏覽器頁面渲染成夜間的效果，避免了現(xiàn)有技術(shù)加遮罩帶來的頁面顯示模糊的問題，提高了終端瀏覽器夜間模式的頁面顯示效果。
[0053]如圖4所示，本發(fā)明第二實施例提出一種瀏覽器頁面顯示方法，在上述第一實施例的基礎(chǔ)上，在上述圖1所示的步驟S104之后，該方法還包括:
[0054]步驟S105，當瀏覽器頁面從夜間模式切換到日間模式時，設(shè)置所述網(wǎng)頁樣式表的屬性為不起作用的狀態(tài)；
[0055]步驟S106，通過所述渲染引擎重新渲染所述瀏覽器頁面，得到日間模式的瀏覽器頁面并顯示。
[0056]本實施例與上述第一實施例的區(qū)別在于，本實施例還包括后續(xù)在夜間模式與日間模式之間進行切換顯示的方案。
[0057]具體地，當用戶想從夜間模式切換到日間模式時，可以操作相應(yīng)的選項按鈕進行切換選擇。
[0058]對瀏覽器而言，當瀏覽器接收到用戶觸發(fā)的切換指令后，通過設(shè)置先前創(chuàng)建的樣式表為disable，即不起作用的狀態(tài)，渲染引擎會重新渲染整個頁面，從而將當前頁面還原到原始網(wǎng)頁頁面的狀態(tài)，由此，將當前夜間模式頁面還原到瀏覽器頁面原有的日間模式效果O
[0059]當后續(xù)再次切換為夜間模式時，瀏覽器只需重新將注入的css功能開啟，即可再次實現(xiàn)夜間模式效果。
[0060]本實施例通過上述方案，通過生成用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼，之后將此動態(tài)創(chuàng)建夜間網(wǎng)頁樣式表的腳本代碼注入到原本的頁面，并執(zhí)行這段腳本代碼，從而將瀏覽器頁面渲染成夜間的效果，避免了現(xiàn)有技術(shù)加遮罩帶來的頁面顯示模糊的問題，提高了終端瀏覽器夜間模式的頁面顯示效果；此外，根據(jù)用戶需要還可以在夜間模式與日間模式之間進行自由切換，從而提高了終端瀏覽器的使用靈活性，滿足了用戶需求。
[0061]下面以css、Javascript代碼為例,對本實施例方案進行詳細闡述:
[0062]首先，在設(shè)置瀏覽器夜間模式功能的起始階段，先不將頁面進行顯示，以防止夜間模式的CSS還沒有注入，頁面就已經(jīng)渲染出來，即會出現(xiàn)短暫時間的日間效果。
[0063]然后，瀏覽器在接收到頁面數(shù)據(jù)后，內(nèi)核開始創(chuàng)建dom樹，并開始渲染頁面，這時，將創(chuàng)建夜間模式的CSS的Javascript代碼注入頁面,這段Javascript代碼的作用是用于生成夜間模式的CSS。
[0064]經(jīng)過上述操作后，瀏覽器渲染引擎會將注入的夜間模式的css作用進去，這時頁面已經(jīng)是夜間模式，此時，將第一步中隱藏的頁面顯示出來，即可實現(xiàn)瀏覽器頁面的夜間模式效果。
[0065]后續(xù)，當需要從夜間模式切換為日間模式時，通過設(shè)置先前創(chuàng)建的樣式表為disable，渲染引擎會重新渲染整個頁面，這樣還原到頁面原有的顯示效果。若再次切換為夜間模式，則只需重新把注入的css開啟即可。
[0066]相比現(xiàn)有技術(shù),本實施例方案采用注入動態(tài)創(chuàng)建夜間css的javaScript代碼到原本的頁面，并執(zhí)行這段Javascript代碼，從而將頁面渲染成夜間的效果。從而避免了加遮罩帶來的模糊的問題。
[0067]如圖5所示，本發(fā)明第一實施例還提出一種瀏覽器頁面顯示裝置，包括:監(jiān)測模塊201、代碼注入模塊202、執(zhí)行模塊203以及顯示模塊204，其中:
[0068]監(jiān)測模塊201，用于監(jiān)測用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令；
[0069]代碼注入模塊202，用于在監(jiān)測模塊201監(jiān)測到所述指令后，且接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面；
[0070]執(zhí)行模塊203，用于執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面；
[0071]顯示模塊204，用于顯示所述夜間模式的瀏覽器頁面。
[0072]其中，瀏覽器可以為PC終端瀏覽器，也可以為手機等移動終端瀏覽器，比如UC瀏覽器、QQ瀏覽器等。
[0073]當用戶需要將瀏覽器頁面顯示為夜間模式效果時，瀏覽器首先隱藏當前瀏覽器頁面，以防止用于夜間模式的網(wǎng)頁樣式表還沒注入，瀏覽器頁面就已經(jīng)渲染出來，即會出現(xiàn)短暫時間的日間效果。
[0074]其中，判斷用戶是否需要將瀏覽器頁面顯示為夜間模式效果，可以采用以下方式:在用戶首次操作瀏覽器時即觸發(fā)瀏覽器頁面顯示為夜間模式的指令，或者，在終端操作界面上設(shè)置選項按鈕，用戶可以根據(jù)需要選擇相應(yīng)的按鈕來觸發(fā)瀏覽器頁面顯示為夜間模式的指令。此外，該選項按鈕還可以在夜間模式功能設(shè)置成功之后，作為后續(xù)夜間模式與日間模式之間的切換按鈕，同時，用戶還可以根據(jù)需要操作相應(yīng)的選項按鈕，來開啟或關(guān)閉夜間模式功能。
[0075]瀏覽器在接收到用戶端點擊某網(wǎng)址的操作指令后，向后臺服務(wù)器發(fā)送請求，以從后臺服務(wù)器拉取該網(wǎng)址對應(yīng)的頁面數(shù)據(jù)。后臺服務(wù)器收到瀏覽器的請求后，向瀏覽器返回相應(yīng)的頁面數(shù)據(jù)。
[0076]瀏覽器在接收到頁面數(shù)據(jù)后，通過瀏覽器內(nèi)核創(chuàng)建dom樹，開始渲染所述瀏覽器頁面；并將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的代碼注入至所述瀏覽器頁面，以便后續(xù)在執(zhí)行該腳本代碼時，可以生成夜間模式的網(wǎng)頁樣式表，使其產(chǎn)生作用。
[0077]其中，作為一種較佳實施方式，上述腳本代碼具體可以采用Javascript腳本代碼。
[0078]網(wǎng)頁樣式表可以為css或者其他用于控制網(wǎng)頁中標志性的顯示屬性的樣式表單。該網(wǎng)頁樣式表相當于一個用來容納與頁面屬性相關(guān)的樣式規(guī)則的容器，該樣式規(guī)則可以為設(shè)置鏈接、文本的顏色，設(shè)置背景色，去掉背景圖以及設(shè)置border的顏色等。因此，在網(wǎng)頁樣式表中包括樣式規(guī)則的屬性名稱及屬性值的對應(yīng)關(guān)系，如圖2所示，其中樣式規(guī)則涉及的屬性包括鏈接、文本顏色、背景色、去掉背景圖以及邊界顏色等，上述屬性對應(yīng)的值可以根據(jù)實際需要來設(shè)定。
[0079]以css為例，本實施例所涉及的css功能有用于創(chuàng)建夜間模式的設(shè)置鏈接、文本的顏色，設(shè)置背景色，去掉背景圖；以及設(shè)置border的顏色等樣式規(guī)則，所有這些夜間模式的CSS功能所涉及的樣式規(guī)則都可以通過！ important這種設(shè)定的語法來指定相應(yīng)的應(yīng)用優(yōu)先級。比如指定兩種不同的文本的顏色分別具有的應(yīng)用優(yōu)先級為I和2，其中應(yīng)用優(yōu)先級I大于應(yīng)用優(yōu)先級2。
[0080]瀏覽器在解析腳本代碼時，會選取應(yīng)用優(yōu)先級比較高的樣式規(guī)則，將夜間模式的各樣式規(guī)則的應(yīng)用優(yōu)先級提到最高，比如選取應(yīng)用優(yōu)先級I的文本的顏色等等。從而將夜間模式的樣式規(guī)則所設(shè)定的頁面屬性，覆蓋瀏覽器頁面標簽原本的屬性。
[0081]具體地，上述執(zhí)行腳本代碼的過程如下:
[0082]首先解析所述用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼；之后，創(chuàng)建一樣式表，該樣式表用于存儲頁面屬性的樣式規(guī)則的屬性名稱及屬性值的對應(yīng)關(guān)系。
[0083]可以將所述樣式表保存到一全局變量中，保存的目的在于，后續(xù)在日間模式與夜間模式之間切換時，可以對所述樣式表直接引用而不必進行查詢操作。
[0084]然后，從所述腳本代碼中獲取夜間模式的頁面屬性的樣式規(guī)則的屬性值，將此夜間模式的頁面屬性的樣式規(guī)則的屬性值設(shè)置到所述樣式表中，以讓這些夜間模式的頁面屬性的樣式規(guī)則起作用，由此得到夜間模式的網(wǎng)頁樣式表；
[0085]最后，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面。
[0086]以css為例，上述夜間模式的頁面屬性的樣式規(guī)則可以包括:設(shè)置鏈接、文本的顏色；設(shè)置背景色；去掉背景圖；以及設(shè)置邊界顏色等，所有這些夜間模式的CSS功能所涉及的樣式規(guī)則都可以通過！ important這種設(shè)定的語法來指定相應(yīng)的應(yīng)用優(yōu)先級，瀏覽器在解析腳本代碼時，根據(jù)上述語法設(shè)定的樣式規(guī)則的應(yīng)用優(yōu)先級，將頁面顯示屬性的優(yōu)先級提到最高，以覆蓋瀏覽器頁面標簽原本的屬性。
[0087]由此，通過執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，使網(wǎng)頁樣式表作用生效，得到夜間模式的瀏覽器頁面，然后將此隱藏的瀏覽器頁面以夜間模式顯示出來，從而實現(xiàn)瀏覽器頁面的夜間模式效果。
[0088]采用本實施例方案與現(xiàn)有技術(shù)的添加遮罩方案所得到的頁面顯示對比結(jié)果如圖3所示，圖3中圓形區(qū)域的左側(cè)為現(xiàn)有技術(shù)的添加遮罩方案的顯示效果，圖3中圓形區(qū)域的右側(cè)為采用本實施例方案所得到的頁面顯示效果。從圖3可以看出，圖3中圓形區(qū)域的右側(cè)的顯示效果明顯優(yōu)于圖3中圓形區(qū)域的左側(cè)的顯示效果。
[0089]因此，本實施例通過上述方案，通過注入動態(tài)創(chuàng)建夜間網(wǎng)頁樣式表的腳本代碼到原本的頁面，并執(zhí)行這段腳本代碼，從而將瀏覽器頁面渲染成夜間的效果，避免了現(xiàn)有技術(shù)加遮罩帶來的頁面顯示模糊的問題，提高了終端瀏覽器夜間模式的頁面顯示效果。
[0090]如圖6所示，本發(fā)明第二實施例還提出一種瀏覽器頁面顯示裝置，在上述第一實施例的基礎(chǔ)上，該裝置還包括:
[0091]切換模塊205，用于當瀏覽器頁面從夜間模式切換到日間模式時，設(shè)置所述網(wǎng)頁樣式表的屬性為不起作用的狀態(tài)；
[0092]所述執(zhí)行模塊203，還用于通過所述渲染引擎重新渲染所述瀏覽器頁面，得到日間模式的瀏覽器頁面，并由所述顯示模塊204進行顯示。
[0093]本實施例與上述第一實施例的區(qū)別在于，本實施例還包括后續(xù)在夜間模式與日間模式之間進行切換顯示的方案。
[0094]具體地，當用戶想從夜間模式切換到日間模式時，可以操作相應(yīng)的選項按鈕進行切換選擇。
[0095]對瀏覽器而言，當瀏覽器接收到用戶觸發(fā)的切換指令后，通過設(shè)置先前創(chuàng)建的樣式表為disable，即不起作用的狀態(tài)，渲染引擎會重新渲染整個頁面，從而將當前頁面還原到原始網(wǎng)頁頁面的狀態(tài)，由此，將當前夜間模式頁面還原到瀏覽器頁面原有的日間模式效果O
[0096]當后續(xù)再次切換為夜間模式時，瀏覽器只需重新將注入的css功能開啟，即可再次實現(xiàn)夜間模式效果。
[0097]本實施例通過上述方案，通過生成用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼，之后將此動態(tài)創(chuàng)建夜間網(wǎng)頁樣式表的腳本代碼注入到原本的頁面，并執(zhí)行這段腳本代碼，從而將瀏覽器頁面渲染成夜間的效果，避免了現(xiàn)有技術(shù)加遮罩帶來的頁面顯示模糊的問題，提高了終端瀏覽器夜間模式的頁面顯示效果；此外，根據(jù)用戶需要還可以在夜間模式與日間模式之間進行自由切換，從而提高了終端瀏覽器的使用靈活性，滿足了用戶需求。
[0098]下面以css、Javascript代碼為例,對本實施例方案進行詳細闡述:
[0099]首先，在設(shè)置瀏覽器夜間模式功能的起始階段，先不將頁面進行顯示，以防止夜間模式的CSS還沒有注入，頁面就已經(jīng)渲染出來，即會出現(xiàn)短暫時間的日間效果。
[0100]然后，瀏覽器在接收到頁面數(shù)據(jù)后，內(nèi)核開始創(chuàng)建dom樹，并開始渲染頁面，這時，將創(chuàng)建夜間模式的CSS的Javascript代碼注入頁面,這段Javascript代碼的作用是用于生成夜間模式的css。
[0101]經(jīng)過上述操作后，瀏覽器渲染引擎會將注入的夜間模式的CSS作用進去，這時頁面已經(jīng)是夜間模式，此時，將第一步中隱藏的頁面顯示出來，即可實現(xiàn)瀏覽器頁面的夜間模式效果。
[0102]后續(xù)，當需要從夜間模式切換為日間模式時，通過設(shè)置先前創(chuàng)建的樣式表為disable，渲染引擎會重新渲染整個頁面，這樣還原到頁面原有的顯示效果。若再次切換為夜間模式，則只需重新把注入的css開啟即可。
[0103]相比現(xiàn)有技術(shù),本實施例方案采用注入動態(tài)創(chuàng)建夜間css的javaScript代碼到原本的頁面，并執(zhí)行這段Javascript代碼，從而將頁面渲染成夜間的效果。從而避免了加遮罩帶來的模糊的問題。
[0104]此外，本發(fā)明實施例還提出一種終端瀏覽器，其可以包括如上實施例所述的裝置，該裝置當監(jiān)測到用戶端操作瀏覽器以顯示瀏覽器頁面時，隱藏所述瀏覽器頁面；在接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面；執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面；顯示所述夜間模式的瀏覽器頁面。本實施例終端瀏覽器實現(xiàn)夜間模式的詳細過程請參照上述實施例，在此不再贅述。
[0105]此外，本發(fā)明實施例還提出一種終端，其可以包括如上實施例所述的裝置，該裝置當監(jiān)測到用戶端操作瀏覽器以顯示瀏覽器頁面時，隱藏所述瀏覽器頁面；在接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面；執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面；顯示所述夜間模式的瀏覽器頁面。本實施例終端實現(xiàn)夜間模式的詳細過程請參照上述實施例，在此不再贅述。
[0106]本發(fā)明實施例瀏覽器頁面顯示方法、裝置、瀏覽器及終端，通過隱藏瀏覽器頁面，接收到頁面數(shù)據(jù)進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至瀏覽器頁面；執(zhí)行腳本代碼，通過渲染引擎將夜間模式的網(wǎng)頁樣式表作用到瀏覽器頁面，得到夜間模式的瀏覽器頁面并顯示，由此通過注入動態(tài)創(chuàng)建夜間網(wǎng)頁樣式表的腳本代碼到原本的頁面，并執(zhí)行這段腳本代碼，從而將瀏覽器頁面渲染成夜間的效果，避免了現(xiàn)有技術(shù)加遮罩帶來的頁面顯示模糊的問題，提高了終端瀏覽器夜間模式的頁面顯示效果。
[0107]需要說明的是，在本文中，術(shù)語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者裝置不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者裝置所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括該要素的過程、方法、物品或者裝置中還存在另外的相同要素。
[0108]上述本發(fā)明實施例序號僅僅為了描述，不代表實施例的優(yōu)劣。
[0109]通過以上的實施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到上述實施例方法可借助軟件加必需的通用硬件平臺的方式來實現(xiàn)，當然也可以通過硬件，但很多情況下前者是更佳的實施方式?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在一個存儲介質(zhì)(如R0M/RAM、磁碟、光盤)中，包括若干指令用以使得一臺終端設(shè)備(可以是手機，計算機，月艮務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實施例所述的方法。具體地，圖5至圖7所述的瀏覽器頁面顯示裝置所對應(yīng)的程序指令可以存儲在用戶終端或者客戶端的可讀存儲介質(zhì)中，并被其中的至少一個處理器執(zhí)行，以實現(xiàn)圖1至圖4所述的瀏覽器頁面顯示方法。
[0110]以上所述僅為本發(fā)明的優(yōu)選實施例，并非因此限制本發(fā)明的專利范圍，凡是利用本發(fā)明說明書及附圖內(nèi)容所作的等效結(jié)構(gòu)或流程變換，或直接或間接運用在其它相關(guān)的【技術(shù)領(lǐng)域】，均同理包括在本發(fā)明的專利保護范圍內(nèi)。
【權(quán)利要求】
1.一種瀏覽器頁面顯示方法，其特征在于，包括: 監(jiān)測用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令； 在監(jiān)測到所述指令后且接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面； 執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面； 顯示所述夜間模式的瀏覽器頁面。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述在接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面的步驟包括: 在接收到頁面數(shù)據(jù)時，通過瀏覽器內(nèi)核創(chuàng)建dom樹，開始渲染所述瀏覽器頁面； 將用于創(chuàng)建所述夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面。
3.根據(jù)權(quán)利要求2所述的方法，其特征在于，所述執(zhí)行腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面的步驟包括: 解析所述用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼； 創(chuàng)建一樣式表，所述樣式表用于存儲頁面屬性的樣式規(guī)則的屬性名稱及屬性值的對應(yīng)關(guān)系; 從所述腳本代碼中獲取夜間模式的頁面屬性的樣式規(guī)則的屬性值，設(shè)置到所述樣式表中，得到夜間模式的網(wǎng)頁樣式表； 通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面。
4.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述夜間模式的頁面屬性的樣式規(guī)則包括:設(shè)置鏈接、文本的顏色；設(shè)置背景色；去掉背景圖；和/或設(shè)置邊界顏色。
5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述夜間模式的頁面屬性的樣式規(guī)則通過設(shè)定的語法指定有應(yīng)用優(yōu)先級。
6.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述創(chuàng)建一樣式表的步驟之后還包括: 將所述樣式表保存到一全局變量中。
7.根據(jù)權(quán)利要求1-6中任一項所述的方法，其特征在于，還包括: 當瀏覽器頁面從夜間模式切換到日間模式時，設(shè)置所述網(wǎng)頁樣式表的屬性為不起作用的狀態(tài)； 通過所述渲染引擎重新渲染所述瀏覽器頁面，得到日間模式的瀏覽器頁面并顯示。
8.根據(jù)權(quán)利要求1所述的方法，其特征在于，在監(jiān)測到用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令之后還包括: 隱藏所述瀏覽器頁面。
9.一種瀏覽器頁面顯示裝置，其特征在于，包括: 監(jiān)測模塊，用于監(jiān)測用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令； 代碼注入模塊，用于在所述監(jiān)測模塊監(jiān)測到所述指令后，且接收到頁面數(shù)據(jù)并進行頁面渲染時，將用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面； 執(zhí)行模塊，用于執(zhí)行所述腳本代碼，通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面； 顯示模塊，用于顯示所述夜間模式的瀏覽器頁面。
10.根據(jù)權(quán)利要求9所述的裝置，其特征在于， 所述代碼注入模塊，還用于在接收到頁面數(shù)據(jù)時，通過瀏覽器內(nèi)核創(chuàng)建dom樹，開始渲染所述瀏覽器頁面；將用于所述創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼注入至所述瀏覽器頁面。
11.根據(jù)權(quán)利要求10所述的裝置，其特征在于，所述執(zhí)行模塊還用于:解析所述用于創(chuàng)建夜間模式的網(wǎng)頁樣式表的腳本代碼；創(chuàng)建一樣式表；所述樣式表用于存儲頁面屬性的樣式規(guī)則的屬性名稱及屬性值的對應(yīng)關(guān)系；從所述腳本代碼中獲取夜間模式的頁面屬性的樣式規(guī)則的屬性值，設(shè)置到所述樣式表中，得到夜間模式的網(wǎng)頁樣式表；通過渲染引擎將所述夜間模式的網(wǎng)頁樣式表作用到所述瀏覽器頁面，得到夜間模式的瀏覽器頁面。
12.根據(jù)權(quán)利要求11所述的裝置，其特征在于，所述夜間模式的頁面屬性的樣式規(guī)則包括:設(shè)置鏈接、文本的顏色；設(shè)置背景色；去掉背景圖；和/或設(shè)置邊界顏色。
13.根據(jù)權(quán)利要求12所述的裝置，其特征在于，所述夜間模式的頁面屬性的樣式規(guī)則通過設(shè)定的語法指定有應(yīng)用優(yōu)先級。
14.根據(jù)權(quán)利要求11所述的裝置，其特征在于，所述執(zhí)行模塊還用于在創(chuàng)建所述樣式表之后，將所述樣式表保存到一全局變量中。
15.根據(jù)權(quán)利要求9-14中任一項所述的裝置，其特征在于，還包括: 切換模塊，用于當瀏覽器頁面從夜間模式切換到日間模式時，設(shè)置所述網(wǎng)頁樣式表的屬性為不起作用的狀態(tài)； 所述執(zhí)行模塊，還用于通過所述渲染引擎重新渲染所述瀏覽器頁面，得到日間模式的瀏覽器頁面，并由所述顯示模塊進行顯示。
16.根據(jù)權(quán)利要求9所述的裝置，其特征在于，所述監(jiān)測模塊還用于在監(jiān)測到用戶端操作瀏覽器以夜間模式顯示瀏覽器頁面的指令后隱藏所述瀏覽器頁面。
17.—種終端瀏覽器，其特征在于，包括權(quán)利要求9-16中任一項所述的裝置。
18.—種終端，其特征在于，包括權(quán)利要求9-16中任一項所述的裝置。
【文檔編號】G06F17/30GK104346403SQ201310342810
【公開日】2015年2月11日 申請日期:2013年8月7日 優(yōu)先權(quán)日:2013年8月7日
【發(fā)明者】張銳杰, 蔡熒園 申請人:騰訊科技（深圳）有限公司