Android WebView使用

本文主要对WebView进行介绍，包括webView 4个可以定制的点、设置WebView back键响应、控制网页的链接仍在webView中跳转、显示页面加载进度、处理https请求、利用addJavascriptInterface实现android程序和javascript交互等等

 

WebView基于webkit引擎展现web页面的控件，使用前需要在Android Manifest file中配置internet访问权限，否则提示页面无法访问

<uses-permission android:name="android.permission.INTERNET" />

WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

WebView有几个可以定制的点：

（1）设置WebChromeClient子类，WebChromeClient会在一些影响浏览器ui交互动作发生时被调用，比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等，详见WebChromeClient

 

（2）设置WebViewClient子类，WebViewClient会在一些影响内容喧嚷的动作发生时被调用，比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到http认证需要处理、页面键盘响应、页面中的url打开处理等等，详见WebViewClient

 

（3）设置WebSettings类，其中包含多项配置。WebSettings用来对WebView的配置进行配置和管理，比如是否可以进行文件操作、缓存的设置、页面是否支持放大和缩小、是否允许使用数据库api、字体及文字编码设置、是否允许js脚本运行、是否允许图片自动加载、是否允许数据及密码保存等等，详见WebSettings

 

（4）设置addJavascriptInterface方法，将java对象绑定到webView中，以方便从页面js中控制java对象，实现用本地java代码和html页面进行交互，甚至可以进行页面自动化。但如此做存在安全隐患，所以若设置了此方法，请确保webView的代码都是自己完成，详细使用addJavascriptInterface进行自动化见本文5使用addJavascriptInterface完成和js交互

 

1、back键控制网页后退

Activity默认的back键处理为结束当前Activity，webView查看了很多网页后，希望按back键返回上一次浏览的页面，这个时候我们就需要覆盖onKeyDown函数，告诉他如何处理，如下：

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

        return super.onKeyDown(keyCode, event);
    }

 其中webView.canGoBack()在webView含有一个可后退的浏览记录时返回true

webView.goBack();表示返回webView的上次访问页面

 

2、当前网页的链接仍在webView中跳转

                webView.setWebViewClient(new WebViewClient() {

                    @Override
                    public boolean shouldOverrideUrlLoading(WebView view, String url) {
                        view.loadUrl(url);
                        return true;
                    }
                });

 shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时，给当前应用程序一个处理机会，如果没有重写此函数，webView请求ActivityManage选择合适的方式处理请求，就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理，return false表示让当前webView处理

Give the host application a chance to take over the control when a new url is about to be loaded in the current WebView. If WebViewClient is not provided, by default WebView will ask Activity Manager to choose the proper handler for the url. If WebViewClient is provided, return true means the host application handles the url, while return false means the current WebView handles the url.

参考：

http://developer.android.com/reference/android/webkit/WebViewClient.html#shouldOverrideUrlLoading(android.webkit.WebView, java.lang.String)

 

问题分析：

今天在用webView load腾讯的OAuth页面http://open.t.qq.com/cgi-bin/authorize

时，突然弹出选择uc还是互联网浏览器的确认框，很奇怪，其他页面都能正常load，而这个却无法在webView中load，后来用火狐看了下是因为load这个页面的时候会重定向到另外一个页面http://open.t.qq.com/oauth_html/login.php?oauth_token=xxx&type=0，而webView没有设置shouldOverrideUrlLoading，导致url交给了ActivityManage去处理，解释如上，后添加后可正常load页面

 

3、页面加载进度

代码如下

webView.setWebChromeClient(new WebChromeClient() {

    public void onProgressChanged(WebView view, int progress) {
        setTitle("页面加载中，请稍候..." + progress + "%");
        setProgress(progress * 100);

        if (progress == 100) {
            setTitle(R.string.app_name);
        }
    }
});

onProgressChanged通知应用程序当前页面加载的进度

progress表示当前页面加载的进度，为1至100的整数

参考：

http://developer.android.com/reference/android/webkit/WebChromeClient.html#onProgressChanged(android.webkit.WebView, int)

 

4、处理https请求

webView默认是不处理https请求的，页面显示空白，需要进行如下设置：

    webView.setWebViewClient(new WebViewClient() {

        @Override
        public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
            handler.proceed();
//            handler.cancel();
//            handler.handleMessage(null);
        }
    });

onReceivedSslError为webView处理ssl证书设置

其中handler.proceed();表示等待证书响应

handler.cancel();表示挂起连接，为默认方式

handler.handleMessage(null);可做其他处理

参考：

http://developer.android.com/reference/android/webkit/WebViewClient.html#onReceivedSslError(android.webkit.WebView, android.webkit.SslErrorHandler, android.net.http.SslError)

 

5、使用addJavascriptInterface完成和js交互

5.1 javascript中调用java对象及方法

设置webView的addJavascriptInterface方法，该方法有两个参数，第一个参数为被绑定到js中的类实例，第二个参数为在js中暴露的类别名，在js中引用java对象就是用这个名字

