深入理解WebView_html/css_WEB-ITnose-html教程-PHP中文网

摘要

与js互调

深入使用WebView

让js调用Android代码

WebView 缓存

首页

web前端

html教程

深入理解WebView_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:52 AM

本文作者kymjs张涛，沪江教育Android开发工程师，《KJFrameForAndroid》开发框架作者。爱看书，爱敲码，善于交流，乐于分享。

摘要

作为Android开发者，我们都知道在手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件。今天就为大家讲讲Android中WebView的详细使用方法。

作为Android开发者，我们都知道在手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件。

在开发过程中应该注意几点:

1.这是最基本的 AndroidManifest.xml 中必须添加访问网络权限。2.如果访问的页面中有 Javascript,则 WebView 必须设置支持 Javascript。

WebView.getSettings().setJavaScriptEnabled(true);

登录后复制

3.如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖 WebView的WebViewClient对象。

mWebView.setWebViewClient(new WebViewClient(){    public boolean shouldOverrideUrlLoading(WebView view, String url){         view.loadUrl(url);        return true;    }});

登录后复制

4.如果不做任何处理 ,浏览网页,点击系统“Back”键,整个 Browser 会调用 finish()而结束自身,如果希望浏览的网页回退而不是推出浏览器,需要在当前Activity中处理并消费掉该 Back 事件.(代码有些精简)

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

登录后复制

与js互调

既然可以显示网页，那么当然也可以让网页操作本地方法。(由于一行写不下，缩进我调整了一下)

public class WebViewDemo extends Activity {     private WebView mWebView;    private Handler mHandler = new Handler();     public void onCreate(Bundle 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><script language="javascript"> function wave() { document.getElementById("droid").src="android_waving.png"; }</script><body>  <a onClick="window.demo.clickOnAndroid()">  <img  src="/static/imghw/default1.png"  data-src="android_normal.png"  class="lazy"  id="droid" mce_/ alt="深入理解WebView_html/css_WEB-ITnose" ><br> Click me! </a></body></html>

登录后复制

这样在 javascript 中就可以调用 java 对象的 clickOnAndroid()方法了,同样我们可以在此对象中定义很多方法(比如发短信,调用联系人列表等手机系统功能),这里 wave()方法是 java 中调用 javascript 的例子.

需要说明一点:addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中,不能运行在构造他的线程中,这也是使用 Handler 的目的.

深入使用WebView

让js调用Android代码

首先简述 WebView、WebViewClient、WebChromeClient 之间的区别:在 WebView 的设计中,不是什么事都要 WebView类干的,有些杂事是分给其他人的,这样 WebView 专心干好自己的解析、渲染工作就行了.WebViewClient 就是帮助 WebView 处理各种通知、请求事件等 ,WebChromeClient 是辅助 WebView 处理 Javascript 的对话框,网站图标,网站 title.

功能实现:

利用 android 中的 WebView 加载一个 html 网页,在 html 网页中定义一个按钮,点击按钮弹出一个 toast.

实现步骤:

首先定义一个接口类,将上下文对象传进去,在接口类中定义要在 js 中实现的方法。接着在assets资源包下定义一个 html 文件,在文件中定义一个 button.button 的点击事件定义为一个 js 函数.

之后在 xml 中定义一个 WebView 组件,在活动类中获取 WebView 并对 WebView 参数进行设置,此处特别注意要设置 WebView 支持 js 且将定义的 js 接口类添加到 WebView 中去,此后在 js 中就可以利用该接口类中定义的函数了.即:

myWebView.getSettings().setJavaScriptEnabled(true);myWebView.addJavascriptInterface(new JavaScriptinterface(this),”android”);

登录后复制

最后利用 WebView 加载本地 html 文件的方法是:

myWebView.loadData(htmlText,"text/html", "utf-8");

登录后复制

此处的htmltext 是以字符串的方式读取 assets 报下 html中的内容.

4.实现利用返回键返回到上一页:

设置 WebView 的按键监听,监听到期返回键并判断网页是否能够返回 ,利用 WebView 的 goBack()返回到上一页.

WebView 缓存

在项目中如果使用到 WebView 控件,当加载 html 页面时,会在/data/data/包名目录下生成 database 与 cache 两个文件夹（我的手机没有root，就不截图了）。请求的 url 记录是保存在 WebViewCache.db,而 url 的内容是保存在 WebViewCache 文件夹下. 大家可以自己动手试一下,定义一个html文件,在里面显示一张图片,用WebView加载出来,然后再试着从缓存里把这张图片读取出来并显示 .

WebView 删除缓存

其实已经知道缓存保存的位置了，那么删除就很简单了，获取到这个缓存，然后删掉他就好了。

//删除保存于手机上的缓存

private int clearCacheFolder(File dir,long numDays) {

int deletedFiles = 0;

if (dir!= null && dir.isDirectory()){

try {

for (File child:dir.listFiles()){

if (child.isDirectory()) {

deletedFiles += clearCacheFolder(child, numDays);

}

if (child.lastModified()