65.9K
CodeProject 正在变化。 阅读更多。
Home

Android addJavaScriptInterface

Sushil Sh.
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (20投票s)

2012 年 6 月 12 日

CPOL

4分钟阅读

viewsIcon

141144

downloadIcon

2688

如何使用 addJavascriptInterface 方法在您的 JavaScript 代码中调用 activity 方法。

引言

大家好。今天我将分享我在 Android 中使用 addJavaScriptInterface 方法的经验。这个类基本上可以帮助我们调用 JavaSscript 函数中的任何 activity 方法。我想在下面提到一些要点：

  • addJavaScriptInterface 方法帮助我们传递值，从网页到您的 Android XML 视图，反之亦然。
  • 您可以从您的网页调用您的 activity 类方法，反之亦然。
  • 当 WebView 中的 HTML 不可信时，这可能是一个非常有用的功能，或者是一个危险的安全问题，因为攻击者可以注入 HTML 来执行您的代码，甚至可能执行攻击者选择的任何代码。
  • 除非 WebView 中的所有 HTML 都是您编写的，否则不要使用 addJavascriptInterface()。

本文涵盖以下几点：

  1. JavaScriptInterface 和方法的实现。
  2. 使用此接口，我将绑定一个 textview 控件。
  3. 我的演示应用程序的源代码。

背景

点击 这里 了解更多关于 Webview 和 addJavascriptInterface 方法的信息。

Using the Code

我将使用 Eclipse IDE，并且假设您对使用 Eclipse IDE 进行 Android 开发有一些经验。我将创建一个名为 JavaScriptInterfaceDemo 的新项目。创建后，我将在我的 AndroidManifest.xml 文件中添加 internet 的用户权限。

<uses-permission android:name="android.permission.INTERNET"/>

然后，我在我的 asset 文件夹中创建了一个名为 www 的文件夹。之后，我在 www 文件夹中创建了一个名为 index.html 的文件。我在我的名为 main.xml 的布局文件中使用了 webview 和 textview 控件。我的 main.xml 代码如下所示。

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

在 main.xml 文件中，我使用了父布局。它是一个线性布局，在这个布局中我使用了一些被称为 webview、textview 控件和线性布局的子控件和布局。

现在我将在我的 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 类 是一个抽象类，它的实现由 Android 系统提供。它允许访问特定于应用程序的资源和类，以及用于应用程序级操作（例如启动活动、广播和接收意图等）的上调调用。

在构造函数初始化之后，我创建了一个名为 showToast 的方法，该方法带有一个字符串参数。该方法有一个变量 msgeToast 字符串，然后我创建了一个名为 myHandler 的 Handler。点击 这里 了解更多关于 Handlers 的信息。这个 handler 有一个 Post 方法。在方法声明中，我创建了 Runnable 线程类的一个新实例，并且在这个类中我重写了一个 run 方法。此 run 方法设置 textview 控件的值。

现在，我在我的 OnCreate 方法中创建了我的 JavaScriptInterface 类的实例。

final JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(this);

在 JavaScriptInterface 类初始化之后，我在我的 OnCreate 方法中添加了另一行代码

Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");

Webview 提供了 addJavascriptInterface 方法。此方法包含两个参数

  1. 要绑定到 JavaScript 的类实例。
  2. 用于在 JavaScript 中公开实例的名称。

对于 webview，我们需要调用一些设置来启用 JavaScript。

Wv.getSettings().setJavaScriptEnabled(true);

最后，您需要在您的 webview 中提供一个 web URL

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

然后我创建了一个名为 index.html 的 HTML 文件。此 HTML 文件有一个文本框和一个提交按钮。HTML 文件代码如下所示

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

此 HTML 文件有一个名为 init 的 JavaScript 函数。此函数调用 activity 方法。

AndroidFunction.showToast(testVal);

AndroidFunction 是用于在 JavaScript 中公开实例的相同名称。我们已经在 addJavascriptInterface 方法中提供了这个名称。

现在终于运行您的应用程序了。

我还在我的视图中添加了一条 toast 消息。

兴趣点 

这是 addJavascriptInterface 方法提供的一个非常好的特性。但是，在您实现此方法时，您必须更加小心。否则，黑客可以将恶意 HTML 注入到代码中。这是我在开发阶段学到的好东西。我希望你们会喜欢它，并且它将帮助您解决问题。

结论  

有关源代码的更多详细信息，请从本文顶部的链接下载源代码。源代码简单易懂，并附有详细注释。

希望本教程对您有所帮助。

© . All rights reserved.