iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android与JS相互调用的方法
  • 879
分享到

Android与JS相互调用的方法

2024-04-02 19:04:59 879人浏览 安东尼
摘要

目录Android调用js的方法实现是引入一个WEBview用webview打开一个页面调取的JS函数。下面是JS同Android的通信,JS调用Android的函数方法。Andro

Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数。


private void InitWebView() {
    mWebView = (WebView) findViewById(R.id.webview);

    WebSettings webSettings = mWebView.getSettings();

    // 设置与Js交互的权限
    webSettings.setjavascriptEnabled(true);
    // 设置允许JS弹窗
    webSettings.setJavaScriptCanOpenwindowsAutomatically(true);

    //把js弹窗转化成安卓弹窗
    SetJavaScriptAlertEnable();

    // 先载入html代码
    // 格式规定为:file:///android_asset/文件名.html
    // 只需要将第一种方法的loadUrl()换成下面该方法即可
    // Android版本变量
    //mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象
    mWebView.loadUrl("file:///android_asset/javascript.html");
    //SetWebChromeClient()//处理JS调用Android函数的方法在第二部分解释

}

首先先初始化webview

第二步对webview基本初始化

第三部设置JS交互权限

其余有明确注释

loadurl是加载html网页端的

我们以button点击开始执行js事件为例

首先app/src/main下创建assets文件

下面是javascript.html文件我们在引入文件时需要将文件放到所在的Android项目的/project_home/app/src/main/assets/javascript.html 下就可以使用了。


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Carson_Ho</title>
    <h1 id="ip">
        你好这里已经调用过文件了
    </h1>
    <button onclick="callJS()">调用弹窗</button>
    <button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>
    <button type="button" id="button2" onclick="clickprompt()">点击调用Androidtest代码</button>
    <script>
        function callJS() {
            alert("Android调用了JS的callJS方法");
        }

        function change() {
            document.getElementById('ip').innerText = "真的难啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊a";
        }
        function clickprompt(){
            var result=prompt("js://demo?arg1=111&arg2=222");
            alert("demo " + result);
        }
        function callAndroid(){
        // 由于对象映射,所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }

    </script>

    // JS代码
    <script src="./1/roslib.min.js"></script>
    <script src="./1/RoboX.js"></script>

</head>

</html>

将JS弹窗改为Android弹窗方法SetJavaScriptAlertEnable();


private void SetJavaScriptAlertEnable() {
    // 由于设置了弹窗检验调用结果,所以需要支持js对话框
    // webview只是载体,内容的渲染需要使用webviewChromClient类去实现
    // 通过设置WebChromeClient对象处理JavaScript的对话框
    //设置响应js 的Alert()函数
    mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
        //设置弹窗
            AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
            b.setTitle("Alert");
            b.setMessage(message);
            b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    result.confirm();
                }
            });
            b.setCancelable(true);
            b.create().show();
            return true;
        }
    });
}

初始化界面用button测试程序是否能通信。


private void InitView() {

    button = (Button) findViewById(R.id.button);

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 通过Handler发送消息
            mWebView.post(new Runnable() {
                @Override
                public void run() {

                    // 注意调用的JS方法名要对应上
                    // 调用javascript的callJS()方法
                    final int version = Build.VERSION.SDK_INT;//获取系统版本
                    //我们需要判断当前系统版本。为了尽可能减少错误我们使用了两种方式来实现调用JS方法。
                    if (version < 18) {
                        mWebView.loadUrl("javascript:callJS()");
                    } else {
                            
//                            Toast.makeText(getApplicationContext(), "单击完成", Toast.LENGTH_SHORT).show();
                            

                            //Toast.makeText(getApplicationContext(), ans.toString(), Toast.LENGTH_SHORT).show();
                            mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
                                @Override
                                public void onReceiveValue(String value) {
                                    //此处为 js 返回的结果
                                }
                            });
                            mWebView.evaluateJavascript("javascript:change()", new ValueCallback<String>() {
                                @Override
                                public void onReceiveValue(String value) {
                                    //此处为 js 返回的结果
                                }
                            });
                    }
                }
            });

        }
    });
}

