Android WebView和JavaScript互動，androidwebview

最後更新：2016-07-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　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 @Override23 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 @JavascriptInterface35 public void result(final String result) {36 Log.d(TAG,"javaScript 調用java的方法返回結果 result = " + result);37 mHander.post(new Runnable() {38 @Override39 public void run() {40 if (result.length() > 0) Toast.makeText(MainActivity.this,"你輸入了: " + result,Toast.LENGTH_SHORT).show();41 }42 });43 }44 @JavascriptInterface45 public void show() {46 Log.d(TAG,"JavaScript 調用java show()");47 mHander.post(new Runnable() {48 @Override49 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 @Override62 public void onPageStarted(WebView view, String url, Bitmap favicon) {63 Log.d(TAG,"onPageStarted");64 super.onPageStarted(view, url, favicon);65 }66 67 @Override68 public void onPageFinished(WebView view, String url) {69 Log.d(TAG,"onPageFinished");70 super.onPageFinished(view, url);71 }72 73 @Override74 public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {75 Log.d(TAG,"onReceivedError");76 super.onReceivedError(view, request, error);77 }78 }79 }View Code

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>

　實現的如下：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More