平時會喜歡看下Android開發技術週報裡邊的文章學習下，這個網頁做的不錯，每週更新不少乾貨上去，很值得一看。因為每次都需要用瀏覽器去看，對我個人喜歡坐車看書的人來說，體驗不算好。於是，自己鼓搗了個app，主要就是將這個網站的資源整合，然後重新排版了。已經上了豌豆莢，歡迎大家點選下載下載地址

考慮到有些人喜歡熄燈後躺在床上繼續學習（額，其實這個習慣不好。。。），所以在app中增加了一個夜間模式。由於文章都是通過webview載入的，所以這就需要對webview載入的網頁切換背景色。這篇文章就記錄網頁切換背景色的實現方法

步驟

1 正常呼叫webView.loadUrl(url);
2 監聽網頁載入進度

webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                if (progress == 100) {
                    rlvWeb.refreshComplete();
                    if (isNightMode) {
                        String refreshUrl = "javascript:(function(){if(!document.getElementById('eyeshield_color_css')){var head = document.getElementsByTagName('HEAD').item(0);var style = document.createElement('style');style.id = 'eyeshield_color_css';style.type = 'text/css';style.innerText = \"*{background-color:#f0e68c !important;}\";head.appendChild(style);};})();"
 
;
                        webView.loadUrl("javascript:" + refreshUrl);
                    }
                }
            }

        });

3 當載入完成時，呼叫本地寫的JS程式碼，webView.loadUrl(“javascript:” + refreshUrl);

JS程式碼分析

function(){
        // 判斷當前是否含有eyeshield_color_css為id的節點
    if(!document.getElementById('eyeshield_color_css'
 
)){
        // 找到head元素，往head增加一個style的子節點
        var head = document.getElementsByTagName('HEAD').item(0);
        var style = document.createElement('style');
        // 將增加的style子節點的id設定為eyeshield_color_css，設定該id主要是為了方便查詢，用於更換背景色或者去除背景色
        style.id = 'eyeshield_color_css';
        style.type = 'text/css';
        // 這段程式碼主要是讓網頁強制的使用background-color設定的顏色作為背景色
        style.innerText = "*{background-color:#f0e68c !important;}";
        head.appendChild(style);
    };
}();

更多

UC瀏覽器裡邊提供了幾種網頁背景色讓使用者選擇，其實，這裡提供的方法也是可以實現的。就是通過記錄使用者的選擇，動態改變style.innerText = "*{background-color:#f0e68c !important;}";裡邊background-color的顏色值就可以了。