标签：文章 UI 输入 blank style find 部分 head webview控件
首先引用一篇文章，看过这篇文章基本上就明白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 交互方式 都在这里了
标签：文章 UI 输入 blank style find 部分 head webview控件
原文地址：http://www.cnblogs.com/Qunter/p/7105683.html
