WebView使用详解-优快云博客

本文链接：https://blog.youkuaiyun.com/iplayvs2008/article/details/44525027

本文详细介绍了WebView的基本使用方法，包括打开指定网页、处理超链接、页面前进后退、重写加载方法、监听加载过程及进度、与JavaScript交互等内容。

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

WebView：

1.打开制定网页：

webView.loadUrl("http://www.baidu.com");

2.打开超链接，需要设置WebViewClient：

webView.setWebViewClient(new WebViewClient() {
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				view.loadUrl(url); // 根据传入的参数再去加载新的网页
				return true; // 表示当前WebView可以处理打开新网页的请求，不用借助系统浏览器
			}
		});

3.重写onKeyDown，实现点击返回放回上一个网页：

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

前进：webView.goForward()

if(webView.canGoForward()){  
                webView.goForward();  
            }else{  
                Toast("已经是最后一页了,不能再前进了");  
            }

4.重写加载：

webView.reload();

5.监听webView加载开始和结束，加载进度；

监听开始结束：在WebViewClient重写onPageStarted和onPageFinished

webView.setWebViewClient(new WebViewClient(){  
  
@Override  
            public void onPageStarted(WebView view, String url, Bitmap favicon) {  
                if(progDlg == null || !progDlg.isShowing()){  
                    progDlg = new ProgressDialog(ctx);  
                    progDlg.setMessage("正在加载，请稍候。。。");  
                }  
                progDlg.show();  
            }  
  
            @Override  
            public void onPageFinished(WebView view, String url) {  
                progDlg.dismiss();  
            }  
}

监听进度：在WebChromeClient重载onProgressChanged

webView.setWebChromeClient(new WebChromeClient(){  
  
            @Override  
            public void onProgressChanged(WebView view, int newProgress) {  
                Message msg = new Message();  
                                msg.what = 200;  
                                msg.obj = newProgress;  
                                handler.sendMessage(msg);  
            }  
}

6.与javascript的交互：

(1)设置支持javaScript：

webView.getSettings().setJavaScriptEnabled(true);//打开就可以用js的功能

(2)javaScript调用java方法：

webView.addJavascriptInterface(strHtml, "MyContent");

JS代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
  
<script type="text/javascript">  
    function btn_test() {  
/* 打印,logcat里的tag是Web Console */  
        console.log("btn_test");  
    }  
  
    function call_java() {  
/* js调用java代码,需要接口 */  
        Window.interface_test.showToastFromWeb("hello i am javascript!");  
    }  
  
    function test_alert() {  
/* 弹出对话框 */  
        alert("hello i am javascript!");  
    }  
  
    function test_confirm() {  
        /* 弹出带确定和取消按钮的对话框 */  
    var v = confirm("hello i am javascript!");  
        console.log("onfirm " + v);  
    }  
  
    function test_prompt() {  
/* 弹出带输入框的对话框 */  
        var v = prompt("input you name!", "tom");  
        console.log("prompt " + v);  
    }  
      
</script>  
</head>  
<body>  
    <button οnclick="btn_test()">test</button>  
    <button οnclick="call_java()">call_java</button>  
    <button οnclick="test_alert()">test_alert</button>  
    <button οnclick="test_confirm()">test_confirm</button>  
    <button οnclick="test_prompt()">test_prompt</button>  
    <label tel:800800284>tel:8008233</label>  
  
</body>  
</html>

让js的call_java()调用本地interface_test接口的showToastFromWeb方法

webView.addJavascriptInterface(new Object(){  
            public void showToastFromWeb(String msg){  
                showToast(msg);  
            }  
        }, "interface_test");

注 :addJavascriptInterface：

参数1:Java对象实例参数2：interface name（interface name，注意此接口不是通常所说的那个用来实现的接口，而是传入的这个对象在JS中的别名），在JS代码中用此名字调用该Java对象的方法。这个方法可以让JS代码控制宿主程序，这是一个非常有力的特性，但是同时也存在一些安全问题，因为进一步JS代码可以通过反射访问到注入对象的公有域。攻击者可能会在HTML和JavaScript中包含了有威胁性的代码。所以Android 4.1，API 17，也就是JELLY_BEAN 开始，只有被JavascriptInterface 注解标识的公有方法可以被JS代码访问。注意:与JS代码绑定的的这个Java对象运行在另一个线程中，与创建它的线程不是一个线程。注意:这个Java对象的域是不可访问的。

如果JS代码中的按钮会出现在WebView中，但是点击下去后，不会弹出相应的对话框之类。设置 WebChromeClient ,重写alert方法等,让其调用父类即可:

webView.setWebChromeClient(new WebChromeClient(){   
            @Override  
            public boolean onJsAlert(WebView view, String url, String message,  
                    JsResult result) {  
                // TODO Auto-generated method stub  
                return super.onJsAlert(view, url, message, result);  
            }  
              
            @Override  
            public boolean onJsConfirm(WebView view, String url,  
                    String message, JsResult result) {  
                // TODO Auto-generated method stub  
                return super.onJsConfirm(view, url, message, result);  
            }  
  
            @Override  
            public boolean onJsPrompt(WebView view, String url, String message,  
                    String defaultValue, JsPromptResult result) {  
                // TODO Auto-generated method stub  
                return super.onJsPrompt(view, url, message, defaultValue, result);  
            }  
                          
        });

(3)java调用JavaScript：

webView.loadUrl("javascript:pushNewsData('"+strHtml+"')");

则调用上面js中的btn_test方法：

webView.loadUrl("javascript:btn_test()");

如果JavaScript函数是带参数的，那么调用时要特别注意。
比如JS中函数writeLine:
function writeLine(string)
    {
        console.log("Write a new Line");//调试信息
        document.getElementById("content").innerHTML += string + "<br />";//在content标签段落加入新行
    }