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

2019-12-12 06:38:02

字體：大中小

來源：轉載

供稿：網友

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

我們的應用很簡單，如圖：

2016411174422406.gif (326×62)

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

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中的狀態信息。當WebView第一次被創建時，webSetting中    * 存儲的都為默認值。WebSetting和WebView是一一綁定的。如果webView被銷毀了，那么    * 我們再次調用webSetting中的方法時，會拋出異常。    */   WebSettings webSettings = webView.getSettings();   webSettings.setJavaScriptEnabled(true);   webView.loadUrl("file:///data/js.html");    /***    *webChromeClient是一個比較神奇的東西，其里面提供了一系列的方法，    *分別作用于我們的javascript代碼調用特定方法時執行，我們一般在其內部    *將javascript形式的展示切換為android的形式。    * 例如：我們重寫了onJsAlert方法，那么當頁面中需要彈出alert窗口時，便    * 會執行我們的代碼，按照我們的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() {       Log.i("通知", "調用了該方法哦");       /*        * 通過webView.loadUrl("javascript:xxx")方式就可以調用當前網頁中的名稱        * 為xxx的javascript方法        */       webView.loadUrl("javascript:show()");      }     });     }    }, "chenzheng_java");   } }

注意：

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

2)addJavascriptInterface方法中要綁定的Java對象及方法要運行另外的線程中，不能運行在構造他的線程中，這也是使用Handler的目的。

3）如果你要訪問網絡，請在androidManifest.xml中加上權限<uses-permission android:name="android.permission.INTERNET"></uses-permission>

API
我們在程序中可以看到，android訪問網頁以及與javascript交互主要用到了這么幾個類：

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

默認情況下，webView對javascript和頁面的錯誤都是忽略的。很多時候，如果我們想要加載一個uri，可能我們更多的會使用這種形式：

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

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

2016411174508881.gif (813×187)