草庐IT

android webview与H5页面交互 js调用原生代码回调原理

github_36165539 2023-09-30 原文

Android调用js代码:

webview.loadUrl("javascript:fun()")

js调用java代码:

getSettings().setJavaScriptEnabled(true);
addJavascriptInterface(new JsHandel(), "jsApi");

public class JsHandel {
    @JavascriptInterface
    public void call(String dataObj) {
    }
}

     不过这种只能简单的相互调用而已,如果需要回调(例如:js调用android方法并从android端返回数据)还需要做一定的封装处理才可以,大概实现步骤:
     1. 在android代码中向H5页面注入js对象
     2. js端创建一个存储callback回调函数唯一id、callback回调函数的map键值对对象,当js调用android代码时,生成一个callback回调函数唯一id,把该callback回调函数的唯一id和callback回调函数存放到map对象中,并把callback回调函数唯一id传递给android端
      3. android端执行js调用并获取到callback回调函数唯一id,调用js代码将执行结果数据和callback回调函数唯一id传递给js端
     4. js端遍历map对象并根据回调函数唯一id找到对应的callback回调函数,通过callback.call(null, data)执行该js回到函数

     至此js调用android代码并完成回调,具体代码如下:

  1. 在android代码中向H5页面注入js对象
	//MainActivity.java
	@Override
    public void initView() {
        binding.webview.registHandel("gjsbridgeApi", new JsHandel() {
            @Override
            public void jscall(String funName, String funData, JsFunctionCallBack jsFunction) {
                if("getVolumn".equals(funName)){
                    VolumnApi volumnApi = new VolumnApi();
                    jsFunction.callback(volumnApi.getVolumn(MainActivity.this));
                    return;
                }else if("showToast".equals(funName) && funData!=null && !funData.isEmpty()){
                    Toast.makeText(MainActivity.this, funData, Toast.LENGTH_LONG).show();
                    return;
                }
                jsFunction.callback("from native");
            }
        });
        binding.webview.loadUrl("http://pojul.gitee.io/web/testjsbridge/");
    }

	//GjsbridgeWebview.java
	public void registHandel(String handelName, JsHandel jsHandel){
        if(jsHandel==null){
            return;
        }
        jsHandel.init(this);
        getSettings().setJavaScriptEnabled(true);
        addJavascriptInterface(jsHandel, handelName);
 	}

//JsHandel.java
public abstract class JsHandel {
    private static final String TAG = "JsHandel";
    private GjsbridgeWebview gjsbridgeWebview;

    public void init(GjsbridgeWebview gjsbridgeWebview){
        this.gjsbridgeWebview = gjsbridgeWebview;
    }

    @JavascriptInterface
    public void call(String dataObj) {
        JsFun jsFun = new Gson().fromJson(dataObj, JsFun.class);
        if(jsFun.funName==null||jsFun.funName.isEmpty()){
            return;
        }
        JsFunctionCallBack jsFunction = new JsFunctionCallBack(jsFun.funId) {
            @Override
            public void callback(String respData) {
                if(gjsbridgeWebview==null){
                    Log.e(TAG, "gjsbridgeWebview has not init");
                    return;
                }
                if(funId==null||funId.isEmpty()){
                    return;
                }
                gjsbridgeWebview.post(() -> {
                    gjsbridgeWebview.loadUrl("javascript:gjsbridgeApiCallBack('"+funId+"', '"+respData+"')");
                });
            }
        };
        jscall(jsFun.funName, jsFun.funData, jsFunction);
    }

    public abstract void jscall(String funName, String funData, JsFunctionCallBack jsFunction);
}

//JsFun.java
public class JsFun {
    public String funId;
    public String funName;
    public String funData;
}
  1. js端创建map并执行callback.call(null, data)代码
//api.js
class Api{
    constructor(){
    }
    showToast(msg){
    	call("showToast", msg, null);
    }
    getVolumn(fun){
    	call("getVolumn", null, fun);
    }
}

var api = new Api();
var funMap = new Map();
function gjsbridgeApiCallBack(funId, data){
    console.log("H5 gjsbridgeApiCallBack funId: " + funId + "; data: " + data);
    let fun = funMap.get(funId);
    if(fun!=null){
    	fun.call(null, data);
    }
    funMap.delete(funId);
    console.log("funMap size: " + funMap.size)
}

function call(name, data, fun){
	if(window.gjsbridgeApi==null){
    	console.log(name + "; H5 window.gjsbridgeApi: null");
    }else{
    	console.log(name + "; H5 window.gjsbridgeApi: " + window.gjsbridgeApi);
    	let dataObj = {
			funName: name,
			funData: data
		}
		if(fun!=null && typeof fun === "function"){
		    let funId = Date.now()+"";
		    funMap.set(funId, fun);
		    dataObj.funId = funId;
	    }
    	window.gjsbridgeApi.call(JSON.stringify(dataObj));
    }
}
  1. H5直接调用
	//test.html
	<body>
		<div class="toast-div" id="show" onclick="showToast()">toast</div>
		<div class="toast-div" id="volumn" onclick="getVolumn()">volumn: unknow</div>
	</body>

	<script type="text/javascript">
		function showToast(){
			api.showToast("toast-div click");
		}
		function getVolumn(){
			api.getVolumn(function(data){
				console.log("getVolumn: " + data);
				document.getElementById("volumn").innerHTML = data;
			});
		}
	</script>

demo地址: https://github.com/pojul/gjsbridge
gjsbridge集成:implementation ‘io.github.pojul:gjsbridge:1.0.1’

有关android webview与H5页面交互 js调用原生代码回调原理的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中,它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  3. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行? - 2

    这可能是个愚蠢的问题。但是,我是一个新手......你怎么能在交互式ruby​​shell中有多行代码?好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗?再次抱歉,如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

  4. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调? - 2

    我有一个服务模型/表及其注册表。在表单中,我几乎拥有服务的所有字段,但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  5. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常,除了该文件不是公开可用的,而且我无法获得它的公共(public)URL。但是当我登录到S3时,我可以正常查看我的文件。为了使其公开可用,我将最后一行更改为obj.upload_file(file

  6. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码,但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如,我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码?我知道在pry中我可以执行类似show-methodmethod的操作,但我如何才能对Rails框架中的方法执行此操作?您对我如何更好地理解Gem及其API有什么建议吗?仅仅阅读源代码似乎真的很难,尤其是对于框架。谢谢! 最佳答案 Ru

  7. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR,并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时,因为它没有自己的initialize方法

  8. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个,因为它显然有一个缺点?我有一种直觉,它可能与性能有关,因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是,据我所知,没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别,可能也是最著名的,是你的

  9. ruby - 寻找通过阅读代码确定编程语言的ruby gem? - 2

    几个月前,我读了一篇关于ruby​​gem的博客文章,它可以通过阅读代码本身来确定编程语言。对于我的生活,我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗? 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem?,我们在StackOverflow上找到一个类似的问题:

  10. c# - 如何在 ruby​​ 中调用 C# dll? - 2

    如何在ruby​​中调用C#dll? 最佳答案 我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器,如果它还没有,则使用Ruby的WIN32OLE库来调用它;看看RubyCLR,其中一位作者是JohnLam,他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了,可能不支持.Net2.0以上的版本);正如其他地方已经提到的,看看使用IronRuby,如果这是您的技术选择。有一个主题是here.请注意,最后一篇文章实际上来自JohnLam(看起来像是2009年3月),他似乎很自在地断言RubyCL

随机推荐