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

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

$(function () {$('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var$numbering = $('

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i