JavaScript与Android原生相互调用并传参
来源:互联网 发布:淘宝直通车手机端位置 编辑:程序博客网 时间:2024/05/18 19:21
简介
最近项目中使用到了WebView通过JavaScript与Android原生进行交互,调用Android中的方法或者是调用Android手机硬件和资源,通过Google、百度了各种资料,因此,在这里分享一下,也把自己学习的知识做一个总结记录。
开发步骤分析
1、添加权限
使用到WebView首先得想到在AndroidManifest.xml文件中添加访问网络的权限。否则就会报错,错误信息我之前做过记录,错误信息地址。
<uses-permission android:name="android.permission.INTERNET"/>
2、加载html文件
加载HTML文件,可以是服务器上的HTML文件,也可以是放在assets 目录下的本地文件。
- 服务器用:webView.loadUrl(“http://www.baidu.com“);
- 本地文件用:webView.loadUrl(“file:///android_asset/xxx.html”);
html文件代码如下,其中AndroidWebView为JS与Android协议好的调用对象,通过这个对象进行交互。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>Android WebView 与 Javascript 交互</title><head> <style> body {background-color:#e6e6e6} .rect { color:white; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; width:100px; padding:6px; background-color:#98bf21; text-decoration:none; text-align:center; border:none; cursor:pointer; } .inputStyle {font-size:16px;padding:6px} </style></head><body><p>WebView与Javascript交互</p><input id = "name_input" class = "inputStyle" type="text"/><a class = "rect" onclick="sendInfoToJava()">JS调用Java</a><br><br><input type="button" id="select_img" value="选择图片" onclick="selectImage()"/><br><br><img id="img" src="file:///android_asset/ic_launcher.png" alt="图片" width="200" height="200"/><script> function sendInfoToJava(){ //调用android程序中的方法,并传递参数 var name = document.getElementById("name_input").value; window.AndroidWebView.showInfoFromJs(name); } //在android代码中调用此方法 function showInfoFromJava(msg){ alert("来自客户端的信息:"+msg); } function selectImage() { window.AndroidWebView.selectPic(); } function showPicPath(path){ alert("图片路径:" + path); document.getElementById("img").src = path; } </script></body></html>
3、编写Android代码
//初始化webView控件以及设置本地调用对象及其接口 private void initView() { mWebView = (WebView) findViewById(R.id.web_view); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.setWebChromeClient(new MyWebChromeClient()); mWebView.setWebViewClient(new MyWebViewClient(this)); //设置本地调用对象及其接口 mWebView.addJavascriptInterface(new JSObject(this), "AndroidWebView"); mWebView.loadUrl("file:///android_asset/test.html"); }//在java中调用js代码 public void sendInfoToJs(View view) { String message= ((EditText) findViewById(R.id.input_et)).getText().toString(); //调用js中的函数:showInfoFromJava(message) mWebView.loadUrl("javascript:showInfoFromJava('" + message+ "')"); }//JavaScript回调 private class JSObject { private Context mContext; public JSObject(Context context) { this.mContext = context; } //在js中触发此方法。 @JavascriptInterface public void showInfoFromJs(String name) { Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show(); } @JavascriptInterface public void selectPic() { showSelectPhotoDialog(); } }private class MyWebViewClient extends WebViewClient { private Context mContext; public MyWebViewClient(Context context) { super(); mContext = context; } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { Log.d(TAG, "URL地址:" + url); super.onPageStarted(view, url, favicon); } @Override public void onPageFinished(WebView view, String url) { Log.i(TAG, "onPageFinished"); super.onPageFinished(view, url); } }private class MyWebChromeClient extends WebChromeClient { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return super.onJsAlert(view, url, message, result); } }
以上就是简单的JS与Android原生交互以及传递参数主要代码,JS端会取出input中的数据,并调用sendInfoToJava()方法将取到的数据传递给Android原生界面(window.AndroidWebView.showInfoFromJs(name))。Native界面会通过回调 showInfoFromJs(String name)方法取出并弹出提示。同样原生通过EditText中取到数据,通过sendInfoToJs(View view)方法回调JS中的showInfoFromJava(msg)并取出数据Alert提示。
0 0
- JavaScript与Android原生相互调用并传参
- android与javascript相互调用
- android与javascript相互调用
- android与javascript相互调用
- Android之WebView与原生js之间的相互调用
- Android原生WebView与网页js相互调用
- Android与JavaScript方法相互调用!
- Android与JavaScript方法相互调用!
- 17.Android与JavaScript相互调用
- android与javascript实现相互调用
- Android与JavaScript方法相互调用
- Android与JavaScript方法相互调用!
- Android与JavaScript方法相互调用
- Android与JavaScript方法相互调用
- Android WebView与JavaScript代码相互调用
- Android与JavaScript的相互调用
- Android与JavaScript之间的相互调用
- android webview native与JavaScript相互调用 java与JavaScript相互调用
- 扫描台操作以及集合框架
- Java并发编程-并发工具包java.util.concurrent使用指南
- 进制转换
- jqueryMobile手机开发
- 1001. 害死人不偿命的(3n+1)猜想 (15)
- JavaScript与Android原生相互调用并传参
- Tomcat8启用gzip压缩实现网页性能优化
- 提高篇——用c语言将十进制数转换尾二进制数
- Linux预习
- 购物车功能实现
- Hive的安装
- 蓝桥杯基础练习BASIC-8 回文数
- 'phantomjs.exe' executable needs to be in PATH. (selenium PhantomJS python)
- 第五周