Android深入理解WebView——上

摘要

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

本文原创，转载请注明地址：http://blog.kymjs.com/

作为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 id="droid" src="android_normal.png" mce_src="android_normal.png"/><br> Click me! </a>
</body>
</html>

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

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

深入使用WebView

让js调用Android代码

  1. 首先简述 WebView、WebViewClient、WebChromeClient 之间的区别:

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

  2. 功能实现:

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

  3. 实现步骤:

    首先定义一个接口类,将上下文对象传进去,在接口类中定义要在 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() < numDays) {
          if (child.delete()) {
           deletedFiles++;
          }
        }
      }
    } catch(Exception e) {
      e.printStackTrace();
    }
  }
  return deletedFiles;
}

是否启用缓存功能也是可以控制的

//优先使用缓存:
	WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
	//不使用缓存:
	WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

在退出应用的时候加上如下代码，可以完整的清空缓存

File file = CacheManager.getCacheFileBaseDir();
if (file != null && file.exists() && file.isDirectory()) {
    for (File item : file.listFiles()) {
        item.delete();}file.delete();
    }
context.deleteDatabase("WebView.db");
context.deleteDatabase("WebViewCache.db");

WebView 处理 404 错误

显示网页还会遇到一个问题，就是网页有可能会找不到，WebView当然也是可以处理的（代码如果全部贴出来实在太多了，这里就只贴重要部分了）

public class WebViewActivity extends Activity {
    private Handler handler = new Handler() {
        public void handleMessage(Message msg) {
              if(msg.what==404) {//主页不存在
                  //载入本地 assets 文件夹下面的错误提示页面 404.html
                  web.loadUrl("file:///android_asset/404.html");
              }else{
                  web.loadUrl(HOMEPAGE);
              }
          }};
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        web.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrl(WebView view,String url) {
	    if(url.startsWith("http://") && getRespStatus(url)==404) {
	        view.stopLoading();
	        //载入本地 assets 文件夹下面的错误提示页面 404.html
	        view.loadUrl("file:///android_asset/404.html");
	    }else{
	        view.loadUrl(url);
	    }
	return true;
	}
    });
    new Thread(new Runnable() {
        public void run() {
        Message msg = new Message();
        //此处判断主页是否存在,因为主页是通过 loadUrl 加载的,
        //此时不会执行 shouldOverrideUrlLoading 进行页面是否存在的判断
        //进入主页后,点主页里面的链接,链接到其他页面就一定会执行shouldOverrideUrlLoading 方法了
            if(getRespStatus(HOMEPAGE)==404) {
                msg.what = 404;
            }
            handler.sendMessage(msg);
        }).start();
    }
}

未完

由于WebView的用法实在太多了，这里就分为两部分，下一部分跟大家讲讲WebView滚动状态监听以及获取session与写cookie的方法~~

时间： 2024-08-29 12:37:58

Android深入理解WebView——上的相关文章

Android 进阶学习：事件分发机制全然解析，带你从源代码的角度彻底理解（上）

http://blog.csdn.net/guolin_blog/article/details/9097463 事实上我一直准备写一篇关于Android事件分发机制的文章,从我的第一篇博客開始,就零零散散在好多地方使用到了Android事件分发的知识.也有好多朋友问过我各种问题,比方:onTouch和onTouchEvent有什么差别,又该怎样使用?为什么给ListView引入了一个滑动菜单的功能,ListView就不能滚动了?为什么图片轮播器里的图片使用Button而不用ImageView?

Android应用开发中webview上传文件的几种思路

1. 常规方法,重写WebChromeClient 的 openFileChooser 方法 private class MyWebChromeClient extends WebChromeClient { // For Android 3.0+ public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) { if (mUploadMessage != null) return; mUploadMe

Android在WebView上构建Web应用程序

原文链接:http://developer.android.com/guide/webapps/webview.html reference:http://developer.android.com/reference/android/webkit/WebView.html 如果你想实现一个Web应用(或仅仅是一个网页)作为你应用中的一部分,你可以使用WebView来实现它.WebView是Android的View类的扩展,它允许你显示一个网页作为Activity布局的一部分.它不包含成熟的浏览

Chromium on Android: 认识Chromium WebView

Android KitKat一项重要的更新就是WebView采用Chromium/Blink渲染引擎,本文简要的叙述了新版WebView的主要特性.需要进一步改进的地方以及WebView的代码结构等. WebView前世今生 WebView是Android平台上一个非常重要的系统组件,用于将一个显示Web页面的窗口部件view嵌入到应用程序,并提供了一组API接口允许开发者定制页面加载和绘制的行为,比如响应页面加载状态的变化和弹出JavaScript对话框的请求等等.自Android 1.0发布

Android应用开发-------------WebView（一）之WebView与服务器端的Js交互

最近公司再添加功能的时候,有一部分功能是用的html,在一个浏览器或webview中展示出html即可.当然在这里我们当然用webview控件喽 WebApp的好处: 在应用里嵌套web的好处有这么几点,1,跨平台,不仅可以在Android上运行,也可以在ios上运行,而且样式什么的绝对统一,因为都是加载的html,用的都是同一套html 2,修改灵活,容易更新版本.例如大家常看到的app里面的广告页,大多是嵌套的html,这样只要后台替换一下页面的内容,手机端就会改变展现内容,跟新版本也是如此

Android深入讲解WebView——下

查看我的全部开源项目[开源实验室] 欢迎加入我的QQ群:[257053751],更多关于请点击[我的介绍] 摘要 作为Android开发者,我们都知道在手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件.今天就为大家讲讲Android中WebView的详细使用方法 本文原创,转载请注明地址:http://blog.kymjs.com/ 接上一篇博客[深入讲解WebView上] 判断 WebView 是否已经滚动到页面底端 在View中有一个get

Android开发之WebView与js的数据传递

在Android开发中不可避免的会出现,使用一个WebView来显示一个h5页面.如果仅仅只是显示h5页面,这不需要特殊的处理,但是很多情况下会出现,js和WebView的交互.比如:将html表单中的数据,传递到Activity中,在Activity中对数据校验,再上传到服务器. 那么js和WebView如何进行的交互的呢? 创建AndroidHtml项目.主要代码如下: MainActivity.java:     private WebView mWebView;     public s

Android编程实现WebView全屏播放的方法

这篇文章主要介绍了Android编程实现WebView全屏播放的方法,结合实例形式较为详细的分析了Android实现WebView全屏播放的布局与功能相关技巧,需要的朋友可以参考下! 本文实例讲述了Android编程实现WebView全屏播放的方法.分享给大家供大家参考,具体如下: 最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧. 首先写布局文件activity_main.xml: <LinearLayout xmlns:an

Android开发之WebView详解

概述: 一个显示网页的视图.这个类是你可以滚动自己的Web浏览器或在你的Activity中简单地显示一些在线内容的基础.它使用了WebKit渲染引擎来显示网页,包括向前和向后导航的方法(通过历史记录),放大和缩小,执行文本搜索等. 需要注意的是:为了让你的应用能够使用WebView访问互联网和加载网页,你必须添加Internet的权限在Android Manifest文件中: <uses-permission android:name="android.permission.INTERNE