正文

carson带你学android：你要的webview与js交互方式都在这里了(代码片段)

Carson带你学Android  Carson带你学Android  2023-03-09  466

关键词：

前言

现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图

上述功能是由Android的WebView实现的，其中涉及到Android客户端与Web网页交互的实现
今天我将全面介绍Android通过WebView与JS交互的全面方式

Carson带你学WebView系列文章
Carson带你学Android：这是一份全面&详细的WebView学习攻略
 Carson带你学Android：最全面、最易懂的Webview使用详解
 Carson带你学Android：全面总结WebView与 JS 的交互方式
 Carson带你学Android：手把手构建WebView缓存机制及资源预加载方案
 Carson带你学Android：盘点你不知道的WebView漏洞

1. 交互方式总结

Android与JS通过WebView互相调用方法，实际上是：

Android去调用JS的代码
JS去调用Android的代码

二者沟通的桥梁是WebView

对于Android调用JS代码的方法有2种：

通过WebView的loadUrl（）
通过WebView的evaluateJavascript（）

对于JS调用Android代码的方法有3种：

通过WebView的addJavascriptInterface（）进行对象映射
通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

2. 具体分析

2.1 Android通过WebView调用 JS 代码

对于Android调用JS代码的方法有2种：

通过WebView的loadUrl（）
通过WebView的evaluateJavascript（）

方式1：通过`WebView`的`loadUrl（）`

实例介绍：点击Android按钮，即调用WebView JS（文本名为javascript）中callJS（）
具体使用：

步骤1：将需要调用的JS代码以.html格式放到src/main/assets文件夹里

为了方便展示，本文是采用Andorid调用本地JS代码说明；
实际情况时，Android更多的是调用远程JS代码，即将加载的JS代码路径改成url即可

需要加载JS代码：javascript.html

// 文本名：javascript
<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
// JS代码
     <script>
// Android需要调用的方法
   function callJS()
      alert("Android调用了JS的callJS方法");
   
</script>

   </head>

</html>

步骤2：在Android里通过WebView设置调用JS代码

Android代码：MainActivity.java

注释已经非常清楚

 public class MainActivity extends AppCompatActivity 

    WebView mWebView;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView =(WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

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

        // 先载入JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

        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()方法
                        mWebView.loadUrl("javascript:callJS()");
                    
                );
                
            
        );

        // 由于设置了弹窗检验调用结果,所以需要支持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(false);
                b.create().show();
                return true;
            

        );

特别注意：JS代码调用一定要在 onPageFinished（） 回调之后才能调用，否则不会调用。

onPageFinished()属于WebViewClient类的方法，主要在页面加载结束时调用

方式2：通过`WebView`的`evaluateJavascript（）`

优点：该方法比第一种方法效率更高、使用更简洁。

因为该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会。
Android 4.4 后才可使用

具体使用

// 只需要将第一种方法的loadUrl()换成下面该方法即可
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() 
        @Override
        public void onReceiveValue(String value) 
            //此处为 js 返回的结果
        
    );

2.1.2 方法对比

2.1.3 使用建议

两种方法混合使用，即Android 4.4以下使用方法1，Android 4.4以上方法2

// Android版本变量
final int version = Build.VERSION.SDK_INT;
// 因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断
if (version < 18) 
    mWebView.loadUrl("javascript:callJS()");
 else 
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() 
        @Override
        public void onReceiveValue(String value) 
            //此处为 js 返回的结果
        
    );

2.2 JS通过WebView调用 Android 代码

对于JS调用Android代码的方法有3种：

通过WebView的addJavascriptInterface（）进行对象映射
通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

2.2.1 方法分析

方式1：通过 `WebView`的`addJavascriptInterface（）`进行对象映射

步骤1：定义一个与JS对象映射关系的Android类：AndroidtoJs

AndroidtoJs.java（注释已经非常清楚）

// 继承自Object类
public class AndroidtoJs extends Object 

    // 定义JS需要调用的方法
    // 被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg) 
        System.out.println("JS调用了Android的hello方法");

步骤2：将需要调用的JS代码以.html格式放到src/main/assets文件夹里

需要加载JS代码：javascript.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson</title>  
      <script>
         
        
         function callAndroid()
        // 由于对象映射，所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         
      </script>
   </head>
   <body>
      //点击按钮则调用callAndroid函数
      <button type="button" id="button1" onclick="callAndroid()"></button>
   </body>
