js和Java交互注意事项

在Android中有WebView Widget,它内置了WebKit引擎,同时,WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源的浏览器引擎,Chrome浏览器也是基于它的。所以很多表现WebView和Chrome是一样的。
该篇针对Android 中 的WebView 和 JS 交互需要注意的事项。

一.WebView相关setting

1.属性汇总

WebSettings常用方法:

setAllowFileAccess 启用或禁止WebView访问文件数据  
setBlockNetworkImage 是否显示网络图像  
setBuiltInZoomControls 设置是否支持缩放  
setCacheMode 设置缓冲的模式  
setDefaultFontSize 设置默认的字体大小  
setDefaultTextEncodingName 设置在解码时使用的默认编码  
setFixedFontFamily 设置固定使用的字体  
setJavaSciptEnabled 设置是否支持Javascript  
setLayoutAlgorithm 设置布局方式  
setLightTouchEnabled 设置用鼠标激活被选项  
setSupportZoom 设置是否支持变焦  

WebViewClient常用方法:

doUpdate VisitedHistory 更新历史记录  
onFormResubmission 应用程序重新请求网页数据  
onLoadResource 加载指定地址提供的资源  
onPageFinished 网页加载完毕  
onPageStarted 网页开始加载  
onReceivedError 报告错误信息  
onScaleChanged WebView发生改变  
shouldOverrideUrlLoading 控制新的连接在当前WebView中打开 

WebChromeClient常用方法:

onCloseWindow 关闭WebView  
onCreateWindow 创建WebView  
onJsAlert 处理Javascript中的Alert对话框  
onJsConfirm处理Javascript中的Confirm对话框  
onJsPrompt处理Javascript中的Prompt对话框  
onProgressChanged 加载进度条改变  
onReceivedlcon 网页图标更改  
onReceivedTitle 网页Title更改  
onRequestFocus WebView显示焦点  
2.页面缩放
适应手机屏幕:
webView.getSettings().setUseWideViewPort(true);  
webView.getSettings().setLoadWithOverviewMode(true); 
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

放大设置:
webView.getSettings().setDisplayZoomControls(true); 

无限放大:
webView.getSettings().setSupportZoom(true);

比例缩放:
webView.setInitialScale(50); 
3.页面缓存

缓存存放地址路径:

/data/data/package_name/cache/
/data/data/package_name/database/webview.db
/data/data/package_name/database/webviewCache.db

缓存模式

LOAD_CACHE_ONLY:  不使用网络,只读取本地缓存数据  
LOAD_DEFAULT:  根据cache-control决定是否从网络上取数据。  
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式  
LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.  
LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。

如:www.taobao.com的cache-control为no-cache,在模式LOAD_DEFAULT下,无论如何都会从网络上取数据,如果没有网络,就会出现错误页面;在LOAD_CACHE_ELSE_NETWORK模式下,无论是否有网络,只要本地有缓存,都使用缓存。本地没有缓存时才从网络上获取。www.360.com.cn的cache-control为max-age=60,在两种模式下都使用本地缓存数据。
总结:根据以上两种模式,建议缓存策略为,判断是否有网络,有的话,使用LOAD_DEFAULT,无网络时,使用LOAD_CACHE_ELSE_NETWORK。

清理cache 和历史记录

webView.clearCache(true);   
webView.clearHistory(); 
4、错误页面

出现网络异常、地址不存在的错误问题,而默认的错误页面比较难看,这时需要加载自己设计好的页面。

webView.setWebViewClient(new WebViewClient(){   
    public boolean shouldOverrideUrlLoading(WebView view, String url) {  
                 view.loadUrl(url);  
                 return true;  
    }  
               
    //显示错误页面  
    @Override  
    public void onReceivedError(WebView view, int errorCode,  
                String description, String failingUrl) {  
        // 静态页存放在assets文件夹下  
        view.loadUrl("file:///android_asset/www/index.html");  
        super.onReceivedError(view, errorCode, description, failingUrl);  
    }  
});   
5、加载进度
/* 
 * 需要自己定义一个进度条控件 
 * 这里已经定义好了progressBar 
 */  
webView.setWebChromeClient(new WebChromeClient(){  
    @Override  
    public void onProgressChanged(WebView view, int newProgress) {  
        // TODO Auto-generated method stub  
        if(newProgress < 100){  
            //更新当前进度  
            progressBar.setVisibility(View.VISIBLE);  
            progressBar.setProgress(newProgress);  
        }else{  
            //加载完成因此进度条  
            progressBar.setVisibility(View.GONE);  
        }  
        super.onProgressChanged(view, newProgress);  
    }  
});  

二.WebView和js交互

1.调用js代码
在程序中调用js代码,只需要将webview控件的支持js的属性设置为true,,然后通过loadUrl就可以直接进行调用,如下所示:

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript:test()");

2.js调用android中java代码的方法
在html中调用java代码,需要在webview控件中添加javascriptInterface。如下所示:

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "images");

 final class DemoJavaScriptInterface {
        DemoJavaScriptInterface() {
        }

        @JavascriptInterface
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                public void run() {
                    //调用js中wave方法;("javascript:"+js方法)固定写法
                    mWebView.loadUrl("javascript:wave()");
                }
            });
        }
    }

注意:对于安卓开发有一段时间的人来说,知道安卓4.4以前谷歌的webview存在安全漏洞,网站可以通过js注入就可以随便拿到客户端的重要信息,甚至轻而易举的调用本地代码进行流氓行为,谷歌后来发现有此漏洞后,增加了防御措施,如果要是js调用本地代码,开发者必须在代码申明JavascriptInterface,例如在4.0之前我们要使得webView加载js只需本文中介绍的方法。4.4之后调用需要在调用方法加入加入@JavascriptInterface注解,如果代码无此申明,那么也就无法使得js生效,也就是说这样就可以避免恶意网页利用js对安卓客户端的窃取和攻击。

在网页中,只需要像调用js方法一样,进行调用就可以。
<div id='b'><a onclick="window.demo.clickOnAndroid()">b.c</a></div>

3.Java代码调用js并传参
首先需要带参数的js函数,如function test(str),然后只需在调用js时传入参数即可,如下所示:
mWebView.loadUrl("javascript:test('aa')");

三.注意事项

1.有时会出现混淆打包失效问题,需要在proguard.cfg文件中添加

//表示WebHost类下的所有方法不被混淆
-keep public class com.cx.httpwebview.WebHost{  
    public <methods>  
}  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容