Android WebView与Javascript交互

前言

本篇文章讲的是WivView怎样与JavaScrpit进行交互

一：java中调用js函数

1：添加html中javascript代码

function javaCallJsFunction(isHide) {
 var x = document.getElementById('div');
  x.className = "";
}

function js2java() {
 JSInterface.javaFunction();
}

2：webView配置

        // 省略掉findView..webview
        jsInterface = new JsInterface(mWevView);
        mWevView.getSettings().setJavaScriptEnabled(true);
        //添加Javascript界面
        mWevView.addJavascriptInterface(jsInterface, "JSInterface");
        mWevView.setWebViewClient(new webviewClient());
        mWevView.loadUrl("file:///android_asset/index.html");

3：添加Javascript界面

public class JsInterface {
    private WebView mWebView;

    public JsInterface(WebView webView) {
        this.mWebView = webView;
    }

    /**
     * java调用js方法
     */
    @JavascriptInterface
    public void javaFunction() {
        new Handler(Looper.getMainLooper()).post(new Runnable() {
            @Override
            public void run() {
                //更新主循环中的UI，否则它将崩溃
                Toast.makeText(mWebView.getContext(), "javaFunction已被调用", Toast.LENGTH_SHORT).show();
            }
        });
    }

    /**
     * js调用java方法
     */
    public void javaCallJsFunction(int code) {
        mWebView.loadUrl(String.format("javascript:javaCallJsFunction(" + code + ")"));
    }
}

4：利用webviewClient的onPageFinished()方法调用JS中函数

    class webviewClient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            button1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    jsInterface.javaCallJsFunction(1);
                }
            });
        }
    }

二：JS 调用 Java 中方法

1：HTML中添加调用java的方法，js方法在上面有写出

Demo地址

IT人生的Github地址：My-Andoird-js

最后

不懂得地方欢迎私信我，我会在第一时间给予回复，如阅读中发现写错的地方，欢迎纠正。