该遍文章的webview与js的交互主要是,js调用到Android里的webview(在最后面附上源码)
1.需要在网页版的js里写好要交互的函数接口,例如我现在要网页版那边给我传来一个地址,
则在网页版的js写好:
window.jump.XXX()的格式,jump也是可以自定义的。
我这边的js需要调用的接口是:
window.jump.gotoService(path);和
widow.jump.gotoRegService(path);
2.在webview的android代码这边写上
mWebview.addJavascriptInterface(new WebAppInterface(mContext),"jump");第一个参数是自定义的内部类名称,第二个参数是js网页版对应的的第二个参数名称,该名称可以自定义,
但是一定要跟网页版的第二个参数定义保持一致。
WebAppInterface类:
class WebAppInterface{
private Context context;
public WebAppInterface(Context ct){
this.context = ct;
}
@JavascriptInterface
public void gotoService(String path){
openBrowser(path);
}
@JavascriptInterface
public void gotoRegService(String path){
openBrowser(path);
}
private void openBrowser(String path) {
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setData(Uri.parse(path));
context.startActivity(intent);
}
}
3.
在我们开发过程中,有可能会遇到webview有些网页打不开的问题。这可能是设置的不对,下面就是解决办法。
进行如下设置吧,大多数情况都能解决!
displayWebview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口,如window.open(),默认为false
displayWebview.getSettings().setJavaScriptEnabled(true);//是否允许执行js,默认为false。设置true时,会提醒可能造成XSS漏洞
displayWebview.getSettings().setSupportZoom(true);//是否可以缩放,默认true
displayWebview.getSettings().setBuiltInZoomControls(true);//是否显示缩放按钮,默认false
displayWebview.getSettings().setUseWideViewPort(true);//设置此属性,可任意比例缩放。大视图模式
displayWebview.getSettings().setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题
displayWebview.getSettings().setAppCacheEnabled(true);//是否使用缓存
displayWebview.getSettings().setDomStorageEnabled(true);//DOM Storage
// displayWebview.getSettings().setUserAgentString("User-Agent:Android");//设置用户代理,一般不用
缓存不开启的时候,可能会有一些使用了这些存储的网页无法打开。
WebView的缓存可以分为页面缓存和数据缓存。
页面缓存是指加载一个网页时的html、JS、CSS等页面或者资源数据。这些缓存资源是由于浏览器的行为而产生,开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据。
他们的索引存放在/data/data/package_name/databases下。他们的文件存放在/data/data/package_name/cache/xxxwebviewcachexxx下。文件夹的名字在2.x和4.x上有所不同,但都文件夹名字中都包含webviewcache。
数据缓存分为两种:AppCache和DOM Storage(Web Storage)。他们是因为页面开发者的直接行为而产生。所有的缓存数据都由开发者直接完全地掌控。
AppCache使我们能够有选择的缓冲web浏览器中所有的东西,从页面、图片到脚本、css等等。尤其在涉及到应用于网站的多个页面上的CSS和JavaScript文件的时候非常有用。其大小目前通常是5M。
在Android上需要手动开启(setAppCacheEnabled),并设置路径(setAppCachePath)和容量(setAppCacheMaxSize)
Android中Webkit使用一个db文件来保存AppCache数据(my_path/ApplicationCache.db)
更详细的资料可以参考这里:http://www.itboat.net/thread-23674-1-1.html
如果需要存储一些简单的用key/value对即可解决的数据,DOM Storage是非常完美的方案。根据作用范围的不同,有Session Storage和Local Storage两种,分别用于会话级别的存储(页面关闭即消失)和本地化存储(除非主动删除,否则数据永远不会过期)。
在Android中可以手动开启DOM Storage(setDomStorageEnabled),设置存储路径(setDatabasePath)
Android中Webkit会为DOM Storage产生两个文件(my_path/localstorage/http_h5.m.taobao.com_0.localstorage和my_path/localstorage/Databases.db)。
另外,在Android中清除缓存时,如果需要清除Local Storage的话,仅仅删除Local Storage的本地存储文件是不够的,内存里面有缓存数据。如果再次进入页面,Local Storage中的缓存数据同样存在。需要杀死程序运行的当前进程再重新启动才可以。
public class ShowWebview {
private static final String URL = "http://192.168.0.55:801/index.html";
private static final String APP_CACAHE_DIRNAME = "/webcache";
private WebSettings settings;
private WebView mWebview;
private Context mContext;
public ShowWebview(Context context,WebView webView){
mContext = context;
mWebview = webView;
}
/*加载HTML网页*/
public void loadHtml() {
mWebview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); // 设置无边框
settings = mWebview.getSettings();
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//web内容强制满屏
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口,如window.open(),默认为false
settings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题
//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开
mWebview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
//返回值是true的时候控制去WebView打开,为false调用系统浏览器或第三方浏览器
view.loadUrl(URL);
return true;
}
});
mWebview.loadUrl(URL);
//设置webview缓存
setWebviewCache();
mWebview.addJavascriptInterface(new WebAppInterface(mContext),"jump");
}
/*设置webview缓存*/
private void setWebviewCache(){
settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
settings.setAppCacheEnabled(true);//是否使用缓存
settings.setCacheMode(WebSettings.LOAD_DEFAULT); //设置 缓存模式
// 开启 DOM storage API 功能,支持 H5 的session storage和local storage
settings.setDomStorageEnabled(true);
//开启 database storage API 功能
settings.setDatabaseEnabled(true);
String cacheDirPath = mContext.getFilesDir().getAbsolutePath()+APP_CACAHE_DIRNAME;
// String cacheDirPath = getCacheDir().getAbsolutePath()+Constant.APP_DB_DIRNAME;
// Log.i(TAG, "cacheDirPath="+cacheDirPath);
//设置数据库缓存路径
settings.setDatabasePath(cacheDirPath);
//设置 Application Caches 缓存目录
settings.setAppCachePath(cacheDirPath);
//开启 Application Caches 功能
settings.setAppCacheEnabled(true);
}
/**
* 清除WebView缓存
*/
public void clearWebViewCache(){
//清理Webview缓存数据库
try {
mContext.deleteDatabase("webview.db");
mContext.deleteDatabase("webviewCache.db");
} catch (Exception e) {
e.printStackTrace();
}
//WebView 缓存文件
File appCacheDir = new File(mContext.getFilesDir().getAbsolutePath()+APP_CACAHE_DIRNAME);
File webviewCacheDir = new File(mContext.getCacheDir().getAbsolutePath()+"/webviewCache");
//删除webview 缓存目录
if(webviewCacheDir.exists()){
deleteFile(webviewCacheDir);
}
//删除webview 缓存 缓存目录
if(appCacheDir.exists()){
deleteFile(appCacheDir);
}
}
/**
* 递归删除 文件/文件夹
*
* @param file
*/
public void deleteFile(File file) {
if (file.exists()) {
if (file.isFile()) {
file.delete();
} else if (file.isDirectory()) {
File files[] = file.listFiles();
for (int i = 0; i < files.length; i++) {
deleteFile(files[i]);
}
}
file.delete();
} else {
//Log.e("WebView", "delete file no exists " + file.getAbsolutePath());
}
}
class WebAppInterface{
private Context context;
public WebAppInterface(Context ct){
this.context = ct;
}
@JavascriptInterface
public void gotoService(String path){
openBrowser(path);
}
@JavascriptInterface
public void gotoRegService(String path){
openBrowser(path);
}
private void openBrowser(String path) {
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setData(Uri.parse(path));
context.startActivity(intent);
}
}
}