在Android的开发过程中、遇到一个新需求、那就是让Java代码和Javascript代码进行交互、在IOS中实现起来很麻烦、而在Android中相对来说容易多了、Android对这种交互进行了很好的封装、我们可以很简单的用Java代码调用WebView中的js函数、也可以用WebView中的js来调用Android应用中的Java代码。
案例主要包含了:
- Html中调用Android方法
- Android调用JS方法无参数
- Android调用JS方法有参数
- Android调用JS方法有参数且有返回值处理方式1
- Android调用JS方法有参数且有返回值处理方式2(Android4.4以上)
1:创建JS对象
webView.addJavascriptInterface(new JsInterface(), "obj"); public class JsInterface { //JS中调用Android中的方法 和返回值处理的一种方法 /**** * Html中的点击事件 onclick * <input type="button" value="结算" onclick="showToast('12')"> * @param toast */ @JavascriptInterface public void showToast(String toast) { Toast.makeText(MainActivity.this, "你的商品价格是:¥"+toast, Toast.LENGTH_SHORT).show(); } } function showToast(toast) { var money=toast*3; javascript:obj.showToast(money); }
2:
webView.loadUrl("javascript:funFromjs()"); function funFromjs(){ document.getElementById("helloweb").innerHTML="div显示数据,无参数"; }
3:
webView.loadUrl("javascript:funJs('Android端传入的信息,div标签中显示,含参数')"); function funJs(msg){ document.getElementById("hello2").innerHTML=msg; }
4:
webView.loadUrl("javascript:sum(6,6)"); /*** * Android代码调用获取J是中的返回值 * * @param result */ @JavascriptInterface public void onSum(int result) { Toast.makeText(MainActivity.this, "Android调用JS方法且有返回值+计算结果=="+result, Toast.LENGTH_SHORT).show(); } function sum(i,m){ var result = i*m; document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; javascript:obj.onSum(result) }
5:
webView.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Toast.makeText(MainActivity.this, "返回值"+value, Toast.LENGTH_SHORT).show(); } }); function sumn(i,m){ var result = i*m; document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; return result; }
注意:
1、Java 调用 js 里面的函数、效率并不是很高、估计要200ms左右吧、做交互性很强的事情、这种速度很难让人接受、而js去调Java的方法、速度很快、50ms左右、所以尽量用js调用Java方法
2、Java 调用 js 的函数、没有返回值、调用了就控制不到了
3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用、使用 toLocaleString() 函数就可以了、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间
4、网页中尽量不要使用jQuery、执行起来需要5-6秒、最好使用原生的js写业务脚本、以提升加载速度、改善用户体验。
注:使用的是本地的Html文件,不过在网络链接的Html文件也是可以实现的。
源码点击下载
相关推荐
android中Webview与javascript的交互(互相调用)android中Webview与javascript的交互(互相调用)
为了使Android移动项目能够在较短的时间内完成开发,同时降低技术人员开发的成本投入,往往会采用Hybrid APP的开发模式。...势必需要了解与掌握Android[java]与JavaScript之间的交互、相互调用操作的方法与技术。
webview与javascript交互, oc 调用 javascipt 中的 函数 获取网页信息,也可截取 网页的某个动作 来做自己的处理 。并解决 过程中 因中文 遇到的 编码问题。
安卓和JS交互通讯Demo,Android和JavaScript交互,安卓webview和js交互demo,中文不乱码 可点击下载文件,点击返回功能,双击返回退出软件,webview alert confirm调用安卓系统弹窗 H5 localStorage本地存储功能,...
android中Webview与javascript的交互,Android中的点击按钮调用js方法,js点击按钮调用Android中的方法
主要介绍了android中WebView和javascript实现数据交互实例,需要的朋友可以参考下
Android WebView中客户端与JavaScript的基本交互 博客地址:http://blog.csdn.net/qq_25867141/article/details/50751354
使用WebView中的Javascript和本地代码交互
前言: 最近公司的App为了加快...本篇主要介绍WebView与Javascript交互数据,关于如何将H5网页呈现在WebView上可以参考这篇博客文章:Android总结之WebView使用总结。 WebView与Javascript交互: WebView与Javascr
android4.4 webview 实现java调用JavaScript, JavaScript调用java
本文实例讲述了Android编程使用WebView实现与Javascript交互的方法。分享给大家供大家参考,具体如下: Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用。 ...
java 和 javascript的交互方式 1.java有参数调用 2.java无参数调用 3.javascript无参调用 4.javascript有参调用
android原生和js交互传递参数 包含特殊字符 例如"\'"等情况 避免Uncaught SyntaxError: missing ) after argument list 避免JSON.parse失败等情况 利于快速和webview交互 加速开发过程
做过 Android 混合开发的,应该都知道 Android 中 Java 代码和 Javascript 代码之间的交互怎么做。 首先回顾一下 Java 和 Javascript 之间的交互。 JavaScript 调用 Java Android 中 WebView 添加供 Html 页面调用的...
android 4.4 之后的版本,由于Android安全机制的升级,js注入漏洞解决方案,导致之前JS和Android交互的方法失效了,该demo很好的解决了最新版本Android和js之间互相调用的问题,支持最新的Android版本调用,包括华为...
而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5页面等,下面来看看这两是怎么交互的。 先来看一下项目的整体架构...