第99章、Android调用Javascript（从零开始学Android）

在某些Android应用中，使用Javascript调用Android中的方法也是会用到的。
　　（1）用WebView来显示HTML代码；
　　（2）允许WebView执行JavaScript
　　　　 webView.getSettings().setJavaScriptEnabled(true);
　　（3）获取到HTML文件，也可从网络中获取
　　　　 webView.loadUrl("file:///android_asset/index.html"); （注意：index.html文件要存放在assets文件夹中）
　　（4）为javascript提供一个回调的接口，这里要注意，一定要在单独的线程中实现,要不会阻塞线程的
　　　　 addJavascriptInterface(Object obj, String interfaceName) 中obj代表一个java对象，这里我们一般会实现一个自己的类，类里面提供我们要提供给javascript访问的方法
interfaceName则是访问我们在obj中声明的方法时候所用到的js对象，调用模式为window.interfaceName.方法名()
　　（5）webChromeClient提供了一系列与javascript相对应的方法：代码调用特定方法时，我们一般在其内部将javascript形式的展示切换为android的形式。

一、设计界面

　　1、布局文件

　　打开res/layout/activity_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="match_parent" 
android:layout_height="match_parent" > 
	<WebView 
		android:id="@+id/webview" 
		android:layout_width="match_parent" 
		android:layout_height="match_parent" />

</LinearLayout>

二、程序文件

　　1、MainActivity.java

　　打开“src/com.genwoxue.webviewandroidjs/MainActivity.java”文件。
　　然后输入以下代码：

package com.genwoxue.webviewandroidjs;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends Activity {
    private WebView webView=null;
    Handler handler = new Handler();  
    
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //实例化WebView
        webView = (WebView) findViewById(R.id.webview);
        //允许JavaScript执行
        webView.getSettings().setJavaScriptEnabled(true);
        //加载HTML文件：注意存放到至assets文件夹，你也可以放到互联网。
        webView.loadUrl("file:///android_asset/index.html");
        

        //webChromeClient提供了一系列与javascript相对应的方法
        //代码调用特定方法时，我们一般在其内部将javascript形式的展示切换为android的形式。  
        //例如：我们重写了onJsAlert方法，那么当页面中需要弹出alert窗口时，便会在Android中以Toast的形式提示用户。 
        class MyWebChromeClient extends WebChromeClient {  
            @Override  
            public boolean onJsAlert(WebView view, String url, String message,  
                    JsResult result) {  
                Toast.makeText(getApplicationContext(), message,  
                        Toast.LENGTH_LONG).show();  
                return true;  
            }  
        }  
  
        webView.setWebChromeClient(new MyWebChromeClient());  
        
        //为javascript提供一个回调的接口，这里要注意，一定要在单独的线程中实现,要不会阻塞线程的 
        //addJavascriptInterface(Object obj, String interfaceName) 
        // obj代表一个java对象，这里我们一般会实现一个自己的类，类里面提供我们要提供给javascript访问的方法 
        // interfaceName则是访问我们在obj中声明的方法时候所用到的js对象，调用模式为window.interfaceName.方法名() 
        webView.addJavascriptInterface(new Object() {  
            public void show() {  
                handler.post(new Runnable() {  
                    @Override  
                    public void run() {  
                        //通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称 
                        // 为xxx的javascript方法 
                        webView.loadUrl("javascript:show()");  
                    }  
                });  
            }  
  
        }, "AndroidJs");  
    }
}

　　2、index.html
　　新建“assets/index.html”文件。
　　然后输入以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
      <title>Calculate</title>
      
  </head>

  <script language="JavaScript">
     function show(){
      	var n=document.getElementById("number").value;
        alert(n*n);
     }
  </script> 

  <body>
 
     <input type="text" id="number">
     <input type="submit" value="Calculate" onClick="show()">
  </body>
</html>

三、配置文件

　　采用“AndroidManifest.xml”默认生成文件。

四、运行结果