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. 也谈ThreadLocal

    欢迎赐教博客地址(http://www.cnblogs.com/shizhongtao/p/5358411.html) 对于ThreadLocal使用,网上一堆一堆的.什么内存泄露,什么线程不安全.这 ...

  2. Shader学习笔记整理

    1.常用矩阵 UNITY_MATRIX_V 视口矩阵 UNITY_MATRIX_P 投影矩阵 UNITY_MATRIX_MV 模型矩阵 * 视口矩阵 UNITY_MATRIX_MVP 模型矩阵 * 视 ...

  3. strdup和strndup函数

    首先说明一下:这两个函数不建议使用,原因是返回内存地址把释放权交给别的变量,容易忘记释放. 一.strdup函数 函数原型 头文件:#include <string.h> char *st ...

  4. ALPS语言学校(西雅图)|ALPS Language School (Seattle)

    http://www.swliuxue.com/school-3879.html 所属国家: 美国 所在省洲: 华盛顿州 所在城市: 华盛顿州 建校时间: 1992年 学校类型: 院校 学校类别: 私 ...

  5. 使用Atom编写Makedown

    Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器. Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 作为一个Gi ...

  6. ABAP和Java SpringBoot的单元测试

    ABAP 在ABAP类里,本地类(Local Class)里用关键字FOR TESTING声明过的方法, 在单元测试启动后会自动被调用到. Spring Boot 在Spring及Spring Boo ...

  7. Leetcode 46 47 Permutation, 77 combination

    Permutation class Solution { List<List<Integer>> res = new ArrayList<List<Integer& ...

  8. SPOJ - ORDERS--- Ordering the Soldiers---根据逆序对求原数组

    题目链接: https://vjudge.net/problem/SPOJ-ORDERS 题目大意: 根据每个数字的逆序对求出原数组 解题思路: 举个例子: n = 5 a[ n ] = { 0, 1 ...

  9. python 爬糗事百科

    糗事百科网站段子爬取,糗事百科是我见过的最简单的网站了!!! #-*-coding:utf8-*- import requests import re import sys reload(sys) s ...

  10. C sharp #003# 面向对象编程基本构件

    饮水思源:金老师的自学网站 索引 类的属性 简化字段/属性的初始化 命名空间 程序集 类的属性 字段+get/set方法=属性 (之前都是把字段和属性混着用..) 经典写法: using System ...