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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。