Android与javascript交互-CSDN博客

本文链接：https://blog.csdn.net/github_2011/article/details/68951025

android与js交互分两种情形：

1. android调用js代码

2. js调用android代码

首先介绍android调用HTML中的js代码，android中的WebView可以很好的完成android与js之间的交互工作。下面例子通过使用WebView加载本地的HTML文件实现与js的交互。

我们将本地HTML文件放在assets目录里面

<script type="text/javascript">

    //给android调用的无参方法
    function javacalljs(){
         document.getElementById("content").innerHTML =
             "<br\>Android 调用了JS的无参函数";
    }

    //给android调用的有参方法
    function calljsdouble(arg, d){
         document.getElementById("content").innerHTML =
             "<br\>Android 调用了JS的有参函数" + "<br\>" + arg + "<br\>" + d;
    }

</script>

上面给出了HTML文件中的js代码，里面有两个给android测试调用的方法
Android这边应该做哪些事情呢？

xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.qj.myjavacallhtmldemo.MainActivity">
    <!--调用js多参函数的按钮-->
    <Button
        android:id="@+id/call_js_double"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="6dp"
        android:background="@color/colorAccent"
        android:text="Android 调用多参 JS"
        android:textColor="#ffffff" />
    <!--调用js无参参函数的按钮-->
    <Button
        android:id="@+id/call_js"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/call_js_double"
        android:layout_margin="6dp"
        android:background="@color/colorAccent"
        android:text="Android 调用 JS"
        android:textColor="#ffffff" />

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

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private WebView mWebView;
    private View call_js;
    private View call_js_double;

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

        initView();
        initData();
        initListener();
    }

    private void initView() {
        mWebView = (WebView) findViewById(R.id.webview);
        call_js = findViewById(R.id.call_js);
        call_js_double = findViewById(R.id.call_js_double);
    }

    //sdk 17 以上加上注解
    @SuppressLint("JavascriptInterface")
    private void initData() {
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/index.html");
        //设置本地调用对象及接口,js调用android就需要用到该对象,这里的"maomao"对象名称要与HTML文件中的保持一致
        //第一个参数是一个对象,可以新建类创建对象,我们传activity即可,第二个参数是对象的名称,符合规则随意命名
        mWebView.addJavascriptInterface(MainActivity.this, "maomao");
    }

    private void initListener() {
        call_js.setOnClickListener(this);
        call_js_double.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.call_js:
                performCallJs();
                break;
            case R.id.call_js_double:
                performCallJSDuuble(100, 200);
                break;

            default:
                break;
        }
    }

    /**
     * 调用JS有参方法,调用js多参方法时用逗号拼接参数
     * @param gg
     * @param cc
     */
    private void performCallJSDuuble(int gg, int cc) {
        mWebView.loadUrl("javascript:calljsdouble(" + gg + "," + cc + ")");
    }

    /**
     * 调用JS空参方法
     */
    private void performCallJs() {
        mWebView.loadUrl("javascript:javacalljs()");
    }

}

注意：

上面代码中有一个方法：
performCallJSDuuble(int gg, int cc)
该方法是Android调用Js并且向Js传递两个int 类型的参数,如果传递字符串参数请注意,写法如下：
mWebView.loadUrl("javascript:calljsdouble('22','boo')");//向js 传递两个字符串(其中22,boo是要传递的字符串示例)

android调用js代码的核心是WebView.loadUrl("javascript:要调用的js中的方法及参数");

到这我们已经可以做到android调用js了。

效果：

下面看js如何调用android

我们上面的代码中有一句代码很关键：

mWebView.addJavascriptInterface(MainActivity.this, "maomao");

这就是js调用android的核心所在,通过js接口我们传给js一个Android对象,js有了Android里面的对象,自然可以调用该对象所具有的方法。

我们给js传的对象是一个MainActivity的实例,我们给这个对象起的名字叫"maomao",关键的一步做了之后,我们看HTML中如何调用Android方法

<input type="button" value="点击调用Android代码" οnclick="window.maomao.callAndroid()"/>
<br/>
<input type="button" value="点击调用Android代码并传递参数"
           οnclick="window.maomao.callAndroid('js call Android 传参')"/>

上面的两个input节点就是我们添加到HTML文件中的用于调用android方法的,我们可以看到HTML页面使用我们传过去的"maomao"对象调用android里面的callAndroid()方法,说明android MainActivity中应该有两个callAndroid()方法,一个是空参的,一个是有参的。我们来看看MainActivity中的这两个方法：

/**
     * JS调用Android空参方法
     */
    @JavascriptInterface //sdk17版本以上加上注解,否则js不能调用android
    public void callAndroid() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "HTML 调用 Android 空参方法", Toast.LENGTH_LONG).show();
            }
        });
    }

    /**
     * JS调用Android方法并给android传参
     * @param s
     */
    @JavascriptInterface //sdk17版本以上加上注解
    public void callAndroid(final String s) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, s, Toast.LENGTH_LONG).show();
            }
        });
    }

果然MainActivity中有两个名叫callAndroid的方法,这样我们就可以通过js调用android了。
效果：