一、理论概述

1.js调用java方法

直接调用WebView的该方法就可以添加接口了,不过先要启动交互

  1. // 启用javascript
  2. mWebView.getSettings().setJavaScriptEnabled(true);
  3. // 添加js交互接口
  4. public void addJavascriptInterface (Object object, String name)

      object是js调用java类的对象，name是对象的别名，在js中可以用这个别名+点语法+方法名就可以调用本地的方法。

　  注意：被js调用的方法不可以定义成私有的，不然js就不能调用

2.java调用js方法

　　直接通过webView.loadUrl("javascript:jsFun('" + msg + "')")就行了.

　　假设js中有一个方法叫jsFun(msg)，则这样就完成了调用

　　// 调用js中的函数：jsFun(msg)
　　webView.loadUrl("javascript:jsFun('" + msg + "')");

二、消息处理

1、遇到Uncaught ReferenceError:...错误

出现该错误不会崩溃，它的意思是java调用js时没有找到调用的方法。万一我们调用的方法不存在，需要做相应的处理怎么办？尝试try ... catch ...抓取一下异常，发现什么都没有抓到...后来仔细看了一下错误Log的TAG，是Web Console，于是看了一下官方文档，终于发现了这么一个方法：

  1. mWebview.setWebChromeClient(new WebChromeClient() {
  2. @Override
  3. public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
  4. // TODO Auto-generated method stub
  5. if (consoleMessage.message().contains("Uncaught ReferenceError")) {
  6. // do something...
  7. }
  8. return super.onConsoleMessage(consoleMessage);
  9. }
  10. });


    这个方法可以监听WebView的控制台消息，然后判断一下消息是否包含“Uncaught ReferenceError”就可以捕获该消息了

2、获取js方法的返回值

仔细观察会发现WebView的loadUrl方法是没有返回值的，那要是想要获取js方法的返回值就该怎么做呢？查了一些资料，发现网上也没有很好的解决办法，后来只能通过回调的方法来实现返回，虽然很不灵活，不过也没有办法...

在loadUrl调用JS的一个方法，然后JS执行方法的时候，再调用Android本地的一个方法，并把返回值作为参数传递下来。

二、例子

1.Android  java代码

//java代码

package com.wytiger.jsdemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.Toast;

/**
* Android WebView 与 Javascript 交互。
*/
public class JsActivity extends Activity {
private WebView webView;

@SuppressLint({ "SetJavaScriptEnabled", "AddJavascriptInterface" })
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_js2);

webView = (WebView) findViewById(R.id.webView);
webView.setVerticalScrollbarOverlay(true);
String uri = "file:///android_asset/js_test2.html";
webView.loadUrl(uri);
// 添加客户端支持
webView.setWebChromeClient(new WebChromeClient());

// 设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);
//  添加js交互接口
webView.addJavascriptInterface(new MyJava(this), "javaObject");
}

private class MyJava {
private Context mContext;

public MyJava(Context context) {
this.mContext = context;
}

// 在js中调用window.javaObject.javaFun(name)，便会触发此方法。
// api17版本以上加上注解
@JavascriptInterface
public void javaFun(String name) {
Toast.makeText(mContext, "我是java方法，被js调用，js传递过来的参数是："+name,
Toast.LENGTH_LONG).show();
}
}

// 在java中调用js代码
public void callJs(View view) {
String msg = ((EditText) findViewById(R.id.input_et)).getText()
.toString();
// 调用js中的函数：jsFun(msg)
webView.loadUrl("javascript:jsFun('" + msg + "')");
}
}

//布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:padding="8dp"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<EditText
android:id="@+id/input_et"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:layout_weight="1"
android:hint="请输入信息" />

<Button
android:text="Java调用js"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="callJs" />
</LinearLayout>

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

2.H5 js代码，将此html文件放入assets文件夹即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>测试Android与H5交互（java与js的交互）</title>
<head>

