WebView

最新推荐文章于 2025-05-11 11:08:51 发布

原创最新推荐文章于 2025-05-11 11:08:51 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍如何在Android应用中使用WebView加载网页，包括初始化配置、处理网页加载进度、拦截页面跳转及实现与JavaScript交互等核心功能。

初始化视图，可代码创建

        //初始化内置浏览器
        this.webView = (WebView) findViewById(R.id.webWebView);
//        RelativeLayout.LayoutParams relLayoutParams=new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
//        this.addContentView(this.webView,relLayoutParams);

加载网页，并配置属性

this.webView.loadUrl("https://www.hao123.com/");//WebView加载的网页使用loadUrl

        WebSettings webSettings = this.webView.getSettings();//获得WebView的设置
        webSettings.setUseWideViewPort(true);// 设置此属性，可任意比例缩放
        webSettings.setLoadWithOverviewMode(true);//适配
        webSettings.setJavaScriptEnabled(true);  //支持js
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  //设置 缓存模式
        webSettings.setDomStorageEnabled(true);// 开启 DOM storage API 功能
        webSettings.setDatabaseEnabled(true);//开启 database storage API 功能
        webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);//HTTPS，注意这个是在LOLLIPOP以上才调用的
        webSettings.setAppCacheEnabled(true);//开启 Application Caches 功能
        webSettings.setBlockNetworkImage(false);//关闭加载网络图片，在一开始加载的时候可以设置为true，当加载完网页的时候再设置为false

设置网页不跳转到外部浏览器

      //如果不设置WebViewClient，请求会跳转系统浏览器
        this.webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                //返回false，意味着请求过程里，不管有多少次的跳转请求（即新的请求地址），均交给webView自己处理，这也是此方法的默认处理
                //返回true，说明你自己想根据url，做新的跳转，比如在判断url符合条件的情况下，我想让webView加载http://ask.youkuaiyun.com/questions/178242
//                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//                    if (request.getUrl().toString().contains("sina.cn")){
//                        view.loadUrl("http://ask.youkuaiyun.com/questions/178242");
//                        return true;
//                    }
//                }
                return false;
            }
        });

创建进度条

  this.webProgressBar = (ProgressBar) findViewById(R.id.webProgressBar);

关联进度条

  this.webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //加载的进度
                if (newProgress == 100) {
                    // 网页加载完成
                    webProgressBar.setVisibility(View.GONE);
                } else {
                    // 加载中
                    webProgressBar.setProgress(newProgress);
                }
            }
        });

进度条样式

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <gradient
                android:startColor="@color/colorWhite"
                android:centerColor="@color/colorWhite"
                android:endColor="@color/colorWhite"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                    android:startColor="@color/colorBlue"
                    android:centerColor="@color/colorBlue"
                    android:endColor="@color/colorBlue"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="@color/colorBlue"
                    android:centerColor="@color/colorBlue"
                    android:endColor="@color/colorBlue"/>
            </shape>
        </clip>
    </item>

</layer-list>

上面是使用WebView中最基础的设置，相信在开发过程中都会进行如上的设置的。

webView.setWebChromeClient(new WebChromeClient() {     
 
     @Override    
 
     public void onProgressChanged(WebView view, int newProgress) { 
 
         //加载的进度 
 
     } 
 
     @Override 
 
     public void onReceivedTitle(WebView view, String title) {    
 
         //获取WebView的标题 
 
     } 
 
    @Override 
 
    public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {     
 
        return super.onJsAlert(view, url, message, result); 
 
        //Js 弹框 
 
    } 
 
    @Override 
 
    public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {    
 
        AlertDialog.Builder b = new AlertDialog.Builder(IllegalQueryActivity.this);     
 
        b.setTitle("删除");     
 
        b.setMessage(message);     
 
        b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {         
 
            @Override         
 
            public void onClick(DialogInterface dialog, int which) {             
 
                result.confirm();         
 
            }     
 
        });     
 
        b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {         
 
            @Override         
 
            public void onClick(DialogInterface dialog, int which) {             
 
                result.cancel();         
 
            }     
 
        });     
 
        b.create().show();     
 
        return true; 
 
    } 
 
}); 
 
webView.setWebViewClient(new WebViewClient() {     
 
    @Override     
 
    public boolean shouldOverrideUrlLoading(WebView view, String url) {         
 
       //需要设置在当前WebView中显示网页，才不会跳到默认的浏览器进行显示 
 
       return true;    
 
    }     
 
    @Override     
 
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) { 
 
        super.onReceivedError(view, request, error); 
 
        //加载出错了 
 
    }    
 
    @Override     
 
    public void onPageFinished(WebView view, String url) {         
 
        super.onPageFinished(view, url); 
 
        //加载完成 
 
    } 
 
}); 
 
webView.setDownloadListener(new DownLoadListener());//下载监听 
 
private class DownLoadListener implements DownloadListener {    
 
    @Override    
 
    public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {       
 
    } 
 
}

然后就是WebView跟JS的交互了

webView.addJavascriptInterface(new WebAppInterface(this), "WebJs"); 
 
public class WebAppInterface {  
 
    Context mContext;     
 
    public WebAppInterface(Context c) {         
 
        mContext = c;     
 
    }     
 
    @JavascriptInterface     
 
    public void method() { 
 
    } 
 
} 
 
webView.loadUrl("javascript:jsMethod()");//这是WebView最简单的调用JS的方法

当activity执行生命周期的时候，这里需要注意的是在onDestroy的时候，需要销毁WebView，不然也会出现内存泄漏的。

@Overrideprotected void onPause() {     
 
    super.onPause();     
 
    if (webView != null) {         
 
        webView.onPause();     
 
    } 
 
} 
 
@Override 
 
protected void onResume() {     
 
    super.onResume();     
 
    if (webView != null) {         
 
        webView.onResume();     
 
    } 
 
} 
 
@Override 
 
protected void onDestroy() {         
 
    if (webView != null) {         
 
        webView.clearCache(true); //清空缓存    
 
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {             
 
            if (webViewLayout != null) {                 
 
                webViewLayout.removeView(webView);             
 
            }             
 
        webView.removeAllViews();             
 
        webView.destroy();         
 
    }else {             
 
        webView.removeAllViews();             
 
        webView.destroy();             
 
        if (webViewLayout != null) {                 
 
            webViewLayout.removeView(webView);            
 
        }         
 
     }   
 
     webView = null;     
 
  }    
 
}

可以看到上面的onDestroy方法中对系统的版本进行了判断，那是因为我在不同的版本中进行了测试，如果低于5.0版本的WebView中，如果先在parent中remove了WebView，那WebView将无法进行destroy了，这样就会造成内存的泄漏，下来你们可以自己去尝试一下这个说法是不是正确的。

现在还遇到的一个问题就是，当WebView嵌套在ScrollView中时，某些机型会出现闪屏的问题，单独WebView的时候是不会出现的，把硬件加速关闭了之后，对用户的体验又不好，所以暂时还未想到比较好的解决方案，所以还是建议不要在ScrollView中嵌套WebView这样的控件。