Android WebView通過程式碼修改網頁的字型大小
阿新 • • 發佈:2019-01-24
今天遇到一個問題:需要在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這個。。這個就是聲明瞭優先順序最大。。。可以覆蓋行樣式裡面的內容,,,至此。。就解決了。。.
每日語錄:
假如我不曾見過太陽,我就可以忍受黑暗。。。加油!!!!