Android中Java代码与JavaScript交互
在Android开发中,经常使用WebView展示需要实时更新的网页内容,这样服务端修改就可以而不需要App发新版本,而H5页面里面会有JavaScript代码处理一些业务逻辑。这里就会涉及到Android里面的Java代码与JavaScript交互。例如,点击H5里面的按钮,需要调用Android里面的一些方法,或者Android里面的一些方法,需要把处理结果传给H5使用。那么两者之间是如何交互的呢?请看下面的示例代码。
MainActivity.java代码:
package com.example.androidjstest;
import android.app.Activity;
import android.os.Bundle;
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 WebView myWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myWebView = (WebView) findViewById(R.id.myWebView);
WebSettings settings = myWebView.getSettings();
settings.setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(new JsObject(), "control");
myWebView.setWebChromeClient(new WebChromeClient() {
});
myWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
callJsMethod();
}
});
myWebView.loadUrl("file:///android_asset/js_java_interaction.html");
}
private void callJsMethod() {
// webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)
String call = "";
// call = "javascript:sayHello()";
// 调用JavaScript里面放入sumToJava()方法
call = "javascript:sumToJava(1,2)";
myWebView.loadUrl(call);
}
class JsObject {
@JavascriptInterface
public void toastMessage(String message) {
Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG)
.show();
}
// JavaScript调用Android里面的Java代码
@JavascriptInterface
public void onSumResult(int result) {
Toast.makeText(getApplicationContext(), result + "",
Toast.LENGTH_LONG).show();
}
}
}
H5代码,暂时放在App资源文件夹里面,方便调试:
<html>
<!-- js调用Java:调用格式为 window.jsInterfaceName.methodName(parameterValues) -->
<script type="text/javascript">
function sayHello() {
alert("Hello")
}
function sumToJava(number1, number2){
window.control.onSumResult(number1 + number2)
}
</script>
Test Java And Javascript Interaction In Android
</html>
settings.setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(new JsObject(), “control”);
这两行代码,使能JavaScript,然后向WebView注册一个名叫“control”的对象,然后在JS中可以访问到control这个对象,就可以调用这个对象的一些方法,最终可以调用到Java代码中,从而实现了JS与Java代码的交互。
通过示例代码能看到,它们在交互的时候,是按照一定格式的。
webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”);
给loadUrl传入字符串参数,methodName是JavaScript中定义的方法名,parameterValues和JavaScript中所调用方法的参数相一致。
js调用Java代码,调用格式为 window.jsInterfaceName.methodName(parameterValues);
jsInterfaceName,也就是Java代码中myWebView.addJavascriptInterface(new JsObject(), “control”)里面的第二个参数,methodName对应Java代码中的方法名,parameterValues是这个方法相对应的参数。
以上就是两者交互的方法。另外,在嵌入H5页面的时候,还要注意一点,就是用addJavascriptInterface可能导致不安全,因为JS可能包含恶意代码,涉及到JS注入漏洞的问题。