Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android中Java和JavaScript交互

Android中Java和JavaScript交互

編輯：關於Android編程

Android提供了一個很強大的WebView控件用來處理Web網頁，而在網頁中，JavaScript又是一個很舉足輕重的腳本。本文將介紹如何實現Java代碼和Javascript代碼的相互調用。

如何實現

實現Java和js交互十分便捷。通常只需要以下幾步。

 

<script type="text/javascript"> function sayHello() { alert("Hello") } function alertMessage(message) { alert(message) } function toastMessage(message) { window.control.toastMessage(message) } function sumToJava(number1, number2){ window.control.onSumResult(number1 + number2) } </script>Java-Javascript Interaction In Android
  • WebView開啟JavaScript腳本執行
  • WebView設置供JavaScript調用的交互接口。
  • 客戶端和網頁端編寫調用對方的代碼。

 

本例代碼

為了便於講解，先貼出全部代碼

Java代碼

 

package com.example.javajsinteractiondemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {
  private static final String LOGTAG = "MainActivity";
  @SuppressLint("JavascriptInterface")
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      final WebView myWebView = (WebView) findViewById(R.id.myWebView);
      WebSettings settings = myWebView.getSettings();
      settings.setJavaScriptEnabled(true);
      myWebView.addJavascriptInterface(new JsInteration(), "control");
      myWebView.setWebChromeClient(new WebChromeClient() {});
      myWebView.setWebViewClient(new WebViewClient() {

          @Override
          public void onPageFinished(WebView view, String url) {
              super.onPageFinished(view, url);
              testMethod(myWebView);
          }

      });
      myWebView.loadUrl("file:///android_asset/js_java_interaction.html");
  }

  private void testMethod(WebView webView) {
      String call = "javascript：sayHello()";

      call = "javascript：alertMessage(\"" + "content" + "\")";

      call = "javascript：toastMessage(\"" + "content" + "\")";

      call = "javascript：sumToJava(1,2)";
      webView.loadUrl(call);

  }

  public class JsInteration {

      @JavascriptInterface
      public void toastMessage(String message) {
          Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
      }

      @JavascriptInterface
      public void onSumResult(int result) {
          Log.i(LOGTAG, "onSumResult result=" + result);
      }
  }

}

 

前端網頁代碼

 



 


調用示例


js調用Java


調用格式為window.jsInterfaceName.methodName(parameterValues) 此例中我們使用的是control作為注入接口名稱。


 


function toastMessage(message) {
  window.control.toastMessage(message)
}

function sumToJava(number1, number2){
   window.control.onSumResult(number1 + number2)
}


 


Java調用JS


webView調用js的基本格式為webView.loadUrl(“javascript：methodName(parameterValues)”)


調用js無參無返回值函數


 


String call = "javascript：sayHello()";
webView.loadUrl(call);


 


調用js有參無返回值函數


注意對於字符串作為參數值需要進行轉義雙引號。


 


String call = "javascript：alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);


 


調用js有參數有返回值的函數


Android在4.4之前並沒有提供直接調用js函數並獲取值的方法，所以在此之前，常用的思路是 java調用js方法，js方法執行完畢，再次調用java代碼將值返回。


1.Java調用js代碼


 


String call = "javascript：sumToJava(1,2)";
webView.loadUrl(call);


 


2.js函數處理，並將結果通過調用java方法返回


 


function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}


 


3.Java在回調方法中獲取js函數返回值


 


@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}


 


4.4處理


Android 4.4之後使用evaluateJavascript即可。這裡展示一個簡單的交互示例 具有返回值的js方法


 


function getGreetings() {
      return 1;
}


 


java代碼時用evaluateJavascript方法調用


 


private void testEvaluateJavascript(WebView webView) {
  webView.evaluateJavascript("getGreetings()", new ValueCallback() {

  @Override
  public void onReceiveValue(String value) {
      Log.i(LOGTAG, "onReceiveValue value=" + value);
  }});
}


 


輸出結果


 


I/MainActivity( 1432): onReceiveValue value=1


 


注意


 


    

  • 上面限定了結果返回結果為String，對於簡單的類型會嘗試轉換成字符串返回，對於復雜的數據類型，建議以字符串形式的json返回。
    • 

  • evaluateJavascript方法必須在UI線程（主線程）調用，因此onReceiveValue也執行在主線程。
    • 



 


疑問解答


Alert無法彈出


你應該是沒有設置WebChromeClient,按照以下代碼設置


 


myWebView.setWebChromeClient(new WebChromeClient() {});


 


Uncaught ReferenceError: functionName is not defined


