本篇博文參考自:http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/
我們在使用webview時可以讓java代碼和網頁中的js代碼進行交互,本文就簡單說明下二者是如何交互的。
一、JS調用java代碼
1.1 網頁的代碼:
<html> <script type="text/javascript"> function toastMessage(message) { window.control.toastMessage(message) } function sumToJava(number1, number2){ window.control.onSumResult(number1 + number2) } </script> Java-Javascript Interaction In Android </html>
可以看見,這個網頁代碼中有js的代碼,主要代碼片段如下:
function toastMessage(message) { window.control.toastMessage(message) } function sumToJava(number1, number2){ window.control.onSumResult(number1 + number2) }
可以發現這里用了一個方法:window.control.xxxxx。這里的control需要在android端實現,網頁這里只需要調用就行。
調用格式為:window.jsInterfaceName.methodName(parameterValues) 此例中我們使用的是control作為注入接口名稱,所以變成了:
window.control.toastMessage(message)
1.2 Android端
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.loadUrl("file:///android_asset/js_java_interaction.html"); } 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); } } }
可以看到,webview中用 addJavascriptInterface 方法定義了一個注入接口和類:control & JsInteration。然后在之后就寫好了JsInteration的實現方法:toastMessage & onSumResult,這樣在js中調用時android就知道js用的是什么方法了。
二、java調用js
調用js的方法很簡單和加載網頁完全一致
基本格式:webView.loadUrl(“javascript:methodName(parameterValues)”)
例子1:
無參數方法
String call = "javascript:sayHello()";
webView.loadUrl(call);
例子2:
注意對於字符串作為參數值需要進行轉義雙引號
String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);
關於如何安全的進行交互,避免注入攻擊,請參考:http://mobile.51cto.com/aprogram-452011.htm
關於如何獲取js的返回值,請參考:http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/