Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android WebView和JavaScript交互，androidwebview

Android WebView和JavaScript交互，androidwebview

編輯：關於android開發

Android WebView和JavaScript交互，androidwebview

　　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 } 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 >
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>

　實現的效果圖如下：

上一頁:[android] 天氣app布局練習（三），androidapp
下一頁:初識Activity，騰訊視頻初識虛擬化

關於android開發

開發入門初級開發中級開發高級開發關於android開發

相關文章