由於現如今H5的熱門，做過不少與H5的交互工作了，現在總結一下。
初始化WebView
/**
* 初始化WebView
*/
private void initWebView() {
// 設置setWebChromeClient對象
mWb_main.setWebChromeClient(new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
//設置本地的ToolBar標題
mTv_main.setText(title);
}
});
// 返回前一個頁面
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
mWebView.goBack();// 返回前一個頁面
return true;
}
return super.onKeyDown(keyCode, event);
}
//打開網頁時不調用系統瀏覽器， 而是在本WebView中顯示
mWb_main.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
WebSettings webSettings = mWb_main.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("UTF-8");//設置編碼
webSettings.setUseWideViewPort(true);//設置此屬性，可任意比例縮放
webSettings.setLoadWithOverviewMode(true);
}
/* 設置支持Js,必須設置的,不然網頁基本上不能看 */
mWebView.getSettings().setJavaScriptEnabled(true);
/* 設置緩存模式,我這裏使用的默認,不做多講解 */
mWebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
/* 設置爲true表示支持使用js打開新的窗口 */
mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
/* 大部分網頁需要自己保存一些數據,這個時候就的設置下面這個屬性 */
mWebView.getSettings().setDomStorageEnabled(true);
/* 設置爲使用webview推薦的窗口 */
mWebView.getSettings().setUseWideViewPort(true);
/* 設置網頁自適應屏幕大小 ---這個屬性應該是跟上面一個屬性一起用 */
mWebView.getSettings().setLoadWithOverviewMode(true);
/* HTML5的地理位置服務,設置爲true,啓用地理定位 */
mWebView.getSettings().setGeolocationEnabled(true);
/* 設置是否允許webview使用縮放的功能,我這裏設爲false,不允許 */
mWebView.getSettings().setBuiltInZoomControls(false);
/* 提高網頁渲染的優先級 */
mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);
/* 設置顯示水平滾動條,就是網頁右邊的滾動條.我這裏設置的不顯示 */
mWebView.setHorizontalScrollBarEnabled(false);
/* 指定垂直滾動條是否有疊加樣式 */
mWebView.setVerticalScrollbarOverlay(true);
/* 設置滾動條的樣式 */
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
/* 這個不用說了,重寫WebChromeClient監聽網頁加載的進度,從而實現進度條 */
mWebView.setWebChromeClient(new WebChromeClient());
/* 同上,重寫WebViewClient可以監聽網頁的跳轉和資源加載等等... */
mWebView.setWebViewClient(new WebViewClient()); - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
Android 調用JS的無參數方法
在HTML5中的header中加入這段代碼
<script>
//這是被Android調用的JS方法
function noParamFunction() {
document.getElementById("noparam_ta").style.fontSize =40+"px";
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
然後在Android裏邊我們調用
/**
* Android 調用 JS代碼
*/
mButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mWb_main.loadUrl("javascript:noParamFunction();");
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
Android 調用JS的有參數方法
在Html5中的header中加入這段代碼
<script>
//這是被Android調用的JS方法
function noParamFunction() {
document.getElementById("noparam_ta").innerHTML=data;
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
然後在Android裏邊我們調用的時候需要加入‘”+str+”’ 這種形式的，纔可以想HTML傳遞參數
/**
* Android 調用 JS代碼
*/
String str = "Hello JS"
mButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mWb_main.loadUrl("javascript:noParamFunction('"+str+"');");
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS調用Android 代碼
首先我們要定義一個類供JS調用，這裏需要注意在4.2以前，不需要在方法前加上 @JavascriptInterface，4.2以後的系統就需要加上了，代碼如下
public class JavaScriptinterface {
private Context mContext;
/** Instantiate the interface and set the context */
public JavaScriptinterface(Context c) {
mContext = c;
}
/**
* 安卓系統4.2以上的系統需要加上 @JavascriptInterface，纔可以讓webview讀取自己的方法
* @param toast
*/
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
Log.e("----","--------------------------------------------showToast");
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
然後在HTML中header裏邊加入script代碼
<script>
//這是js調用Android的方法
function showAndroidToast(str) {
javascript:window.android.showToast(str);
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
在Body標籤加入
<input type="button" value="調用安卓的方法" onClick="showAndroidToast('調用成功')" />- 1
- 1
然後在我們Android 端寫入如下代碼就可以調用了
/**
* JS 調用 Android 代碼
*/
mWb_main.addJavascriptInterface(new JavaScriptinterface(this),
"android");- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
Android讀取html的標題
// 設置setWebChromeClient對象
mWb_main.setWebChromeClient(new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
//設置本地的ToolBar標題
mTv_main.setText(title);
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
Android允許Html的Alert（）對話框
// 設置setWebChromeClient對象
mWb_main.setWebChromeClient(new WebChromeClient() {
//處理javascript中的alert
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
//構建一個Builder來顯示網頁中的對話框
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder.setTitle("Alert");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,
new AlertDialog.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}
//處理javascript中的confirm
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder.setTitle("confirm");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,
new AlertDialog.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setNegativeButton(android.R.string.cancel,
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
