【转】Android WebView 与Js 交互【 详解 一 】

其他 2018-08-28 20:32:28 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/adminlxb89/article/details/81702855

开发久了，就越发的想对自己不熟悉的或不是那么清楚的知识点进行归纳总结。对此，我今天特意对 WebView 与Js 交互的几种实现方式进行了总结，希望对大家有所帮助或提升。

本片博文撰写内容主要参阅

  https://blog.csdn.net/carson_ho/article/details/64904691/ 博文，尊重原著，大家可以多多关注大牛博客，共同进步！

WebView 基础知识不是很清楚的朋友，可先阅读：最全面、最易懂的Webview详解

1. 交互方式总结

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

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

对于Android调用JS代码的方法有2种： 
1. 通过WebView的loadUrl（） 
2. 通过WebView的evaluateJavascript（）

对于JS调用Android代码的方法有3种： 
1. 通过WebView的addJavascriptInterface（）进行对象映射 
2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url 
3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

2. 具体分析

方式1：通过WebView的loadUrl（）

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

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

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

需要加载JS代码：javascript.html

<!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代码：WebviewAndJsDemoActivity.java

public class WebviewAndJsDemoActivity extends AppCompatActivity {
    private final String TAG = WebviewAndJsDemoActivity.class.getSimpleName();
    @Bind(R.id.webview)
    WebView webview;
    @Bind(R.id.btn_to_js)
    Button btnToJs;
    final int version = Build.VERSION.SDK_INT;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview_and_js);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        WebSettings settings = webview.getSettings();
        //设置与js 交互权限
        settings.setJavaScriptEnabled(true);
        //设置允许js 弹窗
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        //加载本地js 代码
        webview.loadUrl("file:///android_asset/javascript.html");

        /**
         *  由于设置了弹窗校验调用结果，所以需要支持js 对话框
         *  webview只是载体，而内容的渲染需要 WebViewChromClient 类去是实现
         *  通过设置webviewChromClient 对象来处理javacript 的对话框
         *  设置响应js 的Alert()函数
         */
        webview.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(WebviewAndJsDemoActivity.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;
            }
        });
    }

    @OnClick({R.id.btn_to_js, R.id.btn_to_android})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.btn_to_js:// Android 调 js
                mAndroidToJs();
                break;
            case R.id.btn_to_android: //js 调 android
                mJsToAndroid();
                break;
        }
    }

    private void mJsToAndroid() {
        startActivity(new Intent(WebviewAndJsDemoActivity.this,JsToAndroidActivity.class));
    }

    private void mAndroidToJs() {
        webview.post(new Runnable() {
            @Override
            public void run() {
//                //方法一  注意调用的方法名称要一致
//                //调用javascrip 的callJS()方法
//                webview.loadUrl("javascript:callJS()");
//                //方式二 仅Android 4.4 以上才能使用，缺点：向下兼容性差
//                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//                    webview.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
//                        @Override
//                        public void onReceiveValue(String value) {
//                            //此处为 js 返回的结果
//
//                        }
//                    });
//                }
                //------------->>>>>>  建议两种混合使用 即Android 4.4以下使用方法1，Android 4.4以上方法2
                // 因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断
                if (version < 18) {
                    webview.loadUrl("javascript:callJS()");
                } else {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                        webview.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
                            @Override
                            public void onReceiveValue(String value) {
                                //此处为 js 返回的结果
                                Log.i(TAG, "js 返回的结果:\n" + value);

                            }
                        });
                    }
                }
            }
        });
    }
}

方式2：通过WebView的evaluateJavascript（）

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

2.1.2 方法对比

2.2 JS通过WebView调用 Android 代码

对于JS调用Android代码的方法有3种： 
1. 通过WebView的addJavascriptInterface（）进行对象映射 
2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url 
3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

2.2.1 方法分析

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

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

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

public class AndroidtoJs extends Object {

    /**
     * 定义js 需要调用的方法
     * 被js 调用的方法，必须加入 @JavascriptInterface 注解
     * @param msg
     */
    @JavascriptInterface
    public void hello(String msg) {
        Log.i("AndroidtoJs", "JS调用了Android的hello方法");
    }
}

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

需要加载JS代码：javascript2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Carson</title>
    <script>
    <!--方式一       start    -->
         function callAndroid()
         {
         <!--由于对象映射，所以调用test对象等于调用Android映射的对象-->
            test.hello("js调用了android中的hello方法");
         }

    </script>
