JavaScript 与 Android 交互

最新推荐文章于 2024-07-24 11:23:56 发布

Alex_MaHao

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： android 基础文章标签： javascript android html webview js

本文链接：https://blog.youkuaiyun.com/lisdye2/article/details/51222037

android 基础专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用JavaScript与Android进行交互，包括Android调用JavaScript方法及JavaScript调用Android方法的实现方式。通过具体实例展示了如何利用webView加载HTML页面，并实现双方的数据传递与功能调用。

JavaScript 与 Android 交互

前言：随着前端技术越来越火。许多app中不在是简单的android原生应用，加入了很多web页。通过Android的webView加载一个html。并且我们通常的一些落地页都是用html显示的。那么对于一些具有特殊功能的落地页。比如具有引导注册功能的，用户点击落地页之后跳转App的注册页面，或者登录页面。那么，这就需要html和Android原生进行交互，相互调用。

原理分析

android 调用javascript方法：

直接通过webView.loadUrl("javascript:show('"+et.getText().toString()+"')");,其实就是直接通过loadUrl()方法，传入javascropt:+方法名。

javascript调用Android方法
- 定义一个对象，包含js需要调用方法的定义和实现。
- webView.addJavascriptInterface(new Object(), "obj");传入。
- js调用。

来个栗子

这里写图片描述

后面的有点看不清，再补一张图片

这里写图片描述

白色区域是加载的html，带有显示弹窗和跳转登录，该连接调用android本地方法。

下方输入框和按钮为调用js方法，并传入参数

定义Android对象

首先需要定义一个类，该类主要用于定义一些方法（接口），以便js调用。

private  class Object {


        @JavascriptInterface
        public void intent2Activity(String activity){
            if(activity.equals("login")){
                Intent intent = new Intent(MainActivity.this,LoginActivity.class);
                startActivity(intent);
            }
        }

        @JavascriptInterface
        public void showDialog(String str){
            AlertDialog dialog = new AlertDialog.Builder(MainActivity.this)
                    .setTitle("消息")
                    .setMessage(str)
                    .setPositiveButton("确定",null)
                    .setNegativeButton("取消",null)
                    .create();

            dialog.show();
        }
    }

定义了两个方法，一个是跳转activity的方法，另一个是显示消息的方法。

注意：方法前一定要加上注解@JavascriptInterface，不然会没有效果。

在Activity中加入webView，并查找控件，进行一些初始化操作

 @SuppressLint("JavascriptInterface")
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        et = ((EditText) findViewById(R.id.et));
        //加载页面
        webView = (WebView) findViewById(R.id.webView);
        //允许JavaScript执行
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDefaultTextEncodingName("utf-8");

        // 添加一个对象, 让JS可以访问该对象的方法
        webView.addJavascriptInterface(new Object(), "obj");

        //找到Html文件，也可以用网络上的文件
        webView.loadUrl("file:///android_asset/index.html");
    }

webView.addJavascriptInterface(new Object(), "obj");相当于向html中传入了定义的接口对象，对象名为obj。

定义Html对象

因为我用的是android studio，所以在main目录下创建目录assets，并创建文件index.html

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <script type="text/javascript">

            <!-- android 调用js-->
            function show(msg){
                var str = document.getElementById("android").innerHTML;
                document.getElementById("android").innerHTML = str+"<br/>"+msg;
            }

    </script>
</head>
<body>

<a href="javascript:obj.showDialog('显示弹窗')">显示弹窗</a>

<br/>
<br/>

<a href="javascript:obj.intent2Activity('login')">跳转登录</a>

<br/>
<br/>

<div id="android"></div>
</body>
</html>