JavaScript在現在的網頁設計中用得很多,Android 的WebView可以載入網頁,WebView也設計了與JavaScript通信的橋梁。這篇主要介紹一下WebViewk控件如何和JavaScript進行交互。
WebView:
WebView和網頁相關的主要有一下幾個方法:
setWebViewClient(); ? ?
setWebChromeClient();
addJavascriptInterface();
loadUrl();
setWebViewClient():設置一個WebViewClient的對象,通過這個對象的幾個回調方法,可以知道當前網頁的狀態。
setWebViewChromeClient(): 設置一個WebChromeClient對象,JavaScript調用的一些內建方法都是通過這個對象來處理的。
addJavascriptInterface(): 設置JavaScript的接口,有兩個參數,第一個一般是一個Object對象,里面實現的方法都是網頁里JavaScript可以調用到的,第二個參數是一個字符串,最后到JavaScript就相當于一個對象名,JavaScript通過這個對象名調用第一個參數里面實現的方法。要使這個方法生效,要通過WebView的getSettings()方法獲取WebSettings對象,設置JavaScript使能?setJavaScriptEnabled(true)。
loadUrl():載入相應網頁。
下面實現了一個簡單的Demo(最后有效果圖): 主要的流程是載入了asset目錄下的一個內置網頁,點擊網頁上的Click按鈕,會調用通過addJavascriptInterface方法設置下去的Object的show()方法,這個方法里通過loadUrl的方式調用JavaScript的javaScriptshow()方法,這個方法里又調用了Java的result()方法,result方法里顯示了一個Toast.需要注意的是show()方法的回調和result()方法的回調是不在主線程的。
MainActivity.java


1 package com.example.administrator.webviewl; 2 3 import android.graphics.Bitmap; 4 import android.os.Handler; 5 import android.support.v7.app.AppCompatActivity; 6 import android.os.Bundle; 7 import android.util.Log; 8 import android.webkit.JavascriptInterface; 9 import android.webkit.JsResult; 10 import android.webkit.WebChromeClient; 11 import android.webkit.WebResourceError; 12 import android.webkit.WebResourceRequest; 13 import android.webkit.WebView; 14 import android.webkit.WebViewClient; 15 import android.widget.Toast; 16 17 public class MainActivity extends AppCompatActivity { 18 19 private static final String TAG = "MainActivity.TAG"; 20 WebView mWebView; 21 Handler mHander = new Handler(); 22 @Override 23 protected void onCreate(Bundle savedInstanceState) { 24 super.onCreate(savedInstanceState); 25 setContentView(R.layout.activity_main); 26 mWebView = (WebView)findViewById(R.id.mWebView); 27 initWebView(); 28 } 29 30 public void initWebView() { 31 mWebView.getSettings().setJavaScriptEnabled(true); 32 mWebView.setWebViewClient(new WebViewClientCustom()); 33 mWebView.addJavascriptInterface(new Object() { 34 @JavascriptInterface 35 public void result(final String result) { 36 Log.d(TAG,"javaScript 調用java的方法 返回結果 result = " + result); 37 mHander.post(new Runnable() { 38 @Override 39 public void run() { 40 if (result.length() > 0) Toast.makeText(MainActivity.this,"你輸入了: " + result,Toast.LENGTH_SHORT).show(); 41 } 42 }); 43 } 44 @JavascriptInterface 45 public void show() { 46 Log.d(TAG,"JavaScript 調用java show()"); 47 mHander.post(new Runnable() { 48 @Override 49 public void run() { 50 Log.d(TAG,"java 調用 javaScript javaScriptshow()"); 51 mWebView.loadUrl("JavaScript:javaScriptshow()"); 52 } 53 }); 54 return; 55 } 56 },"JavaScriptL"); 57 mWebView.loadUrl("file:///android_asset/index.html"); 58 } 59 60 public class WebViewClientCustom extends WebViewClient { 61 @Override 62 public void onPageStarted(WebView view, String url, Bitmap favicon) { 63 Log.d(TAG,"onPageStarted"); 64 super.onPageStarted(view, url, favicon); 65 } 66 67 @Override 68 public void onPageFinished(WebView view, String url) { 69 Log.d(TAG,"onPageFinished"); 70 super.onPageFinished(view, url); 71 } 72 73 @Override 74 public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) { 75 Log.d(TAG,"onReceivedError"); 76 super.onReceivedError(view, request, error); 77 } 78 } 79 }
index.html ?內置的網頁
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus?"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>javaScript</title> 10 <script type="text/javaScript"> 11 function javaScriptshow() { 12 var a = document.getElementById("text").value; 13 JavaScriptL.result(a); 14 } 15 </script> 16 </head> 17 <body style="text-align:center;margin-top:100px"> 18 <p > Android javaScript學習</p> 19 <form action=""> 20 <input type="text" id = "text" value=""/> 21 <input type="button" onclick="window.JavaScriptL.show()" value="Click" /> 22 </form> 23 </body> 24 </html>
實現的效果圖如下: