Android WebView java和js互相调用

朴灿烈づ我的快乐病毒、 2022-08-25 08:50 222阅读 0赞

**js调用java方法**

1.先创建一个html文件，将这个文件保存为demo.html，放到asset目录下

<html>
    <script language="javascript">
    /* This function is invoked by the activity */
    /* 这个函数被Activity调用的活动 这里的图片我们可以在它的连接里面下载 android_waving.png */
                    function wave() {
                            /* 这里是一个javascript 自定义函数，这是由我们在android的程序里调用的，不在在HTML中调用*/
                            document.getElementById("droid").src="android_waving.png";
                    }
            </script>
            <body>
                
                
                
                <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>

注意：

js中并没有demo这个对象，我们也没有在js中定义，这正是我们要做java代码中所要做的工作。

2.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
    
    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);
            // 下面的一句话是必须的，必须要打开javaScript不然所做一切都是徒劳的
            webSettings.setJavaScriptEnabled(true);
            webSettings.setSupportZoom(false);
    
    
            mWebView.setWebChromeClient(new MyWebChromeClient());
    
            // 看这里用到了 addJavascriptInterface 这就是我们的重点中的重点
            // 我们再看他的DemoJavaScriptInterface这个类。还要这个类一定要在主线程中
            mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
    
    
            mWebView.loadUrl("file:///android_asset/demo.html");
        }
    
        // 这是他定义由 addJavascriptInterface 提供的一个Object
        final class DemoJavaScriptInterface {
            DemoJavaScriptInterface() {
            }
    
            /**
             * This is not called on the UI thread. Post a runnable to invoke
             * 这不是呼吁界面线程。发表一个运行调用
             * loadUrl on the UI thread.
             * loadUrl在UI线程。
             */
            public void clickOnAndroid() {        // 注意这里的名称。它为clickOnAndroid(),注意，注意，严重注意
                mHandler.post(new Runnable() {
                    public void run() {
                        // 此处调用 HTML 中的javaScript 函数
                        mWebView.loadUrl("javascript:wave()");
                    }
                });
            }
        }
    // 线下的代码可以不看，调试用的
    ///
        /**
         * Provides a hook for calling "alert" from javascript. Useful for
         * 从javascript中提供了一个叫“提示框” 。这是很有用的
         * debugging your javascript.
         *  调试你的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;
            }
        }
    }

注意:

webSettings.setJavaScriptEnabled(true);

必须设置webview支持js代码

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

创建了一个DemoJavaScriptInterface对象，也就是js代码中的demo对象。

为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android\_asset/"。WebView遇到这样的schema，就去当前包中的assets目录中找内容。如上面的"file:///android\_asset/demo.html"

addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用Handler的目的。

**java调用js方法**

相对于js调用java，简单多了，只需要一行代码  
mWebView.loadUrl("javascript:wave()");