Android WebView系列文章2-WebView和js交互
目录介绍
1.WebView和Js交互方式
2.Android调用JS脚本
3.JS调用Android方法
4.Android 调用HTML中的javascript脚本并传递参数
5.HTML中的javascript脚本调用Android本地代码并传递参数
6.案例:H5页面点击图片监听图片链接地址
好消息
- 博客笔记大汇总【16年3月到至今】,包括Java基础及深入知识点,Android技术博客,Python学习笔记等等,还包括平时开发中遇到的bug汇总,当然也在工作之余收集了大量的面试题,长期更新维护并且修正,持续完善……开源的文件是markdown格式的!同时也开源了生活博客,从12年起,积累共计47篇[近20万字],转载请注明出处,谢谢!
- 链接地址:https://github.com/yangchong211/YCBlogs
- 如果觉得好,可以star一下,谢谢!当然也欢迎提出建议,万事起于忽微,量变引起质变!
1.WebView和Js交互的几种方式
Android去调用JS的代码JS去调用Android的代码
对于android调用JS代码的方法有2种:
1. 通过WebView的loadUrl()2. 通过WebView的evaluateJavascript()
对于JS调用Android代码的方法有3种:
1. 通过WebView的addJavascriptInterface()进行对象映射2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息
2. Android调用JS脚本
对于Android调用JS代码的方法有2种:
- 通过WebView的loadUrl()- 通过WebView的evaluateJavascript()**通过WebView的evaluateJavascript()**优点:该方法比第一种方法效率更高、使用更简洁。1. 因为该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会。2. Android 4.4 后才可使用//只需要将第一种方法的loadUrl()换成下面该方法即可mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() { @Override public void onReceiveValue(String value) { //此处为 js 返回的结果 }});**通过WebView的loadUrl()**直接Webview调用loadUrl方法,里面是JS的方法名,并可以传入参数,javascript:xxx()方法名需要和JS方法名相同contentWebView.loadUrl("javascript:javacalljs()");
HTML代码
Paste_Image.png
使用建议
两种方法混合使用,即Android 4.4以下使用方法1,Android 4.4以上方法2//Android版本变量final int version = Build.VERSION.SDK_INT;//因为该方法在 Android 4.4 版本才可使用,所以使用时需进行版本判断if (version < 18) { mWebView.loadUrl("javascript:callJS()");} else { mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() { @Override public void onReceiveValue(String value) { //此处为 js 返回的结果 } });}
3. JS调用Android方法
在Java代码中添加下面这句,webview绑定javascriptInterface,js脚本通过这个接口来调用java代码, 第一个参数是自定义类对象,映射成JS对象,这里我直接传this,第二个参数是别名,JS脚本通过这个别名来调用java的方法,这个别名跟HTML代码中也是对应的。
contentWebView.addJavascriptInterface(MainActivity.this,"android");
HTML代码
Paste_Image.png
4.Android 调用HTML中的javascript脚本并传递参数
WebView.loadUrl("javascript:javacalljswith(" + "'http://blog.csdn.net/Leejizhou'" + ")");
HTML代码
Paste_Image.png5. HTML中的javascript脚本调用Android本地代码并传递参数
Android Java代码@JavascriptInterfacepublic void startFunction(final String text){ runOnUiThread(new Runnable() { @Override public void run() { new AlertDialog.Builder(WebViewFiftyActivity.this).setMessage(text).show(); } });}HTML代码function javacalljswith(arg){ document.getElementById("content").innerHTML = ("
6.案例:H5页面点击图片监听图片链接地址
settings.setJavaScriptEnabled(true);wv_view.addJavascriptInterface(new ImageJs(this),"imageListener");/**打开图片js通信接口*/private class ImageJs { private final Activity activity; public ImageJs(Activity activity) { this.activity = activity; } // 下面的@SuppressLint("JavascriptInterface")最好加上。防止在某些版本中js和java的交互不支持。 //@SuppressLint("JavascriptInterface") @android.webkit.JavascriptInterface public void openImage(String img) { Log.i("url地址","图片"+ img); **//跳转页面** }}/**添加图片点击事件的js代码,网上找到,就是这样写,不需要明白*/private void addImageClickListner() { String jsCode="javascript:(function(){" + "var imgs=document.getElementsByTagName(\"img\");" + "for(var i=0;i
后续:
知乎:https://www.zhihu.com/people/yang-chong-69-24/pins/posts
领英:https://www.linkedin.com/in/chong-yang-049216146/
:http://www.jianshu.com/u/b7b2c6ed9284
csdn:http://my.csdn.net/m0_37700275
网易博客:http://yangchong211.blog.163.com/
新浪博客:http://blog.sina.com.cn/786041010yc
github:https://github.com/yangchong211
喜马拉雅听书:http://www.ximalaya.com/zhubo/71989305/
更多相关文章
- Android 中.aar文件生成方法与用法
- Android Studio中获取sha1证书的方法
- android 退出程序三种方法及两种形式
- 【android】五种控制Android应用的权限的方法
- 2011.06.07(2)——— android 调试android源码包下的package应用的
- Android中Intent传递对象的两种方法(Serializable,Parcelable)
- 代码讲解Android Scroller、VelocityTracker
- 基于ffmpeg的Android播放器开源代码