Android应用中的webview怎么与JavaScript进行数据交互

本篇文章为大家展示了Android应用中的webview怎么与JavaScript进行数据交互，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联服务项目包括天河网站建设、天河网站制作、天河网页制作以及天河网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，天河网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到天河省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

首先需要初始化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代码如下

Android应用中的webview怎么与JavaScript进行数据交互

这里我们可以通过如下方式进行弹出原生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

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

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

上述内容就是Android应用中的webview怎么与JavaScript进行数据交互，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

新闻名称：Android应用中的webview怎么与JavaScript进行数据交互
网页路径：http://scyanting.com/article/pidoep.html

Android应用中的webview怎么与JavaScript进行数据交互

其他资讯