最近項目中需要用到與HTML5交互,也就是WebView的使用,與JS的交互肯定必不可少.開始寫項目之前寫了個測試Demo,成功完成了Java與JS的相互調用.先看效果圖
下面上完整代碼:
首先在Module下的assets目錄下有兩個本地的.html文件,我們知道assets目錄下的文件是被原封不動的打包進apk的.如下圖所示
web.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<script type="text/javascript">
//Java調用JS代碼無參數
function javacalljs(){
document.getElementById("content").innerHTML +=
"<br\>java調用了js函數";
}
//Java調用JS代碼有參數
function javacalljsparam(param){
document.getElementById("content").innerHTML +=
"<br\>java調用了js函數含參數param"+param;
}
function testFunc(){
window.WebViewFunc.jsCallWebView();
}
</script>
<title>測試頁面</title>
</head>
<body>
<a onClick="window.web.jsCallWebView()">無參數JS調用java代碼</a><br/>
<a onClick="window.web.jsCallWebView('含有參數')">含參數調用java代碼</a><br/>
<br />
<div id="content">內容顯示 <a href="jump.html" target="_self">跳轉新頁面jump.html</a></div>
</body>
</html>
jump.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<script type="text/javascript">
//Java調用JS代碼無參數
function javacalljs(){
document.getElementById("content").innerHTML +=
"<br\>java調用了js函數";
}
//Java調用JS代碼有參數
function javacalljsparam(param){
document.getElementById("content").innerHTML +=
"<br\>java調用了js函數含參數param"+param;
}
function testFunc(){
window.WebViewFunc.jsCallWebView();
}
</script>
<title>測試頁面</title>
</head>
<body>
<a onClick="window.jump.jsCallWebView()">無參數JS調用java代碼</a><br/>
<a onClick="window.jump.jsCallWebView('含有參數')">含參數調用java代碼</a><br/>
<br />
<div id="content">內容顯示</div>
</body>
</html>
JavaCallJSActivity.java
public class JavaCallJSActivity extends AppCompatActivity {
@BindView(R.id.btn1)
Button mBtn1;
@BindView(R.id.btn2)
Button mBtn2;
@BindView(R.id.wv_java_call_js)
WebView mWvJavaCallJs;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_java_call_js);
ButterKnife.bind(this);
initViews();
}
private void initViews() {
//設置WebView支持JS
mWvJavaCallJs.getSettings().setJavaScriptEnabled(true);
//從assets目錄下加載html
mWvJavaCallJs.loadUrl("file:///android_asset/web.html");
//自定義WebView的背景顏色,設置爲透明色
mWvJavaCallJs.setBackgroundColor(Color.TRANSPARENT);
//設置背景圖片
mWvJavaCallJs.setBackgroundResource(R.drawable.bgcolorblue);
MWebViewClient mWebViewClient = new MWebViewClient(mWvJavaCallJs,this);
mWvJavaCallJs.setWebViewClient(mWebViewClient);
MWebChromeClient mWebChromeClient = new MWebChromeClient(this);
mWvJavaCallJs.setWebChromeClient(mWebChromeClient);
//添加js調用android(java)的方法接口
MJavascriptInterface mJavascriptInterface = new MJavascriptInterface(this);
mWvJavaCallJs.addJavascriptInterface(mJavascriptInterface,"web");
mWvJavaCallJs.addJavascriptInterface(mJavascriptInterface,"jump");
}
@OnClick({R.id.btn1, R.id.btn2})
public void onClick(View view) {
switch (view.getId()) {
case R.id.btn1:
mWvJavaCallJs.loadUrl("javascript:javacalljs()"); // 無參數調用
break;
case R.id.btn2:
mWvJavaCallJs.loadUrl("javascript:javacalljsparam(" + "'從java代碼傳遞參數到了JS代碼'" + ")"); // 有參數調用
break;
}
}
}
activity_java_call_js.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_java_call_js"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.geocompass.html5test.activity.JavaCallJSActivity">
<LinearLayout
android:id="@+id/ll_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="java調用無參數js"/>
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="java調用有參數js"/>
</LinearLayout>
<WebView
android:id="@+id/wv_java_call_js"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/ll_top"></WebView>
</RelativeLayout>
MJavascriptInterface.java
public class MJavascriptInterface {
private Context mContext;
public MJavascriptInterface(Context context) {
mContext = context;
}
/**
* JS調用Android(Java)無參數的方法
*/
@JavascriptInterface
public void jsCallWebView() {
Toast.makeText(mContext, "JS Call Java!",
Toast.LENGTH_SHORT).show();
}
/**
* JS調用Android(Java)含參數的方法
* @param param
*/
@JavascriptInterface
public void jsCallWebView(String param) {
Toast.makeText(mContext, "JS Call Java!" + param,
Toast.LENGTH_SHORT).show();
}
}
MWebChromeClient.java
package com.geocompass.html5test.webview;
import android.content.Context;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.widget.Toast;
/**
* Created by liuxu on 2017/2/7.
*/
public class MWebChromeClient extends WebChromeClient {
private Context mContext;
public MWebChromeClient(Context context) {
mContext = context;
}
/**
* JS調用Android(Java)無參數的方法
*/
@JavascriptInterface
public void jsCallWebView() {
Toast.makeText(mContext, "JS Call Java!",
Toast.LENGTH_SHORT).show();
}
/**
* JS調用Android(Java)含參數的方法
* @param param
*/
@JavascriptInterface
public void jsCallWebView(String param) {
Toast.makeText(mContext, "JS Call Java!" + param,
Toast.LENGTH_SHORT).show();
}
}
MWebViewClient.java
package com.geocompass.html5test.webview;
import android.content.Context;
import android.graphics.Bitmap;
import android.net.http.SslError;
import android.util.Log;
import android.webkit.SslErrorHandler;
import android.webkit.WebView;
import android.webkit.WebViewClient;
/**
* Created by liuxu on 2017/2/7.
*/
public class MWebViewClient extends WebViewClient {
private static final String TAG = "MWebViewClient";
private WebView mWebView;
private Context mContext;
public MWebViewClient(WebView webView, Context context) {
mWebView = webView;
mContext = context;
}
/**
* 在點擊請求的是鏈接是纔會調用,
* 重寫此方法返回true表明點擊網頁裏面的鏈接還是在當前的webview裏跳轉,不跳到瀏覽器那邊。
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 使用自己的WebView組件來響應Url加載事件,而不是使用默認瀏覽器器加載頁面
mWebView.loadUrl(url);
// 記得消耗掉這個事件。給不知道的朋友再解釋一下,Android中返回True的意思就是到此爲止,
// 事件就會不會冒泡傳遞了,我們稱之爲消耗掉
return true;
}
/**
* 頁面開始加載時調用的方法
* @param view
* @param url
* @param favicon
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
Log.e(TAG, "onPageStarted: " );
super.onPageStarted(view, url, favicon);
}
/**
* 頁面加載完成調用的方法
* @param view
* @param url
*/
@Override
public void onPageFinished(WebView view, String url) {
Log.e(TAG, "onPageFinished: " );
super.onPageFinished(view, url);
}
/**
* 在加載頁面資源時會調用,每一個資源(比如圖片)的加載都會調用一次。
*/
@Override
public void onLoadResource(WebView view, String url) {
// Toast.makeText(context, "WebViewClient.onLoadResource", Toast.LENGTH_SHORT).show();
Log.e("WebActivity", "onLoadResource");
super.onLoadResource(view, url);
}
/**
* 重寫此方法可以讓WebView支持https請求
* @param view
* @param handler
* @param error
*/
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
super.onReceivedSslError(view, handler, error);
}
}
我寫的代碼中用到了最新的ButterKnife註解,需要在Project和Module的build.gradle中添加一些代碼,不會的請看我之前寫過的一篇博客:http://blog.csdn.net/liuxu841911548/article/details/54906660
WebView還有很多方法,體現了其強大之處,後續用到再繼續補充.
如有不足之處請指正.