Android webview与js的数据交互

项目要用到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获取元素。

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

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

(0)

相关推荐

  • android中WebView和javascript实现数据交互实例

    在看懂这篇文章之前首先要有javascript基础. (1) js调用android的方法: 复制代码 代码如下: WebView wView: wView. addJavascriptInterface (Object obj, String interfaceName); 是实例化一个对象,在html的js中调用,第二个参数是实例化对象的别名,如果要使用这个obj,则在js中使用的名字 就是interfaceName. 复制代码 代码如下: public class jsWebDemo ex

  • Android WebView上实现JavaScript与Java交互

    其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢.图片.css .js .html这些资源每个大概需要10-200ms ,一般都是30ms就ok了.不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析出css.js文件和页面上的图片资源进行加载.如果webkit的缓存里面有,就不加载.加载完这些资源之后,就进行css的渲染和js的执行.Css的渲染一般不

  • IOS中UIWebView、WKWebView之JS交互

    做客户端开发,肯定避免不了JS交互,于是自己对苹果接口做了个简易封装: JSExport-->UIWebView+Interaction.WKScriptMessageHandler -->WKWebView+Interaction以备以后使用. 代码非常简洁,见这里:https://github.com/V5zhou/JSInteraction.git 旧方式 旧的交互方式有通过UIWebViewDelegate实现的:JS与客户端定义好跳转页面参数,在将要跳转时捕获关键字,然后处理业务.

  • 解析Android中webview和js之间的交互

    1.android中利用webview调用网页上的js代码.Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true,,然后通过loadUrl就可以直接进行调用,如下所示:mWebView.getSettings().setJavaScriptEnabled(true);mWebView.loadUrl("javascript:test()"); 2. 网页上调用android中java代码的方法在网页中

  • android中webview控件和javascript交互实例

    当我们要实现丰富的图文混排效果的时候,我们一般会使用webview,这是一个功能十分强大的的控件,来看看官方的解释: 复制代码 代码如下: A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit

  • ios下OC与JS交互之WKWebView

    上一篇文章我们使用了JavaScriptCore框架重写了之前的示例,iOS8苹果偏爱HTML5,重构了UIWebVIew,给我们带来了WKWebView,使其性能.稳定性.功能大幅度提升,也更好的支持了HTML5的新特性.这篇文章就们就拿WKWebView来小试牛刀 一.WKWebView Framework WKWebView的14个类与3个协议: WKBackForwardList: 之前访问过的 web 页面的列表,可以通过后退和前进动作来访问到. WKBackForwardListIt

  • Android总结之WebView与Javascript交互(互相调用)

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用到两者之间传递参数的情况,今天就来总结一下两者之间如何互相调用.本篇主要介绍WebView与Javascript交互数据,关于如何将H5网页呈现在WebView上可以参考这篇博客文章:Android总结之Web

  • Android webview与js的数据交互

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

  • Android WebView与JS交互全面详解(小结)

    Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5页面等,下面来看看这两是怎么交互的 目录 1.

  • Android webview注入JS代码 修改网页内容操作

    今天开发的时候遇到一个需求,就是需要隐藏webview的元素,鼓捣了半天 在stack overFlow找到了解决办法 在此记录一下 final WebView webview = (WebView)findViewById(R.id.browser); webview.getSettings().setJavaScriptEnabled(true); webview.setWebViewClient(new WebViewClient() { @Override public void onP

  • Android webview和js互相调用实现方法

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5

  • Android  webview和js互相调用实现方法

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5

  • 浅谈Android客户端与服务器的数据交互总结

    前言: 本文总结了Android客户端与服务器进行交互时,采用RESTful API +Json的交互方式,针对不同的数据形式以及不同的解析方法,如有不足之处,欢迎指正. 温馨提示:本文适合有一定Android开发经验的人阅读,如有疑问,欢迎留言讨论. 先了解一下相关的基本概念. 1. Android客户端与服务器端通信方式 通信方式主要有HTTP和Socket. HTTP通信:即使用HTTP协议进行通信,工作原理是客户端向服务器端发送一条HTTP请求,服务器收到之后先解析客户端的请求,之后会返

  • Android webview与js交换JSON对象数据示例

    最近几个项目的测试结果,Android无法主动通过调用 webview.loadUrl("javascript:"+callbackFunction+"('"+data+"')"); 这种方式将jsonobject类型的data传给js,因为js那边得到就是一个string的对象. 与此同时,js主动调用android的对象方式,android也无法返回给js一个jsonobject,需要js做一下转换,例如: Android 代码: 复制代码

  • Android Activity 与Service进行数据交互详解

    ①从设计的角度来讲: Android的Activity的设计与Web页面非常类似,从页面的跳转通过连接,以及从页面的定位通过URL,从每个页面的独立封装等方面都可以看出来,它主要负责与用户进行交互. Service则是在后台运行,默默地为用户提供功能,进行调度和统筹.如果一棵树的地上部分是Activity的话,它庞大的根须就是Service.Android的服务组件没有运行在独立的进程或线程中,它和其他的组件一样也在应用的主线程中运行,如果服务组件执行比较耗时的操作就会导致主线程阻塞或者假死,从

随机推荐