一、理论概述

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. Unity(64bit)5.1 打开无故出现框框，纹理不见了

    Unity(64bit)5.1打开无故出现框框,纹理不见了 原来是脚本有误影响了,U3D编辑器打开那一刹那出错

  2. jsp前三章测试

    (选择一项) A: B: C: D: 正确答案是 B ,B/S架构并不是C/S架构的替代品,有些程序例如大型的网络游戏一般使用的是C/S架构. (选择多项) A: B: C: D: 正确答案是 A,C ...

  3. poj1129 Channel Allocation

    Channel Allocation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14361   Accepted: 73 ...

  4. JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  5. asp.net webapi [FromBody]string 获取不到ajax post的数据的解决方法

    webapi中如下([FromBody]string jsonData: public async Task<ResItem> Post([FromBody]string jsonData ...

  6. Dubbo架构设计详解

    from:http://shiyanjun.cn/archives/325.html Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解 ...

  7. 数据库Mark.2

    select count(*) as count,DATE_SUB('2016-10-04',INTERVAL regDay DAY) from result_1005 group by DATE_S ...

  8. 安装包制作工具 SetupFactory使用1 详解

    2014-11-19 Setup Factory 是一个强大的安装程序制作工具.提供了安装制作向导界面,即使你对安装制作不了解,也可以生成专业性质的安装程序.可建立快捷方式,也可直接在 Windows ...

  9. 高性能JavaScript DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用 ...

  10. .NET MVC AjaxHelper

    我们首先必须开启 非入侵式 Ajax:导入Jquery和unobtrusiveAjax文件 已经默认开启客户端验证 和 非侵入式js <add key="ClientValidatio ...