快捷導(dǎo)航

淺談Android程序與JavaScript腳本的交互

更新時(shí)間：2016年04月11日 17:47:17 作者：chenzheng_java

這篇文章主要介紹了Android程序與JavaScript的腳本交互,利用js開發(fā)安卓應(yīng)用也是近來的熱門話題,特別是隨著Facebook的React Native的開源及對(duì)Android的官方支持,需要的朋友可以參考下

我們都知道，手機(jī)時(shí)代的來臨的主要標(biāo)志是啥？能夠方便的接入互聯(lián)網(wǎng)！互聯(lián)網(wǎng)展現(xiàn)給我們的方式一般都是網(wǎng)頁，網(wǎng)頁中又必不可少的擁有javascript，所以說，android提供對(duì)javascript的支持那是迫在眉睫了，幸好，android早就給我們提供了無縫連接。讓我們可以通過android與javascript進(jìn)行交互。

我們的應(yīng)用很簡單，如圖：

2016411174422406.gif (326×62)

我們有一個(gè)輸入框，旁邊有個(gè)按鈕，點(diǎn)擊按鈕就會(huì)提示我們輸入的內(nèi)容。當(dāng)然這只是html中最簡單的程序了，但是你將這個(gè)程序放入android手機(jī)中訪問下試試，它是不會(huì)進(jìn)行提示的。要想讓其以android的形式提示用戶，我們就需要用到android和javascript的交互。對(duì)了，這里展示的是一個(gè)網(wǎng)頁哦，代碼如下：

js.html

<html> 
<head> 
<title>js交互android</title> 
<mce:script type="text/javascript"><!-- 
  
 function show(){ 
 var a = document.getElementById("text").value; 
 alert(a); 
  
 } 
// --></mce:script> 
</head> 
<body> 
<form action=""> 
 <input type="text" id="text" value=""/> 
 <input type="button" id="button" onclick="window.chenzheng_java.show()" value="clickme"/> 
 
</form> 
 
</body> 
</html>

再看看我們的activity代碼：

package cn.com.chenzheng_java.js; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.os.Handler; 
import android.util.Log; 
import android.webkit.JsResult; 
import android.webkit.WebChromeClient; 
import android.webkit.WebSettings; 
import android.webkit.WebView; 
import android.widget.Toast; 
 
public class JavaScriptActivity extends Activity { 
 WebView webView; 
 Handler handler = new Handler(); 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.main); 
 
  webView = (WebView) findViewById(R.id.webView1); 
  /** 
   * webSettings 保存著WebView中的狀態(tài)信息。當(dāng)WebView第一次被創(chuàng)建時(shí)，webSetting中 
   * 存儲(chǔ)的都為默認(rèn)值。WebSetting和WebView是一一綁定的。如果webView被銷毀了，那么 
   * 我們?cè)俅握{(diào)用webSetting中的方法時(shí)，會(huì)拋出異常。 
   */ 
  WebSettings webSettings = webView.getSettings(); 
  webSettings.setJavaScriptEnabled(true); 
  webView.loadUrl("file:///data/js.html"); 
 
  /*** 
   *webChromeClient是一個(gè)比較神奇的東西，其里面提供了一系列的方法， 
   *分別作用于我們的javascript代碼調(diào)用特定方法時(shí)執(zhí)行，我們一般在其內(nèi)部 
   *將javascript形式的展示切換為android的形式。 
   * 例如：我們重寫了onJsAlert方法，那么當(dāng)頁面中需要彈出alert窗口時(shí)，便 
   * 會(huì)執(zhí)行我們的代碼，按照我們的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提供一個(gè)回調(diào)的接口，這里要注意，一定要在單獨(dú)的線程中實(shí)現(xiàn),要不會(huì)阻塞線程的 
   * addJavascriptInterface(Object obj, String interfaceName) 
   * obj代表一個(gè)java對(duì)象，這里我們一般會(huì)實(shí)現(xiàn)一個(gè)自己的類，類里面提供我們要提供給javascript訪問的方法 
   * interfaceName則是訪問我們?cè)趏bj中聲明的方法時(shí)候所用到的js對(duì)象，調(diào)用模式為window.interfaceName.方法名() 
   */ 
  webView.addJavascriptInterface(new Object() { 
 
   public void show() { 
    handler.post(new Runnable() { 
     @Override 
     public void run() { 
      Log.i("通知", "調(diào)用了該方法哦"); 
      /* 
       * 通過webView.loadUrl("javascript:xxx")方式就可以調(diào)用當(dāng)前網(wǎng)頁中的名稱 
       * 為xxx的javascript方法 
       */ 
      webView.loadUrl("javascript:show()"); 
     } 
    }); 
 
   } 
 
  }, "chenzheng_java"); 
 
 } 
}

注意：

1)為了讓W(xué)ebView從apk文件中加載assets，Android SDK提供了一個(gè)schema，前綴為"file:///android_asset/"。WebView遇到這樣的schema，就去當(dāng)前包中的assets目錄中找內(nèi)容。如上面的"file:///android_asset/demo.html"

2)addJavascriptInterface方法中要綁定的Java對(duì)象及方法要運(yùn)行另外的線程中，不能運(yùn)行在構(gòu)造他的線程中，這也是使用Handler的目的。

3）如果你要訪問網(wǎng)絡(luò)，請(qǐng)?jiān)赼ndroidManifest.xml中加上權(quán)限<uses-permission android:name="android.permission.INTERNET"></uses-permission>

API
我們?cè)诔绦蛑锌梢钥吹?，android訪問網(wǎng)頁以及與javascript交互主要用到了這么幾個(gè)類：

WebView ：我們可以認(rèn)為它就是一個(gè)瀏覽器，會(huì)對(duì)用戶訪問的網(wǎng)址進(jìn)行解析，下載，渲染……，然后返回給用戶一個(gè)網(wǎng)頁。其內(nèi)部使用的是webkit渲染引擎，它還包含了一些我們經(jīng)常使用的功能，比如放大、縮小網(wǎng)頁（需要在webSetting中先設(shè)置WebSettings.setBuiltInZoomControls(boolean)）；前進(jìn)、后退……。

默認(rèn)情況下，webView對(duì)javascript和頁面的錯(cuò)誤都是忽略的。很多時(shí)候，如果我們想要加載一個(gè)uri，可能我們更多的會(huì)使用這種形式：

Uri uri = Uri.parse("http://www.example.com"); Intent intent = new Intent(Intent.ACTION_VIEW, uri); startActivity(intent);

api中為我們提供了一個(gè)通過webView加載頁面的例子，

2016411174508881.gif (813×187)