Android和JS之間互相調用方法並傳遞參數

場景

Android中使用WebView加載本地html並支持運行JS代碼和支持縮放：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118637633

在上面實現使用加載html顯示之后，怎樣進行互相調用方法和傳遞參數。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

Android中調用JS方法

首先在Android中新增一個按鈕，並設置其點擊事件

        //Android中調用JS方法
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                callJs();
            }
        });

點擊事件中調用了callJs方法，然后再activity中實現該方法

    @SuppressLint("SetJavaScriptEnabled")
    public void callJs()
    {
        webView.loadUrl("javascript:toAndroidCall()");
    }

然后在JS中實現該方法

        //Android中調用JS方法
        function toAndroidCall()
        {
            alert("Android中調用JS方法成功");
        }

效果

 

 

如果要傳遞參數可以

    @SuppressLint("SetJavaScriptEnabled")
    public void callJs()
    {
        String message = "公眾號:霸道的程序猿";
        webView.loadUrl("javascript:toAndroidCallWithParam('"+message+"')");
    }

然后在JS端

        //Android中調用JS方法-帶參數
        function toAndroidCallWithParam(message)
        {
            alert("Android中調用JS方法成功，收到參數:"+message);
        }

效果

 

 

JS中調用Android的方法

在Android中實現方法

    //JS調用Android方法
    @JavascriptInterface
    public void jsCallAndroid()
    {
        Toast.makeText(this,"JS調用Android方法成功",Toast.LENGTH_LONG).show();
    }

要加注解，然后還需要給webView進行配置

        //增加JS接口
        webView.addJavascriptInterface(this,"badao");

增加一個JS接口

然后在JS中新增一個按鈕

<button id="button" onclick="toCallAndroid()">JS調用Android方法</button>

並設置點擊事件

        //JS中調用Android方法
        function toCallAndroid()
        {
            badao.jsCallAndroid();
        }

效果

 

 

如果要傳遞參數

    //JS調用Android方法-帶參數
    @JavascriptInterface
    public void jsCallAndroidWithParam(String message)
    {
        Toast.makeText(this,"JS調用Android方法成功,收到參數:"+message,Toast.LENGTH_LONG).show();
    }

在JS中

        //JS中調用Android方法
        function toCallAndroidWithParam()
        {
            badao.jsCallAndroidWithParam("霸道的程序猿");
        }

效果

 

 

MainActivity完整代碼

package com.badao.webviewdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    WebView webView = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //獲取webview
        webView = findViewById(R.id.webview);
        //設置為ChromeClinet 才能執行js代碼
        WebChromeClient webChromeClient = new WebChromeClient();
        webView.setWebChromeClient(webChromeClient);
        //設置開啟js支持
        webView.getSettings().setJavaScriptEnabled(true);
        // 是否支持縮放
        webView.getSettings().setSupportZoom(true);
        //加載本地html
        //webView.loadUrl("file:///android_asset/offLineTileMap.html");
        webView.loadUrl("file:///android_asset/demo.html");
        //Android中調用JS方法
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                callJs();
            }
        });
        //增加JS接口
        webView.addJavascriptInterface(this,"badao");
    }

    @SuppressLint("SetJavaScriptEnabled")
    public void callJs()
    {
        //webView.loadUrl("javascript:toAndroidCall()");
        String message = "公眾號:霸道的程序猿";
        webView.loadUrl("javascript:toAndroidCallWithParam('"+message+"')");
    }

    //JS調用Android方法
    @JavascriptInterface
    public void jsCallAndroid()
    {
        Toast.makeText(this,"JS調用Android方法成功",Toast.LENGTH_LONG).show();
    }

    //JS調用Android方法-帶參數
    @JavascriptInterface
    public void jsCallAndroidWithParam(String message)
    {
        Toast.makeText(this,"JS調用Android方法成功,收到參數:"+message,Toast.LENGTH_LONG).show();
    }
}