Android中的WebView组件与JavaScript交互

最新推荐文章于 2024-05-18 16:20:03 发布

Akeron

最新推荐文章于 2024-05-18 16:20:03 发布

阅读量446

点赞数 1

分类专栏： Android 文章标签： android javascript webview

Android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、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调用其他的方法。

Akeron

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android中的WebView组件与JavaScript交互

WebView和js的交互包含两方面，一是在html中通过js调用安卓的java代码；二是在安卓java代码中调用js。一、html中通过js调用java代码js中调用java代码其实就记住一点，webview设置一个和js交互的接口（注意这里只是一般的意思，并不是java中接口的含义），这个接口其实是一个一般的类，同时为这个接口取一个别名。这个过程如下：mWebView.addJav
复制链接

扫一扫