android web view的学习 2 通过WebChomeClient 实现进度条和title，通过WebViewClient 来进行url的拦截，和javascript的交互

关注

原创最新推荐文章于 2026-09-27 11:35:32 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

Android WebView使用案例与实战指南在移动应用开发的世界里，WebView组件是一个不可或缺的角色。它可以看作是一个简化的浏览器，嵌入到应用程序中，用于显示网页内容。这对于开发者来说，意味着能够利用网页技术来扩展应用的功能，而无需对原生代码有深入了解。在声明WebView组件时，可以设置多个属性来定制其行为。以下是一些常用的属性及其说明：和：分别用来设置WebView组件的宽度和高度。：用来指定一个WebView的设置对象，其中可以进行一些高级配置，比如启用或禁用JavaScript支持、设置缩放模式等。阅读详情

android webview demo

WebView 包含了浏览网页功能空间
WebViewClient WebView 网页加载的处理器，例如加载开始，加载结束
WebChromeClient：侧重于WebView 处理界面部分的功能，例如显示进度条，对话框，标题
WebSettings，WebView的设置
JS的支持，类和注解

PS: 如果需要设置缩放比例：webview.setInitialScale(150);

webView 设置缩放比例

首先自定义一个接口，

package com.example.administrator.webviewdemo;

/**
 * Created by Administrator on 2016/8/18.
 */
public interface WebSupport {
    void updateProgress(int progress);
    void updateTitle(String title);
}

自定义一个MyWebChromeClient，

package com.example.administrator.webviewdemo;

import android.webkit.WebChromeClient;
import android.webkit.WebView;

/**
 * Created by Administrator on 2016/8/18.
 */
public class MyWebChromeClient extends WebChromeClient {
    WebSupport webSupport;

    public MyWebChromeClient(WebSupport webSupport) {
        this.webSupport = webSupport;
    }

    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        //super.onProgressChanged(view, newProgress);
        webSupport.updateProgress(newProgress);
    }

    @Override
    public void onReceivedTitle(WebView view, String title) {
//        super.onReceivedTitle(view, title);
        webSupport.updateTitle(title);
    }
}

拦截特定的url

自定义WebViewClient，

package com.example.administrator.webviewdemo;

import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.util.Log;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import java.net.MalformedURLException;
import java.net.URL;

/**
 * Created by Administrator on 2016/8/18.
 */
public class MyWebViewClient extends WebViewClient {
    Context context;

    public MyWebViewClient(Context context) {
        this.context = context;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        return super.shouldOverrideUrlLoading(view, request);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        boolean ret = super.shouldOverrideUrlLoading(view, url);

        if(url.indexOf("58.com")>0) {
            ret = true;
            try {
                URL  u = new URL(url);
                Log.d("kodulf", "login");
                view.loadUrl("http://www.ganji.com");
            } catch (MalformedURLException e) {
                e.printStackTrace();
            }
        }else if(url.startsWith("tel:")){
            Intent intent = new Intent(Intent.ACTION_CALL);
            intent.setData(Uri.parse(url));
            context.startActivity(intent);
            ret = true;
        }else if(url.startsWith("smsto://")){
            Intent intent = new Intent(Intent.ACTION_SENDTO);
            intent.setData(Uri.parse(url));
            context.startActivity(intent);
            ret = true;
        }

        return ret;
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }
}

与javaScipt的交互：

在我们的main的文件夹下面，创建一个assets的文件夹，然后创建一个index.html的文件

<html>
<head>

    <script type="application/javascript">

        //1.创建方法,有一个js 要调用必须要有JavaScriptInterface

        function callAndroid(msg){

            //调用Android 代码
            //window内部的对象都是有WebView(WebKit)来创建的
            //如果使用WebView addJavaScriptInterface(Object,String)
            //调用的这个方法，就能够将Object 对象，添加到JS的window中
            //引用的时候，使用String 参数的内容作为对象名
            //如果string=“hello” 那么就可以调用window.hello

            //本例，使用Android
            window.Android.showToast(msg);
        }

        function exitApp(){
            window.Android.exitApp();
        }

        //获取Java内部的数据，只要Java 方法，返回字符串就可以了
        //获取当前的手机的类型
        function getDevice(){
            //var device = window.Android.getDevice();
            //document.write("phone type="+device);
            document.write("phone type="+"hello");
        }

    </script>
</head>
<body>
<a href="http://m.58.com">跳到58</a>

<a href="tel://13391531070">打电话</a>

<a href="smsto://13391531070">发短息</a>

<button title="js 吐司" value="js 吐司"  onclick="callAndroid('toast')">click me and Toast</button>

<button title="退出" value="退出"  onclick="exitApp()">点击退出</button>

<button title="获取手机类型" value="获取手机类型"  onclick="getDevice()">获取手机类型，通过Android来获取，然后设置到js中</button>
</body>
</html>

创建一个接口：

package com.example.administrator.webviewdemo;

import android.content.Context;
import android.os.Build;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

