Android与HTML5的交互主要是两个部分, 与HTML5的交互以及与JavaScript的交互, 与HTML5的交互可以通过注册onclick事件转化为与JavaScript的交互

Android与JavaScript的交互主要是通过相互调用方法实现的, Android对JavaScript的可以称之为调用, 但是JavaScript对于Android代码的调用则是通过拦截(@JavascriptInterface与映射实现存在较多漏洞, 也不推荐使用)

Android调用JavaScript代码有两种方式, 通过WebView对象的loadUrl(String)或evaluateJavascript(String, ValueCallback), 第二种方式便于获取返回值(虽然很少用), 下面给出一个第二种方法的demo:

// audioPrepareResult是当前页面中的一个JavaScript方法

// startRecordResult是Android本地方法返回的结果, 作为参数传递给JavaScript方法

mWebView.evaluateJavascript("javascript:audioPrepareResult(\"" + startRecordResult + "\")", new ValueCallback<String>() {

    @Override

    public void onReceiveValue(String value) {

        // nothing

    }

});

这里有一个坑, 如果JavaScript方法的参数是一个字符串的话, 一定要在参数前后手动加上"(引号), 否则JavaScript会产生undefined, 比较奇葩的是, 如果参数是一段JSON, 所以就有了"{ \"longitude\": 0, \"latitude\": 0}"这种代码

JavaScript调用Android方法有三种, 第一种是通过WebView的addJavascriptInterface(Object, String)进行映射, 这个方法虽然很方便, 但是存在严重漏洞, 不推荐使用. 第二种方法是通过拦截shouldOverrideUrlLoading(WebView, String)进行URL拦截, 与约定匹配就进行对应的方法调用. 第三种是通过重写WebChromeClient里的onJsAlert(WebView view, String url, String message, String defaultValue, JsPromptResult result), onJsConfirm(/* 参数同onJsAlert/), onJsPrompt(/ 参数同onJsAlert*/)进行拦截对应的对话框, 匹配参数3的message, 与约定匹配就执行对应的Android代码, 下面给出第三种代码的demo:

mWebView.setWebChromeClient(new WebChromeClient() {

    @Override

    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

        Uri uri = Uri.parse(message);

    if (uri.getScheme().equals("CallAndroidMethod")) {

        switch (uri.getAuthority()) {

            case "recordAudio":

                boolean recordAudioResult = MainActivity.this.recordAudio();

                result.confirm(new Boolean(recordAudioResult).toString());

                return true;

            default:

                break;

        }

    }

    result.confirm(new Boolean(true).toString());

    return super.onJsPrompt(view, url, message, defaultValue, result);

    }

});

调用这段代码对应的 H5 代码为:

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Android With H5 Demo</title>

        <script>

            function uploadImage() {

                var result = prompt("CallAndroidMethod://recordAudio?type=search");

            }

        </script>

    </head>

    <body>

        <button type="button" id="recordAudioButton" onclick="recordAudio()">Record Audio</button>

    </body>

</html>

这里有个坑, 在onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result)方法返回前一定要调用最后一个参数JsPromptResult的confirm(bool)方法, 否则会造成HTML5页面无响应

其他一些操作:

WebView的canGoBack()与goBack()方法配合Activity的onKeyDown(int keyCode, KeyEvent event)可以实现用户按返回键是返回上一个Web页面而非退出页面

