Android webview和js互相调用实现方法_Android

Android-webview和js互相调用

Android 和 H5 都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要。而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5页面等,下面来看看这两是怎么交互的。

先来看一下项目的整体架构(Android studio中的项目)

整个项目的结构就是这样的,里面最主要的就是assets下面的js_webView.html文件和代码中的WebViewJsActivity,其中项目里面的MainActivity只是做了个跳转而已,跳转到WebViewJsActivity。就这样。

下面上代码:(js_webView.html)

html里面的代码也比较简单,整个html中就一个Button,点击这个Button的时候去执行javascript中的 jsCallAndroid() 方法。

网页中有关 javascript 的代码也比较简单,整个 js 就2个方法,一个是 jsCallAndroid() ,一个是 androidCallJs() 。看方法名就知道了,分别是 js 调用 Android 的和 Android 调用 js 的。

先不要去管 jsCallAndroid() 里面做的是什么,待会会解释,来看看 androidCallJs() 这个方法里面做的就是弹出一个信息提示框,具体提示什么信息都不重要了,随便。

再来看看代码部分(WebViewActivity的布局文件): 

整个布局文件也很简单,一个按钮和一个WebView,按钮是用来测试 Android 调用 js 用的,js 调用 Android 就当然是 webview 加载的网页里面的按钮了。

再来看看 Java 代码部分(WebViewActivity):

下面来看看代码部分:

37-42行:这几行就是android中的按钮的点击事件,没什么好解释的,来看看点击事件做的是什么?点击事件做的是:调用 webview 的 loadurl 方法去调用 js 中的方法;调用的方式是:前面是 javascript 中间用 : 分隔 最后是 要调用的 js 的方法名。

45-55行:这几行就是有关于 Webview 的设置等,46-51 这几行是指支持弹窗,也就是支持 html 网页弹框,因为前面的 html 代码中,有我们 Android 调用 js 的时候,调用成功就 js 弹窗,所以这里要加上这个设置。接下来是53行,53行指的是支持 javascript 这里指的是支持 html 中的 javascript 解析,不管是不是 js 和 Android 交互,只要网页中含有 js ,都要。最关键的就是54行,54行就是 javascript 和 Android 交互的了,addJavascriptInterface 方法需要接受两个参数,第一个是与之相对应的 js 调用 Android 本地的类的对象,这个例子中的就是58-63行这个类的对象,第二个参数就是和前面网页中的js代码中的 jsCallAndroid 方法中的 wv.sayHello(),这里的 wv 就和这个参数(wv)与之相对应,而 sayHello() 就是对应的第一个参数的对象里面的方法。

最后是58-63行,这几行没什么好解释的了,只是如果调用成功就打印一行日志。仅此检验是否调用成功而已。

整个 demo 代码到此完毕,好激动,赶紧运行试试看。

运行的结果会让很多人失望,只是android调用js成功了,但 js 调用 android 不成功。 

这是为什么呢?这里要涉及到的是有关于 webview 和 js 的安全性的问题。js 可以通过这种方式下载恶意代码在 android 上执行,具体有兴趣的可以去 Google 一下,所以上面这种写法只是对于 Api16以前的android手机是适用的,16以后,谷歌对这个安全性问题进行了修复。将其注解到android自带的一个javascriptInterfface类中。下面就来看看16以后的写法是咋样的?

 有了注解,简直如虎添翼,非常方便。还是原来的配方,还是原来的味道,原汁原味。除了 Activity 中的代码需要修改,其他都不动。

改动的代码有55行,直接传一个 this(Context) 对象就可以了,那么,原来的 JsInterface 就可以不要了。不要那我 sayHello 方法写到哪里呢?既然你传递的是 this ,当然是写到 this 里面咯(59-62行)。不同的是,这个 sayHello() 方法必须加上一个 JavascriptInterface 的注解。

OK了,16以前和16以后的都有了,不就OK了么。在添加javascript的时候判断一下 Api 版本就可以了,哈哈。。。

不不不,肯定不是这样子做。指需要在onCreate() 方法上添加 @SuppressLint("JavascriptInterface") 注解即可。