</html>

步骤3：在Android里通过WebView设置Android类与JS代码的映射

详细请看注释

public class MainActivity extends AppCompatActivity 

    WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);

        // 通过addJavascriptInterface()将Java对象映射到JS对象
        //参数1：Javascript对象名
        //参数2：Java对象名
        mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象

        // 加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

特点

优点：使用简单

仅将Android对象和JS对象映射即可

缺点：存在严重的漏洞问题，具体请看文章：你不知道的 Android WebView 使用漏洞

方式2：通过 `WebViewClient` 的方法`shouldOverrideUrlLoading ()`回调拦截 url

具体原理：

Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url
解析该 url 的协议
如果检测到是预先约定好的协议，就调用相应方法

即JS需要调用Android的方法

具体使用：
步骤1：在JS约定所需要的Url协议
JS代码：javascript.html

以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
     <script>
         function callAndroid()
            /*约定的url协议为：js://webview?arg1=111&arg2=222*/
            document.location = "js://webview?arg1=111&arg2=222";
         
      </script>
</head>

<!-- 点击按钮则调用callAndroid（）方法  -->
   <body>
     <button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>
   </body>
</html>

当该JS通过Android的mWebView.loadUrl("file:///android_asset/javascript.html")加载后，就会回调shouldOverrideUrlLoading （），接下来继续看步骤2：

步骤2：在Android通过WebViewClient复写shouldOverrideUrlLoading （）

MainActivity.java

public class MainActivity extends AppCompatActivity 

    WebView mWebView;
//    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

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

        // 步骤1：加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");


// 复写WebViewClient类的shouldOverrideUrlLoading方法
mWebView.setWebViewClient(new WebViewClient() 
                                      @Override
                                      public boolean shouldOverrideUrlLoading(WebView view, String url) 

                                          // 步骤2：根据协议的参数，判断是否是所需要的url
                                          // 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
                                          //假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）

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

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

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

                                              

                                              return true;
                                          
                                          return super.shouldOverrideUrlLoading(view, url);
                                      
                                  
        );

特点

优点：不存在方式1的漏洞；
缺点：JS获取Android方法的返回值复杂。

如果JS想要得到Android方法的返回值，只能通过 WebView 的 loadUrl （）去执行 JS 方法把返回值传递回去，相关的代码如下：

// Android：MainActivity.java
mWebView.loadUrl("javascript:returnResult(" + result + ")");

// JS：javascript.html
function returnResult(result)
    alert("result is" + result);

#方式3：通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

在JS中，有三个常用的对话框方法：

方式3的原理：Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调分别拦截JS对话框
（即上述三个方法），得到他们的消息内容，然后解析即可。

下面的例子将用**拦截 JS的输入框（即prompt（）方法）**说明：

常用的拦截是：拦截 JS的输入框（即prompt（）方法）
因为只有prompt（）可以返回任意类型的值，操作最全面方便、更加灵活；而alert（）对话框没有返回值；confirm（）对话框只能返回两种状态（确定 / 取消）两个值

步骤1：加载JS代码，如下：
javascript.html

以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
     <script>
        
	function clickprompt()
    // 调用prompt（）
    var result=prompt("js://demo?arg1=111&arg2=222");
    alert("demo " + result);


      </script>
</head>

<!-- 点击按钮则调用clickprompt()  -->
   <body>
     <button type="button" id="button1" onclick="clickprompt()">点击调用Android代码</button>
   </body>
</html>

当使用mWebView.loadUrl("file:///android_asset/javascript.html")加载了上述JS代码后，就会触发回调onJsPrompt（），具体如下：

如果是拦截警告框（即alert()），则触发回调onJsAlert（）；
如果是拦截确认框（即confirm()），则触发回调onJsConfirm（）；

步骤2：在Android通过WebChromeClient复写onJsPrompt（）

public class MainActivity extends AppCompatActivity 

    WebView mWebView;
//    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

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

// 先加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");


        mWebView.setWebChromeClient(new WebChromeClient() 
                                        // 拦截输入框(原理同方式2)
                                        // 参数message:代表promt（）的内容（不是url）
                                        // 参数result:代表输入框的返回值
                                        @Override
                                        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) 
                                            // 根据协议的参数，判断是否是所需要的url(原理同方式2)
                                            // 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
                                            //假定传入进来的 url = "js://webview?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("webview")) 

                                                    //
                                                    // 执行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);
                                        
                                    
        );

