webview使用详解

Posted 2023-02-14

问题背景

安卓日常开发和学习过程中，经常会使用到webview来加载网页，比如前两天过来了这样一个需求：拦截某一个链接不执行此链接，执行指定跳转到其他activity页面。这就要求我们对webview加载的URL进行判断，如果是属于需要屏蔽的URL，我们就进行拦截，并且执行相应的操作。那么首先，我们来熟悉下webview的正常使用操作。

问题分析

1、webview的基本使用

（1）首先，我们在布局文件中来添加WebView控件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="composer.WebviewlActivity">

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

（2）代码中让WebView控件加载显示网页，代码如下：

class WebviewlActivity : AppCompatActivity() 
    private lateinit var binding: ActivityOpenGlBinding

    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        binding = ActivityOpenGlBinding.inflate(LayoutInflater.from(this));
        setContentView(binding.root)

        initWebview()
    

    private fun initWebview() 
        // 访问网页
        binding.webView.loadUrl("http://www.baidu.com")
        // 系统默认会通过手机浏览器打开网页，为了能够直接通过WebView显示网页，则必须设置
        binding.webView.webViewClient = object : WebViewClient() 
            override fun shouldOverrideUrlLoading(view: WebView, url: String?): Boolean 
                // 使用WebView加载显示url
                if (url != null) 
                    view.loadUrl(url)
                
                //返回true
                return true
            
        
    

我们需要加载网络上的数据内容，因此还需要添加网络权限：

    <!-- 添加网络权限 -->
    <uses-permission android:name="android.permission.INTERNET" />

同时因为可能我们测试要支持http的URL格式进行明文网络传输，manifest中需要配置：

    <application
        ...
        android:usesCleartextTraffic="true">

运行结果如下：

2、webview的常用方法

（1）清除缓存

// 清除网页访问留下的缓存
// 由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);

// 清除当前webview访问的历史记录
// 只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；

// 这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；

（2）WebView 中网页的前进 / 后退

webView.goBack();//跳到上个页面
webView.goForward();//跳到下个页面
webView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
webView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)
    
// 以当前的index为起始点前进或者后退到历史记录中指定的steps
// 如果steps为负数则为后退，正数则为前进
Webview.goBackOrForward(intsteps) 
// 重新加载当前请求
Webview.reload()

（3）解决跳转用默认浏览器打开的问题

webView.setWebViewClient(new WebViewClient()
         @Override
         public boolean shouldOverrideUrlLoading(WebView view, String url) 
             view.loadUrl(url);// 强制在当前 WebView 中加载 url
             return true;
         
     );

（4）Back键控制网页后退

public boolean onKeyDown(int keyCode, KeyEvent event) 
    if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) 
         mWebView.goBack();
         return true;
    
    return super.onKeyDown(keyCode, event);

3、webview使用相关关键类

（1）WebSettings类

// 声明WebSettings子类
WebSettings webSettings = webView.getSettings();
// 如果访问的页面中要与javascript交互，则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);
// 支持插件
webSettings.setPluginsEnabled(true);
// 设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
// 缩放操作
webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
// 其他细节操作
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
webSettings.setAllowFileAccess(true); //设置可以访问文件
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
weSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

（2）WebViewClient类

    private fun initWebview() 
        // 访问网页
        binding.webView.loadUrl("http://www.baidu.com")
        // 系统默认会通过手机浏览器打开网页，为了能够直接通过WebView显示网页，则必须设置
        binding.webView.webViewClient = object : WebViewClient() 
            override fun shouldOverrideUrlLoading(view: WebView, url: String?): Boolean 
                // 使用WebView加载显示url
                if (url != null) 
                    view.loadUrl(url)
                
                //返回true
                return true
            

            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) 
                // 网页加载开始的操作
                super.onPageStarted(view, url, favicon)
            

            override fun onPageFinished(view: WebView?, url: String?) 
                // 网页加载结束的操作
                super.onPageFinished(view, url)
            
        
    

（3）WebChromeClient类

 webView.setWebChromeClient(new WebChromeClient()
            // 获得网页的加载进度并显示
            @Override
            public void onProgressChanged(WebView view, int newProgress) 
                Log.d("MainActivity","newProgress："+ newProgress );
                super.onProgressChanged(view, newProgress);
            

            // 输出Web 端日志
            @Override
            public boolean onConsoleMessage(ConsoleMessage consoleMessage) 
                Log.d("MainActivity","consoleMessage："+ consoleMessage.message() );
                return super.onConsoleMessage(consoleMessage);
            

            // 获取Web页中的标题
            @Override
            public void onReceivedTitle(WebView view, String title) 
                super.onReceivedTitle(view, title);
                Log.d("MainActivity","标题："+ title);
            

            // 获取Web页中的图标
            @Override
            public void onReceivedIcon(WebView view, Bitmap icon) 
                super.onReceivedIcon(view, icon);
            

            // 获取Web页中 Js中调用alert()函数，产生的对话框
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) 
                Log.d("MainActivity","onJsAlert："+ message);
                return super.onJsAlert(view, url, message, result);
            

            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) 
                Log.d("MainActivity","onJsPrompt："+ message);
                return super.onJsPrompt(view, url, message, defaultValue, result);
            

            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) 
                Log.d("MainActivity","onJsConfirm："+ message);
                return super.onJsConfirm(view, url, message, result);
            
        );

4、如何避免WebView内存泄露?

（1）建议不要在xml布局文件中定义Webview控件 ，而是在需要的时候在Activity中直接创建，并且getApplicationgContext()上下文对象推荐使用，代码如下：

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
webView = new WebView(getApplicationContext());
webView.setLayoutParams(params);
mLayout.addView(webView);

（2）在Activity销毁（WebView）时，先让WebView加载null内容，然后移除WebView，再销毁WebView，最后把WebView设置为null。代码如下：

@Override
protected void onDestroy() 
    if (webView != null) 
        webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
        webView.clearHistory(); ((ViewGroup)
        webView.getParent()).removeView(mWebView);
        webView.destroy();
        webView = null;
    
    super.onDestroy();

问题解决

上面是对webview基本使用的一些总结，现在回到我们第一节背景中提到的需求：拦截某一个链接不执行此链接，执行指定跳转到其他activity页面。这就要求我们对webview加载的URL进行判断，如果是属于需要屏蔽的URL，我们就进行拦截，并且执行相应的操作。 根据前面的梳理总结，不难推出，这个需求就是需要在shouldOverrideUrlLoading方法中做处理，代码如下：

webView.setWebViewClient(new WebViewClient() 
            @Override
            // 在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。
            public boolean shouldOverrideUrlLoading(WebView view, String url) 
                // 判断url链接中是否含有某个字段，如果有就执行指定的跳转（不执行跳转url链接），如果没有就加载url链接
                if (url.contains("/urlxxx-")) 
                    Intent i = new Intent(MainActivity.this, MainActivity.class);
                    startActivity(i);
                    // 返回true，拦截URL，避免走后面的加载流程。
                    return true;
                 else 
                    return false;
                
            
        );

问题总结

本文从一个webview加载网页的具体需求出发，先对webview的基本使用进行了相关梳理，然后对该需求的处理方案进行了总结，有兴趣的同学可以进一步深入研究。