项目要用到Webview和js交互，查了查以前的项目感觉还是有必要整理下的。

简单描述下项目中用到的地方，比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录，点击web页的拨打电话弹出原生dialog询问是否拨打，点击web页里面的图片进行放大处理。针对于上述的需求我们通用的方式大概有两种，一是监听a标签，在shouldOverrideUrlLoading根据URL进行判断，二是js代码注入，找到我们想要处理的元素进行js代码注入。下面就这两种方式简单的进行描述

首先需要初始化WebView以及设置支持JavaScript，常用的配置属性有一下几种，可以在项目中根据需求添加

 WebSettings webSetting = webView.getSettings();
 // 支持JavaScript
 webSetting.setJavaScriptEnabled(true);
 // 设置可以访问文件s
 webSetting.setAllowFileAccess(true);
 // 告诉javascript来自动打开的窗口。这适用于JavaScript函数的窗口，open()。
 webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
 // 支持缩放
 webSetting.setSupportZoom(true);
 // 是否禁止是网络加载数据
 webSetting.setBlockNetworkLoads(false);
 // 设置是否支持多窗口
 webSetting.setSupportMultipleWindows(true);
 // 是否开启本地DOM存储
 webSetting.setDomStorageEnabled(true);
 // 设置不缓存
 webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
 // 阻塞加载图片
 webSetting.setBlockNetworkImage(false);
 // 支持启用插件
 webSetting.setPluginState(WebSettings.PluginState.ON);
 // 设置任意比较缩放为真
 webSetting.setUseWideViewPort(true);
 // 设置WebView加载页面的模式
 webSetting.setLoadWithOverviewMode(true);
 // 控制页面显示布局
 // NARROW_COLUMNS：可能的话使所有列的宽度不超过屏幕宽度
 // NORMAL：正常显示不做任何渲染
 // SINGLE_COLUMN：把所有内容放大webview等宽的一列中
 webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
 //禁止用地理定位
 webSetting.setSaveFormData(true);
 // 是否启动地理定位
 webSetting.setGeolocationEnabled(true);
 // 设置定位的数据库路径
 webSetting.setGeolocationDatabasePath("/data/data/org.itri.html5webview/databases/");

接下来就是WebView交互中非常重要的两个类WebViewClient和WebChromeClient。WebViewClient就是帮助WebView处理各种通知、请求事件的，具体来说包括以下常用方法：

onLoadResource() // 在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。  

shouldOverrideUrlLoading //在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。

onPageStart  //这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。 

onPageFinish //在页面加载结束时调用。同样道理，我们知道一个页面载入完成，于是我们可以关闭loading 条，切换程序动作。 

onReceiveError // (报告错误信息) 

onReceivedHttpAuthRequest ()//（获取返回信息授权请求） 

WebChromeClient是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等 ，常用方法有以下几个:

onCloseWindow()  //关闭WebView

onCreateWindow()  

onJsAlert //WebView上alert是弹不出来东西的，需要定制你的WebChromeClient处理弹出) 

onJsPrompt  

onJsConfirm  

onProgressChanged //可以根据加载进度设置进度条

onReceivedIcon //可以获取URL icon

onReceivedTitle //可以获取URL title

一、监听a标签

这种实现方式比较简单，我们可以在shouldOverrideUrlLoading中根据URL进行判断，比如说界面中有一个拨打电话的功能，其js代码如下

这里我们可以通过如下方式进行弹出原生dialog

 public boolean shouldOverrideUrlLoading(WebView view, String url) {
      if (TextUtils.isEmpty(url))
        return true;
      if (url.startsWith("tel:")) {
        PhoneDialog callDialog = new PhoneDialog(WebViewActivity.this, url);
        callDialog.disDialog();
        callDialog.callPhone();
        callDialog.show();
        return true;
      }
      return true;
    }

二、通过js代码

查了下常用的注入方式有两种，第一种是当webview加载完之后，读取整个js文件中的内容，然后将整个文件内容以字符串的形式，通过webview.loadUrl(“javascript:fileContentString”)注入，不过我好像没怎么用到过这个方式，一般都是用第二种，即通过给特定标签设置事件来满足业务需求。

