android与js交互
首先引用一篇文章,看过这篇文章基本上就明白android大致与js是如何交互的了
----------------------------分割线-----------------------------------
首先要知道js是啥,js就相当于在html内的函数方法,全称为javascript
那么要交互,必然二者要共存于一起,在android中如何打开一个页面,比较常用的方法就是使用一个WebView控件,用它来加载网页
交互也必然是双方的,有来有往,下面分两部分说明
PS:这里直接援引前面文章中的例子,稍作修改
1,android中调用js
那么首先得有js,不然怎么调用,所以html如下
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> function javacalljs(){ document.getElementById("content").innerHTML = "<br\>JAVA调用了JS的无参函数"; } function javacalljswith(arg){ document.getElementById("content").innerHTML = ("<br\>"+arg); } </script> </head> <body> HTML 内容显示 <br/> <h1><div id="content">内容显示</div></h1> </body> </html>
这里需注意的是,两个方法的名称需要与之后调用的名称相同:javacalljs,javacalljswith
那么将它放入工程内,或是部署在服务器上,随后在webView中加载这个url
这里只写出webView加载该url的代码
contentWebView = (WebView) findViewById(R.id.webview); // 启用javascript contentWebView.getSettings().setJavaScriptEnabled(true); // 从assets目录下面的加载html contentWebView.loadUrl("file:///android_asset/web.html");
这里因为作者使用的是放入工程的方法,故而loadUrl方法内传递的是一个本地的相对地址
到这里webView加载网页就完成了,那么如何使用webView调用其中的js呢
contentWebView.loadUrl("javascript:javacalljs()");
亦或者是
contentWebView.loadUrl("javascript:javacalljswith(" + "'http://blog.csdn.net/Leejizhou'" + ")");
两者都是之前在html内定义过的js函数名,一个有参一个无参(这里为尊重援引博文的作者,参数内的博客地址就不修改了)
到这为之,android中调用js就完成了
那么交互交互,反过来,如何在html代码内与android交互呢
修改一下html的代码
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> </head> <body> HTML 内容显示 <br/> <h1><div id="content">内容显示</div></h1> <br/> <input type="button" value="点击调用java代码" onclick="window.android.startFunction()" /> <br/> <input type="button" value="点击调用java代码并传递参数" onclick="window.android.startFunction('http://blog.csdn.net/Leejizhou')" /> </body> </html>
这里可以看到,正如学习android时,在xml页面内写onclick来绑定点击方法一样,html用的也是这种方法,只是不同的是这里面需要输入的不止是一个方法名,而是window.变量名.方法名
方法名自不用说,至于什么是变量名,先看下面的代码
首先webView的初始化要改成如下代码
contentWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
contentWebView.loadUrl("file:///android_asset/web.html");
contentWebView.addJavascriptInterface(MainActivity.this,"android");
最后一行添加js接口的时候,后面的“android”就是之前说的变量名
那么再往下,就需要定义这个方法了
//由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface //JS调用Android JAVA方法名和HTML中的按钮 onclick后的别名后面的名字对应 @JavascriptInterface public void startFunction(){ runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(MainActivity.this,"show",3000).show(); } }); } @JavascriptInterface public void startFunction(final String text){ runOnUiThread(new Runnable() { @Override public void run() { new AlertDialog.Builder(MainActivity.this).setMessage(text).show(); } }); }
做到这,js就可以调用本地android中的方法了,这就实现了交互的过程
当然这里的交互非常简单,如果需求不一样,还需要修改,例如调用js时使用evaluateJavascript()会使得网页不刷新并且较为容易获得返回值等等
这方面在这篇文章中讲的很透彻,这里也直接引用
Android:你要的WebView与 JS 交互方式 都在这里了