`
liaokang.java
  • 浏览: 155041 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

Android JS双向调用

阅读更多
Android手机中内置了一款高性能webkit内核,该内核完美封装到了WebView组件中,而从js中直接调用java方法和在java中直接调用js方法更是让我们看到了WebView的强大,下面这个小例子介绍了怎样在js和java中双向调用方法

1.首先是布局文件main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<WebView
	android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/webView"
	/>
</LinearLayout>



2.在assets目录下新建一个index.html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
    <script type="text/javascript">
    	//data数据类型为字符串,字符串里面是数组,每一个数组元素为一个json对象,例如"[{id:1,name:'张三',phone:'135656461'},{id:2,name:'李四',phone:'1896561'}]"
        function setContactInfo(data)
        {
            var tableObj = document.getElementById("contact");
            var jsonObjects = eval(data);	//通过eval方法处理得到json对象数组
            for(var i=0; i<jsonObjects.length; i++)
            {
                   var jsonObj = jsonObjects[i];	//获取json对象
                   var tr = tableObj.insertRow(tableObj.rows.length);	//添加一行
                   //添加三列
                   var td1 = tr.insertCell(0);
                   var td2 = tr.insertCell(1);
                   var td3 = tr.insertCell(2);
                   
                   td1.innerHTML = jsonObj.id;
                   td2.innerHTML = jsonObj.name;
                   td3.innerHTML = jsonObj.phone;
            }
        }

    </script>
</head>
<!--onload="javascript:myObject.init()调用服务器端init方法-->
<body onload="javascript:myObject.init()">
      <table id="contact">
          <tr>
              <td>编号</td>
              <td>姓名</td>
              <td>电话</td>
          </tr>
      </table>
</body>
</html>


3.接着是Activity
package com.lamp.activity;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;

public class HTMLActivity extends Activity {
	private WebView webView = null;
	public Handler handler = new Handler();
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        webView = (WebView)this.findViewById(R.id.webView);
        //设置字符集编码
        webView.getSettings().setDefaultTextEncodingName("UTF-8");
        //开启JavaScript支持
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new MyObject(this,handler), "myObject");
        //加载assets目录下的文件
        String url = "file:///android_asset/index.html";
        webView.loadUrl(url);
    }
}


4.然后是绑定js的类MyObject
package com.lamp.activity;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.os.Handler;
import android.webkit.WebView;

public class MyObject {
	private Handler handler = null;
	private WebView webView = null;

	public MyObject(HTMLActivity htmlActivity, Handler handler) {
		this.webView = (WebView)htmlActivity.findViewById(R.id.webView);
		this.handler = handler;
	}
	
	public void init(){
		//通过handler来确保init方法的执行在主线程中
		handler.post(new Runnable() {
			
			public void run() {
				//调用客户端setContactInfo方法
				webView.loadUrl("javascript:setContactInfo('" + getJsonStr() + "')");
			}
		});
	}
	
	public static String getJsonStr(){
		try {
			JSONObject object1 = new JSONObject();
			object1.put("id", 1);
			object1.put("name", "张三");
			object1.put("phone", "123456");
			
			JSONObject object2 = new JSONObject();
			object2.put("id", 2);
			object2.put("name", "李四");
			object2.put("phone", "456789");
			
			JSONArray jsonArray = new JSONArray();
			jsonArray.put(object1);
			jsonArray.put(object2);
			return jsonArray.toString();
		} catch (JSONException e) {
			e.printStackTrace();
		}
		return null;
	}
}



运行项目,我们可以看到两位联系人的信息显示在了屏幕上
分享到:
评论
1 楼 hsiunien 2014-09-20  
不能正常调用 init   android4.3上  是否可以提供工程呢?

相关推荐

    Android 和 js调用桥

    这个调试桥允许JavaScript代码在Web视图中调用Android原生功能,同时也支持Android Java代码调用JavaScript中的函数,实现了双向通信。 Android的WebView组件是实现JavaScript与Java交互的基础,它能够加载HTML页面...

    android之webview与js相互调用

    理解如何在Android和JavaScript之间进行双向调用是提升用户体验的关键。无论是加载本地资源、处理点击事件还是执行复杂的业务逻辑,掌握这一技术都将使你的应用更加灵活和强大。在实际开发中,请务必注意安全问题,...

    Android安卓调用本地Js

    要实现Android调用本地Js,我们首先需要创建一个包含JavaScript函数的HTML文件,例如`index.html`,在这个文件中定义我们需要调用的函数。 ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JS Test &lt;script type="text/...

    Android中JS与Java相互调用Demo

    本Demo主要展示了如何实现Android中的JS与Java的双向调用,从而实现两者的无缝对接。以下是对这个Demo的详细解释: 首先,我们要明白JavaScript主要运行在Web环境中,而Java是Android应用的主要编程语言。为了使...

    JS调用Android Native API

    总结来说,JS调用Android Native API是通过Webview组件和`addJavascriptInterface`方法实现的,它使得开发者能够利用JavaScript的便利性和Android的原生功能,构建出功能丰富的混合应用。这种方式不仅简化了开发流程...

    android不使用webview与js交互

    Android应用可以调用服务器上的API,这些API由Node.js或其他后端服务提供,执行JavaScript代码并返回结果。这种方式增加了网络延迟,但避免了在客户端解析JavaScript的开销。 4. **本地服务与WebSocket** 创建一个...

    Android和JavaScript互相调用

    Android中的WebView提供了一个接口,使得Android应用可以直接调用JavaScript函数,同时JavaScript也可以调用Android的方法,实现两者间的双向通信。 一、Android调用JavaScript 1. `WebView.loadUrl("javascript:....

    android中js与java间函数相互调用demo,支持中文传参,无乱码

    本教程将详细讲解如何在Android中实现JS与Java的双向函数调用,以及如何处理中文参数传递时的乱码问题。 1. **WebView组件** Android中的`WebView`组件是实现JavaScript与Java交互的基础。`WebView`可以加载HTML、...

    Android调用JS手顺

    在本文中,我们将探讨如何在Android应用中实现JS与Java的双向调用。 首先,我们来看一下如何在Java中调用JavaScript的方法。Android提供了`WebView`类,该类有一个`loadUrl()`方法,可以用来加载网页内容,同时也...

    Android原生WebView与网页js相互调用

    在Android开发中,WebView是一个非常...通过以上步骤,我们可以实现Android原生与JavaScript的双向通信,充分利用两者的优势,构建更丰富的移动应用。在实际开发中,应根据需求灵活运用这些技巧,并注意安全性问题。

    安卓Android源码——调用JavaScript.zip

    总结来说,"安卓Android源码——调用JavaScript.zip"可能包含的示例代码将涵盖以上各个部分,演示如何在Android应用中加载网页、启用JavaScript、调用JavaScript函数以及实现JavaScript与Java的双向交互。...

    安卓Android源码——安卓Android调用JavaScript.rar

    综上所述,"安卓Android源码——安卓Android调用JavaScript.rar"可能包含了一个示例应用,演示了如何在Android应用中设置WebView、创建JavaScript接口、以及Android与JavaScript之间的双向通信。通过理解和实践这些...

    Android与javascript的双向交互

    - JavaScript调用Android:通过`evalJs()`或`loadUrl()`方法执行JavaScript代码。例如,`webView.loadUrl("javascript:myJSFunction()");` - Android调用JavaScript:通过`addJavascriptInterface()`创建接口后,...

    android与js基本交互

    通过以上方式,Android和JavaScript可以实现双向交互,创建出功能丰富的混合应用程序。在实际开发中,还需要注意安全问题,避免恶意代码的注入,同时优化性能,确保用户体验。在Androidandjs压缩包文件中,可能包含...

    android webview js交互调用

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中内嵌网页内容,并且能够与JavaScript进行交互,实现原生应用与网页的双向通信。本文将深入探讨Android WebView与JavaScript交互调用的相关...

    Android代码-安卓原生调用html和html调用原生

    它是一种技术手段,允许Android应用中的Java代码与HTML页面中的JavaScript进行双向通信。这种通信通常通过WebView组件来实现,WebView是Android系统提供的一种可以加载和显示网页的控件。 **一、Android原生调用...

    Android-借助WebSocket完成Android本地代码调用JavaScript代码的插件

    在Android开发中,有时我们需要实现从Java本地代码调用JavaScript代码的功能,这在混合式应用开发中尤为常见。WebSocket提供了一种实时、双向通信的机制,使得这种跨平台的交互成为可能。本教程将深入探讨如何借助...

    Android Webview 和Javascript交互,实现Android和JavaScript相互调用

    1. **调用JavaScript**:Android应用可以通过`loadUrl`方法执行JavaScript代码,从而实现调用JavaScript函数。 ```java webView.loadUrl("javascript:myJsFunction()"); ``` 这里,`myJsFunction()`是你在网页中...

    Android通过WEBVIEW调用HTTPS

    总的来说,Android通过WebView调用HTTPS涉及到许多步骤,包括设置权限、初始化WebView、处理SSL错误、启用JavaScript支持、加载URL以及处理加载进度等。理解并正确实施这些步骤,能够确保在Android应用中安全、流畅...

    android WebView结合javascript相互调用

    总结来说,Android的WebView提供了强大的能力,让我们可以在原生应用中无缝集成Web内容,并实现Java和JavaScript的双向通信。通过理解和实践这些知识点,开发者可以构建出更丰富的混合型应用程序。

Global site tag (gtag.js) - Google Analytics