Demo地址
上述所有代码均存放在：Carson_Ho的Github地址： WebView Demo

2.2.2 三种方式的对比 & 使用场景

3. 总结

本文主要对Android通过WebView与JS的交互方式进行了全面介绍

Carson带你学WebView系列文章
Carson带你学Android：这是一份全面&详细的WebView学习攻略
 Carson带你学Android：最全面、最易懂的Webview使用详解
 Carson带你学Android：全面总结WebView与 JS 的交互方式
 Carson带你学Android：手把手构建WebView缓存机制及资源预加载方案
 Carson带你学Android：盘点你不知道的WebView漏洞

欢迎关注Carson_Ho的CSDN博客与公众号！

博客链接：https://carsonho.blog.csdn.net/

请帮顶 / 评论点赞！因为你的鼓励是我写作的最大动力！

carson带你学android：手把手带你全面学习补间动画的使用！(代码片段)

前言动画的使用是Android开发中常用的知识今天，我将将献上一份Android补间动画的使用教程，手把手教你使用补间动画。Carson带你学Android动画系列文章：Carson带你学Android：一份全面&详细的动画知识学习攻略Cars... 查看详情

carson带你学android：手把手带你全面学习补间动画的使用！(代码片段)

carson带你学android：自定义viewcanvas类使用教程(代码片段)

前言自定义View是Android开发者必须了解的基础；而Canvas类的使用在自定义View绘制中发挥着非常重要的作用网上有大量关于自定义View中Canvas类的文章，但存在一些问题：内容不全、思路不清晰、简单问题复杂化等等今... 查看详情

carson带你学android：这是一份详细的retrofit使用教程（含实例讲解）(代码片段)

前言在Andrroid开发中，网络请求十分常用而在Android网络请求库中，Retrofit是当下最热的一个网络请求库今天，我将献上一份非常详细Retrofitv2.0的使用教程，希望你们会喜欢。如果对Retrofitv2.0的源码感兴趣，可看... 查看详情

carson带你学android：最全面的webview使用详解(代码片段)

...等等，如下图那么这种该如何实现呢？其实这是Android里一个叫WebView的组件实现的。今天我将全面介绍WebView的常用用法。Carson带你学WebView系列文章Carson带你学Androidÿ 查看详情

carson带你学android：深入解析自定义view工作流程(代码片段)

前言自定义View是Android开发者必须了解的基础网上有大量关于自定义View原理的文章，但存在一些问题：内容不全、思路不清晰、无源码分析、简单问题复杂化等等今天，我将全面总结自定义View的原理，我能保证这... 查看详情

carson带你学android：手把手带你入门神秘的rxjava(代码片段)

...链式调用、逻辑简洁&使用简单的特点，深受各大Android开发者的欢迎。本文主要：面向刚接触Rxjava的初学者提供了一份清晰、简洁、易懂的Rxjava入门教程涵盖基本介绍、原理&具体使用等解决的是初学者不理解Rxjava原... 查看详情

carson带你学设计模式：单例模式（singleton）(代码片段)

前言今天Carson来全面总结最常用的设计模式-单例模式。Carson带你学设计模式系列文章Carson带你学设计模式：这是一份全面&详细的设计模式学习指南Carson带你学设计模式：单例模式（Singleton）Carson带你学设计模... 查看详情

carson带你学设计模式：观察者模式（observer）(代码片段)

前言今天Carson来全面总结最常用的设计模式-观察者模式（Observer）。Carson带你学设计模式系列文章Carson带你学设计模式：这是一份全面&详细的设计模式学习指南Carson带你学设计模式：单例模式（Singleton࿰... 查看详情

carson带你学android：常见的动画类型你知多少？(代码片段)

前言动画的使用是Android开发中常用的知识可是动画的种类繁多、使用复杂，每当需要采用自定义动画实现复杂的动画效果时，很多开发者就显得束手无策本文将献上一份Android动画简介，包括动画的种类、使用、原理... 查看详情

carson带你学设计模式：这是一份全面&详细的设计模式学习指南

前言设计模式其实并不神秘，今天carson将带你了解一切关于设计模式的知识。Carson带你学设计模式系列文章Carson带你学设计模式：这是一份全面&详细的设计模式学习指南Carson带你学设计模式：单例模式（Singleto... 查看详情

