WebView用法详解

2018-01-25 本文已影响6人水固态中

1. 简介

WebView是一个基于webkit引擎、展现web页面的控件。

Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。

2. 作用

显示和渲染Web页面
直接使用html文件（网络上或本地assets中）作布局
可和JavaScript交互调用

WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

3. 使用介绍

一般来说Webview可单独使用，可联合其子类一起使用，所以接下来，我会介绍：

Webview自身的常见方法；
Webview的最常用的子类
（WebSettings类、WebViewClient类、WebChromeClient类)
Android和Js的交互

3.1 Webview常用方法

我们都知道在Android上可以通过WebView加载网页，但是能否加载html的源码呢？答案是肯定的。一般条件下，我们可以在WebView上加载html的代码。

3.1.1 加载url

html文件

WebView wView = (WebView)findViewById(R.id.wv1);
WebSettings wSet = wView.getSettings(); 
wSet.setJavaScriptEnabled(true);
//打开本包内asset目录下的index.html文件
wView.loadUrl("file:///android_asset/index.html"); 

// 打开本地sd卡内的index.html文件 
wView.loadUrl("content://com.android.htmlfileprovider/sdcard/index.html");

// 打开指定URL的html文件 
wView.loadUrl("http://wap.baidu.com");

使用 LoadData 或者 loadDataWithBaseURL方法加载html代码

有时候我们的webview可能只是html片段，而不是一个完整的网页，事实上绝大多数时候都是如此，完整的网页无需做成应用，而直接在浏览器访问。

这种情况我们使用 LoadData 或者 loadDataWithBaseURL方法，后者用的最多：

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

loadDataWithBaseURL()比loadData()多两个参数，可以指定HTML代码片段中相关资源的相对根路径，也可以指定历史Url，其余三个参数相同。

这里主要注意参数baseUrl，baseUrl指定了你的data参数中数据是以什么地址为基准的，因为data中的数据可能会有超链接或者是image元素，而很多网站的地址都是用的相对路径，如果没有baseUrl，webview将访问不到这些资源。

String content="<p><fontcolor='red'>hellobaidu!</font></p>";
webview.loadDataWithBaseURL(null,content,"text/html","UTF-8",null);//加载定义的代码，并设定编码格式和字符集。

添加css样式拼接html
实现新闻详情页面

String linkCss = "<style type=\"text/css\"> " +
                     "img {" + 
                           "width:100%;" +  
                           "height:auto;" +  
                     "}" +  
                     "body {" +  
                           "margin-right:15px;" +  
                           "margin-left:15px;" +  
                           "margin-top:15px;" +  
                           "font-size:45px;" +  
                     "}" +  
                  "</style>";
String html = "<html><header>" + linkCss + "</header>" + content + "</body></html>"; 
webView.loadData(html, "text/html", "uft-8");
//或者可以直接linkcss
String linkCss="<link href="file:///android_asset/目录/style.css" rel="stylesheet" type="text/css" media="all">"