场景

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() {@Overridepublic 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方法@JavascriptInterfacepublic 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方法-带参数@JavascriptInterfacepublic 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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//获取webviewwebView = 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() {@Overridepublic 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方法@JavascriptInterfacepublic void jsCallAndroid(){Toast.makeText(this,"JS调用Android方法成功",Toast.LENGTH_LONG).show();}//JS调用Android方法-带参数@JavascriptInterfacepublic void jsCallAndroidWithParam(String message){Toast.makeText(this,"JS调用Android方法成功,收到参数:"+message,Toast.LENGTH_LONG).show();}
}

Android和JS之间互相调用方法并传递参数相关推荐

WebView的使用之Android与JS通过WebView互调方法
WebView的使用之Android与JS通过WebView互调方法一.概述: Android与JS通过WebView实现交互,实际上是: Android调用JS的代码: JS调用Android的 ...
android 和 js 之间交互的封装
HybridBridge 项目地址:YouJZ/HybridBridge 简介:android 和 js 之间交互的封装更多:作者提 Bug 标签: webview-js-android ...
Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
C#利用方法重载实现2个整数，2个双精度数，3个整数中求最大值。由于设计了方法重载，系统会根据调用方法时传递的实参类型和个数而自动选择相应的方法来求最大数。
1.题目要求如下: C#利用方法重载实现2个整数,2个双精度数,3个整数中求最大值.由于设计了方法重载,系统会根据调用方法时传递的实参类型和个数而自动选择相应的方法来求最大数. 2.来吧展示,代码如下 ...
js向jsf调用后台方法并传递参数
使用p:remoteCommand来达到复杂的异步刷新取值大家请注意,这个方法可以真正的解决在jsf中通过js调用后台bean方法并获取bean方法返回值的问题. 同样,首先我们要写两个jsf组件, ...
【unity】与Android Activity交互并调用JAVA代码传递参数
http://www.xuanyusong.com/archives/667 Unity for Android 比较特殊,Unity for IOS 打包是将XCODE工程直接交给开发者,开发者可以 ...
Matlab自学笔记四：调用函数基本方法、传递参数、函数工作区、命令语法、调用匿名函数
1.调用函数的基本方法题目:创建函数y=x²+x+1 首先,使用上一篇的创建函数文件的方法(推荐先看上一篇:Matlab创建函数文件.函数语法定义.匿名函数.多元函数.局部函数等知识串联理解),创建 ...
Groovy小结：java调用Groovy方法并传递参数
@(JAVA总结) 1. 场景描述在网上查了资料发现,java有三种方式调用groovy脚本.但是真正在实际的服务器环境中,嵌入groovy脚本往往需要满足下面的条件: 可以直接调用groovy脚本 ...
rpc 调用webservice怎样传递参数_五分钟让你了解RPC原理详解
欢迎关注专栏[以架构赢天下]--每天持续分享Java相关知识点以架构赢天下zhuanlan.zhihu.com 以架构赢天下--持续分享Java相关知识点每篇文章首发此专栏欢迎各路Java程序 ...

Android和JS之间互相调用方法并传递参数

场景

实现

Android中调用JS方法

效果

效果

效果

效果

MainActivity完整代码

Android和JS之间互相调用方法并传递参数相关推荐

最新文章

热门文章