Android中webview与JS交互、互调方法实例详解_网络技术

Android中webview与JS交互、互调方法实例详解

发布时间 - 2026-01-11 00:23:24 点击率：次

Android中webview与JS交互、互调方法实例详解

前言：

对于试水的功能，一般公司都会采用H5的方式来开发，可以用很少的资源与很短的项目工期来完成。
但许多情况下，H5页面会需要一些原生持有的一些如用户信息之类的数据，一些交互也需要调用原生的，如toast之类要保持同一个手机风格一致的交互行为。这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据。或者是原生调用JS的方法在H5加载的时候传递一些参数。

对于原生调用JS的方法

我们需要实现一个WebViewClient，在这个WebViewClient里面进行JS方法加载的替换

如

 webView_.setWebViewClient(new WebViewClient() {
      public void onPageFinished(WebView view, String url) {
        view.loadUrl(MessageFormat.format("javascript:initEvaluationPage({0})",
            Util.wrapGetParameter(json)
        ));
      }
    });

这里的initEvaluationPage必须要和JS的方法名一致

建议传递json格式数据作为参数。

不要忘了允许WebView执行JS代码

webView_.getSettings()s.setJavaScriptEnabled(true);

对于JS调用原生方法，稍微复杂一些

首先，需要本地定义一个接口，接口名需要和JS内写的一致

比如JS需要客户端保存的用户信息

JS中代码是这样的

  var userInfo = JSON.parse(window.JSUserInfoInterface.getUserInfo());

那么我们本地也需要定义一个对应的接口

public interface JSUserInfoInterface {

  @JavascriptInterface
  String getUserInfo();

}

接口名方法名一致

实例化这个接口，在实例方法内返回我们的用户信息

 JSUserInfoInterface method3 = new JSUserInfoInterface() {

      @Override
      @JavascriptInterface
      public String getUserInfo() {
        SharedPreferences sharedPreferences = getActivity().getApplicationContext().getSharedPreferences(
            "share", Context.MODE_PRIVATE);
        String tel = sharedPreferences.getString(Constant.KEY_USERNAME, "");
        String userid = sharedPreferences.getString("userid", "");
        return "{\"user_id\":\"" + userid + "\",\"user_tel\":\"" + tel + "\"}";
      }

    };

注意不能忘了 @JavascriptInterface注解

然后将这个接口方法加入到webView_中，注意第二个参数就是接口名，需要和JS中的一致。

webView_.addJavascriptInterface(method3, "JSUserInfoInterface");

这样就可以在JS调用window.JSUserInfoInterface.getUserInfo()的时候返回我们实例里面给的数据

同样的，我们也可以不返回数据直接执行。比如弹一个原生的Dialog。

需要注意的是JS里面是没有主线程子线程的概念的，当JS进行网络请求的时候，webview会默认给他开子线程。具体机制大家感兴趣可以去了解。不过这也就意味着你不能直接在给JS掉的原生方法中进行UI操作。你可以选择发送给主线程执行。

比如下面的代码我是用rxjava来切换线程的

 JSDialogInterface method2 = new JSDialogInterface() {

      @Override
      @JavascriptInterface
      public void changeDialog(String arg0) {
        Observable.just(arg0)
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe(mess -> {
              if (mess.equals("show")) {
                ld_.show();
              } else {
                ld_.dismiss();
              }
            });
      }
    };

最后

一点小建议

如果你的项目中有很多或者一定数量的JS交互，建议写一个有返回值的接口。然后通过JSON参数来进行控制。内部制定一个解析协议，根据JSON的数据来决定要做什么事，避免大量定义接口，也避免构建太多的实例消耗资源

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# Android中webview与JS交互、互调方法 # Android # webview # JS交互 # Android的WebView与H5前端JS代码交互的实例代码 # Android webview与js的数据交互 # Android总结之WebView与Javascript交互（互相调用） # Android WebView使用方法详解附js交互调用方法 # Android中WebView与Js交互的实现方法 # Android WebView上实现JavaScript与Java交互 # android中WebView和javascript实现数据交互实例 # android中webview控件和javascript交互实例 # 解析Android中webview和js之间的交互 # Android WebView与JS交互全面详解(小结) # 的是 # 我是 # 加载 # 太多 # 在这个 # 你可以 # 是这样 # 给他 # 可以用 # 中有 # 感兴趣 # 这也 # 希望能 # 要做 # 第二个 # 或者是 # 这个时候 # 谢谢大家 # 方法来 # 来完成

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：王者荣耀怎么开启麦克风说话_王者荣耀局内开启语音聊天

下一篇：Linux中怎么使用apt更新系统_Linuxaptupda

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：王者荣耀怎么开启麦克风说话_王者荣耀局内开启语音聊天

下一篇：Linux中怎么使用apt更新系统_Linuxaptupda