android和js之间的简单交互

时间 2019-11-16

原文原文链接

1，android代码：（我这里用的是phonegap） javascript

package com.example.com.yjb.phonegap.test;

import android.os.Bundle;
import android.view.Window;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

import com.phonegap.DroidGap;
/**
 * 这个例子是：先用js代码调用android代码，而后android在回调js代码
 * @author YUJIAN
 *
 */
public class MainActivity extends DroidGap {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		super.onCreate(savedInstanceState);
		this.loadUrl("file:///android_asset/www/index.html");
		
		//给js设置调用的方法
		this.appView.addJavascriptInterface(new JavaScripdtObject(), "android");
		
	}
	
	/**
	 * 供js调用的对象方法
	 * 
	 * @author YUJIAN
	 * 
	 */
	public class JavaScripdtObject {

		@JavascriptInterface
		public void runAndroidMethod(String str) {
			
			Toast.makeText(MainActivity.this, "被js调用"+str, Toast.LENGTH_SHORT)
					.show();
			
			
			//android调用js代码
			MainActivity.this.appView.loadUrl("javascript:getNode3()");
		}
	}

}

2，js代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>木德html5</title>


</head>

<body>


<!--

document:表明的是标记型文档对象。

获取该对象的目的其实就是为了获取文档中的内容（标签，数据，属性...）
并且拿到都是对象。这个也称为节点。


注意：按照这个思想，就能够明确，只要想要操做标记型文档(html，xml),第一步就是获取该文档的对象，document。

只有拿个这个对象，才能够对标记型文档中的内容进行操做。


经过document对象获取节点的方式。

getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。 
			就是经过标签中的属性获取该标签节点对象。返回的就是该标签对象。
            注意：id属性值要保证页面惟一，若是不惟一，获取到的是第一个id所属的节点。
            
            
getElementsByName 根据 NAME 标签属性的值获取对象的集合。
			就是经过标签中的name属性来获取节点，可是name属性值容易重复，好比单选框的性别。
            因此获取到的节点不惟一，那么这个方法返回的是一个节点数组。
             
getElementsByTagName 获取基于指定元素名称的对象集合。
			 就是根据标签的名称来获取节点，名称会重复，因此该方法返回的是该名称节点数组。
             
-->


<script type="text/javascript">
function getNode3()
{
	var nodes = document.getElementsByTagName("span");	
	for(var x=0;x<nodes.length; x++)
	{
		alert(nodes[x].innerText);
	}
}

//获取指定区域表格中的span标签
function getNode4()
{
	var str = "javascrip木德";
	
	//调用android代码
	window.android.runAndroidMethod(str);
}
</script>


<input type="button" value="获取页面中的节点" onclick="getNode4()" />


	<div id="divid" >这是一个div节点</div>
	<input type="text" name="user" />
	<span>这是一个span区域</span>
	<span>这是第二个span区域</span>
	<table>
		<tr>
	    	<td><span>这是单元格中的span</span></td>
	    </tr>
	</table>
</body>
</html>