Android与JS相互调用的方法
目录
- Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数。
- 下面是JS同Android的通信，JS调用Android的函数方法。
Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数。
private void InitWebView() {
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//把js弹窗转化成安卓弹窗
SetJavaScriptAlertEnable();
// 先载入html代码
// 格式规定为:file:///android_asset/文件名.html
// 只需要将第一种方法的loadUrl()换成下面该方法即可
// Android版本变量
//mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象
mWebView.loadUrl("file:///android_asset/javascript.html");
//SetWebChromeClient()//处理JS调用Android函数的方法在第二部分解释
}
首先先初始化webview
第二步对webview基本初始化
第三部设置JS交互权限
其余有明确注释
loadurl是加载html网页端的
我们以button点击开始执行js事件为例
首先app/src/main下创建assets文件
下面是javascript.html文件我们在引入文件时需要将文件放到所在的Android项目的/project_home/app/src/main/assets/javascript.html 下就可以使用了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
<h1 id="ip">
你好这里已经调用过文件了
</h1>
<button onclick="callJS()">调用弹窗</button>
<button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>
<button type="button" id="button2" onclick="clickprompt()">点击调用Androidtest代码</button>
<script>
function callJS() {
alert("Android调用了JS的callJS方法");
}
function change() {
document.getElementById('ip').innerText = "真的难啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊a";
}
function clickprompt(){
var result=prompt("js://demo?arg1=111&arg2=222");
alert("demo " + result);
}
function callAndroid(){
// 由于对象映射，所以调用test对象等于调用Android映射的对象
test.hello("js调用了android中的hello方法");
}
</script>
// JS代码
<script src="./1/roslib.min.js"></script>
<script src="./1/RoboX.js"></script>
</head>
</html>
将JS弹窗改为Android弹窗方法SetJavaScriptAlertEnable();
private void SetJavaScriptAlertEnable() {
// 由于设置了弹窗检验调用结果,所以需要支持js对话框
// webview只是载体，内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
//设置响应js 的Alert()函数
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
//设置弹窗
AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(true);
b.create().show();
return true;
}
});
}
初始化界面用button测试程序是否能通信。
private void InitView() {
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 通过Handler发送消息
mWebView.post(new Runnable() {
@Override
public void run() {
// 注意调用的JS方法名要对应上
// 调用javascript的callJS()方法
final int version = Build.VERSION.SDK_INT;//获取系统版本
//我们需要判断当前系统版本。为了尽可能减少错误我们使用了两种方式来实现调用JS方法。
if (version < 18) {
mWebView.loadUrl("javascript:callJS()");
} else {
// Toast.makeText(getApplicationContext(), "单击完成", Toast.LENGTH_SHORT).show();
//Toast.makeText(getApplicationContext(), ans.toString(), Toast.LENGTH_SHORT).show();
mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
mWebView.evaluateJavascript("javascript:change()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
}
});
}
});
}
下面是JS同Android的通信，JS调用Android的函数方法。
将上边webview初始化中取消注释SetWebChromeClient()同时取消注mWebView.addJavascriptInterface(new AndroidtoJs(), "test");重新创建一个类继承于Object同时创建的test对象在js中同样如此像HTML文件中的
function callAndroid(){
// 由于对象映射，所以调用test对象等于调用Android映射的对象
test.hello("js调用了android中的hello方法");
}
下面是创建的类AndroidtoJS
import android.webkit.JavascriptInterface;
public class AndroidtoJs extends Object {
@JavascriptInterface
public void hello(String msg) {
System.out.println("JS调用了Android的hello方法woc");
}
}
SetWebChromeClient()是处理JS和Android之间通信的在下边有详细解释
private void SetWebChromeClient() {
mWebView.setWebChromeClient(new WebChromeClient() {
// 拦截输入框(原理同方式2)
// 参数message:代表promt（）的内容（不是url）
// 参数result:代表输入框的返回值
@RequiresApi(api = Build.VERSION_CODES.HONEYCOMB)
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
// 根据协议的参数，判断是否是所需要的url(原理同方式2)
// 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
//假定传入进来的 url = "js://demo?arg1=111&arg2=222"（同时也是约定好的需要拦截的）
Uri uri = Uri.parse(message);
// 如果url的协议 = 预先约定的 js 协议
// 就解析往下解析参数
if (uri.getScheme().equals("js")) {
// 如果 authority = 预先约定协议里的 webview，即代表都符合约定的协议
// 所以拦截url,下面JS开始调用Android需要的方法
if (uri.getAuthority().equals("demo")) {
//
// 执行JS所需要调用的逻辑
System.out.println("js调用了Android的方法");
// 可以在协议上带有参数并传递到Android上
HashMap<String, String> params = new HashMap<>();
Set<String> collection = uri.getQueryParameterNames();
//参数result:代表消息框的返回值(输入值)
result.confirm("js调用了Android的方法成功啦");
}
return true;
}
return super.onJsPrompt(view, url, message, defaultValue, result);
}
// 通过alert()和confirm()拦截的原理相同，此处不作过多讲述
// 拦截JS的警告框
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
//拦截JS的确认框
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
return super.onJsConfirm(view, url, message, result);
}
}
);
}
我们不是采用直接调用的方法而是采用拦截的方法
第一次接触Android项目有的地方写的可能有问题有的地方说的也可不能不准确，大家下方积极留言，第一次写博客排版也没搞好大家见谅吧哈哈哈哈。
以上就是Android与JS相互通信的方法的详细内容，更多关于Android与JS相互通信的资料请关注我们其它相关文章！
相关推荐
-
Android与JS之间跨平台异步调用实例详解
Android与JS之间跨平台异步调用 为什么突然要搞这个问题呢? 在开发浏览器的时候遇到这个狗血的问题,花了将近1天的时间才想到这个解决方案,Android与JavaScirpt互调. 因为接口是抓取的别人的,所以出现了JS跨域问题,Android闪亮登场搞定了. GIF动画演示 WebView相关设置 WebSettings mWebSettings = getSettings(); mWebSettings.setDefaultTextEncodingName("UTF-8"
-
Android中实现WebView和JavaScript的互相调用详解
前言 很多复杂的UI界面,在Android中需要配合大量xml代码和java代码实现,而使用HTML5可以非常轻松的实现出来,而且具有很好的跨平台特性,让我们不必为了多个平台而重写代码,H5学习成本也较低,上手快.虽然从目前来说H5在Android系统中的速度可能还欠佳一些,但相信随着手机的性能不断的提高,这些问题都会被解决 使用H5开发Android的UI界面,最重要的就是如何实现Js代码和Java代码之间的互相调用了 在讲解之前,让我们先把项目跑起来 效果图: 准备好index.html文件
-
Android WebView使用方法详解 附js交互调用方法
目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1
-
JS调用Android、Ios原生控件
在上一篇博客(详解JS与APP原生控件交互)中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时,提高代码质量,实现两者在网页端代码的统一. 首先我们先看一下Ios调用JS的方法实现: //无参调用 function SwiftCallJs1(){} //有参调用 function SwiftCallJs2(name, message){} 紧接着我们看一下And
-
三步搞定:Vue.js调用Android原生操作
第一步: Android对Js的接口,新建AndroidInterfaceForJs.js import android.content.Context; import android.os.Build; import android.os.Handler; import android.os.Looper; import android.support.annotation.RequiresApi; import android.util.Log; import android.webkit.
-
Android webview和js互相调用实现方法
Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5
-
Android总结之WebView与Javascript交互（互相调用）
前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用到两者之间传递参数的情况,今天就来总结一下两者之间如何互相调用.本篇主要介绍WebView与Javascript交互数据,关于如何将H5网页呈现在WebView上可以参考这篇博客文章:Android总结之Web
-
Android WebView的使用方法及与JS 相互调用
Android WebView的使用方法及与JS 相互调用 1.添加网络权限 <uses-permission android:name="android.permission.INTERNET" /> 2.WebSettings 对访问页面进行设置. WebView mWebView = new WebView(this); WebSettings webSettings = mWebView .getSettings();//支持获取手势焦点,输入用户名.密码或其他 m
-
Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】
本文实例讲述了Android编程使用WebView实现与Javascript交互的方法.分享给大家供大家参考,具体如下: Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用. 效果图: (一)Android部分: 布局代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu
-
DCloud的native.js调用系统分享实例Android版代码
DCloud的Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术 Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成,今天为大家分享一下利用native.js如何调用系统分享功能的Android版实例代码 function share(shareTip,shareText){ //导入Java类对象 var Context = plus.android.importClass("android.c