Android WebView使用总结

最新推荐文章于 2025-09-06 22:36:06 发布

转载最新推荐文章于 2025-09-06 22:36:06 发布 · 716 阅读

文章标签：

#android #javascript #webkit #browser #浏览器 #java

Android 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍Android中WebView组件的使用方法，包括配置网络权限、支持JavaScript、加载本地与远程页面、拦截网页链接、处理Back按键行为及自定义JavaScript接口。此外还介绍了如何利用WebViewClient和WebChromeClient提升用户体验。

基础篇
在Android手机中内置了一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView组件。
什么是webkit
      WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过软件更新获取）。同时，WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源项目，主要由KDE的KHTML修改而来并且包含了一些来自苹果公司的一些组件。
   传统上，WebKit包含一个网页引擎WebCore和一个脚本引擎JavaScriptCore，它们分别对应的是KDE的KHTML和KJS。不过，随着JavaScript引擎的独立性越来越强，现在WebKit和WebCore已经基本上混用不分（例如Google Chrome和Maxthon 3采用V8引擎，却仍然宣称自己是WebKit内核）。
这里我们初步体验一下在android是使用webview浏览网页，在SDK的Dev Guide中有一个WebView的简单例子。在看下面这些总结知识之前，大家请看示例代码中MainActivtiy的代码，运行整个程序后，第一个页面显示的就是MainActivity的运行效果。上面的Button按钮是点击到第二个Activity进行测试用的。

在开发过程中应该注意几点：
1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
2.如果访问的页面中有Javascript，则webview必须设置支持Javascript。webview.getSettings().setJavaScriptEnabled(true);
3. 在要Activity中生成一个WebView组件：WebView webView = new WebView(this);
4. 设置WebView基本信息：
如果访问的页面中有Javascript，则webview必须设置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
触摸焦点起作用 requestFocus();
取消滚动条  this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY)
5. 设置WevView要显示的网页：
互联网用：webView.loadUrl("http://www.google.com");
本地文件用：webView.loadUrl(file:///android_asset/xx.html);固定格式
　　  本地文件存放在：assets文件中
6. 如果希望点击链接由自己处理，而不是新开Android的系统browser中响应该链接。
给WebView添加一个事件监听对象（WebViewClient)
并重写其中的一些方法
shouldOverrideUrlLoading：对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法，并传递参数：按下的url
   onLoadResource
   onPageStart
   onPageFinish
   onReceiveError
   onReceivedHttpAuthRequest
7.如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖 webview的WebViewClient对象。
1. mWebView.setWebViewClient(new WebViewClient(){
2.       public boolean shouldOverrideUrlLoading(WebView view, String url) {
3.                         view.loadUrl(url);
4.                         return true;
5.                      }
6.          });
8.如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。
1. public boolean onKeyDown(int keyCode, KeyEvent event) {
2.       if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
3.             mWebView.goBack();
4.                      return true;
5.          }
6.          return super.onKeyDown(keyCode, event);
7.       }
9.  @Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, android.net.http.SslError error) { // 重写此方法可以让webview处理https请求
handler.proceed();
}

});

提高篇（一）
下一步让我们来了解一下android中webview是如何支持javascripte自定义对象的，在w3c标准中js有 window，history，document等标准对象，同样我们可以在开发浏览器时自己定义我们的对象调用手机系统功能来处理，这样使用js就可以为所欲为了。
看一个实例：
public class WebViewDemo extends Activity {
private WebView mWebView;
private Handler mHandler = new Handler();

public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.webviewdemo);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
  webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new Object() {
public void clickOnAndroid() {
mHandler.post(new Runnable() {
            public void run() {
               mWebView.loadUrl("javascript:wave()");
            }
         });
         }
   }, "demo");
   mWebView.loadUrl("file:///android_asset/demo.html");
}
}

   我们看addJavascriptInterface(Object obj,String interfaceName)这个方法，该方法将一个java对象绑定到一个javascript对象中，javascript对象名就是 interfaceName（demo），作用域是Global。这样初始化webview后，在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。来看看在html中是怎样调用的。

<html>
<mce:script language="javascript"></mce:script>
<body>
      <a onClick="window.demo.clickOnAndroid()">
                           <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br>
                        Click me!
      </a>
   </body>
</html>

      这样在javascript中就可以调用java对象的clickOnAndroid()方法了，同样我们可以在此对象中定义很多方法（比如发短信，调用联系人列表等手机系统功能。）,这里wave()方法是java中调用javascript的例子。
这里还有几个知识点：
1)为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的 assets目录中找内容。如上面的"file:///android_asset/demo.html"
2)addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用 Handler的目的。

提高篇（二）

Android中使用WebView, WebChromeClient和WebViewClient加载网页

   在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android中提供了其很好的支持，运行示例程序后点击Button，跳转到WebPageLoader中，就可以看到进度条的效果了。
要注意的是,其中的webView的一系列用法,比如 webView.getSettings().setJavaScriptEnabled(true);设置可以使用javscript;
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setHorizontalScrollBarEnabled(false);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.setInitialScale(70);
webView.setHorizontalScrollbarOverlay(true);

等等,具体参考API
而进度条的使用是在new出一个setWebChromeClient后,可以在内部类中写
onProgressChanged事件
在WebView的设计中，不是什么事都要WebView类干的，有些杂事是分给其他人的，这样WebView专心干好自己的解析、渲染工作就行了。WebViewClient就是帮助WebView处理各种通知、请求事件的，具体来说包括：
onLoadResource
onPageStart
onPageFinish
onReceiveError
onReceivedHttpAuthRequest
WebChromeClient是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等
onCloseWindow(关闭WebView)
onCreateWindow()
onJsAlert (WebView上alert是弹不出来东西的，需要定制你的WebChromeClient处理弹出)
onJsPrompt
onJsConfirm
onProgressChanged
onReceivedIcon
onReceivedTitle

示意图如下：