java与js交互，相互调用传参

随着前端技术的发展与H5的广泛使用，移动端采用native+h5的方式越来越多了，对于Android来说就涉及到java与js的交互，相互调用传参等。下面就来看一下java与js交互的简单demo。
方式实现js调用java有四种方式：1.JavascriptInterface2.WebViewClient.shouldOverrideUrlLoading()3.WebChromeClient.onConsoleMessage()4.WebChromeClient.onJsPrompt()JavascriptInterface这种方式是Android官方提供的Javascript与Native通信的解决方案。java中创建接口public class DemoInteface {@android.webkit.JavascriptInterfacepublic void fromJs(String toast) {Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();}}将接口添加到WebView中webView = (WebView) findViewById(R.id.wb);WebSettings settings = webView.getSettings();settings.setJavaScriptEnabled(true);webView.loadUrl("file:///android_asset/test.html");webView.addJavascriptInterface(new DemoInteface(), "demo");将接口添加到WebView中<body><a href="javascript:;" class="m-btn" οnclick="showToast('js的问候送达')">Toast</a><script language="javascript">function showToast(toast) {javascript:demo.fromJs(toast);};</script></body>注意js中的javascript:demo.fromJs(toast); 其中类名（dmeo）要与 webView.addJavascriptInterface(new DemoInteface(), “demo”);中第二个参数一致，方法名要与接口中方法的名称一致

WebViewClient.shouldOverrideUrlLoading()这个方法是拦截webview中所有的url跳转，根据url来判断是否拦截，来执行不同的操作java代码public class CustomWebViewClient extends WebViewClient {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {if (url.contains("toast")) {Log.e("yue", url);Toast.makeText(MainActivity.this, "拦截成功了", Toast.LENGTH_SHORT).show();return true;}return super.shouldOverrideUrlLoading(view, url);}}webView.setWebViewClient(new CustomWebViewClient());js代码<a href="https://www.baidu.com/?=toast" class="m-btn">Toast2</a>1

WebChromeClient.onConsoleMessage()这是Android提供给Javascript调试在Native代码里面打印日志信息的API。javapublic class CustomWebChromeClient extends WebChromeClient {@Overridepublic boolean onConsoleMessage(ConsoleMessage consoleMessage) {super.onConsoleMessage(consoleMessage);String msg = consoleMessage.message();//Javascript输入的Log内容Log.d("fromjs",msg);return true;}}webView.setWebChromeClient(new CustomWebChromeClient());js代码<a href="javascript:;" class="m-btn" οnclick="log()">log</a>function log(){console.log('log info from js');}

WebChromeClient.onJsPrompt()除了WebChromeClient.onJsPrompt()，还有WebChromeClient.onJsAlert()和WebChromeClient.onJsConfirm()。顾名思义，这三个Javascript给Native代码的回调接口的作用分别是提示展示提示信息，展示警告信息和展示确认信息。因为极少会用这几种，所以这里就不多做介绍实现java调用js：上面说了js调用java有很多方式，常用也是官方推荐的就是前两种，而java调用js就只有一种方式，WebView.loadUrl()，androi 4.4（api 19）以上出现了WebView.evaluateJavascript()来代替loadUrl。java代码button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (android.os.Build.VERSION.SDK_INT >= 19) {webView.evaluateJavascript("javascript:wave()", null);} else {webView.loadUrl("javascript:wave('')");}}});
js代码var flag = false;function wave() {if(!flag){flag = true;document.getElementById("droid").src="testb.png";}else{flag = false;document.getElementById("droid").src="testa.png";}}

以上就是一些简单的js与java的交互。要想实现复杂的交互逻辑，可以使用jsBridge这一第三方框架，吓篇博客讲会介绍这一框架的使用及原理。代码下载： http://download.csdn.net/detail/qq_27942511/9832172

转载于:https://www.cnblogs.com/Free-Thinker/p/10684768.html

java与js交互，相互调用传参相关推荐

java调用jar并传参,Java项目导出为jar包+导出第三方jar包+使用命令行调用+传参
Java项目导出为jar包+导出第三方jar包+使用命令行调用+传参一.打包情况1:不需要向程序传参数,并且程序没有使用第三方jar包 Eclipse上导出jar: 然后选择一个java文件作为入 ...
转载 iOS js oc相互调用（JavaScriptCore） --iOS调用js
iOS js oc相互调用(JavaScriptCore) 从iOS7开始苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了. 下面我们就简单了解一下这个框 ...
JAVA与.NET的相互调用——通过Web服务实现相互调用
JAVA与.NET是现今世界竞争激烈的两大开发媒体,两者语言有很多相似的地方.而在很多大型的开发项目里面,往往需要使用两种语言进行集成开发.而很多的开发人员都会偏向于其中一种语言,在使用集成开发的时候 ...
jni c java互相调用_通过JNI实现Java和C++的相互调用
评论 # re: 通过JNI实现Java和C++的相互调用 2008-07-29 14:14 Always BaNg. 不错,把字符转换也一并讲了吧,比如UTF-8的处理,USC-2与MBCS转换等. ...
.Net 与 Java 的服务接口相互调用
本文介绍.Net 与 Java 相互调用的例子.下面的介绍主要包括三方面:一是通过常用Web服务进行相互调用,二是使用TCP/IP套接字进行相互调用,三是使用Remote实现远程对象相互调用. 首先说 ...
js匿名函数使用传参
function () {alert("error"); } //报错:匿名函数不能直接调用使用 0x01 (function () {alert("Success&q ...
android webview js交互第一节（java和js交互）
转载请注明出处挺帅的移动开发专栏 http://blog.csdn.net/wangtingshuai/article/details/8631835 在andro ...
vue 事件调用传参_Vue 事件如何传递参数？
Vue 事件如何传递参数? 事件函数参数传递: 普通参数和事件对象传递格式如下: 调用函数传参点秋香 vue事件绑定-参数传递实例如下: vue事件绑定-参数传递 xinbiancheng.cn { ...
iOS js oc相互调用（JavaScriptCore）（二）
http://blog.csdn.net/lwjok2007/article/details/47058795 上节地址 http://blog.csdn.net/lwjok2007/article/ ...

java与js交互，相互调用传参

java与js交互，相互调用传参相关推荐

最新文章

热门文章