1. 程式人生 > >Android WebView通過程式碼修改網頁的字型大小

Android WebView通過程式碼修改網頁的字型大小

今天遇到一個問題:需要在Android 客戶端控制webview網頁中字型的大小,webview載入的內容是從服務端獲取的html片段,我們知道webview,可以直接載入html片段

(mWebView.loadDataWithBaseURL(null, news.getContent(), "text/html", "utf-8", null);)
 /**
         * mWebView.loadData(news.getContent(), "text/html", "utf-8");//不能用這種,會有亂碼
         */

然後我們需要修改字型大小。可以根據

/**
  * webview
  */
WebView wv; /** * Manages settings state for a WebView */ WebSettings settings; /** * 用來控制字型大小 */ int fontSize = 1; wv = (WebView) findViewById(R.id.webViewContent); settings = wv.getSettings(); settings.setSupportZoom(true); if (settings.getTextSize() == WebSettings.TextSize.SMALLEST) { fontSize = 1
; } else if (settings.getTextSize() == WebSettings.TextSize.SMALLER) { fontSize = 2; } else if (settings.getTextSize() == WebSettings.TextSize.NORMAL) { fontSize = 3; } else if (settings.getTextSize() == WebSettings.TextSize.LARGER) { fontSize = 4; } else if (settings.getTextSize() == WebSettings.TextSize.LARGEST) { fontSize = 5
; } /** * 設定底部按鈕的事件 */ private void setImageViewClick() { /** * 縮小按鈕 */ imgViewSX.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { fontSize--; if (fontSize < 0) { fontSize = 1; } switch (fontSize) { case 1: settings.setTextSize(WebSettings.TextSize.SMALLEST); break; case 2: settings.setTextSize(WebSettings.TextSize.SMALLER); break; case 3: settings.setTextSize(WebSettings.TextSize.NORMAL); break; case 4: settings.setTextSize(WebSettings.TextSize.LARGER); break; case 5: settings.setTextSize(WebSettings.TextSize.LARGEST); break; } } }); /** * 放大按鈕 */ imgViewFD.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { fontSize++; if (fontSize > 5) { fontSize = 5; } switch (fontSize) { case 1: settings.setTextSize(WebSettings.TextSize.SMALLEST); break; case 2: settings.setTextSize(WebSettings.TextSize.SMALLER); break; case 3: settings.setTextSize(WebSettings.TextSize.NORMAL); break; case 4: settings.setTextSize(WebSettings.TextSize.LARGER); break; case 5: settings.setTextSize(WebSettings.TextSize.LARGEST); break; } } });

但是這種方式只能用android自帶的五種字型大小:
SMALLEST(50%),
SMALLER(75%),
NORMAL(100%),
LARGER(150%),
LARGEST(200%);
如果前臺的介面比較複雜的情況下,,像新聞類的。我們會事先在專案的assets目錄下,建立一個模板,然後從伺服器拿到資料,填充。當然,你可以讓你們公司的後臺給你寫好模板,和樣式。然後你直接呼叫就可以了。那麼我們會遇到一個問題,就是修改字型大小,因為可能模板裡面或者是從伺服器拿到的html片段裡面已經有個行樣式

<p style="font-size: 10px;font-family:宋體 ;color: #ccc "> 這是有行樣式的資料</p>

類似這種,那麼。你再通過js去修改這個p的文字大小是不會起作用的。。。我問了下前段。。他們說因為行內樣式不能通過新增類名修改,換個角度理解就是,行內樣式的優先順序比外鏈的樣式大。。。那問題來了。。我就是要修改。。有沒有辦法。當然有的。

//Activity:這就是填充方法,填充的內容就是伺服器的html片段,填充完畢//後,再迴圈查詢p標籤,然後修改裡面的字型。。

  contentWebView
                .loadUrl("javascript:tianchongcontentstr('"
                        + replaceBlank2(str) + "')");

 html:
 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>無標題文件</title>
        <link rel="stylesheet" href="newsWhite.css">
                <script type="text/javascript">

                function tianchongcontentstr(contentstr){
                    document.getElementById("contentstr").innerHTML = contentstr;

                    var objs=document.getElementsByTagName("p");
                     for (var i = 0; i < objs.length; i++) {
                        objs[i].className="xieyi1";
                     }
                }

                    </script>

                </head>


    <body id="body">
<!--        <img class="img2" src="srcimg.png" id="img"  onerror="this.src='srcimg.png'">-->
            <div class="N_xq wh mr">
                <div    id="contentstr" >
                </div>
            </div>

<!--            <h5 id="h5">©2015 四川釋出 版權所有 轉載須經授權</h5>-->
            <!--相關文章 版權資訊-->


            </body>

</html>


//然後js檔案:

@charset "utf-8";
*{margin:0;padding:0;}
.xieyi1{font-size:14pt !important;}
.xieyi4{font-size:24px;}
.xieyi5{font-size:27px;}

重點就是 !important這個。。這個就是聲明瞭優先順序最大。。。可以覆蓋行樣式裡面的內容,,,至此。。就解決了。。.

每日語錄:
假如我不曾見過太陽,我就可以忍受黑暗。。。加油!!!!