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 = "<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 标签遍历替换宽为屏幕的100% 高度自适应。
当然webview要设置支持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

实现点击查看图片

思路使用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 = "<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) {
        //根据URL查看大图逻辑 

    }
}