WebView中使用javaScript
现在在很多应用中都会嵌入web网页，一些操作直接在webview中实现。这样做最大的一个好处是，不需要更新手机客户端即可在手机端发布新的大型信息，必须新的活动，新的促销信息等。
举一个同程网的例子看一下：
1. 这是同程网首页，我们尝试点击首页的幻灯片：
首页幻灯片
2. 好了，进入了一整个页面的webView，然后我们点击webView上的这个标价80元的大图片
web页面，活动列表
3. 跳转到了一个正常的Android布局
活动详情页
现在我们分析一下实现方法：
很简单，webView加载一个HTML，HTML中加入javaScript代码。点击指定图片的时候，JS调用本地Java代码，实现Activity的跳转。不会JS也没有关系，现在我们建一个Demo简单看一下。
Paste_Image.png
这是放在assets中的html文件，主要看<body>中的内容，<div>中的内容意思是显示一张img，id为"droid"，src表示加载assets中的一个图片，当然这些不是重点，如果是服务器端，你的后端程序员会帮你搞定的。style表示的是设置这样img的一些布局格式。
重点是 <a 中的代码，onClick表示这张图片可点击，点击之后调用本地java代码中的clickOnAndroid()方法，当然也可以是有参函数，demo是一个代号。
<html>
<script language="javascript">
/* This function is invoked by the activity */
function wave() {
alert("1");
document.getElementById("droid").src="android_waving.png";
alert("2");
}
</script>
<body>
<!-- Calls into the javascript interface for the activity -->
<a onClick="window.demo.clickOnAndroid()"><div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;" >
<img id="droid" src="ic_launcher.png"/><br>
Click me, can load clickOnAndroid
</div></a>
</body>
</html>
这个是主Activity的方法。
public class WebViewDemo extends Activity {
private static final String LOG_TAG = "WebViewDemo";
private WebView mWebView;
private Handler mHandler = new Handler();
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" }) @Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);
//最开始的一步，获取WebSetting，管理WebView的设置状态
WebSettings webSettings = mWebView.getSettings();
// 设置JS可用
webSettings.setJavaScriptEnabled(true);
// 是否支持缩放
webSettings.setSupportZoom(false);
//WebChromeClient和WebSetting一样，也是WebView的辅助对象
mWebView.setWebChromeClient(new MyWebChromeClient());
// 添加JS调用接口, DemoJavaScriptInterface是"接口"，在里面写上点击webView调用的java方法， demo是这个接口的别名
// 在HTML的JS就能通过别名（demo）来调用newDemoJavaScriptInterface类中的任何方法。
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
//载入具体的web地址
mWebView.loadUrl("file:///android_asset/demo.html");
}
//这个接口就是addJavascriptInterface方法中添加的接口，当然这个方法里也可以传入this，那么就不需要这个接口了，clickOnAndroid方法直接作为成员方法出现
final class DemoJavaScriptInterface {
DemoJavaScriptInterface() {
}
@ JavascriptInterface // SDK-17以上需加入这个注解
public void clickOnAndroid() {
// //接口中的事件不能在UI线程中，可以用handler或者runOnUiThread
// mHandler.post(new Runnable() {
// public void run() {
// //java调用JS中的方法，对应 function wave()
// mWebView.loadUrl("javascript:wave()");
//
// }
// });
startActivity(new Intent(WebViewDemo.this, ActivityTwo.class));
}
}
/**
* Provides a hook for calling "alert" from javascript. Useful for
* debugging your javascript.
*/
final class MyWebChromeClient extends WebChromeClient {
// 处理JS中的Alert事件
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Log.d(LOG_TAG, message);
result.confirm();
return true;
}
}
}
WebViewDemo
ActivityTwo
clickOnAndroid()内是启动另一个Activity，原先被我注释掉的是本地Java代码调用webView中的javaScript方法(即Html中的function wave()片段 )。需要注意的是，如果需要更新UI，是需要放在工作线程中的，使用handler或者runOnUiThread。
再者，如果需要判断点击webView中不同的图片，跳转到不同的详情页，可以在clickOnAndroid()中传入Json对象或者相关信息，比如一个活动的Json信息，再适配到下一个Activity中去显示。
这样，大概一个webView专题页面就实现了，不需要更新客户端。
