一、理论概述

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. web 小知识

    document.write和innerHTML的区别   document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open.每次写完关 ...

  2. 这段时间对c#和java的感受

    这段时间对c#和java的感受 虽然很多书上说语法相似,但实际这是一个接近于门外汉的看法 真正的不同是 c#对更贴近系统API,      而java倡导跨平台 因而c#语法关键字更多,更细, 而ja ...

  3. Win7安装visual c++ 2015 redistributable x64失败

    from:http://www.fxyoke.cn/forum.php?mod=viewthread&tid=1171 在win7中安装visual c++ 2015 redistributa ...

  4. js checkbox 选中判断

    var isSelect = ""; isSelect = $("#tblImgList" + " input[type='checkbox']&qu ...

  5. 重构Web Api程序(Api Controller和Entity)

    Insus.NET较习惯做法,是在程序完成之后,抽一些少时间对写好的代码重新审视.比如这些天写的Web Api的程序来说,发现有很多值得重构代码. 开发ASP.NET MVC程序,与数据相关有关联的一 ...

  6. 纯html的table打印注意事项

    1. 在firefox下,每页均会打印重复thead(表头),tfoot(表尾)的内容:IE8下无效(其它IE版本未测试) 2. 分页的处理 @media print {     .page-brea ...

  7. Windbg调优Kafka.Client内存泄露

    从来没写过Blog,想想也是,工作十多年了,搞过N多的架构.技术,不与大家分享实在是可惜了.另外,从传统地ERP行业转到互联网,也遇到了很所前所未有的问题,原来知道有一些坑,但是不知道坑太多太深.借着 ...

  8. 工作随笔——Java调用Groovy类的方法、传递参数和获取返回值

    接触Groovy也快一年了,一直在尝试怎么将Groovy引用到日常工作中来.最近在做一个功能的时候,花了点时间重新看了下Java怎么调用Groovy的方法.传递参数和获取返回值. 示例Groovy代码 ...

  9. Java 基础【08】.class getClass () forName() 详解

    类名.class是Class对象的句柄,每个被加载的类,在jvm中都会有一个Class对象与之相对应. 如果要创建新的对象,直接使用Class对象的局部class.forName就可以了,不需要用ne ...

  10. 大学回顾和C与PHP之路

    我去年毕业,从事PHP学习和开发一年多. background:medical muti-media electric web; 先讲一下我的背景吧,我大学的学校是一个医科学校,然而专业是计算机动漫设 ...