ClassBeBindedToJS classBeBindedToJS = new ClassBeBindedToJS();
webView.addJavascriptInterface(classBeBindedToJS, "classNameBeExposedInJs"); 

 

实现绑定到js的类，其中的javaMethod方法我们将在页面前端js中调用，用于返回一段内容。showHtml用来使用AlertDialog显示一段html代码，稍后将使用到

private class ClassBeBindedToJS{
    public void showHtml(String html){
    	 new AlertDialog.Builder(UpdateStatusActivity.this) 
                     .setTitle("HTML").setMessage(html)
                     .setPositiveButton(android.R.string.ok, null)
                     .setCancelable(false).create().show();
    }
    public String javaMethod() {
        return "use java method";
    }
};

如此我们就可以在前端调用java对象，如下：

<html>
	<body>        
		<div id="displayDiv">Test page.</div>
		<input type="button" value="use java object" onclick="document.getElementById('displayDiv').innerHTML=classNameBeExposedInJs.javaMethod()" />
	</body>
</html>

 这段html作用为点击button按钮，改变div内容为java对象方法中的内容，其中classNameBeExposedInJs为java对象在js中的别名，javaMethod为java对象的方法

 

5.2 java中调用js方法

用webView的loadUrl实现，比如现在我们想在页面加载完成后调用js中的hello函数，实现如下：

webView.setWebViewClient(new WebViewClient() {  
    @Override
    public void onPageFinished(WebView webView, String url){
        webView.loadUrl("javascript:hello()");
    }
});

怎么样，很简单吧^_^,直接loadUrl("javascript:hello()")就可以了 

利用这一点我们可以很方便的实现WebView的自动化，如网页自动化登录。举个栗子，实现http://m.renren.com/ 的自动登录啊，代码如下

webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://m.renren.com");
webView.requestFocus();

ClassBeBindedToJS classBeBindedToJS = new ClassBeBindedToJS();
webView.addJavascriptInterface(classBeBindedToJS, "classNameBeExposedInJs");    
webView.setWebViewClient(new WebViewClient() {  
	@Override
	public void onPageFinished(WebView webView, String url){ 
		webView.loadUrl("javascript:document.getElementsByName('email')[0].value='userName'"); 
		webView.loadUrl("javascript:document.getElementsByName('password')[0].value='userPassword'"); 
		webView.loadUrl("javascript:document.getElementsByName('login')[0].click()");
	}
});

从中可以看出先加载http://m.renren.com页面，在页面加载完成onPageFinished后，调用js实现自动登录

其中三句js分别表示设置用户名文本框内容、设置用户密码文本框内容、点击登录按钮，如此登录成功喽

 

5.3 java和js混用实现一些效果

5.3.1 WebView用AlertDialog显示页面的html代码

之前5.1中的showHtml方法现在派上用场啦，在页面加载完成后显示页面html内容，如下：

webView.setWebViewClient(new WebViewClient() {  
    @Override
    public void onPageFinished(WebView webView, String url){
        webView.loadUrl("javascript:window.classNameBeExposedInJs.showHtml(document.getElementsByTagName('html')[0].innerHTML);");
    }
});

 其中webView.loadUrl表示调用页面中的js，而页面中的js window.classNameBeExposedInJs.showHtml调用了程序中的java对象的方法，方法参数为一段js。

首先webView会执行这一段js document.getElementsByTagName('html')[0].innerHTML。含义即为取得页面中html标记的innerHTML，及网页主要内容；

然后将得到的网页内容当作字符串参数传入showHtml方法

最后调用showHtml函数实现，即用AlertDialog显示字符串，如此得到了整个网页的大部分html代码

 

5.3.2 WebView显示当前页面的url地址

获得WebView当前页面url使用webView.getUrl()即可，如下：

webView.loadUrl("javascript:window.classNameBeExposedInJs.showHtml('" + webView.getUrl() + "');");

参考：

http://developer.android.com/reference/android/webkit/WebView.html

http://android.tgbus.com/Android/tutorial/201103/347674.shtml

 

 

Android 开发进阶：

• 我的微博 Trinea，更及时全面的技术分享！
• Android 插件化
• Android 开源库获取途径整理
• VPN云梯推荐，合买每月仅5元，全平台支持
• Java Annotation 及几个常用开源项目注解原理简析
• Android自动轮播 无限循环的ViewPager
• Android开源项目汇总
• Android性能优化总结
• Android公共库(缓存 下拉ListView 静默安装等)
• Android ImageCache图片缓存
• 下拉刷新及滚动到底部加载更多的Listview使用

 

 

评论

3 楼 yanyuetian 2014-09-15  

这有些我开发过程遇到的最新问题及优化方案http://www.pedant.cn/2014/09/10/webview-optimize-points/#e ,欢迎一起探讨交流

2 楼 Trinea 2011-08-29  

andrewhunter 写道

文章不错，要是能有些更高级点的就更好了。

呵呵，也是刚学不久，就写了些用到的

1 楼 andrewhunter 2011-08-29  

文章不错，要是能有些更高级点的就更好了。