UI组件——WebView使用总结

最新推荐文章于 2025-01-23 09:17:20 发布

原创最新推荐文章于 2025-01-23 09:17:20 发布 · 903 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webview #与js交互 #webview总结

Android开发笔记专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了WebView的使用，包括loadUrl和loadDataWithBaseURL的使用，解决h5页面在Android上的适配问题，如何处理加载失败的网页，以及与JavaScript的交互，包括Android调用js和js调用Android的方法。同时，文章还提到了WebView的安全问题和潜在的内存泄漏问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点1：loadUrl及loadDataWithBaseURL的使用
这部分内容已经在 UI组件——WebView部分api释义 讲过了，还不懂得可以去看一下

重点2：h5页面在Android WebView中的适配问题
笔者踩过的坑是h5页面未对移动端做任何适配，而且在h5页面指定了
，导致Android端适配很差，我们Android端在这里自己搞各种适配的工作，结果还是不理想，其实这个问题理想解决方法是：h5页面要尽量使用百分比布局，比如指定width：100%，那么就能解决多数问题，但是还有一类问题无法解决，h5页面中的有些文本在移动端显示的特别小，如果想要正常显示，那么在h5的中添加 name=”viewport” content=”width=device-width”来解决；具体为

重点3：对加载网页时出现的失败网页的处理
通常情况下，WebView加载网页如果出现错误，那么错误提示便是网页本身的错误提示，这对用户来说很不友好，因此，为了给客户良好的体验感，我们会把原生的错误提示页面替换为一个比较友好的提示页面，具体是什么页面可以找设计。要替换原生的错误页面，我们就要知道当页面发生错误时会回调什么方法，然后我们在那里做拦截处理，便可以成功替换页面了。当加载错误时会回调onReceivedError(WebView view, WebResourceRequest request, WebResourceError error)和onReceivedHttpError( WebView view, WebResourceRequest request, WebResourceResponse errorResponse)，因此我们在这里做替换就可以了。注意，第一个方法要求api 23，要做一些适配工作，比如，我们可以判断版本>23时用第一个方法，其他情况下用这个方法：onReceivedError(WebView view, int errorCode,String description, String failingUrl)。

重点4：与js交互
这是WebView的重中之重，分两个方向讲1：Android调用js，2：js调用Android
- 1：Android调用js
  android 调用js又分为两种情况，一种是无返回值的调用，一种是有返回值的调用。无论哪种情况都需要添加webSettings.setJavaScriptEnabled(true);否则不会生效
  - a:无返回值的交互
    Android调用js无需返回值时直接使用：webview.loadUrl(str);str是需要执行的js语句，UI组件——WebView部分api释义这里已经讲过了。
  - b:有返回值的调用
    Android调用js有返回值的方法是在Android4.4（api 19）以后新增的方法：evaluateJavascript(String script, ValueCallback resultCallback)；script是即将执行的js语句，resultCallback是执行结果的回调
- 2：js调用Android
  首先：Android需要提供可调用的方法，这里以获取html的宽度为例：

    //通过与js交互来获取HTML的宽度
    class JavaScriptToAndroid {
        @JavascriptInterface//必须要记得加上
        public void getWidth(String value) {
            if (value != null) {
                int width = Integer.parseInt(value);
                Toast.makeText(WebViewActivity.this, "width of html is: " + width + "px", Toast.LENGTH_SHORT).show();
            }
        }
    }

  然后设置

 settings.setJavaScriptEnabled(true);

 并将该类注入到js中，并以Android作为调用的标识

webView.addJavascriptInterface(new JavaScriptToAndroid(), "Android");

 最后在html中调用这个方法，html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            .box{
                width: 100%;
                height:500px;
                background: pink;
                margin:0 auto;
            }

    </style>
</head>
<body>
<div class="box">
    <p>
        <input type="button" id="enter" value="调用Android" onclick="testClick();"/>
    </p>
</div>
</body>
<script>
   function testClick(){
   window.Android.getWidth(document.getElementsByClassName("box")[0].offsetWidth)
   }
</script>
</html>

   至此，交互结束

重点5：埋下的坑

坑1：安全问题
webView 在api 4.0 到4.2 之间增加了 searchBoxJavaBridge_ 方法，导致webView 存在安全漏洞解决方法是：在4.2 以前的版本不用 addJavascriptInterface 接口，并且在4.0-4.2之间移除searchBoxJavaBridge方法 —>我也是google来的，并未遇到

public class MyWebView extends WebView{


public MyWebView(Context context) {
    super(context);
    removeSearchBoxJavaBridgeInterface();
}

public MyWebView(Context context, AttributeSet attrs) {
    super(context, attrs);
    removeSearchBoxJavaBridgeInterface();
}

public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    removeSearchBoxJavaBridgeInterface();
}

public MyWebView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    removeSearchBoxJavaBridgeInterface();
}


private void removeSearchBoxJavaBridgeInterface() {
    if (Build.VERSION.SDK_INT >= 14 && Build.VERSION.SDK_INT < 17) {
        removeJavascriptInterface("searchBoxJavaBridge_");
    }
}

@Override
public void addJavascriptInterface(Object object, String name) {
    if (Build.VERSION.SDK_INT >= 17) {
        super.addJavascriptInterface(object, name);
    }
}
}

坑2：内存泄漏问题

  @Override
protected void onDestroy() {
    super.onDestroy();
    if (mMyWebView != null) {
        mMyWebView.stopLoading();
        mMyWebView.getSettings().setJavaScriptEnabled(false);
        ViewGroup parent = (ViewGroup) mMyWebView.getParent();
        parent.removeAllViews();//ViewGroup中的方法
        try {
            mMyWebView.destroy();//销毁WebView
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}