Android就业面试技巧系列-技术篇5 (WebView和JS交互)

Android就业面试技巧系列-技术篇(WebView和JS交互)

WebView：

    一个绝对布局容器，用来展示或渲染Web页面。这个类是你可以滚动自己的Web浏览器或在你的Activity中简单地显示一些在线内容的基础。它使用了WebKit渲染引擎来显示网页，包括向前和向后导航的方法（通过历史记录），放大和缩小，执行文本搜索等。

WebView相关的几个类：

    WebSettings： 一个抽象类，包含对WebView的设置方法。用来对WebView进行设置，比如支持JS、缓存模式等。

    WebViewClient： 这个类的方法有一个特点，就是参数的第一项就是WebView，其他项是事件或数据信息。WebView通过该类对外通知页面加载相关的消息用来在页面加载的各个阶段进行业务处理，处理加载错误情况，拦截页面内和页面外的请求。

    WebChromeClientWebView： WebView通过该类，通知获取到站点图标、标题、加载进度，以及JS对话框等，用来更好地展示页面和交互。

    了解了WebView相关的一下基础概念后，我们来看一下具体的应用。

    WebView简单设置：

[Java]  纯文本查看  复制代码

?

1 2 3 4 5 6 7

WebSettings settings = webview.getSettings();          settings.setJavaScriptEnabled( true ); // 这样网页就可加载JavaScript了          settings.setJavaScriptCanOpenWindowsAutomatically( true );          webview.setWebViewClient( new WebViewClient()); // 设置点击网页中的链接不会打开android内置的浏览器，默认情况下点击链接会打开android内置的浏览器          settings.setBuiltInZoomControls( true ); // 显示放大缩小按钮          settings.setSupportZoom( true ); // 允许放大缩小          settings.setSupportMultipleWindows( true );

WebView在默认情况下会记录访问过的page，这样可以实现访问过的网页的向前和向后浏览
setWebViewClient时，可以自定义WebViewClient，重写里面的方法shouldOverrideUrlLoading。

[Java]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12

private class MyWebViewClient extends WebViewClient {       @Override       public boolean shouldOverrideUrlLoading(WebView view, String url) {           if (Uri.parse(url).getHost().equals( "blog.csdn.net" )) {               // This is my web site, so do not override; let my WebView load the pagereturn false;           }           // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs           Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));           startActivity(intent);           return true ;       } }

获取WebView所加载的网页的title，通过webview.setWebChromeClient，它有两个方法是获取title和icon

[Java]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11

webview.setWebChromeClient( new WebChromeClient(){              @Override              public void onReceivedTitle(WebView view, String title) { // 获取到Title                  super .onReceivedTitle(view, title);              }                @Override              public void onReceivedIcon(WebView view, Bitmap icon) { // 获取到图标                  super .onReceivedIcon(view, icon);              }          });

第二种方式，通过webview和js交互来获取title和icon

[Java]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

public void getTitle(WebView wv) {          wv.addJavascriptInterface( new GetTitle(), "getTitle" ); // 向webview注册一个本地接口          wv.setWebViewClient( new WebViewClient() {              @Override              public void onPageFinished(WebView view, String url) {                  view.loadUrl( "javascript:window.getTitle.onGetTitle("                          + "document.getElementsByTagName('title')[0].innerHTML" + ");" );                  super .onPageFinished(view, url);              }          });      }        class GetTitle {          public void onGetTitle(String title) {              // ...参数title即为网页的标题，可在这里面进行相应的title的处理        }      }

WebView和JS交互（WebView应用HTML5）:

WebView中应用HTML5主要有三种常用情况:

>>1.HTML5本地存储

[Java]  纯文本查看  复制代码

?

1 2 3 4

String dir = this .getApplicationContext().getDir( "database" , Context.MODE_PRIVATE).getPath(); settings.setDatabaseEnabled( true ); settings.setDatabasePath(dir); // 设置数据库路径 settings.setDomStorageEnabled( true ); // 使用LocalStorage则必须打开

>>2.HTML5地理位置服务，需要在设置中进行设置，另外还需要重写WebChromeClient的允许获取地理位置的方法；

[Java]  纯文本查看  复制代码

?

1 2	settings.setGeolocationEnabled( true ); // 启用地理定位 settings.setGeolocationDatabasePath(dir); // 设置定位的数据库路径

重写WebChromeClient的onGeolocationPermissionsShowPrompt方法，用于允许浏览器获取地下位置；

[Java]  纯文本查看  复制代码

?

1 2 3 4 5

@Override public void onGeolocationPermissionsShowPrompt(String origin, Callback callback) {      super .onGeolocationPermissionsShowPrompt(origin, callback);      callback.invoke(origin, true , false ); }

下面是callback.invoke方法的描述

[Java]  纯文本查看  复制代码

?

1 2 3 4 5 6 7 8 9

*/ public interface Callback {      /**       * Sets the Geolocation permission state for the supplied origin.       *       * @param origin the origin for which permissions are set       * @param allow 是否让origin也就是web站点获取地理位置       * @param retain 是否保持此权限       */ public void invoke(String origin, boolean allow, boolean retain); };

>>3.HTML5离线存储

[Java]  纯文本查看  复制代码

?

1 2 3 4 5 6

settings.setAppCacheEnabled( true ); // 开启应用程序缓存 String cache_dir = this .getApplicationContext().getDir( "cache" , Context.MODE_PRIVATE).getPath(); settings.setAppCachePath(cache_dir); // 设置应用缓存的路径 settings.setCacheMode(WebSettings.LOAD_DEFAULT); // 设置缓存的模式 settings.setAppCacheMaxSize( 1024 * 1024 * 8 ); // 设置应用缓存的最大尺寸 settings.setAllowFileAccess( true ); // 可以读取文件缓存(manifest生效)

>>4.HTML5处理网页中的对话框，需要重写下面的三个方法，分别是{"警告","确认","提示"}

[Java]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

@Override // 可以显示一个带确认的按钮并监听事件     public boolean onJsAlert(WebView view, String url, String message,             JsResult result) {         return super .onJsAlert(view, url, message, result);     }       @Override // 可以显示一个带确定/取消按钮的对话框并监听用户的操作     public boolean onJsConfirm(WebView view, String url,             String message, JsResult result) {         return super .onJsConfirm(view, url, message, result);     }       @Override     public boolean onJsPrompt(WebView view, String url, String message,             String defaultValue, JsPromptResult result) {         return super .onJsPrompt(view, url, message, defaultValue, result);     }

>>5.有时候希望使本地存储或离线存储的空间更大，需要扩展存储空间，需要重写WebChromeClient的onExceededDatabasseQuota方法；

[Java]  纯文本查看  复制代码

?

1 2 3 4 5 6 7 8 9

@Override        public void onExceededDatabaseQuota(String url,                String databaseIdentifier, long quota,                long estimatedDatabaseSize, long totalQuota,                QuotaUpdater quotaUpdater) {            super .onExceededDatabaseQuota(url, databaseIdentifier, quota,                    estimatedDatabaseSize, totalQuota, quotaUpdater);            quotaUpdater.updateQuota(estimatedDatabaseSize * 2 ); // 此方法扩展存储空间为默认的2倍        }