android WebView的缓存模式、JS交互

在开发中,有些情况下会用到hybrid app的模式,就是用WebView加载原生html页面,这时候我们就
需要对WebView做一些处理。首先说一下WebView的缓存模式,在加载html页面的时候,
会在data/data/…目录下生成一些cache文件,把URL保存在数据库中。
分为网页数据缓存和app cache.这两个缓存路径我们可以自定义,下面会说明,首先说明一下WebView的5中缓存模式:

  • LOAD_CACHE_ONLY 。该模式不从网络获取数据,只使用缓存
  • LOAD_DEFAULT 。 该模式,根据网页设置的cache-control决定是否从网络获取数据
  • LOAD_CACHE_NORMAL 。已废弃
  • LOAD_NO_CACHE 。 该模式不设置缓存
  • LOAD_CACHE_ELSE_NETWORK。 如果本地有,就加载本地缓存

以上属性都是WebSettings的常量

下面列举一些API

  • mWebView.getSettings.setCacheMode(); 设置缓存模式
  • mWebView.getSettings().setAppCacheEnabled(true); ; 设置缓存可用
  • mWebView.getSettings().setDatabasePath();设置缓存路径
  • mWebView.getSettings().setAppCachePath();设置缓存路径

如果需要清除缓存,只需要把db文件和设置的缓存目录清空即可。

接下来是WebView和JS交互的使用, 首先我们要调用
mWebView.getSettings().setJavaScriptEnabled(true);来设置JS可用
其次需要设置一个Chrome Handler ,才能响应JS,里面可以复写一些方法,比如加载进度等

mWebView.setWebChromeClient(new WebChromeClient());

我这里不做任何处理
然后我在asset 目录下放置了一个简单的html页面:


<html>
<head>
    <title>hellotitle>
head>
<body>
    <a href="" onclick="Android.showAndroidToast('Hello')">Toasta>
body>
html>

接下来需要为WebView设置一个JavaScriptInterface:
mWebView.addJavascriptInterface(new WebAppInterface(this), “Android”);

传入的第一个对象是自己定义的类,里面包含JS需要调用的方法,第二个参数是接口名称,JS调用的时候都需要用这个接口名称来调用。

    class WebAppInterface{
    private Context mContext;
    public WebAppInterface(Context context){
        mContext = context;
    }
    public void showAndroidToast(String text){
        Toast.makeText(mContext, text, Toast.LENGTH_LONG).show();
    }
}

上面这个类我定义了一个showAndroidToast()的方法,在JS中就可以yoga接口名称调用方法名的方式去调用,例如 Android.showAndroidToast(“”);这样就实现了JS调用Android中的方法。

下面是在Android中调用WebView 的JS方法,这个方式也很简单:

我在html添加了一个方法:

<script type="text/javascript">
        function myFun(){
            alert("hello");
        }
    script>

然后在Android中调用一句代码就可以完成:

mWebView.loadUrl("javascript:myFun()");

这样就可以调用JS定义的方法了。

下面是完整的代码:

    package com.example.webview;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.view.Menu;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends Activity {
    private WebView mWebView;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.wb_main);
        // 设置JAVASCRIPT可用
        mWebView.loadUrl("file:///android_asset/android.html");
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 设置chrome handler
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
    }
    public void click(View v) {
        mWebView.loadUrl("javascript:myFun()");
    }
}

class WebAppInterface {
    private Context mContext;

    public WebAppInterface(Context context) {
        mContext = context;
    }

    public void showAndroidToast(String text) {
        Toast.makeText(mContext, text, Toast.LENGTH_LONG).show();
    }

}

你可能感兴趣的:(Android,基础核心)