Android中的WebView组件与JavaScript交互

来源：互联网发布：商业地产数据分析编辑：程序博客网时间：2024/06/06 00:12

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

javascript中调用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.4中(如果应用的android:targetSdkVersion数值为19+)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>

二、Android调用js

上面的代码在演示如何在js中调用java代码的同时也演示了如何在java中调用js

调用形式：

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

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

0 0