UI组件——WebView使用总结

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

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


  • 重点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();
            }
        }
    }
    • 坑3:执行js脚本偶发性失败(尚未解决)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值