Android WebView与JavaScript的交互使用

由于现如今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
[/code]

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
[/code]

然后在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
[/code]

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
[/code]

然后在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
[/code]

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
[/code]

然后在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
[/code]

在Body标签加入

<input type="button" value="调用安卓的方法" onClick="showAndroidToast('调用成功')" />

1


1
[/code]

然后在我们Android 端写入如下代码就可以调用了

/**
* JS 调用 Android 代码
*/
mWb_main.addJavascriptInterface(new JavaScriptinterface(this),
"android");

1
2
3
4
5


1
2
3
4
5
[/code]

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
[/code]

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
[/code]

(function () {('pre.prettyprint code').each(function () {
var lines = (this).text().split(′\n′).length;varnumbering = $('').addClass('pre-numbering').hide();
(this).addClass(′has−numbering′).parent().append(numbering);
for (i = 1; i