Android WebView的使用，与JS的交互

WebView的简单介绍：

在我们做项目的过程中，有可能会遇到一种需求：在应用程序里展示一些H5页面。可能有些朋友就会说，这还不简单，直接使用意图跳转到浏览器打开，完美解决。可是，需求往往是不太友好的：不能使用外部浏览器浏览。这可怎么办呢？难不成要写一个浏览器？
这倒是不用，Android已经为我们提供了一个WebView的控件，使用该控件即可在我们的应用中轻松的展示各种各样的网页了。

Web使用步骤：

1.布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/wv_html5"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</RelativeLayout>

2.初始化WebView控件以及方法调用的部分代码：

WebView webView = (WebView)findViewById(R.id.wv_html5);
 //允许webview 执行javaScript代码
  webView.getSettings().setJavaScriptEnabled(true);
 //网页跳转到另外一个网页的时候，仍然在webView中打开而不是调到外部浏览器
   webView.setWebViewClient(new WebViewClient());
 //跳转到对应的网页，也可以跳转到本地的网页
   webView.loadUrl("http://www.baidu.com");

记得添加权限：

<uses-permission android:name="android.permission.INTERNET"/>

===============================================

webView.getSettings()方法可以设置一些浏览器的属性：

WebSettings webSettings = webView.getSettings();  
//允许webview 执行javaScript代码
webSettings.setJavaScriptEnabled(true);  
//设置缓存模式
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);   
//可以使用localStorage
webSettings.setDomStorageEnabled(true);    
//可以使用数据库
webSettings.setDatabaseEnabled(true);  
//应用可以存在缓存
webSettings.setAppCacheEnabled(true);   
//允许访问文件 
webSettings.setAllowFileAccess(true);  
//保存密码
webSettings.setSavePassword(true);  
//支持缩放  
webSettings.setSupportZoom(true);  
//设置显示缩放按钮 
webSettings.setBuiltInZoomControls(true);  
//双击变大，再双击后变小，当手动放大后，双击可以恢复到原始大小
webView.getSettings().setUseWideViewPort(true); 


/**  
 * 用WebView显示图片，可使用这个参数 设置网页布局类型：
 *  1、LayoutAlgorithm.NARROW_COLUMNS ：适应内容大小  
 *  2、LayoutAlgorithm.SINGLE_COLUMN ：适应屏幕，内容将自动缩放
 */ 
//这样的话如果你的PC网页里面没有设置 meta标签 viewport的缩放设置也没有关系。 
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);  

//可使滚动条不占位
webViwew.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);  

webView.setHorizontalScrollbarOverlay(true);  
webView.setHorizontalScrollBarEnabled(true);   
//取消Vertical ScrollBar显示
webView.setVerticalScrollBarEnabled(false);  
//取消Horizontal ScrollBar显示 
webView.setHorizontalScrollBarEnabled(false); 

//触摸焦点起作用,如果不设置，则在点击网页文本输入框时，不能弹出软键盘及不响应其他的一些事件。
webView.requestFocus(); 

webView.setWebChromeClient(new MyWebChromeClient());

WebChromeClient会在一些影响浏览器ui交互动作发生时被调用，比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等

webView.setWebViewClient(new MyWebViewClient());

WebViewClient会在一些影响内容渲染的动作发生时被调用，比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等

WebView与JS的交互

基本思路步骤：

1. 使用webview打开网页
2. 设置webview支持脚本
3. 通过webview的loadUrl方式进行js函数调用
4. 提供安卓提供一些方法供JS使用

1.//允许webview执行javascript
webview.getSettings.setJavaScriptEnabled(true);

2.//获取到html文件，也可以重网络上获取
webview.loadUrl("file:///android_asset/test.html");

3./*添加一个对象，让js可以访问该对象的方法，该对象也可以调用js中的方法
   *第一个参数：包含js所需要调用方法的对象，第二个参数类似于 ID,javaScript通过这个id即可找到这个对象
   */
webView.addJavascriptInterface(new js(),"js");

4.//Android提供方法给JS调用，实例代码：
    @JavascriptInterface
    public void showMsg(String msg) {
        Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();
    }
5.//Android调用JS的代码：
webView.load("javascript:showAlert()");


下面是就是JS代码：在JS中就可以提供方法给安卓调用或者调用安卓的方法：
<</span>script type="text/javascript"> 
//提供方法给安卓调用
function showAlert() {  
        alert("这个JS中的方法!");  
    }   
//调用安卓的方法
function callAndroid(msg) {  
        //webView.addJavascriptInterface(new js(),"js");
        //上面代码中的第二个参数就是在这里
        js.showMsg(msg);  
    }  
</</span>script>  

注意
1.设置addJavascriptInterface方法
使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互，因为安全问题的考虑 Google在使用Android API 17以上的版本的时候 需要通过@JavascriptInterface来注解的Java函数才能被识别可以被Js调用。

2.设置当前网页的链接仍在WebView中跳转，而不是跳到手机浏览器里显示，在WebViewClient的子类中重写shouldOverrideUrlLoading函数

webView.setWebViewClient(new WebViewClient() {    

    @Override    
    public boolean shouldOverrideUrlLoading(WebView view, String url) {    
        view.loadUrl(url);    
        return true;    
    }    
});   

shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时，给当前应用程序一个处理机会，如果没有重写此函数，webView请求ActivityManage选择合适的方式处理请求，就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理，return false表示让当前webView处理

3.设置开始加载网页、加载完成、加载错误时处理在WebViewClient子类中分别重写如下父类函数
代码如下：

    webView.setWebViewClient(new WebViewClient() {    

    @Override  
    public void onPageStarted(WebView view, String url, Bitmap favicon) {  
        super.onPageStarted(view, url, favicon);  
        // 开始加载网页时处理 如：显示"加载提示" 的加载对话框  
        showDialog();
    }  

    @Override  
    public void onPageFinished(WebView view, String url) {  
        super.onPageFinished(view, url);  
        // 网页加载完成时处理  如:让加载对话框 消失  
        dismissDialog();
    }  

    @Override  
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {  
        super.onReceivedError(view, errorCode, description, failingUrl);  
        // 加载网页失败时处理  
        ...
    }    
});  

4.显示页面加载进度
在WebChromeClient子类中重写父类的onProgressChanged函数
代码如下：

webView.setWebChromeClient(new WebChromeClient() {    

    public void onProgressChanged(WebView view, int progress) {    
        //处理进度条代码
        ...
    }    
});  

5.back键控制网页后退
Activity默认的back键处理为结束当前Activity，WebView查看了很多网页后，希望按back键返回上一次浏览的页面，这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数，告诉他如何处理
代码如下：

public boolean onKeyDown(int keyCode, KeyEvent event) {    
    if (webView.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {    
        webView.goBack();    
        return true;    
    }    
    return super.onKeyDown(keyCode, event);    
}  

其中webView.canGoBack()在webView含有一个可后退的浏览记录时返回true
webView.goBack();表示返回至webView的上次访问页面