Android WebView与JavaScript代码相互调用

一、JavaScript调用Java方法

       为了方便web网页和Android应用的交互，Android系统提供了WebView中JavaScript网页脚本调用Java类方法的机制。只要调用addJavascriptInterface方法即可映射一个Java对象到JavaScript对象上。

1、映射Java对象到JavaScript对象上

        //WebView启用Javascript脚本执行
        WebSettings wSet = mWebView.getSettings();
        wSet.setJavaScriptEnabled(true);

        TestObject testObject = new TestObject();
        //映射Java对象到一个名为”AliansTestObject“的Javascript对象上
        //JavaScript中可以通过"window.AliansTestObject"来调用Java对象的方法
        mWebView.addJavascriptInterface(testObject, "AliansTestObject");

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

    private class TestObject {
        /**网页Javascript调用接口**/
        public int reset () {
            return 1;
        }
    }

2、JavaScript调用Java对象示例

<input type="submit" value="change to 1" οnclick="document.getElementById('output').innerHTML
=AliansTestObject.reset()" />

二、android调用JavaScript的方法

wWebView.setWebChromeClient (WebChromeClient client) 
要用到Handler更新UI，Handler mHandler = new Handler();

        mWebView.setWebChromeClient(new MyWebChromeClient());
        mWebView.addJavascriptInterface(new Object(){
            /**
             * 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() {
                        Toast.makeText(WebViewAndJSActivity.this, "123", Toast.LENGTH_SHORT).show();
                        mWebView.loadUrl("javascript:wave()");
                    }
                });
            }
        }, "demo");

    /**
     * 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) {
            result.confirm();
            Toast.makeText(WebViewAndJSActivity.this, message, Toast.LENGTH_SHORT).show();
//            return super.onJsAlert(view, url, message, result);
            
            //返回值true表示不弹出JavaScript的alert()对话框信息，否则弹出
            return true;
        }
    }

html中js代码如下：

<script>
    function wave() {
            alert("1");
            document.getElementById("droid").src="file:///android_asset/ic_launcher.png";
            alert("2");
        }
</script>

<a onClick="window.demo.clickOnAndroid()">
        <div style="width:100px;
            margin:0px auto;
            padding:10px;
            text-align:center;
            border:2px solid #202020;" >
                <img id="droid" src="<span style="font-family: Arial;">file:///android_asset/ic_launcher.png</span>"/><br>
                Click me!
        </div>
 </a>

注意Android中html放在assets目录下，涉及到的资源图片png等也是放在assets目录下，访问方式为：

file:///android_asset/ic_launcher.png  或者 

file:///android_asset/test.html

相关参考：http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/