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. Android studio 安装与配置【Android学习入门】

    终于下定决心认真学习Android开发了. 之前在很多平台看到很多大牛们学习Android的经验和心得,纸上得来终觉浅. 这里推荐stormzhang老师总结的Android学习之路. 为了防止电脑卡 ...

  2. 将零散文件使用ICSharpCode.SharpZipLib压缩打包后一次性下载

    public static Stream CreateZip(List<string> listPath, int level = 5) { MemoryStream mstream = ...

  3. 夜色的 cocos2d-x 开发笔记 03

    本章添加敌人,首先我们在.h文件里添加新的方法 之后进入.cpp文件,写出方法内容 当然还要调用一次,我把这个方法添加在了这里,也就是和发子弹是同步的,当然想要多久调用一次大家可以自己调整 运行一下 ...

  4. Struts2_Struts标签大致内容

    Struts-Tags1.通用标签 a) property b) set i.默认为 action scope,会将值放入 request 和 ActionContext中 ii. page.requ ...

  5. SuiteCRM-7.7.6 (Ubuntu 16.04)

    平台: Ubuntu 类型: 虚拟机镜像 软件包: suitecrm-7.7.6 commercial crm open-source suitecrm 服务优惠价: 按服务商许可协议 云服务器费用: ...

  6. 动软代码生成器，主子表增加的时候子表的parentID无法插入问题解决方案

    StringBuilder strSql=new StringBuilder(); strSql.Append("insert into HT_XunJiaMain("); str ...

  7. 查看Linux网卡地址，网络地址

    查看网络地址 ip a 或ip addr show 或ifconfig,此指令在部分linux系统中不支持

  8. MSMQ学习笔记二——创建Message Queue队列

    一.创建Message Queue队列的主要流程 1.定义MQQUEUEPROPS 结构: 2.设置消息队列属性: 3.初始化MQQUEUEPROPS 结构: 4.调用MQCreateQueue创建队 ...

  9. Altium_Designer-PCB的覆铜步骤

    1.覆铜的意义     覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力:降低压降,提高电源效率:还有,与地线相连,减小环路 ...

  10. 少年开始学习c#编程，过路的大神请担待！

    这应该真正算开始学习编程, 安装好了 linux, 开通了博客员的博客, 同时今天也需要把sublime安好, 安装MonoDevelop Codeblocks mysql-workbench 配置好 ...