Android webview与js的数据交互

概述项目要用到Webview和js交互，查了查以前的项目感觉还是有必要整理下的。简单描述下项目中用到的地方，比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录，点击web页的拨打电话d出原生dialog询

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

简单描述下项目中用到的地方，比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录，点击web页的拨打电话d出原生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()  //关闭WebVIEwonCreateWindow()  onjsAlert //WebVIEw上alert是d不出来东西的，需要定制你的WebChromeClIEnt处理d出) onjsPrompt  onjsConfirm  onProgressChanged //可以根据加载进度设置进度条onReceivedIcon //可以获取URL icononReceivedTitle //可以获取URL Title

一、监听a标签

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

这里我们可以通过如下方式进行d出原生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获取元素。

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

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

总结

以上是内存溢出为你收集整理的Android webview与js的数据交互全部内容，希望文章能够帮你解决Android webview与js的数据交互所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。