Android 内嵌 HTML5 并进行交互

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

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

Android调用JavaScript代码有两种方式, 通过WebView对象的loadUrl(String)或evaluateJavascript(String, ValueCallback

// 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页面而非退出页面

原文地址:https://www.cnblogs.com/seliote/p/9312954.html

时间: 2024-08-29 05:04:42

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

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

有一段时间没有瞎折腾了. 这周一刚上班萌主过来反映说:微信里面打开聚客宝.分享功能是能够的(这里是用微信自身的js-sdk实现的).可是在android应用里面打开点击就没反应了:接下来狡猾的丁丁在产品群里AT我说:偶们的产品设计不是一直都被技术给反压制住么?真是气死,呵呵.自己刚好有空又有兴趣,于是研究了下.没曾想竟也研究出来了.事后我对整个操作过程整理了下,方便他人也提升自己. 废话少扯.以下上干货. 我的思路是:在点击h5上的分享图标时.触发js事件,在这里面能够对当前设备的操作系统和浏览

一处折腾笔记:Android内嵌html5添加原生微信分享的解决办法

有一段时间没有瞎折腾了.这周一刚上班萌主过来反映说:微信里面打开聚客宝,分享功能是可以的(这里是用微信自身的js-sdk实现的),但是在android应用里面打开点击就没反应了:接下来狡猾的丁丁在产品群里AT我说:偶们的产品设计不是一直都被技术给反压制住么?真是气死,呵呵.自己刚好有空又有兴趣,于是研究了下,没曾想竟也研究出来了.事后我对整个操作过程整理了下,方便他人也提升自己. 废话少扯,下面上干货. 我的思路是:在点击h5上的分享图标时,触发js事件,在这里面可以对当前设备的操作系统和浏览器

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

cocos2d-x调用android内嵌浏览器打开网页,可以从入口传入网址,C++调用android 的api即可实现.方法也很简单 1. 修改"cocos2dx\platform\win32"下的CCApplication.h和CCApplication.cpp,添加函数 头文件声明 void openURL(const char* pszUrl); cpp文件实现: void CCApplication::openURL(const char* pszUrl) { ShellExe

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

在一个大的Android项目中,由于客户端来不及更新和实现,经常会内嵌一些网页(在一些大型的互联网公司,PC的产品总是跑在客户端的前面),比如活动页面,通常可以内嵌用html5实现的页面,可以适配手机.但是这些网页中有好多链接,但是这些链接有些内容有是我们客户端已经实现的,比如有一个注册链接,其实客户端也实现了注册功能,我们不想再继续跳转到网页注册,而是打开客户端某个注册Activity,可以通过以下方式来实现: xml 文件,如下: java代码如下: ? 1 2 3 4 5 6 7 8 9

关于android h5内嵌网页报TypeError: Object.entries is not a function

android内嵌网页有个tab点击居然没反应,晕了.不过还好只是手里的魅族手机有问题,华为的可以,基本可以确定是兼容性问题 用devtools查看webview网页看到报错信息如下图 很明显了es6的generators的entries函数不支持,然后查看手机的chrome内核版本是51,查了下android chrome内核兼容性如下图,android chrome的兼容性更新如此之慢. 解决吧,本来以为是babel编译转es5的问题,搞了半天不行..最后查看大神的回答才发现:babel只能

关于Unity程序在IOS和Android上显示内嵌网页的方式

近期因为有须要在Unity程序执行在ios或android手机上显示内嵌网页.所以遍从网上搜集了一下相关的资料.整理例如以下: UnityWebCore 从搜索中先看到了这个.下载下来了以后发现这个的原理好像是通过调用浏览器内核.然后将网页渲染到mesh的方式完毕的. 但遗憾的是仅仅支持windows桌面版本号.但还是发出来大家假设有须要能够下载  下载地址: http://pan.baidu.com/s/1nt3FVkd unity-webview 这个是在github上找到的. 是一个kei

Android学习之——如何将GridView内嵌在ScrollView中

最近在做一个项目,有一个需求是在ScrollView中内嵌一个GridView. 刚开始,我是以为能直接内嵌在里面: 1 <ScrollView 2 android:layout_width="match_parent" 3 android:layout_height="0dp" 4 android:layout_weight="5.5"> 5 <GridView 6 android:id="@+id/gridView

【Android】内嵌数据库IDE(可视化操作类)

Android开发的朋友应该对数据库内容的管理深有体会,想看一下放入数据库的内容都不是很方便,要么用root的设备导出来看或用第三方的手机版的ide.但是都要求root之后.最近一直在想android方便快捷的方法,今天刚好弄到了数据库这块.就写了一个Activity专门用来看数据库的,功能就是看对应数据库的表及表中的数据库. 效果图 刚写还没来得及美化,后面在使用过程中再时行完善. DBIDEActivity.java import java.util.ArrayList; import ja

android之在view中内嵌浏览器的方法

我要做的一个东西是在一个页面的中间嵌入浏览器,一开始不知道从哪里开始,因为以前用的都是Textveiw或者editVeiw之类的控件,而它们并不能用来显示网页的内容,怎么办呢? 首先想到的是:是不是有一个用来显示网页的View呢,于是我就在eclipse里xml编辑器里输入<web,哈哈,果然下面有个提示是webVeiw,那么能不能用它呢?于是到网上搜一下它的资料,果然可以的,下面就开始吧. 先在xml里把webview建好,在代码里用findViewById()将其取出来.我的代码是: Web