WebView之修改页面JS、CSS

悠悠 2023-10-04 17:26 57阅读 0赞

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内容传回，如下：

![873cf44170b24cf7bce1dfd19aa9b33f.png][]

//注入一个原生的方法，供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原生技术来解决问题的，当然，既然是混合开发，有前端工程师的参与，相信有不少移动端开发者会选择这样的惯用套路：

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

[873cf44170b24cf7bce1dfd19aa9b33f.png]: https://img-blog.csdnimg.cn/873cf44170b24cf7bce1dfd19aa9b33f.png