android WebView使用方法三

您所在的位置：网站首页 › 安卓webview交互 › android WebView使用方法三

android WebView使用方法三

#android WebView使用方法三| 来源: 网络整理| 查看: 265

WebView在现在的项目中使用频率还是非常高的，最近负责华为智能商城模块的开发工作中，产生不少心得，觉得有必要把相关的基础内容整理一下。（写这个应该没有违反公司的信息安全规定吧，因为都是基础的东西加上是在休息时间也不包含公司源码任何敏感信息）现在的移动应用呢，几乎都是hybrid方式，也就是集成了Native APP和Web APP的优点，保证了用户的体验，我们又可以在一定程度上动态的更新的能力，跨平台性。

Hybrid实现的关键在于如何打通Java 和JS的交互，信息通信。主要说一下，就是两点内容，Java去调用JavaScript ，和JavaScript去调用Java 。在android开发中我们用WebView来加载HTML 或者是HTML5 或其他JSP，WebView默认提供了他们去交互的能力。（张小月

关于android中和前端的Web页面相关的内容，四个部分来介绍（本章节为第三篇）：

1.android webview使用方法（基础）。这一部分是基础的东西。

2.android WebView使用方法二-处理跳转URL，监听页面变化，缓存及回退（进阶）。

4.android WebView使用方法利用html中onChanged=; ;标签上传文件(图片)（高级应用场景）。 5.附5 android WebView使用常见问题汇总以及解决方案（高级）。在这里会查到WebSettings中常见的设置，WebView方法的汇总。

Beginandroid WebView使用方法 js交互（进阶）。这一部分主要会讲解Java ,Js交互（本篇3）.

说到交互基本就是两点内容，Java去调用JavaScript ，和JavaScript去调用Java 。那么我从这两点去展开分析，然后再深入的去探究js交互高级使用方法介绍。先看一下利用Android的WebView可以做什么？

可以直接显示和渲染web页面，直接显示网页webview可以直接用html文件（网络上或本地assets中）作布局和JavaScript交互调用网页标签的点击事件

效果：（网页顶部是JS效果滚动，4个模块可以实现点击事件，可看到信息提示）

（1）java调用JavaScript

Java调用JavaScript的方法很简单，只需要执行如下的代码即可：

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

其中toast方法是HTML5页面中提供的Javascript脚本，大致如下：

张露月 : 推荐一首歌给你."All I Need - Within Temptation"点击链接张露月 :上面(隐藏内容),damon to you 张露月点击

张小月

大家只需要关注标签中脚本内容就好，这个html是之前一段时间写的，代码托管到阿里云服务器上面的，为此还开通了阿里云服务器188元，好久没有用过了，为了保证篇幅省略了CSS代码。不知道网站有没有效果，大家可以参考，其中，

解决了HTML中中紊乱码的问题。好像：http://bgwan.oss-cn-shanghai.aliyuncs.com/music/%E5%BC%A0%E7%A2%A7%E6%99%A8%20-%20%E5%B9%B4%E8%BD%AE.mp3

这首歌还可以点开，感兴趣的听听，真舍不得把这么好听一首歌给你们听。

（2）JavaScript调用Java代码

现在没有时间，等等再更新，这部分内容比较多。回来，继续，

WebView提供了一个WebSetting的工具类来实现让WebView中的Javascript脚本能够调用Android中的Java方法，实现起来很简单，只需要三个步骤：

1，调用与WebView关联的WebSeeting中的setJavaScriptEnabled方法来使能JavaScript调用功能。

2，调用WebView中addJavascriptInterface方法将应用中的Java对象暴露给JavaScript。

3，在JavaScript中调用步骤二中暴露出来的接口。

WebSettings中常用的方法可以参考上篇文章。

Android WebView使用常见问题汇总以及解决方案（高级）

下面用一个例子来做说明，分两部分，HTML代码，跟Android中 Java代码。

HTML代码中脚本

html的脚本代码，跟上面java调用Javascipt的html一样，这里你只需要关注如下标签onclick即可，

button class="but" type="submit" value="显示一个土司" onclick="javaObject.showToast('张小月，如果永远都忘不了你，那该怎么办呢？')">登录

其中javaObject就是android中暴露出来的Java对象名字。

Android中 Java代码

接着看一下，暴露给Javascipt调用的Java对象的JavaInterface类

public class JavaInterface{ private Context mContext; public JavaInterface(Context context){ mContext = context; } public void showToast(String msg){ Toast.makeText(mContext,msg,Toast.LENGTH_LONG).show(); } }

最后我们在WebView中绑定操作语句就可以了

WebSetting webSettings = mWebView.getSettings(); webSetting.setJavaSciptEnable(true);//使能JavaScipt调用功能 mWebView.addJavascriptInterface(new JavaInterface(this),"javaObject");

在上篇文章也提到了，这样方法在Android4.2之前的，存在极大的安全漏洞，也就是远程代码执行漏洞，至于如何解决，上面也说过了，google在android4.2以后修复了这个漏洞，我们只需要对象暴露给JavaScipt调用的方法前面加上@JavaSciptInterface注解，那么修改后的语句如下。

public class JavaInterface{ private Context mContext; public JavaInterface(Context context){ mContext = context; } @JavasciptInterface public void showToast(String msg){ Toast.makeText(mContext,msg,Toast.LENGTH_LONG).show(); } }

