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. 获取iframe子页面节点，响应浏览器宽高

    获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...

  2. Java Programming Guidelines

    This appendix contains suggestions to help guide you in performing low-level program design and in w ...

  3. 添加并发请求PDF到工作流附件

    本节实现将并发请求输出PDF文件添加到工作流附件 省去了工作流中其他部分,只对附件部分介绍 1.       建立一个类型为Document的Attribute

  4. Assembly测试

    using UnityEngine; using System.Collections; using System.Collections.Generic; using System.Reflecti ...

  5. [SVN]TortoiseSVN工具培训5─常见问题解决

    1.文件提交时状态异常 产生原因:操作不当 解决方法:使用SVN的clean up命令 2.权限不足 产生原因:当前用户权限不足 解决方法:找配置管理员申请权限 3.网络故障 产生原因:无法访问到配置 ...

  6. mysql：JDBC url 参数详解

    MySql链接url参数详解 jdbc:mysql://[host:port],[host:port].../[database][?参数名1][=参数值1][&参数名2][=参数值2]... ...

  7. Request processing failed; nested exception is org.apache.ibatis.binding.BindingException: Invalid b

    Request processing failed; nested exception is org.apache.ibatis.binding.BindingException: Invalid b ...

  8. 原生Js在各大浏览器上、火狐、ie、谷歌、360等出现的不兼容问题。

    1 document.getElementsByName("name")  在Ie低版本,360普通版本,以及火狐低版本不支持. 2 element.innerText 在低版本的 ...

  9. April 16 2017 Week 16 Sunday

    Happiness is a way station between too much and too little. 幸福就是刚刚好. I don't want to talk about it a ...

  10. Cannot start session without errors, please check errors given in your PHP and/or webserver log file and configure your PHP installation properly.错误

    错误如图示: 1.在php的目录下建立个文件夹tmp,这个有权限的问题,如果是ntfs的分区,就一定要添加evryone的控制权限,否则是没用的.2.在php.ini找到session.save_pa ...