先上html的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>安卓和js交互demo</TITLE>
<meta charset="utf-8">
</HEAD>
<script>
function giveAndroidData(content){
var str = navigator.userAgent;
if(str.indexOf("androidToJsDemo") != -1){
android_js.giveAndroidData(content);
}
}
function getAndroidData(){
var str = navigator.userAgent;
if(str.indexOf("androidToJsDemo") != -1){
alert("获取到安卓数据:" + android_js.getAndroidData());
}
}
function getData(content){
alert("安卓调用了js的getData()方法,js拿到安卓传过来的数据:"+content);
return 'bcd';
}
</script>
<BODY>
<button type="button" onclick="giveAndroidData('js调用了安卓的方法,给安卓传了数据')">调用安卓方法,给安卓传数据</button><br/><br/>
<button type="button" onclick="getAndroidData()">调用安卓方法,获取安卓数据</button>
</BODY>
</HTML>
为了方便各位测试,上面的html代码我放到了自己的腾讯云服务器上,地址:http://123.206.81.43:8080/demo/androidToJsDemo.html
主要有两个按钮,都是js主动调用安卓方法,一个是给安卓传数据,另一个是获取安卓数据。
然后看一下安卓布局代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="getDataFromJs"
android:text="安卓调用js方法" />
</LinearLayout>
就一个webview和button,很简单
接下来看一下webview对应的activity代码:
import android.graphics.Bitmap;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private WebView mWebView;
private final String url = "http://123.206.81.43:8080/demo/androidToJsDemo.html";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = findViewById(R.id.webView);
WebSettings settings = mWebView.getSettings();
settings.setUserAgentString(settings.getUserAgentString() + "androidToJsDemo");
settings.setJavaScriptEnabled(true);// 表示支持js
settings.setJavaScriptCanOpenWindowsAutomatically(true);
mWebView.addJavascriptInterface(this, "android_js");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
Log.e(TAG, "onPageStarted");
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Log.e(TAG, "onPageFinished");
}
});
//不加这个,js中的alert就不会正常显示,webview只是一个承载体,各种内容的渲染需要使用webviewChromClient去实现,所以set一个默认的基类WebChromeClient就行
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
}
});
mWebView.loadUrl(url);
}
public void getDataFromJs(View v) {
//安卓调用js的方法,并传过去abc
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
mWebView.loadUrl("javascript:getData('abc')");
} else {
mWebView.evaluateJavascript("javascript:getData('abc')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {//会收到js中getData方法的返回值
Log.e(TAG, "onReceiveValue: " + value);
}
});
}
}
@JavascriptInterface //一定注意不要忘记注解
public void giveAndroidData(String content) {//js给安卓传数据
toast(content);
}
@JavascriptInterface
public String getAndroidData() {//js调用安卓获取数据
return "这是js从安卓获取到的数据123456";
}
public void toast(String s) {
Toast.makeText(this, s, Toast.LENGTH_LONG).show();
}
}
其中,@JavascriptInterface注解标记的方法,是js能调用的方法
mWebView.addJavascriptInterface(MainActivity.this, "android_js");
是在js中定义了一个android_js对象,所以js中才能直接用android_js对象调用方法,一定要记得在js中通过UA判断是不是在安卓APP下,因为浏览器里面不存在这个对象,是安卓APP里面才有,我一般是在安卓默认的UA后面加上一段项目相关的字符串,方便js判断是否处于安卓APP里(settings.setUserAgentString(settings.getUserAgentString() + "androidToJsDemo");),然后js通过判断androidToJsDemo这段唯一字符串是否存在来判断是否在安卓APP:
var str = navigator.userAgent;
if(str.indexOf("androidToJsDemo") != -1){
//说明处在安卓APP里,不是在浏览器里,也不是ios里
}
运行截图:点击H5中第一个按钮时,给安卓传过来字符串,安卓通过toast打印出来,如图:
点击第二个按钮获取安卓的数据,将获取到的数据alert出来:
点击安卓原生按钮,调用js方法,如图:
我用的是安卓8.0的模拟器,点击确定以后,可以看到打印出来了js的返回值: