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

来源：互联网发布：新闻类网站数据库编辑：程序博客网时间：2024/06/11 18:50

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);    }}

0 0