<style>
body {background-color:#e6e6e6}
.rect
{
color:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
width:100px;
padding:6px;
background-color:#98bf21;
text-decoration:none;
text-align:center;
border:none;
cursor:pointer;
}

.inputStyle {font-size:16px;padding:6px}
</style>
</head>

<body>
<p>这是html页面</p>
<input id = "name_input" class = "inputStyle" type="text"/>
<a class = "rect" onclick="sendInfoToJava()">js调用Java</a>

<script>
function sendInfoToJava(){
//js调用java方法，并传递参数
var value = document.getElementById("name_input").value;
window.javaObject.javaFun(value);
}

//在java中调用此方法
function jsFun(msg){
alert("我是js方法，被java调用，传递过来的参数是："+msg);
}
</script>

</body>
</html>

最后，推荐一个开源库：JsBridge

Android与H5交互（java与js的交互）的更多相关文章

  1. 安卓中java和js如何交互

    1.安卓中java和js如何交互 在Android上怎样实现JAVA和JS交互呢?Android的webview是基于webkit内核的,webview中集成了js与java互调的接口函数,通过add ...

  2. android 与html交互java调js与js调java操作

    1.首先在项目下建一个assets目录(右击app->New->Folder->Assets Flolder),直接放在项目根目录下和res目录同级别(把所html,js,图片,cs ...

  3. Android WebView加载本地html并实现Java与JS交互

    最近做的一个项目中,用到自定义地图,将自定义地图转换成html页面,现在需要做的是如何将本地的html加载到android中,并可以实现交互. 相关讲解: 其实webview加载资源的速度并不慢,但是 ...

  4. java与js交互，相互调用传参

    随着前端技术的发展与H5的广泛使用,移动端采用native+h5的方式越来越多了,对于Android来说就涉及到java与js的交互,相互调用传参等.下面就来看一下java与js交互的简单demo. ...

  5. Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

    前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...

  6. Android 与H5之间的js交互

    之前项目做过一些Android和Html5之间js交互方面的东西,今天有时间就总结一下: 一.为什么要进行js交互: 为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面: ...

  7. android webview js交互 第一节 （java和js交互）

    转载请注明出处         挺帅的移动开发专栏  http://blog.csdn.net/wangtingshuai/article/details/8631835        在androi ...

  8. Android与H5交互

    1.初始化WebView控件 webView = (WebView) findViewById(R.id.webview); 2.设置WebView属性 WebSettings webSettings ...

  9. Android开发学习之路--Java和Js互相调用

      随着前端的火热,以前开发的快速,越来越多的native app在其中融合了h5,就拿淘宝就是很多的h5组成的,一旦出现什么节日,他都可以不用通过更新app来实现界面的改变,而且android和io ...

随机推荐

  1. ubuntu不能登录图形用户界面，游客身份可登陆，命令行可登陆

    ubuntu是13.04版本,我猜其他的版本解决办法大概也一样.当开机进入登陆界面后我们输入密码后并没有进入应该进入的图形用户界面,而是进入一个命令行界面并且一闪而过又回到了登录界面,而已游客的身份却 ...

  2. poj3281 Dining

    Dining Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14316   Accepted: 6491 Descripti ...

  3. k-d tree 学习笔记

    以下是一些奇怪的链接有兴趣的可以看看: https://blog.sengxian.com/algorithms/k-dimensional-tree http://zgjkt.blog.uoj.ac ...

  4. SPM FDR校正

    来源: http://blog.sciencenet.cn/blog-479412-572049.html,http://52brain.com/thread-15512-1-1.html SPM8允 ...

  5. [转]Class 'Think\Log' not found

    转自:http://www.thinkphp.cn/topic/26815.html 解决偶尔出现 Class 'Think\Log' not found 的奇葩问题(并非每次必现,偶尔删除缓存可以解 ...

  6. SharePoint GroupedItemPicker Control

    这个控件SharePoint用来选择Field ,和Content Type, 以下是一个完整的示例. <SharePoint:GroupedItemPicker ID="Select ...

  7. C# 生成windows 服务打包程序

    c# 开发windows服务程序. 一个简单的服务程序示例. 归纳了几点.有不足之处,请赐教. 一.创建服务程序 1. 菜单栏“文件”--->“新建”--->“项目”,在项目类型中选择“w ...

  8. spring mvc4：异常处理

    前面学习过struts2的异常处理,今天来看下spring mvc4的异常处理: 一.Servlet配置文件修改 <bean id="exceptionResolver" c ...

  9. 帆软FineReport如何使用程序数据集

    大多数情况下,FineReport直接在设计器里使用“数据集查询”,直接写SQL就能满足报表要求,但对于一些复杂的报表,有时候SQL处理并不方便,这时可以把查询结果在应用层做一些预处理后,再传递给报表 ...

  10. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--模块开发

    之前文章中给大家说明了下我这个小小的想法,发现还是有不少人的支持和关注.你们的鼓励是对我最大的支持. 我总结了了大家的评论,有以下几个问题: 1.希望有更多的文档说明. 2.希望介绍下Orchard的 ...