下面是JS同Android的通信,JS调用Android的函数方法。

将上边webview初始化中取消注释SetWebChromeClient()同时取消注mWebView.addJavascriptInterface(new AndroidtoJs(), "test");重新创建一个类继承于Object同时创建的test对象在js中同样如此像HTML文件中的


function callAndroid(){
        // 由于对象映射,所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }

下面是创建的类AndroidtoJS


import android.webkit.JavascriptInterface;

public class AndroidtoJs extends Object {
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("JS调用了Android的hello方法woc");
    }
}

SetWebChromeClient()是处理JS和Android之间通信的在下边有详细解释


private void SetWebChromeClient() {
    mWebView.setWebChromeClient(new WebChromeClient() {
    // 拦截输入框(原理同方式2)
    // 参数message:代表promt()的内容(不是url)
    // 参数result:代表输入框的返回值
    @Requiresapi(api = Build.VERSION_CODES.HONEYCOMB)
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 根据协议的参数,判断是否是所需要的url(原理同方式2)
        // 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数)
        //假定传入进来的 url = "js://demo?arg1=111&arg2=222"(同时也是约定好的需要拦截的)

        Uri uri = Uri.parse(message);
        // 如果url的协议 = 预先约定的 js 协议
        // 就解析往下解析参数
        if (uri.getScheme().equals("js")) {

            // 如果 authority  = 预先约定协议里的 webview,即代表都符合约定的协议
            // 所以拦截url,下面JS开始调用Android需要的方法
            if (uri.getAuthority().equals("demo")) {

                //
                // 执行JS所需要调用的逻辑
                System.out.println("js调用了Android的方法");
                // 可以在协议上带有参数并传递到Android上
                HashMap<String, String> params = new HashMap<>();
                Set<String> collection = uri.getQueryParameterNames();

                //参数result:代表消息框的返回值(输入值)
                result.confirm("js调用了Android的方法成功啦");
            }
            return true;
        }
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }

    // 通过alert()和confirm()拦截的原理相同,此处不作过多讲述
    // 拦截JS的警告框
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }

    //拦截JS的确认框
    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        return super.onJsConfirm(view, url, message, result);
    }
    }
    );
}

我们不是采用直接调用的方法而是采用拦截的方法

第一次接触Android项目有的地方写的可能有问题有的地方说的也可不能不准确,大家下方积极留言,第一次写博客排版也没搞好大家见谅吧哈哈哈哈。

以上就是Android与JS相互通信的方法的详细内容,更多关于Android与JS相互通信的资料请关注编程网其它相关文章!

--结束END--

本文标题: Android与JS相互调用的方法