Android 内嵌 HTML5 并进行交互的更多相关文章

  1. 一处折腾笔记：Android内嵌html5加入原生微信分享的解决的方法

    有一段时间没有瞎折腾了. 这周一刚上班萌主过来反映说:微信里面打开聚客宝.分享功能是能够的(这里是用微信自身的js-sdk实现的).可是在android应用里面打开点击就没反应了:接下来狡猾的丁丁在产 ...

  2. cocos2d-x调用android内嵌浏览器打开网页

    cocos2d-x调用android内嵌浏览器打开网页,能够从入口传入网址,C++调用android 的api就可以实现. 方法也非常easy 1. 改动"cocos2dx\platform ...

  3. Android内嵌网页webview点击其中的链接跳转到我们应用内的Activity

    在一个大的Android项目中,由于客户端来不及更新和实现,经常会内嵌一些网页(在一些大型的互联网公司,PC的产品总是跑在客户端的前面),比如活动页面,通常可以内嵌用html5实现的页面,可以适配手机 ...

  4. android内嵌H5页（webview）如何定位

    一.切换至webview后再定位元素 (1)获取页面上下文 contexts = driver.contexts (2)切换至webview driver.switch_to.context(cont ...

  5. [Unity3D]Unity3D游戏开发Android内嵌视图Unity查看

    ---------------------------------------------------------------------------------------------------- ...

  6. iOS 开发之路（WKWebView内嵌HTML5之图片上传） 五

    HTML5页面的图片上传功能在iOS端的实现. 首先,页面上用的是plupload组件,在wkwebview上存在两个坑需要修复才能正常使用. 问题:在webview上点击选择照片/相机拍摄,就会出现 ...

  7. Android内嵌VLC实现播放网络视频，网络音频

    1.在对应模块的build.gradle文件中,添加依赖 //VlC implementation "de.mrmaffen:vlc-android-sdk:2.0.6" 2.布局 ...

  8. Android内嵌PDF预览

    一.在对应模块的build.gradle文件中加入依赖 dependencies { implementation 'com.github.barteksc:android-pdf-viewer:3. ...

  9. 微信内嵌html5页面清楚缓存

    给每个js添加一个版本号,每次修改js后改变一下版本号,浏览器即可自动刷新不用手动清理缓存 <script src="<%=path%>/js/boss/kpi/redli ...

随机推荐

  1. selenium 上传文件。

    上传文件 driver.findElement(By.xpath("//input[@type='file']"))).sendKeys("C:\\testContent ...

  2. python3绘图示例6-1（基于matplotlib，绘图流程介绍及设置等）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import os import pylab as pyimport numpy as npfrom matpl ...

  3. StringBuffer和StringBuilder区别？

    1. String是不可变类,改变String变量中的值,相当于开辟了新的空间存放新的string变量 2. StringBuffer 可变的类,可以通过append方法改变变量的值,且StringB ...

  4. IOS开发入门你们准备好了吗？

    我们对于IOS的了解最多应该就是苹果手机独有的IOS系统吧,也可以说是单任务管理器,这可以说是一个优势,但是随着技术提升IOS慢慢有被超越的趋势,但是很多大公司还是需要这方面的开发人才,那么今天我们来 ...

  5. PHP : 封装Mysqli的连接、关闭和增改查(面向过程)

    废话不多说,直接上图和案例:(看行数进行拼接) 注意:连接数据库中,因为用了$CONNECT全局变量,所以我们的连接数据库封装方法必须要执行了才能获取到此全局变量的值 所引入的数据库文件(databa ...

  6. 使用ABAP Push Channel(APC)开发的乒乓球游戏，可双打

    url: https://:/sap/bc/apc_test/ping_pong/game 或者事务码SICF, 输入ping_pong, 按F8: 选中搜索结果,点右键选择Test,即可打开url. ...

  7. 深入理解HDFS的架构和原理

    (一) HDFS主要是用于做什么的? HDFS(Hadoop Distributed File System)是Hadoop项目的核心子项目,是分布式计算中数据存储管理的基础,是基于流数据模式访问和处 ...

  8. 其它内置函数(zip等)

      python内置函数 截止到python版本3.6.2,python一共为我们提供了68个内置函数.它们就是python提供给你直接可以拿来使用的所有函数     Built-in Functio ...

  9. 一篇RxJava友好的文章（三）

    组合操作符 继上一篇讲述了过滤操作符,这一篇讲述组合操作符,组合操作符可用于组合多个Observable.组合操作符相对于过滤操作符要复杂很多,也较难以理解,需要花费时间去看文档查资料,写demo才能 ...

  10. ssh框架复习

    1.Hibernate中实体类的创建规则是什么? 2.hibernate中实体类的三种状态? 三种状态: 1. new 出来一个新对象 TakeTime takeTime = new TakeTime ...