比如说我们给所有的图片设置一个点击事件来获取图片，进行一些列放大存储等操作，我们可以通过如下代码来实现。

 // 注入js函数监听
  private void addImageClickListner() {
    // 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去
    webView.loadUrl("javascript:(function(){" +
        "var objs = document.getElementsByTagName(\"img\"); " +
        "for(var i=0;i<objs.length;i++) " +
        "{"
        + "  objs[i].onclick=function() " +
        "  { "
        + "    window.imagelistner.openImage(this.src); " +
        "  } " +
        "}" +
        "})()");
  }

// js通信接口
  public class JavascriptInterface {

    private Context context;

    public JavascriptInterface(Context context) {
      this.context = context;
    }

    @android.webkit.JavascriptInterface
    public void openImage(String img) {
      Toast.makeText(context,img,Toast.LENGTH_SHORT).show();
    }
  }
//上述两个方法实现了给图片添加点击事件，我们还需要对webview进行设置以及注入

 @SuppressLint({"JavascriptInterface", "NewApi"})
    @Override
    public void onPageFinished(WebView view, String url) {
      view.getSettings().setJavaScriptEnabled(true);
      super.onPageFinished(view, url);
      addImageClickListner();// 页面加载完成之后，添加监听图片的点击js函数 
    }
//对WebView进行设置
webView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

上述实现方式有以下几点需要注意：1、注意这里的方法名imagelistener要和输入的js代码里面的方法一致，2、自定义的方法openImage一定要注明@Android.webkit.JavascriptInterface，否则不起作用。

可以看到我们注入的js代码是通过getElementsByTagName获取所有的img元素然后设置点击事件，如果我们相对某一特定的元素进行设置也可以通过getElementById获取单独的元素，或者还可以通过getElementsByTagName根据TAG获取元素。

这是我现阶段知道的方式，如果还有其它比较好的实现方式可以一起讨论下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# webview  # js  # 交互  # android  # android与webview交互  # android中webview控件和javascript交互实例  # Android中Java和JavaScript交互实例  # Android WebView使用方法详解 附js交互调用方法  # 解析Android中webview和js之间的交互  # Android WebView上实现JavaScript与Java交互  # Android中WebView与Js交互的实现方法  # 浅谈Android程序与JavaScript脚本的交互  # Android中js和原生交互的示例代码  # android和js的交互之jsbridge使用教程  # 加载  # 我们可以  # 弹出  # 是在  # 几点  # 有两种  # 拨打电话  # 的是  # 都是  # 几个  # 还可以  # 在这  # 一是  # 才会  # 遍历  # 中有  # 适用于  # 这段  # 可以通过  # 这是我 

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

相关推荐： Laravel怎么实现模型属性的自动加密  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  微信小程序 配置文件详细介绍  Laravel如何编写单元测试和功能测试？（PHPUnit示例）  EditPlus中的正则表达式实战(5)  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  用yum安装MySQLdb模块的步骤方法  如何做网站制作流程,*游戏网站怎么搭建？  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  详解Android中Activity的四大启动模式实验简述  LinuxShell函数封装方法_脚本复用设计思路【教程】  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  javascript基于原型链的继承及call和apply函数用法分析  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  js代码实现下拉菜单【推荐】  如何在云主机快速搭建网站站点？  做企业网站制作流程,企业网站制作基本流程有哪些？  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  香港服务器租用每月最低只需15元？  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  Laravel如何处理CORS跨域请求？（配置示例）  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  浅析上传头像示例及其注意事项  微信小程序 五星评分(包括半颗星评分)实例代码  网站图片在线制作软件,怎么在图片上做链接？  如何快速辨别茅台真假？关键步骤解析  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  轻松掌握MySQL函数中的last_insert_id()  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  如何为不同团队 ID 动态生成多个“认领值班”按钮  Laravel怎么使用Intervention Image库处理图片上传和缩放  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  想要更高端的建设网站，这些原则一定要坚持！  重庆市网站制作公司,重庆招聘网站哪个好？  jQuery中的100个技巧汇总  无锡营销型网站制作公司,无锡网选车牌流程？  如何安全更换建站之星模板并保留数据？  Laravel如何操作JSON类型的数据库字段？（Eloquent示例）  Android仿QQ列表左滑删除操作