本文链接: https://www.lsjlt.com/news/124223.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android与JS相互调用的方法
    目录Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数。下面是JS同Android的通信,JS调用Android的函数方法。Andro...
    99+
    2024-04-02
  • Android View与Compose互相调用的方法是什么
    这篇文章主要讲解了“Android View与Compose互相调用的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android View与Compose互相...
    99+
    2023-07-05
  • android与js交互的方法是什么
    Android与JS交互的方法有多种,以下是其中一些常用的方法:1. 使用WebView:Android中的WebView组件可以加...
    99+
    2023-09-21
    android js
  • OC与Swift的相互调用
    OC调用Swift方法 在 Build Settings 搜索 Packaging ,设置 Defines Module 为 YES  2、新建 LottieBridge.swift 文件,自动生成桥 ProductName-Bridgi...
    99+
    2023-09-15
    swift oc 混编 iOS
  • javascript 方法 重名 相互 调用
    在 JavaScript 中,方法之间的命名是很重要的,但有时候我们会遇到方法同名的情况,这种情况会使得我们的代码出现一些问题,甚至有时候会造成混乱和错误。本文将探讨在 JavaScript 中方法重名相互调用的问题,并提供一些解决方案。方...
    99+
    2023-05-21
  • Naive与WebView在Android中怎么实现互相调用
    本篇文章为大家展示了Naive与WebView在Android中怎么实现互相调用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Android  Naive与WebView的互相调用详解An...
    99+
    2023-05-31
    android naive webview
  • 基于Scala和Java方法的相互调用
    目录在Java中调用Scala的方法呢?1.首先是静态方法2. JAVA中调用Scala的方法3.Scala中的非静态方法4.Java中的调用scala中调用java方法报错在Sca...
    99+
    2024-04-02
  • 原生实现C#与Lua相互调用方法(Unity3D可用)
    目录引言一、编译Lua动态链接库1. 编译Windows下使用的DLL文件2. 编译Android下使用的SO文件二、编写C#使用的API1. 动态链接库在Unity中的存放位置。2...
    99+
    2024-04-02
  • Kotlin与Java如何相互调用
    这篇文章主要介绍了Kotlin与Java如何相互调用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、Kotlin 调用 Java kotlin 关键字转义java 中的方法...
    99+
    2023-06-25
  • python 与c++相互调用实现
    目录一、c++调用Python1.Python脚本2.C++调用python脚本二、接口方法1.规范化语法三、Pthon调用c++1.基于extern2.基于swig一、c++调用P...
    99+
    2024-04-02
  • python文件互相调用的方法是什么
    在Python中,文件之间可以互相调用的方法有以下几种:1. 使用import语句:可以在一个文件中使用import语句导入另一个文...
    99+
    2023-09-25
    python
  • C++和C#相互调用COM组件的方法
    本篇内容介绍了“C++和C#相互调用COM组件的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前一阵在工作中做项目的时候,遇到了COM组...
    99+
    2023-06-18
  • thinkphp控制器如何相互调用方法
    今天小编给大家分享一下thinkphp控制器如何相互调用方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。控制器中的相互调用...
    99+
    2023-07-05
  • java调用相互依赖的dll的处理方法
    目录一、问题描述二、处理办法2.1 类定义2.2 调用三、结语一、问题描述 最近在做一个功能时遇到java需要调用dll,并且dll有依赖关系,之前都是单独调用一个,其实调用dll的...
    99+
    2024-04-02
  • 两个JS之间的函数怎么互相调用
    这篇文章主要讲解了“两个JS之间的函数怎么互相调用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“两个JS之间的函数怎么互相调用”吧!两个JS之间的函数互相调用这个问题是我在工作中用到的一个方...
    99+
    2023-07-05
  • Kotlin与Java相互调用的完整实例
    目录一、Kotlin 调用 Java二、Java 调用 Kotlin附 Github 源码:总结一、Kotlin 调用 Java 1. kotlin 关键字转义 java 中的方法或...
    99+
    2024-04-02
  • 怎么实现C#与Lua相互调用
    这篇文章主要介绍“怎么实现C#与Lua相互调用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么实现C#与Lua相互调用”文章能帮助大家解决问题。一、编译Lua动态链接库1. 编译Windows下使...
    99+
    2023-06-30
  • C++如何实现与Lua相互调用
    今天小编给大家分享一下C++如何实现与Lua相互调用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。概述从本质上来看,其实说是...
    99+
    2023-07-05
  • springboot多个service互相调用的事务处理方法
    本文小编为大家详细介绍“springboot多个service互相调用的事务处理方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“springboot多个service互相调用的事务处理方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢...
    99+
    2023-06-29
  • AndroidView与Compose互相调用实例探究
    目录1. 前言2. Android传统View调用Compose2.1 新建传统View体系的Android项目2.2 项目添加Compose配置2.2.1 在android代码块添...
    99+
    2023-01-30
    Android View与Compose互相调用 Android View与Compose
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作