Android WebView与JavaScript代码相互调用

来源：互联网发布：网络盒子推荐编辑：程序博客网时间：2024/05/17 23:29

一、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" onclick="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/

0 0