/**
 * Created by Administrator on 2016/8/18.
 */
public class JsSupport {
    public Context context;

    public JsSupport(Context context) {
        this.context = context;
    }

    //TODO 一定一定要记住了，方法要是注解，并且是public 的不然是不能够被调用到的，而且会报错：Uncaught TypeError: window
    @JavascriptInterface
    public void showToast(String msg){
        if(msg!=null){
            Toast.makeText(context,msg,Toast.LENGTH_LONG).show();
        }
    }

    //TODO 一定一定要记住了，方法要是注解，并且是public 的不然是不能够被调用到的，而且会报错：Uncaught TypeError: window
    @JavascriptInterface
    public void exitApp(){
        System.exit(0);
    }

    //TODO 一定一定要记住了，方法要是注解，并且是public 的不然是不能够被调用到的，而且会报错：Uncaught TypeError: window
    @JavascriptInterface
    public String getDevice(){
        return Build.DEVICE;
    }


}

MainActivity:

package com.example.administrator.webviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

import java.net.MalformedURLException;
import java.net.URL;
//
//public class MainActivity extends AppCompatActivity {
//
//    @Override
//    protected void onCreate(Bundle savedInstanceState) {
//        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
//        WebView webView = (WebView)findViewById(R.id.webView);
//        //必须要设置loadUrl里面的是http 开头的
//        //webView.setWebViewClient(new WebViewClient());
//        //webView.loadUrl("http://www.baidu.com");
//        //
//        //String data ="<html><body>我是网页</br><img width=800 src=\"http://www.pptbz.com/pptpic/UploadFiles_6909/201204/2012041411433867.jpg\"/></body></html>";
//        String data ="<html><head><style>img{width:50% height =50%}</style></head><body>我是网页</br><img src=\"http://www.pptbz.com/pptpic/UploadFiles_6909/201204/2012041411433867.jpg\"/></body></html>";
//        webView.loadData(
//                data,
//                "text/html;charset=UTF-8",
//                null
//        );
//
//        //webView图片显示的问题，需要进行适配，需要客户端和服务器人员一起开发，服务器中的网页，不允许有尺寸。客户端需要使用css 控制图片的尺寸
//        //通用规则，服务器返回的html 只是片段，没有《html》《body》《/body》</html> 只有内容，客户端需要手动的添加图片屏幕适配的内容
//        //使用css来控制所有图片的适配；使用style 标签来定义图片的样式
//    }
//}


public class MainActivity extends AppCompatActivity implements WebSupport {

    /**
     WebView 包含了浏览网页功能空间
     WebViewClient WebView 网页加载的处理器，例如加载开始，加载结束
     WebChromeClient：侧重于WebView 处理界面部分的功能，例如显示进度条，对话框，标题
     WebSettings，WebView的设置
     JS的支持，类和注解
     */
    private WebView webView;
    private ProgressBar progressbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView);
        progressbar=(ProgressBar)findViewById(R.id.progressbar);
        progressbar.setMax(100);


        //如果是上面的直接loadUrl的话，会调用我们系统的浏览器去打开上面的网址，有了下面的webviewclient的设置，会在我们的应用中打开
//        webView.setWebViewClient(new WebViewClient(){
//            @Override
//            public boolean shouldOverrideUrlLoading(WebView view, String url) {
//                view.loadUrl(url);
//                //return super.shouldOverrideUrlLoading(view, url);
//                return true;
//            }
//        });

        webView.setWebViewClient(new MyWebViewClient(this));

        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setDomStorageEnabled(true);
        //settings.setTextZoom(150);
        settings.setDisplayZoomControls(true);
        settings.setDefaultFontSize(32);

//        webView.setWebChromeClient(new WebChromeClient(){
//            @Override
//            public void onProgressChanged(WebView view, int newProgress) {
//                super.onProgressChanged(view, newProgress);
//                Log.d("kodulf","当前的进度"+newProgress);
//
//            }
//        });

        webView.setWebChromeClient(new MyWebChromeClient(this));

        //开启Js调用java代码的功能
        //参数2，就是添加JS 中的window内部的对象
        //
        webView.addJavascriptInterface(new JsSupport(this),"Android");


        //有两种方法，一种是直接的loadUrl，另一种是加载源码
        //webView.loadUrl("http://m.58.com");//注意了，这里如果输入www.baidu.com的话有可能就打不开了

        //我们将网页放在assets的目录下面，记住了
        //TODO 记住了file .后面是三个/// 然后路径名是android_asset
        webView.loadUrl("file:///android_asset/index.html");

    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //return super.onKeyDown(keyCode, event);

        if(keyCode== KeyEvent.KEYCODE_BACK){
            if(webView.canGoBack()){
                webView.goBack();
                return true;
            }else{
                System.exit(0);//推出程序
            }
        }
        return super.onKeyDown(keyCode, event);
    }


    @Override
    public void updateProgress(int progress) {
        progressbar.setProgress(progress);
    }

    @Override
    public void updateTitle(String title) {
        setTitle(title);
    }
}