</head>
<body>
<!-- 点击按钮则调用callAndroid函数 -->
<button type="button" style="height:30px;width:120px;" onclick="callAndroid()">
    Js调用Android代码 方式一
</button>
</body>
</html>

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

public class JsToAndroidActivity extends AppCompatActivity {
    @Bind(R.id.webview)
    WebView webview;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js_to_android);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        WebSettings settings = webview.getSettings();
        //设置与js 交互权限
        settings.setJavaScriptEnabled(true);
        //方式一：实现流程
        /**
         * 1、定义一个与js 对象映射关系的Android 类 AndroidtoJs
         * 2、将本地的js 文件放到 asset 文件下
         * 3、在Android 代码里 设置Android类与js 代码映射
         *  param1 :javascript 对象名
         *  param2 :java 对象名
         */
        webview.addJavascriptInterface(new AndroidtoJs(), "test");
        //加载js 代码
        webview.loadUrl("file:///android_asset/javascript2.html");

    }


    @OnClick(R.id.btn_to_android)
    public void onViewClicked() {
        startActivity(new Intent(JsToAndroidActivity.this,JsToAndroidTwoActivity.class));
    }
}

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

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

  • 具体原理： 

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Carson</title>
    <script>

            <!--方式二      start    -->
            function callAndroidTwo()
            {
            <!--约定的url协议为：js://webview?arg1=111&arg2=222-->
            document.location = "js://webview?arg1=111&arg2=222";
            }


    </script>
</head>
<body>
<!-- 点击按钮则调用callAndroidTwo函数 -->
<br><br><br><br>
<button type="button" style="height:30px;width:120px;" onclick="callAndroidTwo()">
Js调用Android代码 方式二
</button>
</body>
</html>

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

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

public class JsToAndroidTwoActivity extends AppCompatActivity {
    private static final String TAG = JsToAndroidTwoActivity.class.getSimpleName();
    @Bind(R.id.webview)
    WebView webview;
    @Bind(R.id.btn_to_android)
    Button btnToAndroid;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js_to_android_two);
        ButterKnife.bind(this);
        initView();

    }

    private void initView() {
        WebSettings settings = webview.getSettings();
        //设置与js 交互权限
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        //加载js 代码
        webview.loadUrl("file:///android_asset/javascript3.html");

        webview.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();
                        Log.i(TAG, "collection:\n" + collection.toString());
                    }
                    return true;
                }
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
    }

    @OnClick(R.id.btn_to_android)
    public void onViewClicked() {
        startActivity(new Intent(JsToAndroidTwoActivity.this,JsToAndroidThreeActivity.class));
    }
}

特点

  • 优点：不存在方式1的漏洞；
  • 缺点：JS获取Android方法的返回值复杂。 
如果JS想要得到Android方法的返回值，只能通过 WebView 的 loadUrl （）去执行 JS 方法把返回值传递回去，相关的代码如下：
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（）方法）说明 ：

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Carson</title>
    <script>
     <!--方式三      start    -->
    <!--调用prompt（）-->
   function clickprompt(){
    var result = prompt("js://demo?arg1=111&arg2=222");
    alert("demo " + result);
    }
    </script>
</head>
<body>
<!-- 点击按钮则调用clickprompt()  -->
<button type="button" style="height:30px;width:120px;" onclick="clickprompt()">Js调用Android代码 方式三</button>
</body>
</html>

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

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

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

public class JsToAndroidThreeActivity extends AppCompatActivity {
    private static final String TAG = JsToAndroidThreeActivity.class.getSimpleName();
    @Bind(R.id.webview)
    WebView webview;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js_to_android_three);
        ButterKnife.bind(this);
        initView();

    }

    private void initView() {
        WebSettings settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        //先加载js 代码
        webview.loadUrl("file:///android_asset/javascript4.html");

        webview.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(url);
                // 如果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();
                    }
                    return true;
                }
                return super.onJsPrompt(view, url, message, defaultValue, result);
            }

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

            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                return super.onJsConfirm(view, url, message, result);
            }
        });

    }
}

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

3. 总结

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

         https://blog.csdn.net/adminlxb89/article/details/81740264

猜你喜欢

转载自blog.csdn.net/adminlxb89/article/details/81702855
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022