看下面的就是终极代码了。

 

对,没错,就是这样子。大功告成。

最后需要提一点的是,上面的例子是可以执行,正常情况下都没什么问题,但你看看网上的demo,很多在 android 调用 js 的时候是开一个子线程去调用,没错,实际开发中,是必须要这样子做的。好处就不言而喻了。这一点看最后一张代码图,这里也有给出,直接调用webview的post,里面就是 Android 调用 js 了。

 

时间: 2024-09-16 13:45:27

Android webview和js互相调用实现方法_Android的相关文章

Android中WebView与Js交互的实现方法_Android

获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名

android webview中使用Java调用JavaScript方法并获取返回值

在android平板上用webview打开一个网页,调用里面的javascript方法,同时相互传参. 网上例子很少啊,基本都不能获取返回值,贴一个自己最后调试完的代码如下: Java: 复制代码 代码如下: protected void onCreate(Bundle savedInstanceState) { ........ x = (WebView)this.findViewById(R.id.webView_viewTable); x.setScrollBarStyle(View.SC

android webview 中localStorage无效的解决方法_Android

我在 android里面 使用html5的 localStorage 为什么存不进去也读不出来呀?网上搜了好多都没效果 复制代码 代码如下: mainWebView = (WebView)this.findViewById(R.id.mainWebView);         WebSettings settings = mainWebView.getSettings();         settings.setJavaScriptEnabled(true);         settings

javascript-Android 在webview中js怎么调用java里面的方法

问题描述 Android 在webview中js怎么调用java里面的方法 Android 在webview中js怎么调用java里面的方法 需要调用的是一个社会化分享的 解决方案 http://zhidao.baidu.com/link?url=8GQWxP5vy1Idkk3cVnU9YZpCHb4X5n37A9aeSdD3FaoPWIfXQzQ82D6nDpSJ6KBkfuqZsZ398EEcpXuIchcGiehjvrn1KqoWfVAAgNuWh2e 参考., 解决方案二: 1.布局文件

Android中WebView与Js交互的实现方法

获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名

界面-android webview和JS的交互

问题描述 android webview和JS的交互 代码的主要实现是这样的: 用h5写的一个登陆界面,关于登录界面的逻辑操作是用android的webview来实现的. 在不同的手机上出现不同的问题: 1.红米1s: 在第一次进入该页面的时候,所有webView图片的点击都能响应,此时如果用户点击返回,finish当前页面,再次进入该页面后,所有图片点击事件失效, 2.LG的一个手机 关于用户名和密码的输入框(input标签),两个输入框不能够连续交替地输入,这样程序会崩溃,以下输入则没有问题

配置-android webview debuggap js 远程调试

问题描述 android webview debuggap js 远程调试 我电脑系统是win8 64位 手机是android 4.4.4版本的.我用debuggap无法进行远程调试.提示如下信息: Sorry,this remote client doesn't support single-step debugging Maybe there is something wrong with your setting and configuration 但是我可以操作页面元素.不知道哪里配置错

Android WebView的Js对象注入漏洞解决方案

最近在做一个项目过程中,发现了一个很严重的安全漏洞,这个漏洞是乌云平台(http://www.wooyun.org)报告出来的. 1,使用场景 我们很多时候要使用WebView来展示一个网页,现在很多应用为了做到服务端可控,很多结果页都是网页的,而不是本地实现,这样做有很多好处,比如界面的改变不需要重新发布新版本,直接在Server端修改就行了.用网页来展示界面,通常情况下都或多或少都与Java代码有交互,比如点击网页上面的一个按钮,我们需要知道这个按钮点击事件,或者我们要调用某个方法,让页面执

Android WebView 与JS的数据交互

转自 :http://blog.csdn.net/cappuccinolau/article/details/8262821 关于WebView 我们知道目前android市场上的一些应用采用的开发方式大致分为三种:Native App.Web App.Hybrid App.本文主要是Hybrid App中实现的主要技术native组件与js的数据交互的理解以及实现.   Android API中提供了WebView组件来实现对html的渲染.所谓的HybridApp开发方式即是汇集了HTML5