html 离线笔记 安卓,Android webview 加载html片段笔记

场景：一些内容是直接PC端编辑器保存的，包含了大量的html标签甚至是ubb语言的标签。

直接使用大量的冗余信息(类似但不限于CSS布局等)。

使用Android webview.

content 是html的字符串

webview.loadData(Html.fromHtml(content).toString(), "text/html", "UTF-8");

成功加载。

这就完了吗。当然没有，又出现了以下几个回合的较量：

Round 1

发现没有图片，仔细一看是图片地址不是全路径的，是相对路径，缺少资源的相对根路径。

查了一下，Webview有个loadDataWithBaseURL方法

public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)

baseUrl可以指定HTML代码片段中相关资源的相对根路径。把根路径即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 是匹配一个数字(0到9)，+ 是表示多个合起来是 \d+ 就表示多个数字。前边多一个\ 为了转义。

round 3

发现部分图片 的html 标签 没有定义 width 和hight 属性，默认的还是图像大小，造成了还是图片没有适应屏幕。

解决思路：找到所有的img 标签把它的宽高属性全部重置定死。

添加了一句js 代码。

String varjs = "";

这句js 代码很简单(\n 只是换行)找到所有的img 标签 遍历 替换宽为屏幕的100% 高度自适应。

当然webview要设置支持js.

webview.getSettings().setJavaScriptEnabled(true);

String varjs = "

{var $img = document.getElementsByTagName('img');for(var p in $img){$img[p].style.width = '100%'; $img[p].style.height ='auto'}}";

webview.loadDataWithBaseURL("http://webhost.net", varjs + data, "text/html", "UTF-8", null);

round 4

实现点击查看图片

思路使用interface 拿到图片的url.

定义官方给的：

public class JavascriptInterface {

@android.webkit.JavascriptInterface//注解必须需要

public void startPhotoActivity(String imageUrl) {

//此处根据url 实现图片大图预览。

}

}

webview代码及js实现：

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.

完整的 实现片段：

private void load() {

webview.getSettings().setJavaScriptEnabled(true);

webview.addJavascriptInterface(new JavascriptInterface(), "mainActivity");

String data = Html.fromHtml(content).toString();

//替换img属性

String varjs = "";

//点击查看

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) {

//根据URL查看大图逻辑

}

}