Android：WebView用法（Js交互）

首先推荐几篇关于WebView详解总结，文章都很长，没有充分时间和耐心慎点：
《webView的使用以及总结》
《Android WebView使用深入浅出》
《简明webView使用》

WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。
webview有两个方法：setWebChromeClient 和 setWebClient

1. setWebClient：主要处理解析，渲染网页等浏览器做的事情
2. setWebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等
3. WebViewClient就是帮助WebView处理各种通知、请求事件的。

WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页，实现WebView有以下两种不同的方法：

第一种方法的步骤：

1.在要Activity中实例化WebView组件：WebView webView = new WebView(this);
2.调用WebView的loadUrl()方法，设置WevView要显示的网页：
互联网用：webView.loadUrl(“http://www.google.com“);
本地文件用：webView.loadUrl(“file:///android_asset/XX.html”); 本地文件存放在：assets 文件中
3.调用Activity的setContentView( )方法来显示网页视图
4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。

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

上代码：

package com.myapplication.findviewiddemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    private WebView webview;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //实例化WebView对象
        webview = new WebView(this);
        //设置WebView属性，能够执行Javascript脚本
        webview.getSettings().setJavaScriptEnabled(true);
        //加载需要显示的网页
        webview.loadUrl("http://www.51cto.com/");
        //设置Web视图
        setContentView(webview);
    }

    @Override
    //设置回退
    //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
            webview.goBack(); //goBack()表示返回WebView的上一页面
            return true;
        }
        return false;
    }
}

第二种方法的步骤：

1、在布局文件中声明WebView
2、在Activity中实例化WebView
3、调用WebView的loadUrl( )方法，设置WevView要显示的网页
4、为了让WebView能够响应超链接功能，调用setWebViewClient( )方法，设置 WebView视图
5、用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
6、需要在AndroidManifest.xml文件中添加权限，否则出现Web page not available错误。

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

package com.myapplication.findviewiddemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }

    private void initViews() {
        //初始化WebView
        webView = f(R.id.webView);
        //设置webView属性，能够执行Javascript脚本
        webView.getSettings().setJavaScriptEnabled(true);
        //加载需要显示的网页
        webView.loadUrl("http://www.51cto.com/");
        //设置webView视图
        webView.setWebViewClient(new MyWebViewClient());
    }

    private  T f(int id) {
        return (T) findViewById(id);
    }

    @Override
    //设置回退
    //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
            webView.goBack(); //goBack()表示返回webView的上一页面
            return true;
        }
        return false;
    }

    //Web视图
    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //return super.shouldOverrideUrlLoading(view, url);
            view.loadUrl(url);
            return true;
        }
    }
}

注意事项：

1.AndroidManifest.xml中必须使用许可”android.permission.INTERNET”,否则会出Webpage not available错误。
2.如果访问的页面中有Javascript，则webview必须设置支持Javascript。

 webview.getSettings().setJavaScriptEnabled(true);  

3.如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖webview的WebViewClient对象。

 webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //return super.shouldOverrideUrlLoading(view, url);
                view.loadUrl(url);
                return true;
            }
        });

4.如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。

 //设置回退
    //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
            webView.goBack(); //goBack()表示返回webView的上一页面
            return true;
        }
        return false;
    }

5.如果webView中需要用户手动输入用户名、密码或其他，则webview必须设置支持获取手势焦点。

webview.requestFocusFromTouch();

6.WebView 加载界面主要调用三个方法：LoadUrl、LoadData、LoadDataWithBaseURL.
- 1、LoadUrl 直接加载网页、图片并显示.（本地或是网络上的网页、图片、gif）
- 2、LoadData 显示文字与图片内容（模拟器1.5、1.6）
- 3、LoadDataWithBase 显示文字与图片内容（支持多个模拟器版本）

WebSetting常用的方法详解：

 WebSettings webSetting = webView.getSettings();
        //支持js
        webSetting.setJavaScriptEnabled(true);
        //将图片调整到适合webView的大小
        webSetting.setUseWideViewPort(false);
        //支持缩放
        webSetting.setSupportZoom(true);
        //支持内容重新布局
        webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //多窗口
        webSetting.supportMultipleWindows();
        //关闭webView中缓存
        webSetting.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        //设置可以访问文件
        webSetting.setAllowFileAccess(true);
        //当webView调用requestFocus时为webView设置节点
        webSetting.setNeedInitialFocus(true);
        webSetting.setBuiltInZoomControls(true);//设置支持缩放
        //支持通过JS打开新窗口
        webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
        //设置自动加载图片
        webSetting.setLoadsImagesAutomatically(true);

WebViewClient的方法全解

• doUpdateVisitedHistory(WebViewview,Stringurl, boolean isReload)
  (更新历史记录)
• onFormResubmission(WebViewview,MessagedontResend,Messageresend)
  (应用程序重新请求网页数据)
• onLoadResource(WebViewview,Stringurl)
  在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。
• onPageStarted(WebViewview,Stringurl,Bitmapfavicon)
  这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。
• onPageFinished(WebViewview,Stringurl)
  在页面加载结束时调用。同样道理，我们知道一个页面载入完成，于是我们可以关闭loading 条，切换程序动作。
• onReceivedError(WebViewview, int
  errorCode,Stringdescription,StringfailingUrl) (报告错误信息)
• onReceivedHttpAuthRequest(WebViewview,HttpAuthHandlerhandler,Stringhost,Stringrealm)
  （获取返回信息授权请求）
• onReceivedSslError(WebViewview,SslErrorHandlerhandler,SslErrorerror)
  重写此方法可以让webview处理https请求。
• onScaleChanged(WebViewview, float oldScale, float newScale)
  (WebView发生改变时调用)
• onUnhandledKeyEvent(WebViewview,KeyEventevent) （Key事件未被加载时调用）
• shouldOverrideKeyEvent(WebViewview,KeyEventevent)
  重写此方法才能够处理在浏览器中的按键事件。
• shouldOverrideUrlLoading(WebViewview,Stringurl)
  在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。

WebView与JavaScript的交互

1. webview调用js

mWebView.loadUrl("javascript:do()");

以上是webview在调用js中的一个叫做do的方法，该js所在的html文件大致如下：

<html>
  <script language="javascript">
    /* This function is invoked by the webview*/
    function do() {
      alert("1");
    }
  script>
  <body>
    <a><div style="width:80px;
      margin:0px auto;
      padding:10px;
      text-align:center;
      border:2px solid #111111;" >
        <img id="droid" src="xx.png"/><br>
        Click me!
    div>a>
  body>
html>

2.js调用webview

我们假设下列的本地类是要给js调用的：

package com.test.webview;
class DemoJavaScriptInterface {
  DemoJavaScriptInterface() {
  }
  /**
   * This is not called on the UI thread. Post a runnable to invoke
   * loadUrl on the UI thread.
   */
  public void clickOnAndroid() {
      mHandler.post(new Runnable() {
    public void run() {
        //TODO
    }
      });
  }
    }

首先给webview设置：

mWebview.setJavaScriptEnabled(true);

随后将本地的类（被js调用的）映射出去：

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

“demo”这个名字就是公布出去给JS调用的，那么js久可以直接用下列代码调用本地的DemoJavaScriptInterface类中的方法了：

  
    ...