至于android4.2以下的系统，也有方法，这里可以用一个开源库来解决，当然还有其它办法，safe-java-js-webview-bridge，我们可以直接用，但是本人却不想适配，因为android4.2的手机基本没有存在的意义，你觉得呢？

（3）进阶

不知道你们有没有看过《没有绝对安全的系统》，至于上面说到安全漏洞，攻击者大多是采用android注入js代码去攻击某一公司的服务器，网站等，或者是反过来攻击用户使用的手机造成手机直接crach掉，这种方式可能被用于商业之间的不正当竞争，我不知道当年快的和滴滴之间有没有，还有美团和其他竞争对手有没有攻击对方的APP。其实这些是不道德的，当然憋开道德问题，从技术的角度对我来说，一般的商业app还是有办法让它ANR或者直接crach掉。

那么如何利用android手机向WebView中注入Javacript脚本呢？又应该如何防止非法的WebView注入，这不是本篇文章讨论的，放到下一篇文章《android向WebView中注入Javacript脚本的攻击和防护》，本篇继续进阶Android WebView的使用Js交互。

这里提几个由浅到深问题出来方便大家理解，

1，WebView如何向HTML中注入Js脚本代码？

2，用webview加载了某个网页，怎么样往里面注入JS来改变这个页面的背景或者隐藏一个div.

3，如何点击页面中比如说，“你是世界上最美的女人”这段话的一个标签，如何在android中拦截它本身的跳转来实现自己的跳转或者改变背景。

上面的页面地址是个人163早期博客：http://bgwan.blog.163.com .的首页，我们就以这个为例来解决上面提出的问题。首先注意截图中标记出来的几个代码点，分别是，

//用来解决问题2

http://staryumou.taobao.com/shop/view_shop.htm?spm=a1z0e.1.0.0.mRAvqO&;mytmenu=mdianpu&utkn=g,nvww243dn5tgszlmmq1408679659217&user_number_id=1678646712&scm=1028.1.1.20001">你是世界上最美的女人 //用来解决问题3

WebSettings中常用的方法可以参考上篇文章。

Android WebView使用常见问题汇总以及解决方案（高级）

现在开始：

问题1和问题2解决方案参考，首先我们编写一个js脚本文件，代码如下参考：

private StringBuilder jsFuction; jsFuctions = new StringBuilder("javascript:"); jsFuction.append("(function()") .append("{") .append("document.getElementById('").append("blog-163-com-container").append("').onclick") .append("=function()") .append("{") .append("window.").append("blog-163-com-container").append(".changeBackground();") .append("}") .append("})()");

这里使用StringBuilder 而不用StringBuffer，想必看过我上篇文章对这个讨论应该明白为什么了吧，不多说，不了解的可以看看。

深入理解StringBuffer和StringBuilder - 知乎专栏

String mUrl = "http://bgwan.blog.163.com"; WebSettings webSettings = webView.getSettings(); //设置WebView属性，能够执行Javascript脚本 webSettings.setJavaScriptEnabled(true); //设置可以访问文件 webSettings.setAllowFileAccess(true); //设置支持缩放 webSettings.setBuiltInZoomControls(true); //加载需要显示的网页 // 加载 asset目录下的本地html文件： mUrl = "file:///android_asset/web_app.html" webView.loadUrl(mUrl); //设置WebViewClient用来辅助WebView处理各种通知请求事件等，如更新历史记录、网页开始加载/完毕、报告错误信息等 webView.setWebViewClient(new WebViewClient() { // 以下方法避免自动打开系统自带的浏览器，而是让新打开的网页在当前的WebView中显示 @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } @SuppressLint("SetJavaScriptEnabled") @Override public void onPageFinished(WebView view, String url) { view.loadUrl(jsFuction.toString()); });

我们在WebViewClient的onPageFinished中使用view.loadUrl就可以解决问题1，WebView如何向HTML中注入Js脚本代码的问题。即，

view.loadUrl(jsFuction.toString());

对于问题2，就比较简单了，我们只需要修改js注入的脚本内容即可，参考

jsFunction.apended("javascript:document.getElementById("blog-163-com-container").style.display="noe");

同样的我们在nPageFinished中使用view.loadUrl(jsFunction.toString)加载一段JS,这样我们就可以修改blog-163-com-container这个html DIV标签对应的背景，如果修改整个背景颜色，也可以改为jsFunction.appended("javascript:document.body.style.backgroundColor="#ff00FF");

问题三：转义一下html中按钮和android方法交互

mWebView.addJavascriptInterface(new JavascriptInterface(), "bgwan");

JavaInterface中的代码为：

@SuppressLint("SetJavaScriptEnabled") @android.webkit.JavascriptInterface//使用JavascriptInterface，4.2API以上需要声明 public void showTestToast() { ToastUtil.showLongToast(VmallDetailActivity.this, "点击了添加图片"); //调用相册 Intent intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI); startActivityForResult(intent, VMALLdETAIL_UPLOADIMAGE); } view.loadUrl(jsFuction.toString());

总结一下：经过上面的讨论，那么无论向HTML注入JS，还是我们去拦截JS实现我们自己的业务逻辑都可以按照上面的方法去完成，本章节内容完成。

End:

特别说明，由于公司网络安全和信息安全规则，这里不便也不会贴出公司相关的代码，所有代码在外网环境参考或手动敲的。

授人以鱼，不如授人与渔，话不多

晴雨 2017-06-28 13：50 转载请标明出处也可以手动点击关注我获取更多信息。

【本文地址】

公司简介

联系我们