WebView的使用

Web基本使用

1.清单文件配置WebView

<span style="font-weight: normal;"><span style="font-size:14px;"><WebView
    android:id="@+id/wv_news_detail"
    android:layout_width="match_parent"
    android:layout_height="match_parent" /></span></span>

2.WebView加载网页

//加载网页链接
mWebView.loadUrl("http://www.itheima.com");
//加载本地assets目录下的网页
mWebView.loadUrl("file:///android_asset/demo.html");

3.加载数据

webView.loadDataWithBaseURL(null,applyLimit, "text/html", "utf-8", null);

 

webView.loadData(certificateLimit, "text/html", "utf-8");

 

value.setText(Html.fromHtml(itemList.getJSONObject(i).getString("Value")));

loadDataWithBaseURL跟loadData的区别

在写WebView时，感觉LoadUrl太浪费流量，而且加载起来有点慢，就考虑用其它的方法来实现。在加载页面时，如果只加载数据，页面模板提前写好放到项目中，这样就可以来更快的加载页面，用户体验会好些。  如果不用loadUrl,省下的就只有LoadData和loadDataWithBaseURL了，下面来说下LoadData和loadDataWithBaseURL 的用法；

public void loadData (String data, String mimeType, String encoding)
Parameters

A String of data in the given encoding. The date must be URI-escaped -- '#', '%', '\', '?' should be replaced by %23, %25, %27, %3f respectively.

The MIMEType of the data. i.e. text/html, image/jpeg

The encoding of the data. i.e. utf-8, base64

public
void  loadDataWithBaseURL  ( String  baseUrl,  String  data,  String  mimeType,  String  encoding,  String  historyUrl)
Parameters

Url to resolve relative paths with, if null defaults to "about:blank"

A String of data in the given encoding.

The MIMEType of the data. i.e. text/html. If null, defaults to "text/html"

The encoding of the data. i.e. utf-8, us-ascii

URL to use as the history entry. Can be null.

Load the given data into the WebView. This will load the data into WebView using the data: scheme. Content loaded through this mechanism does not have the ability to load content from the network.

data mimeType encoding

下如API中所说的，

      data:是要加载的数据类型，但在数据里面不能出现英文字符：'#', '%', '\' , '?' 这四个字符，如果有的话可以用 %23, %25, %27, %3f，这些字符来替换，在平时测试时，你的数据时，你的数据里含有这些字符，但不会出问题，当出问题时，你可以替换下。

       %，会报找不到页面错误，页面全是乱码。乱码样式见符件。

       #，会让你的goBack失效，但canGoBAck是可以使用的。于是就会产生返回按钮生效，但不能返回的情况。

       \ 和? 我在转换时，会报错，因为它会把\当作转义符来使用，如果用两级转义，也不生效，我是对它无语了。

我们在使用loadData时，就意味着需要把所有的非法字符全部转换掉，这样就会给运行速度带来很大的影响，因为在使用时，在页面stytle中会使用很多%号。页面的数据越多，运行的速度就会越慢。

      data中，有人会遇到中文乱码问题，解决办法：参数传"utf-8"，页面的编码格式也必须是utf-8，这样编码统一就不会乱了。别的编码我也没有试过。

 

 

Load the given data into the WebView, use the provided URL as the base URL for the content. The base URL is the URL that represents the page that is loaded through this interface. As such, it is used to resolve any relative URLs. The historyUrl is used for the history entry.

Note for post 1.0. Due to the change in the WebKit, the access to asset files through "file:///android_asset/" for the sub resources is more restricted. If you provide null or empty string as baseUrl, you won't be able to access asset files. If the baseUrl is anything other than http(s)/ftp(s)/about/javascript as scheme, you can access asset files for sub resources.

baseUrl data mimeType encoding historyUrl

 

在使用loadDataWithBaseURL时，需要注意的就是 baseUr：虽然API上写的是要传一个Url，但我在用时，发现传一个Url并不可以，我发现这个就是一个标志位，用来标志当前页面的Key值的，而historyUrl就是一个value值，在加载时，它会把baseUrl和historyUrl传到List列表中，当作历史记录来使用，当前进和后退时，它会通过baseUrl来寻找historyUrl的路径来加载historyUrl路径来加载历史界面，需要注意的就是history所指向的必须是一个页面，并且页面存在于SD卡中或程序中（assets），loadDataWithBaseURL，它本身并不会向历史记录中存储数据，要想实现历史记录，需要我们自己来实现，也许是我的技术有限，我有了比较笨的访求来实现：就是在加载页面时，我把数据另外的写到一个html页面中，并把它保存到SD中，当点击返回时，它会通过historyUrl指向的路径来加载页面，这样就解决了历史记录问题。

 

上面这两种方法，我建议使用后者，虽然loadData的历史记录不需要我们自己来实现，但在使用时，我们必须把所有的%，#，\，?转换掉，在转换时，也许会遇到别的困难，我也没有测完。这就两个加载上后者比前者快一到两倍。

 

总结一下

就是少用或别用loadData,用这个loadDataWithBaseURL速度快里面的数据还不用转换

4.WebView基本设置

<span style="font-weight: normal;"><span style="font-size:14px;">WebSettings settings = mWebView.getSettings();
settings.setBuiltInZoomControls(true);// 显示缩放按钮(wap网页不支持)
settings.setUseWideViewPort(true);// 支持双击缩放(wap网页不支持)
settings.setJavaScriptEnabled(true);// 支持js功能</span></span>

