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. 详解__FILE__与$_SERVER['SCRIPT_FILENAME']的区别

    废话不多说 直接上测试代码: <?php //引入的是ceshi4文件夹下的ceshi4.php; require_once './ceshi4/ceshi4.php'; 下面是ceshi4文件 ...

  2. （十）JavaScript之【DOM定义】

    DOM定义Document Object Model 文档对象模型 是干什么的?改变 HTML 元素的内容 (innerHTML)改变 HTML 元素的样式 (CSS)改变 HTML 元素的属性对 H ...

  3. Eclipse Action

    Interface IAction package org.eclipse.jface.action; import org.eclipse.core.commands.IHandlerAttribu ...

  4. S/4HANA和CRM Fiori应用的搜索分页实现

    在我的博客Paging Implementation in S/4HANA for Customer Management 我介绍了S/4HANA for Customer Management里采用 ...

  5. Linux同步目录 保留文件修改时间和权限 rsync

    scp copy文件夹的时候,会强行覆盖文件,导致增量同步的时候不方便,而rsync则能很好解决这个问题. rsync -avz ubuntu@192.168.1.208:/home/ubuntu/m ...

  6. Ubuntu 16.04 安装札记

    写在前面的话:第一次写,有点紧张,不知道怎么写,就胡乱写了,主要是写给自己看的,感觉这里大神遍地都是,大牛更是数不胜数,我就一小白,记下来怕以后忘了,言归正传,我初步打算是把这篇博客写成安装指南(捂脸 ...

  7. hiho 第135周 九宫

    题目链接:http://hihocoder.com/contest/hiho135/problem/1 由于是九宫格,全排列也就是9! (362880)种方式,我就直接暴力枚举排列好了. #inclu ...

  8. spring依赖注入（转）

    转自:https://blog.csdn.net/taijianyu/article/details/2338311/ Spring 能有效地组织J2EE应用各层的对象.不管是控 制层的Action对 ...

  9. 20145238-荆玉茗 《Java程序设计》第3周学习总结

    20145238 <Java程序设计>第3周学习总结 教材学习内容总结 一.定义类: ·类定义时使用class关键字 ·如果要将x绑定到新建的对象上,可以使用"="制定 ...

  10. 第一个AngularJS控制器

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...