android中webview控件和javascript交互实例

当我们要实现丰富的图文混排效果的时候，我们一般会使用webview，这是一个功能十分强大的的控件，来看看官方的解释：

复制代码代码如下:

	A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

一个能显示网页内容的View。该类是你实现一个自己的浏览器，或者只是在activity中显示网页内容的基础；它基于WebKit内核来显示网页，并且包含了实现前后翻页、放大缩小，文字搜索方法。

从上面你应该了解到了基本功能，也就是显示网页。这篇文章中我们主要讨论webview和Javascript的交互。如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择。

WebView和js的交互包含两方面，一是在html中通过js调用安卓的java代码；二是在安卓java代码中调用js。

一、html中通过js调用java代码

js中调用java代码其实就记住一点，webview设置一个和js交互的接口（注意这里只是一般的意思，并不是java中接口的含义），这个接口其实是一个一般的类，同时为这个接口取一个别名。这个过程如下：

复制代码代码如下:

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(),"demo");

new DemoJavaScriptInterface就是这个接口，demo就是这个接口的别名。
上面的代码执行之后在html的js中就能通过别名（这里是“demo”）来调用newDemoJavaScriptInterface类中的任何方法。

如我们想让html中的一个button点击之后调用java中的函数可以这样：

复制代码代码如下:

	

	<input type="button"  value="click me"  onclick="window.demo.clickOnAndroid()"/>

但是因为安全问题，在Android4.2中(如果应用的android:targetSdkVersion数值为17+)JS只能访问带有 @JavascriptInterface注解的Java函数。因此如果你的开发版本比较高，需要在被调用的函数前加上@JavascriptInterface注解。

下面是谷歌给出的代码示例：
WebViewDemo.java

复制代码代码如下:

	
	package com.google.android.webviewdemo;

	import android.app.Activity;

	import android.os.Bundle;

	import android.os.Handler;

	import android.util.Log;

	import android.webkit.JsResult;

	import android.webkit.WebChromeClient;

	import android.webkit.WebSettings;

	import android.webkit.WebView;

	/**

	 * Demonstrates how to embed a WebView in your activity. Also demonstrates how

	 * to have javascript in the WebView call into the activity, and how the activity

	 * can invoke javascript.

	 * <p>

	 * In this example, clicking on the android in the WebView will result in a call into

	 * the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code

	 * will turn around and invoke javascript using the {@link WebView#loadUrl(String)}

	 * method.

	 * <p>

	 * Obviously all of this could have been accomplished without calling into the activity

	 * and then back into javascript, but this code is intended to show how to set up the

	 * code paths for this sort of communication.

	 *

	 */

	public class WebViewDemo extends Activity {

	    private static final String LOG_TAG = "WebViewDemo";

	    private WebView mWebView;

	    private Handler mHandler = new Handler();

	    @Override

	    public void onCreate(Bundle icicle) {

	        super.onCreate(icicle);

	        setContentView(R.layout.main);

	        mWebView = (WebView) findViewById(R.id.webview);

	        WebSettings webSettings = mWebView.getSettings();

	        webSettings.setSavePassword(false);

	        webSettings.setSaveFormData(false);

	        webSettings.setJavaScriptEnabled(true);

	        webSettings.setSupportZoom(false);

	        mWebView.setWebChromeClient(new MyWebChromeClient());

	        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

	        mWebView.loadUrl("file:///android_asset/demo.html");

	    }

	    final class DemoJavaScriptInterface {

	        DemoJavaScriptInterface() {

	        }

	        /**

	         * This is not called on the UI thread. Post a runnable to invoke

	         * loadUrl on the UI thread.

	         */

	        public void clickOnAndroid() {

	            mHandler.post(new Runnable() {

	                public void run() {

	                    mWebView.loadUrl("javascript:wave()");

	                }

	            });

	        }

	    }

	    /**

	     * Provides a hook for calling "alert" from javascript. Useful for

	     * debugging your javascript.

	     */

	    final class MyWebChromeClient extends WebChromeClient {

	        @Override

	        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

	            Log.d(LOG_TAG, message);

	            result.confirm();

	            return true;

	        }

	    }

	}

demo.html

复制代码代码如下:

	
	<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="android_normal.png"/><br>

	                Click me!

	        </div></a>

	    </body>

	</html>

main.xml

复制代码代码如下:

	
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

	    android:orientation="vertical"

	    android:layout_width="fill_parent"

	    android:layout_height="fill_parent"

	    >                                            

	    <TextView

	        android:layout_width="fill_parent"

	        android:layout_height="wrap_content"

	        android:text="@string/intro"

	        android:padding="4dip"

	        android:textSize="16sp"

	        />

	    <WebView

	        android:id="@+id/webview"

	        android:layout_width="fill_parent"

	        android:layout_height="0dip"

	        android:layout_weight="1"

	        />

	</LinearLayout>