Android js和原生交互

发表于 | 阅读次数：
| 本文字数： 5.4k | 阅读时长 ≈ 5 分钟

简单的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
package com.xindeco.swingu_h5;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.Toast;

import com.xindeco.reader.common.Action;
import com.xindeco.reader.common.ReaderListener;
import com.xindeco.reader.common.Tag;
import com.xindeco.reader.swingu.SwingUReader;

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

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

        init();
    }

    private void init() {
        mWebView = findViewById(R.id.web_view);
        mWebView.loadUrl("file:///android_asset/test.html");
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new JsInteration(), "android");

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.equals("https://www.baidu.com/")) {
                    Toast.makeText(MainActivity.this, "就是要拦你", Toast.LENGTH_SHORT).show();
                    return true;
                } else {
                    mWebView.loadUrl(url);
                    return true;
                }
            }
        });

        findViewById(R.id.call_js).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                final EditText input = findViewById(R.id.input);
                String content = input.getText().toString().trim();
                if (!TextUtils.isEmpty(content)) {
                    // 调用js方法，更新页面
//                    mWebView.loadUrl("javascript:change(\"" + content + "\")"); // 没带返回值的调用方式
                    mWebView.evaluateJavascript("javascript:change(\"" + content + "\")", new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String value) {
                            input.setText(value);
                        }
                    });
                }
            }
        });
    }

    public class JsInteration {

        @JavascriptInterface
        public String toast(String msg) {
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            return "我是java的返回值";
        }
    }
}

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="我要改变网页的内容"/>

    <Button
        android:id="@+id/call_js"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是原生的button啦"/>

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

</LinearLayout>

HTML页面，把该页面放置在assets文件夹下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
        <title>js和原生交互</title>
    </head>

    <script type="text/javascript">
        <!--该方法调用原生的toast方法-->
        function toast(){
            var s = document.getElementById("input_toast").value;
            var result = window.android.toast(s);
            document.getElementById("input_toast").value=result;
        }

        <!--该方法被原生调用-->
        function change(content){
            document.getElementById("input_toast").value=content;
            return "我是js的返回值";
        }
    </script>

    <body>
        <p>
            <input type="text" id="input_toast"/>
        </p>
        <p>
            <input type="button" id="toast" value="toast" onclick="toast()"/>
        </p>
        <a href="https://www.taobao.com/">跳转淘宝，不拦你</a>
        <br>
        <a href="https://www.baidu.com/">跳转百度，别拦我</a>
    </body>
</html>

记得添加<uses-permission android:name="android.permission.INTERNET"/>权限才能访问网络