android WebView与js互相调用

2019-11-15 本文已影响0人 caigp

我们先看一张gif图

untitled.gif

这里通过加载一个html来展示它们的互相调用

布局文件很简单就一个WebView控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

assets新建一个html文件，我这里叫home.html，内容非常简单，两个按钮，两个div

<html>
    <head>
        <title>js和webview互调</title>
        <script>
            function getRes() {
                document.getElementById("div2").innerHTML = android.getString()
            }
            <!--webview调用此方法并将值传递给js,并且显示在div上-->
            function setDiv(content) {
                document.getElementById("div1").innerHTML = content
            }
            
            <!--计算两个数的和并返回，让webview调用-->
            function sum(a, b) {
                return a+b
            }
        </script>
    </head>
    <body>
        <button onclick="android.showToast('hello')">显示toast</button><br/><br/>
        <button onclick="getRes()">从android获取带返回值的方法</button><br/><br/>
        <div id="div1"></div><br/>
        <div id="div2"></div>
    </body>
</html>

接着我们新建一个Test类，让这个类暴露方法给js去调用，需要注意的是在方法上要添加这样一个注解@JavascriptInterface

public class Test {

    private Context context;

    public Test(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public String getString() {
        return "hello android";
    }
}

最后是我们的MainActivity，记住一定要将setJavaScriptEnabled设置为true,我们调用js方法时要等界面加载完成时调用，webview的loadUrl()方法和evaluateJavascript()都可以调用js中的代码，evaluateJavascript()方法有个回调，通过这个回调能取得js方法的返回值， js则通过webview的addJavascriptInterface方法调用java代码的，这里要传入两个参数，一个是Object，所以直接传入Test类实例，一个是String，就是调用的接口名字，可以任意字符串，比如我传入android，则我在html中使用android.showToast('hello')就调用了Test类中的showToast(String message)方法了

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.web_view);
        webView.loadUrl("file:///android_asset/home.html");
        //设置js
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new Test(this), "android");
        webView.setWebViewClient(new WebViewClient() {
            /**
             * 当页面加载完毕的时候会回调此方法
             * @param view
             * @param url
             */
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                view.loadUrl("javascript:setDiv('hello')");
                view.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        System.out.println(value);
                    }
                });
            }
        });
    }
}

最后直接运行即可

android WebView与js互相调用

猜你喜欢

热点阅读