5.设置WebViewClient

检测网页的加载开始，加载结束，跳转链接的状态

mWebView.setWebViewClient(new WebViewClient() {
    // 开始加载网页
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        System.out.println("开始加载网页了");
    }

    // 网页加载结束
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        System.out.println("网页加载结束");
    }

    // 所有链接跳转会走此方法
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        System.out.println("跳转链接:" + url);
        view.loadUrl(url);// 在跳转链接时强制在当前webview中加载

        //此方法还有其他应用场景, 比如写一个超链接<a href="tel:110">联系我们</a>, 当点击该超链接时,可以在此方法中获取链接地址tel:110, 解析该地址,获取电话号码, 然后跳转到本地打电话页面, 而不是加载网页, 从而实现了webView和本地代码的交互

        return true;
    }
});

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

mWebView.setWebViewClient(new WebViewClient(){       
                    public boolean shouldOverrideUrlLoading(WebView view, String url) {       
                        view.loadUrl(url);       
                        return true;       
                    }       
        });   

6.设置WebChromeClient

监测加载进度，获取网页标题

<span style="font-weight: normal;"><span style="font-size:14px;">mWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        // 进度发生变化
        System.out.println("进度:" + newProgress);
    }

    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
        // 网页标题
        System.out.println("网页标题:" + title);
    }
});</span></span>

7.字体大小设置

WebSettings settings = wv_web.getSettings();

settings.setTextSize(TextSize.LARGEST);

8.WebView加载上一页和下一页

<span style="font-weight: normal;"><span style="font-size:14px;">mWebView.goBack();//跳到上个页面
mWebView.goForward();//跳到下个页面
mWebView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
mWebView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)</span></span>

9.在WebView中的按back键的

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

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

WebView高级用法

1.缓存设置

WebSettings settings = mWebView.getSettings();

//只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
//只加载缓存
settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);
//根据cache-control决定是否从网络上取数据
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
//不加载缓存
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);   

什么是cache-control?
cache-control是在请求网页时服务器的响应头,此响应头用于决定网页的缓存策略.
常见的取值有public(所有内容都将被缓存), private(内容只缓存到私有缓存中),no-cache(所有内容都不会被缓存),max-age=xxx(缓存的内容将在 xxx 秒后失效)等等

如图所示:

2.清理缓存

最简便的方式:
mWebView.clearCache(true);

另外一种方式:
//删除缓存文件夹
File file = CacheManager.getCacheFileBaseDir(); 

   if (file != null && file.exists() && file.isDirectory()) { 
    for (File item : file.listFiles()) { 
     item.delete(); 
    } 
    file.delete(); 
   } 

//删除缓存数据库
context.deleteDatabase("webview.db"); 
context.deleteDatabase("webviewCache.db");

3.Cookie设置

CookieSyncManager.createInstance(this);
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);

String cookie = "name=xxx;age=18";
cookieManager.setCookie(URL, cookie);
CookieSyncManager.getInstance().sync();

4.获取Cookie

CookieManager cookieManager = CookieManager.getInstance();
String cookie = cookieManager.getCookie(URL);

5.清除Cookie

CookieSyncManager.createInstance(context);  
CookieManager cookieManager = CookieManager.getInstance(); 
cookieManager.removeAllCookie();
CookieSyncManager.getInstance().sync();  

Android和Js交互

如果Js和Android实现了交互, 那么我们就可以在网页中随意调用本地的Java代码, 也就是实现了WebView和本地代码的交互. 一旦WebView可以操作Android本地代码, 那么WebView的功能就会更加强大,以后我们直接在一个WebView中就几乎可以实现Android的所有功能,Android原生控件就没有了用武之地.

1.Js调用Android

<span style="font-size:14px;">WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);//开启js

mWebView.loadUrl("file:///android_asset/demo.html");//加载本地网页
mWebView.setWebChromeClient(new WebChromeClient());//此行代码可以保证js的alert弹窗正常弹出

//核心方法, 用于处理js被执行后的回调
mWebView.addJavascriptInterface(new JsCallback() {

    @Override
    public void onJsCallback() {
        System.out.println("js调用Android啦");
    }
}, "demo");//参1是回调接口的实现;参2是js回调对象的名称

//定义回调接口
public interface JsCallback {
    public void onJsCallback();
}</span>

2.Android调用Js

//直接使用webview加载js就可以了
mWebView.loadUrl("javascript:wave()");

3.附上demo.html源码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script language="javascript">
    /* This function is invoked by the activity */
    function wave() {
        alert("Android调用Js啦");
    }
</script>
<body>
    <!-- Js调用Android代码 -->
    <a onClick="window.demo.onJsCallback()"><div style="width:80px;
        margin:0px auto;
        padding:10px;
        text-align:center;
        border:2px solid #202020;" >
            <img id="droid" src="android_normal.png"/><br>
            Click me!
    </div></a>
</body>

注意: js回调的方法的书写格式: onClick="window.demo.onJsCallback() 格式是: window.js回调对象的名称(要和java代码中设置的一致).回调方法名称(要和java代码中设置的一致)

Web基本使用demo源码

8.加载数据

webView.loadDataWithBaseURL(null,applyLimit,

 "text/html", "utf-8", null);

 

 webView.loadData(certificateLimit, "text/html", "utf-8");

 

value.setText(Html.fromHtml(itemList.getJSONObject(i).getString(

"Value")));