說明

本文將和大家分享Android中的 addJavaScriptInterface方式。這個類主要能幫助調用你的JavaScript函數中的任意活動方式。其中有如下一些需要注意的地方：

• addJavaScriptInterface方式幫助我們從一個網頁傳遞值到Android XML視圖（反之亦然）。
• 你可以從網頁調用你的活動類方式（反之亦然）。
• 這是一個非常有用的功能，而當WebView中的HTML是不能信賴的，這則是一個非常危險的安全問題，因為攻擊者可以注入HTML執行你的代碼。

• 除非WebView所有HTML都是你寫的，否則不要使用addJavascriptInterface()。

最新版TeeChart for JavaScript/HTML5下載

最新活動推薦：年中大促|在線訂購全場7折起！點擊了解詳情>>

本文包含如下要點：

• 執行JavaScriptInterface及其方式。
• 使用該界面，我們將綁定一個textview（文本視圖）控制。
• demo app的源代碼。

使用代碼

我們將用到一個Eclipse ID，創建一個命名為JavaScriptInterfaceDemo的新項目。創建之后，即添加user permission for internet(用戶互聯網權限）到 AndroidManifest.xml文件中。

&ltuses-permission android:name="android.permission.INTERNET"/>

然后創建一個命名為www的文件夾，之后在該文件夾內創建一個index.html文件。我們已經在名為main.xml的布局文件使用WebView 和textview。main.xml代碼如下：

&lt?xml version="1.0" encoding="utf-8"?>
&ltLinearLayout xmlns:android="//schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >&ltWebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    &ltLinearLayout 
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:orientation="vertical"
	    android:layout_weight="1"> &ltTextView
        
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"       
        android:textAppearance="?android:attr/textAppearanceLarge" />
   &lt/LinearLayout>
&lt/LinearLayout>

在main.xml文件中，我們已經用到一個父布局，它是一個線性布局，如果沒有它，我會用一些子控制和布局。

現在我們將寫更多行到JavaScriptInterfaceDemoActivity.java類。代碼如下：

package my.demo;
import my.demo.R;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;
import android.widget.TextView;
import android.widget.Toast;


public class JavaScriptInterfaceDemoActivity extends Activity {
	private WebView Wv;
	private TextView myTextView;	
	final Handler myHandler = new Handler();
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        setContentView(R.layout.main);
        Wv = (WebView)findViewById(R.id.webView1);
        myTextView = (TextView)findViewById(R.id.textView1);        
        final JavaScriptInterface myJavaScriptInterface
     	= new JavaScriptInterface(this);    	 
    	 
        Wv.getSettings().setLightTouchEnabled(true);
        Wv.getSettings().setJavaScriptEnabled(true);
        Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
        Wv.loadUrl("file:///android_asset/www/index.html"); 
    }
    
    public class JavaScriptInterface {
		Context mContext;

	    JavaScriptInterface(Context c) {
	        mContext = c;
	    }
	    
	    public void showToast(String webMessage){	    	
	    	final String msgeToast = webMessage;	    	
	    	 myHandler.post(new Runnable() {
	             @Override
	             public void run() {
	                 // This gets executed on the UI thread so it can safely modify Views
	                 myTextView.setText(msgeToast);
	             }
	         });

	       Toast.makeText(mContext, webMessage, Toast.LENGTH_SHORT).show();
	    }
    }
}

在Java類文件中，我們已經將一些代碼寫入到oncreate方式。在這個方式中，我們用findViewById方式找到webview 和textview控制。然后創建一個JavaScriptInterface類。該類有一個構建函數，該函數初始化Context類。那么，什么是Context類呢？

Context類是一個抽象類，它允許訪問特定應用資源和類，以及調用應用程序級操作，諸如發起活動、廣播和接收意圖等。

在構建函數初始化后，創建一個名為showToast的方式，該方式有一個變量的msgeToast字符串，然后創建一個名為myHandler的Handler（處理器）。該處理器有一個Post方式，在該方式的聲明中，創建一個新的可運行線程類的實例，在這個類里覆蓋一個運行方式，該運行方式設置textview控制的值。

現在在OnCreate方式中創建一個JavaScriptInterface實例。

在JavaScriptInterface類初始化之后，添加一行到OnCreate方式。

final JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(this);

webview提供addJavascriptInterface方式。該方式包含兩項參數：

• 綁定到JavaScript的類實例。
• 用來顯示JavaScript中的實例的名稱。

對于webview，我們需要弟阿勇一些設置來啟用JavaScript。

Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");

最后，需要在webview中提供一個web URL：

Wv.loadUrl("file:///android_asset/www/index.html");

然后創建一個命名為index.html的HTML文件。該HTML有一個文本框和一個提交按鈕。HTML文件代碼如下：

&lt!DOCTYPE >
&lthtml xmlns="//www.w3.org/1999/xhtml" debug="true">&lthead>&ltmeta http-equiv="Content-Type" content="text/html; charset=utf-8" />&ltmeta name="viewport" 
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">&ltmeta name="apple-mobile-web-app-capable" content="yes">&ltmeta name="viewport" content="target-densitydpi=device-dpi" />&ltscript type="text/javascript">   function init()
           {
        	   var testVal = document.getElementById('mytextId').value;
        	   AndroidFunction.showToast(testVal);
           }
        &lt/script>&lt/head>&ltbody>        
        &ltdiv style="float: left;width: 50%;">   &ltinput type="text" style="width: 180px;" 
                   name="myText" id="mytextId" />   
        &lt/div>&ltdiv style="clear: both;height: 3px;"> &lt/div>&ltdiv>  &ltinput value="submit" type="button" name="submit" 
            id="btnSubmit" onclick="javascript:return init();" /> 
        &lt/div>  
    &lt/body>
&lt/html>

該HTML文件有一個JavaScript函數名為init，該函數調用活動方式。

AndroidFunction.showToast(testVal);

AndroidFunction是同樣的名字，用來顯示JavaScript中的實例。我們已經在addJavascriptInterface方式中給出該名字。

現在運行你的app。