WebView之修改页面JS、CSS

1、背景

混合开发在移动端已经火了很多年了，说起混合开发，就不得不提起Android的WebView，用WebView来加载html页面及进行交互也早已不再是什么新鲜事了，现在几乎每个App都或多或少采用了这种混合开发的方式，毕竟开发效率高，可适用于快速变更迭代的需求，同时在多端方面（Android，iOS，微信公众号，网站等）也极具优势。

2、场景及需求

场景1：WebView加载的是自己公司开发的html页面，但因种种原因，你不想去与前端工程师沟通修改一些CSS或JS文件时，我们如何通过原生的办法来解决呢？（当然，同一公司的，最好还是通过沟通解决比较适合，所以该场景一般比较少，但也有可能同一页面在不同端上要求显示效果不同）
场景2：我们APP里嵌入的是别人家的html页面，这种也是很常见的，比如为了省时省力，像一些页面小工具什么的，就直接嵌入别人家的页面；又比如为了某些权威性，像一些政府官方页面等等。这种情况下，如何通过原生的办法来修改页面的JS、CSS呢？

3、解决方案

为了方便描述，就拿笔者最近遇到的一个需求，公司的APP嵌入了第三方的一个工具页面，人家页面的主题色是绿色的，而我们APP的主题是红色的，红绿搭配，怎一个丑字了得？不管别人怎么想，我是看不下去的，必须改！

方案1

最简单的办法，把这第三方的工具页面不管是html，js还是css，全部下载下来，然后你想怎么改就怎么改了，改好后全部放在assets目录下，然后直接用WebView从本地加载即可。
优点：方便快捷，从稳定性上不受第三方变化的影响，同时也有利于提高加载的速度
缺点：不能第一时间跟上第三方的一些优化，失去混合开发多变的优势，占用空间，使得apk变大，比如笔者使用的工具页面，其中某个js文件就已经好几M了，这确实让人无法接受
适用性：适用于界面简单，文件小，且功能常规固定，或为了追求加载速度以空间换时间

方案2

获取html页面的内容，然后对内容进行修改，修改后重新加载
第一步就是获取html页面的内容，我们可以通过重写WebViewClient的onPageFinished方法，在页面加载完毕时加载一段js代码，然后通过js代码获取html的内容，并用js代码调用原生的方法将html内容传回，如下：

  //注入一个原生的方法，供js调用
  mWebView.addJavascriptInterface(new MyLocalMethod(), "java_method");
  mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                //在页面加载完成时，调用js方法，获取html后，调用原生方法回传
                view.loadUrl("javascript:window.java_method.showSource("
                        + "document.getElementsByTagName('html')[0].innerHTML);");   
                super.onPageFinished(view, url);
            }
        });

注意：上面代码中既存在了原生调JS，也存在了JS调原生。
然后，我们必须定义一个原生的方法来接收传回来的html内容，同时对html内容进行修改，修改后重新加载，如下：

//因为修改后需重新加载，为防止无限循环，定义一个变量判断是否第一次，只有在第一次时进行html内容的修改及重新加载
private boolean isFirst=true;
public class MyLocalMethod{
        @JavascriptInterface
        public void showSource(String html) {
            if(isFirst){
                //对html内容进行修改
                 String newHtml=......
                //对html内容进行修改
                   
                //重新加载
                mWebView.loadDataWithBaseURL(baseUrl,newHtml,"text/html", "utf-8",null);
                isFirst=false;//更改标记位
                System.out.println("====>html=" + html);
            }          
        }
 }

需要注意的是，修改html内容后，在进行重新加载时，我们使用的是loadDataWithBaseURL方法，这里就有一个问题了，为什么不能用loadData呢？我们来比较一下这个两个方法的区别：

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

很明显：loadDataWithBaseURL()比loadData()多出了两个参数，baseUrl用来指定html代码中相关资源的相对根路径，historyUrl用来指定历史的URL
所以，当我们的html代码里通过相对路径引用了一些css，js资源文件时，若通过loadData来重新加载的话，会导致这些资源文件因路径不正确而无法正常工作，故这里采用loadDataWithBaseURL，并传入了根路径。
适用性：适用于对当前页面的局部小修改，比如换个颜色啊，改点JS代码啊，去掉部分html代码啊···，这里需要注意的是：该方案仅限于当前页面，不能修改引用的CSS或JS文件的内容。

方案3

将修改后的css或js文件存放于本地，然后拦截引用的css或js文件，直接通过本地注入进行替换，如下：

mWebView.setWebViewClient(new WebViewClient(){
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        Log.e("url","url="+url);
        if(url.contains("xxx.js")){
            try {
                return new WebResourceResponse("application/x-javascript","utf-8",getBaseContext().getAssets().open("js/xxx.js"));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }else if (url.contains("xxx.css")){
            try {
                return new WebResourceResponse("text/css","utf-8",getBaseContext().getAssets().open("css/xxx.css"));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return super.shouldInterceptRequest(view, url);
    }
});

该方案也非常简单，判断是否为要修改的资源文件，如果是的话直接从本地进行加载即可。
适用性：该方案为前面两种方案的补充，它比方案1更加具有针对性，也更加节省了空间；同时它也解决了方案2中无法修改引用的资源文件的问题

4、总结

本文的三种方案各有优缺点及其适用性，应根据实际情况进行选择。
以上是用Android原生技术来解决问题的，当然，既然是混合开发，有前端工程师的参与，相信有不少移动端开发者会选择这样的惯用套路：

然而，我想说的是，只要你肯去思考，去动手，总会找到相应的解决方案，而你自己也总会有所收获！

更多推荐

WebView之修改页面JS、CSS