carson带你学设计模式：这是一份全面&详细的设计模式学习指南

carson带你学android：如何理解context对于activity的意义？(代码片段)

通过这篇文章你将学习到：Context与Activity有什么关系？Context对于Activity有什么作用？不同类型的Context的应用场景是什么？关于Context的几个常见关键知识点1.二者有什么关系？Context是一个抽象类；Activity继... 查看详情

carson带你学android：这是一份全面&详细的webview学习攻略(代码片段)

...等等，如下图那么这种该如何实现呢？其实这是Android里一个叫WebView组件实现今天，我将献上一份全面&详细的WebView攻略，含具体介绍、使用教程、与前端JS交互、缓存机查看详情

carson带你学android：这是一个与众不同的android微信公众号(代码片段)

前言今天，我想向广大Android开发者介绍一个与众不同、有特色的Android微信公众号，希望你们会喜欢。注：我是本Android微信公众号的运营者carson_ho，简单介绍如下：附：各大技术社区的个人链接CSDN：htt... 查看详情

carson带你学序列化：深入分析xml多种解析方式(domsaxpull)(代码片段)

...关于另外1种主流的数据传输格式JSON，具体请看：Carson带你学序列化：深入分析JSON多种解析方式(Gson、AS自带org.json、Jackson)2.作用对数据进行标记（结构化数据）查看详情

carson带你学java：泛型知识知多少(代码片段)

目录定义意义（即为什么要使用泛型）作用及特点原理额外说明：List能否转为List？定义可理解为适配广泛的类型，即参数化类型，可以把类型像方法的参数那样进行传递。//以ArrayList为示例//泛型T可以是... 查看详情

carson带你学java：关于string类的必知必会！(代码片段)

概述关于String类的必知必会主要包括：String的常用函数equals()与==的区别String、StringBuffer与StringBuilder的区别Switch能否用string做参数？1.String常用函数2.equals()与==的区别附：/***附1：Object的equalsÿ 查看详情

正文

carson带你学android：你要的webview与js交互方式都在这里了(代码片段)

前言

目录

1. 交互方式总结

2. 具体分析

2.1 Android通过WebView调用 JS 代码

方式1：通过WebView的loadUrl（）

方式2：通过WebView的evaluateJavascript（）

2.1.2 方法对比

2.1.3 使用建议

2.2 JS通过WebView调用 Android 代码

2.2.1 方法分析

方式1：通过 WebView的addJavascriptInterface（）进行对象映射

特点

方式2：通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url

特点

2.2.2 三种方式的对比 & 使用场景

3. 总结

欢迎关注Carson_Ho的CSDN博客 与 公众号！

请帮顶 / 评论点赞！因为你的鼓励是我写作的最大动力！

carson带你学android：手把手带你全面学习补间动画的使用！(代码片段)

carson带你学android：手把手带你全面学习补间动画的使用！(代码片段)

carson带你学android：自定义viewcanvas类使用教程(代码片段)

carson带你学android：这是一份详细的retrofit使用教程（含实例讲解）(代码片段)

carson带你学android：最全面的webview使用详解(代码片段)

carson带你学android：深入解析自定义view工作流程(代码片段)

carson带你学android：手把手带你入门神秘的rxjava(代码片段)

carson带你学设计模式：单例模式（singleton）(代码片段)

carson带你学设计模式：观察者模式（observer）(代码片段)

carson带你学android：常见的动画类型你知多少？(代码片段)

carson带你学设计模式：这是一份全面&详细的设计模式学习指南

carson带你学设计模式：这是一份全面&详细的设计模式学习指南

carson带你学android：如何理解context对于activity的意义？(代码片段)

carson带你学android：这是一份全面&详细的webview学习攻略(代码片段)

carson带你学android：这是一个与众不同的android微信公众号(代码片段)

carson带你学序列化：深入分析xml多种解析方式(domsaxpull)(代码片段)

carson带你学java：泛型知识知多少(代码片段)

carson带你学java：关于string类的必知必会！(代码片段)

方式1：通过`WebView`的`loadUrl（）`

方式2：通过`WebView`的`evaluateJavascript（）`

方式1：通过 `WebView`的`addJavascriptInterface（）`进行对象映射

方式2：通过 `WebViewClient` 的方法`shouldOverrideUrlLoading ()`回调拦截 url

欢迎关注Carson_Ho的CSDN博客与公众号！