場景：一些內(nèi)容是直接PC端編輯器保存的柔袁，包含了大量的html標(biāo)簽甚至是ubb語言的標(biāo)簽。
直接使用大量的冗余信息（類似但不限于CSS布局等）箱叁。
使用Android webview.
content 是html的字符串
webview.loadData(Html.fromHtml(content).toString(), "text/html", "UTF-8");
成功加載虱而。
這就完了嗎氨肌。當(dāng)然沒有，又出現(xiàn)了以下幾個回合的較量：
Round 1
發(fā)現(xiàn)沒有圖片廓鞠，仔細一看是圖片地址不是全路徑的帚稠，是相對路徑，缺少資源的相對根路徑床佳。
查了一下滋早，Webview有個loadDataWithBaseURL方法
public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)
baseUrl可以指定HTML代碼片段中相關(guān)資源的相對根路徑。把根路徑即webhost放進去砌们。
String data = Html.fromHtml(content).toString();
webview.loadDataWithBaseURL("http://webhost.net", data, "text/html", "UTF-8", null);
解決問題杆麸。
round 2
由于html 的字符串中間穿插很多圖片的尺寸是不定的，造成了部分圖片是超過了屏幕浪感，
解決辦法：
使用replace方法把 img width全部替換為100%
String data = Html.fromHtml(content).toString();
data = data.replaceAll("width=\"\\d+\"", "width=\"100%\"").replaceAll("height=\"\\d+\"", "height=\"auto\"");
webview.loadDataWithBaseURL("http://webhost.net", data, "text/html", "UTF-8", null);
注：
"\d+"" 是正則表達式角溃，\d 是匹配一個數(shù)字(0到9)，+ 是表示多個合起來是 \d+ 就表示多個數(shù)字篮撑。前邊多一個\ 為了轉(zhuǎn)義减细。
round 3
發(fā)現(xiàn)部分圖片 的html 標(biāo)簽 沒有定義 width 和hight 屬性，默認(rèn)的還是圖像大小赢笨，造成了還是圖片沒有適應(yīng)屏幕未蝌。
解決思路：找到所有的img 標(biāo)簽把它的寬高屬性全部重置定死驮吱。
添加了一句js 代碼。
String varjs = "<script type='text/javascript'> \nwindow.onload = function()\n{var $img = document.getElementsByTagName('img');for(var p in $img){$img[p].style.width = '100%'; $img[p].style.height ='auto'}}</script>";
這句js 代碼很簡單（\n 只是換行）找到所有的img 標(biāo)簽 遍歷 替換寬為屏幕的100% 高度自適應(yīng)萧吠。
當(dāng)然webview要設(shè)置支持js.
webview.getSettings().setJavaScriptEnabled(true);
String varjs = "<script type='text/javascript'> window.onload = function()
{var $img = document.getElementsByTagName('img');for(var p in $img){$img[p].style.width = '100%'; $img[p].style.height ='auto'}}</script>";
webview.loadDataWithBaseURL("http://webhost.net", varjs + data, "text/html", "UTF-8", null);
round 4
實現(xiàn)點擊查看圖片
思路使用interface 拿到圖片的url.
定義官方給的：
public class JavascriptInterface {
@android.webkit.JavascriptInterface//注解必須需要
public void startPhotoActivity(String imageUrl) {
//此處根據(jù)url 實現(xiàn)圖片大圖預(yù)覽左冬。
}
}
webview代碼及js實現(xiàn)：
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(new JavascriptInterface(), "mainActivity");
String jsimg = "function()\n { var imgs = document.getElementsByTagName(\"img\");for(var i = 0; i < imgs.length; i++){ imgs[i].onclick = function()\n{mainActivity.startPhotoActivity(this.src);}}}";
webview.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView webView, String s) {
webview.loadUrl("javascript:(" + jsimg + ")()");
}
});
語句很簡單，每一個img 都添加點擊事件傳遞它的資源url.
完整的 實現(xiàn)片段：
private void load() {
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(new JavascriptInterface(), "mainActivity");
String data = Html.fromHtml(content).toString();
//替換img屬性
String varjs = "<script type='text/javascript'> \nwindow.onload = function()\n{var $img = document.getElementsByTagName('img');for(var p in $img){$img[p].style.width = '100%'; $img[p].style.height ='auto'}}</script>";
//點擊查看
String jsimg = "function()\n { var imgs = document.getElementsByTagName(\"img\");for(var i = 0; i < imgs.length; i++){ imgs[i].onclick = function()\n{mainActivity.startPhotoActivity(this.src);}}}";
webview.loadDataWithBaseURL("http://www.youwebhost.com", varjs + data, "text/html", "UTF-8", null);
webview.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView webView, String s) {
webview.loadUrl("javascript:(" + jsimg + ")()");
}
});
}
}
public class JavascriptInterface {
@android.webkit.JavascriptInterface
public void startPhotoActivity(String imageUrl) {
//根據(jù)URL查看大圖邏輯
}
}