問題出現原因，網頁的js代碼沒有加載完成，就調用了js方法。解決方法是在網頁加載完成之後調用js方法


 


myWebView.setWebViewClient(new WebViewClient() {

  @Override
  public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);
      //在這裡執行你想調用的js函數
  }

});


 


Uncaught TypeError: Object [object Object] has no method


安全限制問題


如果只在4.2版本以上的機器出問題，那麼就是系統處於安全限制的問題了。Android文檔這樣說的



	
Caution: If you’ve set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available your web page code (the method must also be public). If you do not provide the annotation, then the method will not accessible by your web page when running on Android 4.2 or higher.




中文大意為



	
警告：如果你的程序目標平台是17或者是更高，你必須要在暴露給網頁可調用的方法（這個方法必須是公開的）加上@JavascriptInterface注釋。如果你不這樣做的話，在4.2以以後的平台上，網頁無法訪問到你的方法。




兩種解決方法


 


    

  • 將targetSdkVersion設置成17或更高，引入@JavascriptInterface注釋
    • 

  • 自己創建一個注釋接口名字為@JavascriptInterface，然後將其引入。注意這個接口不能混淆。

     
    

    注，創建@JavascriptInterface代碼
    

     
    

    public @interface JavascriptInterface {

}
    

     
    

    代碼混淆問題
    

    如果在沒有混淆的版本運行正常，在混淆後的版本的代碼運行錯誤，並提示Uncaught TypeError: Object [object Object] has no method，那就是你沒有做混淆例外處理。 在混淆文件加入類似這樣的代碼
    

     
    

    -keep class com.example.javajsinteractiondemo$JsInteration {
    *;
}
    

     
    

    All WebView methods must be called on the same thread
    

    過濾日志曾發現過這個問題。
    

     
    

    E/StrictMode( 1546): java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 1) {528712d4} called on Looper (JavaBridge, tid 121) {52b6678c}, FYI main Looper is Looper (main, tid 1) {528712d4})
E/StrictMode( 1546):   at android.webkit.WebView.checkThread(WebView.java:2063)
E/StrictMode( 1546):   at android.webkit.WebView.loadUrl(WebView.java:794)
E/StrictMode( 1546):   at com.xxx.xxxx.xxxx.xxxx.xxxxxxx$JavaScriptInterface.onCanGoBackResult(xxxx.java:96)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.nativeDoRunLoopOnce(Native Method)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.handleMessage(SystemMessageHandler.java:27)
E/StrictMode( 1546):   at android.os.Handler.dispatchMessage(Handler.java:102)
E/StrictMode( 1546):   at android.os.Looper.loop(Looper.java:136)
E/StrictMode( 1546):   at android.os.HandlerThread.run(HandlerThread.java:61)
    

     
    

    在js調用後的Java回調線程並不是主線程。如打印日志可驗證
    

     
    

    ThreadInfo=Thread[WebViewCoreThread,5,main]
    

     
    

    解決上述的異常，將webview操作放在主線程中即可。
    

     
    

    webView.post(new Runnable() {
    @Override
    public void run() {
        webView.loadUrl(YOUR_URL).
    }
});
    

    • 


						
		
	
				

				

				

				

				
				
    
					
  1. 上一頁:
  2. 下一頁:
    3.  
				

				

				

					關於Android編程
				

				
			

			

				

					Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例 
				

				

					

						相關文章
						

						

					

					
				

				

				
				

					熱門文章
				

				

					
					Android數據綁定框架DataBinding用法
					
					Android--線程詳解
					
					android之客戶端與webservice的json方式交互
					
					說說智能Android手機root的那些事
					
					Android分屏顯示LogCat
					
					Android中自定義View和自定義動畫
					
				

				
				

					
					Android App實現應用內部自動更新的最基本方法示例
					
這只是初步的實現，並沒有加入自動編譯等功能。需要手動更改更新的xml文件
						
				

				
				

					
					Android UI設計系列之自定義ViewGroup打造通用的關閉鍵盤小控件ImeObserverLayout（9）
					
轉載請注明出處：http://blog.csdn.net/llew201
						
				

				
				

					
					Android屬性動畫ValueAnimator源碼簡單分析
					
Android開發的過程中經常要用到屬性動畫，經常都是網上扒下來看下怎麼
						
				

				
				

					
					eclipse上傳代碼到gitbub
					
作為一名程序員，自己在學習時經常需要寫代碼，但是由於換電腦或其他原因這些
						
				

				
				

					閱讀排行版
				

				
			

			

		
	
	

		

		Copyright © Android教程網 All Rights Reserved