Android WebView 详解

  1. 相关API
    1.1. 相关类介绍
    1.2. WebView
    1.3. WebSettings
    1.4. WebViewClient
    1.5. WebChromeClient
  2. 回调顺序
  3. 视口(viewport)
  4. 管理 Cookies
  5. 缓存(Cache)
  6. 预加载(Preload)
  7. 与Javascript交互
  8. 地理位置(Geolocation)
  9. 弹框(alert/confirm/prompt/onbeforeunload)
  10. 全屏(Fullscreen)
  11. 内存泄漏
  12. 参考

相关API

相关类介绍

  • WebResourceRequest 添加于API21，封装了一个Web资源的请求信息，包含：请求地址，请求方法，请求头，是否主框架，是否用户点击，是否重定向
  • WebResourceResponse 封装了一个Web资源的响应信息，包含：响应数据流，编码，MIME类型，API21后添加了响应头，状态码与状态描述
  • WebResourceError 添加于API23，封装了一个Web资源的错误信息，包含错误码和描述
  • CookieManager 管理用于WebView的cookies。。
  • WebViewDatabase 存储与管理以下几类浏览数据：
    • 表单自动填充的的用户名与密码
    • HTTP认证的用户名与密码
    • 曾经输入过的文本(比如自动完成)
  • WebStorage 用于管理WebView提供的JS存储API，比如Application Cache API，Web SQL Database API，HTML5 Web Storage API
  • GeolocationPermissions 用于管理WebView的JS Geolocation API
  • HttpAuthHandler 表示一个HTTP认证请求，提供了方法操作(proceed/cancel)请求
  • SslErrorHandler 表示一个处理SSL错误的请求，提供了方法操作(proceed/cancel)请求
  • ClientCertRequest 表示一个证书请求，提供了方法操作(proceed/cancel/ignore)请求
  • JsResult 用于处理底层JS发起的请求，为客户端提供一些方法指明应进行的操作，比如确认或取消。

WebView

基本

// 获取当前页面的URL
public String getUrl();
// 获取当前页面的原始URL(重定向后可能当前url不同)
// 就是http headers的Referer参数，loadUrl时为null
public String getOriginalUrl();
// 获取当前页面的标题
public String getTitle();
// 获取当前页面的favicon
public Bitmap getFavicon();
// 获取当前页面的加载进度
public int getProgress();

// 通知WebView内核网络状态
// 用于设置JS属性`window.navigator.isOnline`和产生HTML5事件`online/offline`
public void setNetworkAvailable(boolean networkUp)

// 设置初始缩放比例
public void setInitialScale(int scaleInPercent)；

加载网页

// 加载URL指定的网页
public void loadUrl(String url);
// 携带http headers加载URL指定的网页
public void loadUrl(String url, Map<String, String> additionalHttpHeaders);
// 使用POST请求加载指定的网页
public void postUrl(String url, byte[] postData);
// 重新加载当前网页
public void reload();

// 加载内容
public void loadData(String data, String mimeType, String encoding);
// 使用baseUrl加载内容
public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl);

Javascript

// 注入Javascript对象
public void addJavascriptInterface(Object object, String name);
// 移除已注入的Javascript对象，下次加载或刷新页面时生效
public void removeJavascriptInterface(String name);

// 对传入的JS表达式求值，通过resultCallback返回结果
// 此函数添加于API19，必须在UI线程中调用，回调也将在UI线程
public void evaluateJavascript(String script, ValueCallback<String> resultCallback)

导航(前进后退)

// 复制一份BackForwardList
public WebBackForwardList copyBackForwardList();
// 是否可后退
public boolean canGoBack();
// 是否可前进
public boolean canGoForward();
// 是否可前进/后退steps页，大于0表示前进小于0表示后退
public boolean canGoBackOrForward(int steps);

// 后退一页
public void goBack();
// 前进一页
public void goForward();
// 前进/后退steps页，大于0表示前进小于0表示后退
public void goBackOrForward(int steps);

// 清除当前webview访问的历史记录
public void clearHistory();

网页查找功能

// 设置网页查找结果回调
public void setFindListener(FindListener listener);
// 异步执行查找网页内包含的字符串并设置高亮，查找结果会回调.
public void findAllAsync (String find);
// 查找下一个匹配的字符串
public void findNext (boolean forward);
// 清除网页查找的高亮匹配字符串
public void clearMatches();

截屏/翻页/缩放

// 保存网页(.html)到指定文件
public void saveWebArchive(String filename);
// 保存网页(.html)到文件
public void saveWebArchive(String basename, boolean autoname, ValueCallback<String> callback)；

// 上翻一页，即向上滚动WebView高度的一半
public void pageUp(boolean top);
// 下翻一页，即向下滚动WebView高度的一半
public void pageDown(boolean bottom);

// 缩放
public void zoomBy(float factor);
// 放大
public boolean zoomIn();
// 缩放
public boolean zoomOut();

其它

// 清除网页缓存，由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序
public void clearCache(boolean includeDiskFiles);
// 清除自动完成填充的表单数据
public void clearFormData();
// 清除SSL偏好
public void clearSslPreferences();

// 查询文档中是否有图片，查询结果将被发送到msg.getTarget()
// 如果包含图片，msg.arg1 为1，否则为0
public void documentHasImages(Message msg);

// 请求最近轻叩(tapped)的 锚点/图像 元素的URL，查询结果将被发送到msg.getTarget()
// msg.getData()中的url是锚点的href属性，title是锚点的文本，src是图像的src
public void requestFocusNodeHref(Message msg);

// 请求最近触摸(touched)的 图像元素的URL，查询结果将被发送到msg.getTarget()
// msg.getData()中的url是图像链接
public void requestImageRef(Message msg) 


// 清除证书请求偏好，添加于API21
// 在WebView收到`android.security.STORAGE_CHANGED` Intent时会自动清除
public static void clearClientCertPreferences(Runnable onCleared)

// 开启网页内容(js,css,html...)调试模式，添加于API19
public static void setWebContentsDebuggingEnabled(boolean enabled)

WebSettings

WebSettings settings = web.getSettings();

// 存储(storage)
// 启用HTML5 DOM storage API，默认值 false
settings.setDomStorageEnabled(true); 
// 启用Web SQL Database API，这个设置会影响同一进程内的所有WebView，默认值 false
// 此API已不推荐使用，参考：https://www.w3.org/TR/webdatabase/
settings.setDatabaseEnabled(true);  
// 启用Application Caches API，必需设置有效的缓存路径才能生效，默认值 false
// 此API已废弃，参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache
settings.setAppCacheEnabled(true); 
settings.setAppCachePath(context.getCacheDir().getAbsolutePath());

// 定位(location)
settings.setGeolocationEnabled(true);

// 是否保存表单数据
settings.setSaveFormData(true);
// 是否当webview调用requestFocus时为页面的某个元素设置焦点，默认值 true
settings.setNeedInitialFocus(true);  

// 是否支持viewport属性，默认值 false
// 页面通过`<meta name="viewport" ... />`自适应手机屏幕
settings.setUseWideViewPort(true);
// 是否使用overview mode加载页面，默认值 false
// 当页面宽度大于WebView宽度时，缩小使页面宽度等于WebView宽度
settings.setLoadWithOverviewMode(true);
// 布局算法
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

// 是否支持Javascript，默认值false
settings.setJavaScriptEnabled(true); 
// 是否支持多窗口，默认值false
settings.setSupportMultipleWindows(false);
// 是否可用Javascript(window.open)打开窗口，默认值 false
settings.setJavaScriptCanOpenWindowsAutomatically(false);

// 资源访问
settings.setAllowContentAccess(true); // 是否可访问Content Provider的资源，默认值 true
settings.setAllowFileAccess(true);    // 是否可访问本地文件，默认值 true
// 是否允许通过file url加载的Javascript读取本地文件，默认值 false
settings.setAllowFileAccessFromFileURLs(false);  
// 是否允许通过file url加载的Javascript读取全部资源(包括文件,http,https)，默认值 false
settings.setAllowUniversalAccessFromFileURLs(false);

// 资源加载
settings.setLoadsImagesAutomatically(true); // 是否自动加载图片
settings.setBlockNetworkImage(false);       // 禁止加载网络图片
settings.setBlockNetworkLoads(false);       // 禁止加载所有网络资源

// 缩放(zoom)
settings.setSupportZoom(true);          // 是否支持缩放
settings.setBuiltInZoomControls(false); // 是否使用内置缩放机制
settings.setDisplayZoomControls(true);  // 是否显示内置缩放控件

// 默认文本编码，默认值 "UTF-8"
settings.setDefaultTextEncodingName("UTF-8");
settings.setDefaultFontSize(16);        // 默认文字尺寸，默认值16，取值范围1-72
settings.setDefaultFixedFontSize(16);   // 默认等宽字体尺寸，默认值16
settings.setMinimumFontSize(8);         // 最小文字尺寸，默认值 8
settings.setMinimumLogicalFontSize(8);  // 最小文字逻辑尺寸，默认值 8
settings.setTextZoom(100);              // 文字缩放百分比，默认值 100

// 字体
settings.setStandardFontFamily("sans-serif");   // 标准字体，默认值 "sans-serif"
settings.setSerifFontFamily("serif");           // 衬线字体，默认值 "serif"
settings.setSansSerifFontFamily("sans-serif");  // 无衬线字体，默认值 "sans-serif"
settings.setFixedFontFamily("monospace");       // 等宽字体，默认值 "monospace"
settings.setCursiveFontFamily("cursive");       // 手写体(草书)，默认值 "cursive"
settings.setFantasyFontFamily("fantasy");       // 幻想体，默认值 "fantasy"


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    // 用户是否需要通过手势播放媒体(不会自动播放)，默认值 true
    settings.setMediaPlaybackRequiresUserGesture(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // 5.0以上允许加载http和https混合的页面(5.0以下默认允许，5.0+默认禁止)
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    // 是否在离开屏幕时光栅化(会增加内存消耗)，默认值 false
    settings.setOffscreenPreRaster(false);
}

if (isNetworkConnected(context)) {
    // 根据cache-control决定是否从网络上取数据
    settings.setCacheMode(WebSettings.LOAD_DEFAULT);
} else {
    // 没网，离线加载，优先加载缓存(即使已经过期)
    settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

// deprecated
settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
settings.setDatabasePath(context.getDir("database", Context.MODE_PRIVATE).getPath());
settings.setGeolocationDatabasePath(context.getFilesDir().getPath());

通常大部分保持默认值就好了

WebSettings settings = web.getSettings();
// 缓存(cache)
settings.setAppCacheEnabled(true);      // 默认值 false
settings.setAppCachePath(context.getCacheDir().getAbsolutePath());

// 存储(storage)
settings.setDomStorageEnabled(true);    // 默认值 false
settings.setDatabaseEnabled(true);      // 默认值 false 
 
// 是否支持viewport属性，默认值 false
// 页面通过`<meta name="viewport" ... />`自适应手机屏幕
settings.setUseWideViewPort(true);
// 是否使用overview mode加载页面，默认值 false
// 当页面宽度大于WebView宽度时，缩小使页面宽度等于WebView宽度
settings.setLoadWithOverviewMode(true);

// 是否支持Javascript，默认值false
settings.setJavaScriptEnabled(true);    

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // 5.0以上允许加载http和https混合的页面(5.0以下默认允许，5.0+默认禁止)
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
} 

if (isNetworkConnected(context)) {
    // 根据cache-control决定是否从网络上取数据
    settings.setCacheMode(WebSettings.LOAD_DEFAULT);
} else {
    // 没网，离线加载，优先加载缓存(即使已经过期)
    settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

WebViewClient

// 拦截页面加载，返回true表示宿主app拦截并处理了该url，否则返回false由当前WebView处理
// 此方法在API24被废弃，不处理POST请求
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return false;
}

// 拦截页面加载，返回true表示宿主app拦截并处理了该url，否则返回false由当前WebView处理
// 此方法添加于API24，不处理POST请求，可拦截处理子frame的非http请求
@TargetApi(Build.VERSION_CODES.N)
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    return shouldOverrideUrlLoading(view, request.getUrl().toString());
}

// 此方法废弃于API21，调用于非UI线程
// 拦截资源请求并返回响应数据，返回null时WebView将继续加载资源
// 注意：API21以下的AJAX请求会走onLoadResource，无法通过此方法拦截
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
    return null;
}

// 此方法添加于API21，调用于非UI线程
// 拦截资源请求并返回数据，返回null时WebView将继续加载资源
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
    return shouldInterceptRequest(view, request.getUrl().toString());
}

// 页面(url)开始加载
public void onPageStarted(WebView view, String url, Bitmap favicon) {
}

// 页面(url)完成加载
public void onPageFinished(WebView view, String url) {
}

// 将要加载资源(url)
public void onLoadResource(WebView view, String url) {
}

// 这个回调添加于API23，仅用于主框架的导航
// 通知应用导航到之前页面时，其遗留的WebView内容将不再被绘制。
// 这个回调可以用来决定哪些WebView可见内容能被安全地回收，以确保不显示陈旧的内容
// 它最早被调用，以此保证WebView.onDraw不会绘制任何之前页面的内容，随后绘制背景色或需要加载的新内容。
// 当HTTP响应body已经开始加载并体现在DOM上将在随后的绘制中可见时，这个方法会被调用。
// 这个回调发生在文档加载的早期，因此它的资源(css,和图像)可能不可用。
// 如果需要更细粒度的视图更新，查看 postVisualStateCallback(long, WebView.VisualStateCallback).
// 请注意这上边的所有条件也支持 postVisualStateCallback(long ,WebView.VisualStateCallback)
public void onPageCommitVisible(WebView view, String url) {
}

// 此方法废弃于API23
// 主框架加载资源时出错
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
}

// 此方法添加于API23
// 加载资源时出错，通常意味着连接不到服务器
// 由于所有资源加载错误都会调用此方法，所以此方法应尽量逻辑简单
@TargetApi(Build.VERSION_CODES.M)
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
    if (request.isForMainFrame()) {
        onReceivedError(view, error.getErrorCode(), error.getDescription().toString(), request.getUrl().toString());
    }
}

// 此方法添加于API23
// 在加载资源(iframe,image,js,css,ajax...)时收到了 HTTP 错误(状态码>=400)
public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
}


// 是否重新提交表单，默认不重发
public void onFormResubmission(WebView view, Message dontResend, Message resend) {
    dontResend.sendToTarget();
}

// 通知应用可以将当前的url存储在数据库中，意味着当前的访问url已经生效并被记录在内核当中。
// 此方法在网页加载过程中只会被调用一次，网页前进后退并不会回调这个函数。
public void doUpdateVisitedHistory(WebView view, String url, boolean isReload) {
}

// 加载资源时发生了一个SSL错误，应用必需响应(继续请求或取消请求)
// 处理决策可能被缓存用于后续的请求，默认行为是取消请求
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
    handler.cancel();
}

// 此方法添加于API21，在UI线程被调用
// 处理SSL客户端证书请求，必要的话可显示一个UI来提供KEY。
// 有三种响应方式：proceed()/cancel()/ignore()，默认行为是取消请求
// 如果调用proceed()或cancel()，Webview 将在内存中保存响应结果且对相同的"host:port"不会再次调用 onReceivedClientCertRequest
// 多数情况下，可通过KeyChain.choosePrivateKeyAlias启动一个Activity供用户选择合适的私钥
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onReceivedClientCertRequest(WebView view, ClientCertRequest request) {
    request.cancel();
}

// 处理HTTP认证请求，默认行为是取消请求
public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
    handler.cancel();
}

// 通知应用有个已授权账号自动登陆了
public void onReceivedLoginRequest(WebView view, String realm, String account, String args) {
}
// 给应用一个机会处理按键事件
// 如果返回true，WebView不处理该事件，否则WebView会一直处理，默认返回false
public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {
    return false;
}

// 处理未被WebView消费的按键事件
// WebView总是消费按键事件，除非是系统按键或shouldOverrideKeyEvent返回true
// 此方法在按键事件分派时被异步调用
public void onUnhandledKeyEvent(WebView view, KeyEvent event) {
    super.onUnhandledKeyEvent(view, event);
}

// 通知应用页面缩放系数变化
public void onScaleChanged(WebView view, float oldScale, float newScale) {
}

WebChromeClient

// 获得所有访问历史项目的列表，用于链接着色。
public void getVisitedHistory(ValueCallback<String[]> callback) {
}

// <video /> 控件在未播放时，会展示为一张海报图，HTML中可通过它的'poster'属性来指定。
// 如果未指定'poster'属性，则通过此方法提供一个默认的海报图。
public Bitmap getDefaultVideoPoster() {
    return null;
}

// 当全屏的视频正在缓冲时，此方法返回一个占位视图(比如旋转的菊花)。
public View getVideoLoadingProgressView() {
    return null;
}

// 接收当前页面的加载进度
public void onProgressChanged(WebView view, int newProgress) {
}

// 接收文档标题
public void onReceivedTitle(WebView view, String title) {
}

// 接收图标(favicon)
public void onReceivedIcon(WebView view, Bitmap icon) {
}

// Android中处理Touch Icon的方案
// http://droidyue.com/blog/2015/01/18/deal-with-touch-icon-in-android/index.html
public void onReceivedTouchIconUrl(WebView view, String url, boolean precomposed) {
}

// 通知应用当前页进入了全屏模式，此时应用必须显示一个包含网页内容的自定义View
public void onShowCustomView(View view, CustomViewCallback callback) {
}

// 通知应用当前页退出了全屏模式，此时应用必须隐藏之前显示的自定义View
public void onHideCustomView() {
}


// 显示一个alert对话框
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    return false;
}

// 显示一个confirm对话框
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
    return false;
}

// 显示一个prompt对话框
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    return false;
}

// 显示一个对话框让用户选择是否离开当前页面
public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {
    return false;
}


// 指定源的网页内容在没有设置权限状态下尝试使用地理位置API。
// 从API24开始，此方法只为安全的源(https)调用，非安全的源会被自动拒绝
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
}

// 当前一个调用 onGeolocationPermissionsShowPrompt() 取消时，隐藏相关的UI。
public void onGeolocationPermissionsHidePrompt() {
}

// 通知应用打开新窗口
public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
    return false;
}

// 通知应用关闭窗口
public void onCloseWindow(WebView window) {
}

// 请求获取取焦点
public void onRequestFocus(WebView view) {
}

// 通知应用网页内容申请访问指定资源的权限(该权限未被授权或拒绝)
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequest(PermissionRequest request) {
    request.deny();
}

// 通知应用权限的申请被取消，隐藏相关的UI。
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequestCanceled(PermissionRequest request) {
}

// 为'<input type="file" />'显示文件选择器，返回false使用默认处理
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
    return false;
}

// 接收JavaScript控制台消息
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
    return false;
}

回调顺序

页面加载回调顺序：

shouldOverrideUrlLoading
onProgressChanged[10]
shouldInterceptRequest 
onProgressChanged[...]
onPageStarted
onProgressChanged[...]
onLoadResource 
onProgressChanged[...]
onReceivedTitle/onPageCommitVisible 
onProgressChanged[100]
onPageFinished
onReceivedIcon

资源加载回调：

shouldInterceptRequest() -> onLoadResource()

发生重定向时回调：

onPageStarted() -> shouldOverrideUrlLoading()

直接loadUrl的回调：

// 无重定向
onPageStarted() -> onPageFinished()
// 有重定向，shouldOverrideUrlLoading 返回 true 时 onPageFinished 仍会执行
onPageStarted() -> redirection -> ... -> onPageFinished()

用户点击链接的回调：

// shouldOverrideUrlLoading 返回 true 时不执行onPageStarted/onPageFinished
shouldOverrideUrlLoading() -> ...
// 无重定向
shouldOverrideUrlLoading() -> onPageStarted() -> onPageFinished()
// 有重定向
shouldOverrideUrlLoading() -> onPageStarted() -> redirection -> ... -> onPageFinished()
// 有重定向(A->B->C)
shouldOverrideUrlLoading(A) -> onPageStarted(A) -> 
onPageStarted(B) -> shouldOverrideUrlLoading(B) -> 
onPageStarted(C) -> shouldOverrideUrlLoading(C) -> onPageFinished(C)

后退/前进/刷新 时回调：

onPageStarted() -> onPageFinished()

关于 window.location

假设从A页面跳转到B页面

  • 如果页面B中直接输出 window.location="http://example.com"，那页面B不会被加入回退栈，回退将直接回到A页
  • 如果页面B加载完成后，比如用setTimeout延迟了，那页面B会被加入回退栈，当回退到页面A时会再执行跳转，这会导致回退功能看起来不正常，需要快速回退两次才能回到A页面

视口(viewport)

https://developer.android.com/guide/webapps/targeting.html
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@viewport

视口是一个为网页提供绘图区域的矩形。

你可以指定数个视口属性，比如尺寸和初始缩放系数(initial scale)。其中最重要的是视口宽度，它定义了网页水平方向的可用像素总数(可用的CSS像素数)。

多数 Android 上的网页浏览器(包括 Chrome)设置默认视口为一个大尺寸(被称为"wide viewport mode"，宽约 980px)。
也有许多浏览器默认会尽可能缩小以显示完整的视口宽度(被称为"overview mode")。

// 是否支持viewport属性，默认值 false
// 页面通过`<meta name="viewport" ... />`自适应手机屏幕
// 当值为true且viewport标签不存在或未指定宽度时使用 wide viewport mode
settings.setUseWideViewPort(true);
// 是否使用overview mode加载页面，默认值 false
// 当页面宽度大于WebView宽度时，缩小使页面宽度等于WebView宽度
settings.setLoadWithOverviewMode(true);

viewport 语法

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

指定视口宽度精确匹配设备屏幕宽度同时禁用了缩放

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

通过WebView设置初始缩放(initial-scale)

// 设置初始缩放百分比
// 0表示依赖于setUseWideViewPort和setLoadWithOverviewMode
// 100表示不缩放
web.setInitialScale(0)

管理 Cookies

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies

Cookie 是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。
可通过Cookie保存浏览信息来获得更轻松的在线体验，比如保持登录状态、记住偏好设置，并提供本地的相关内容。

会话Cookie 与 持久Cookie

  • 会话cookie不需要指定Expires和Max-Age，浏览器关闭之后它会被自动删除。
  • 持久cookie指定了Expires或Max-Age，会被存储到磁盘上，不会因浏览器而失效。

第一方Cookie 与 第三方Cookie

每个Cookie都有与之关联的域，与页面域一样的就是第一方Cookie，不一样的就是第三方Cookie。

// 设置接收第三方Cookie
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    CookieManager.getInstance().setAcceptThirdPartyCookies(vWeb, true);
}

读取/写入/移除 Cookie

// 获取指定url关联的所有Cookie
// 返回值使用"Cookie"请求头格式："name=value; name2=value2; name3=value3"
CookieManager.getInstance().getCookie(url);

// 为指定的url设置一个Cookie
// 参数value使用"Set-Cookie"响应头格式，参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie
CookieManager.getInstance().setCookie(url, value);

// 移除指定url下的指定Cookie
CookieManager.getInstance().setCookie(url, cookieName + "=");

webkit cookie 工具类

public class WebkitCookieUtil { 

    // 移除指定url关联的所有cookie
    public static void remove(String url) {
        CookieManager cm = CookieManager.getInstance();
        for (String cookie : cm.getCookie(url).split("; ")) {
            cm.setCookie(url, cookie.split("=")[0] + "=");
        }
        flush();
    }

    // sessionOnly 为true表示移除所有会话cookie，否则移除所有cookie
    public static void remove(boolean sessionOnly) {
        CookieManager cm = CookieManager.getInstance();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (sessionOnly) {
                cm.removeSessionCookies(null);
            } else {
                cm.removeAllCookies(null);
            }
        } else {
            if (sessionOnly) {
                cm.removeSessionCookie();
            } else {
                cm.removeAllCookie();
            }
        }
        flush();
    }

    // 写入磁盘
    public static void flush() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            CookieManager.getInstance().flush();
        } else {
            CookieSyncManager.getInstance().sync();
        }
    }
}

同步系统Cookie 与 Webkit Cookie

// 将系统级Cookie(比如`new URL(...).openConnection()`的Cookie) 同步到 WebView
public class WebkitCookieHandler extends CookieHandler {
    private static final String TAG = WebkitCookieHandler.class.getSimpleName();
    private CookieManager wcm;

    public WebkitCookieHandler() {
        this.wcm = CookieManager.getInstance();
    }

    @Override
    public void put(URI uri, Map<String, List<String>> headers) throws IOException {
        if ((uri == null) || (headers == null)) {
            return;
        }
        String url = uri.toString();

        for (String headerKey : headers.keySet()) {
            if ((headerKey == null) || !(headerKey.equalsIgnoreCase("set-cookie2") || headerKey.equalsIgnoreCase("set-cookie"))) {
                continue;
            }
            for (String headerValue : headers.get(headerKey)) {
                Log.e(TAG, headerKey + ": " + headerValue);
                this.wcm.setCookie(url, headerValue);
            }
        }
    }

    @Override
    public Map<String, List<String>> get(URI uri, Map<String, List<String>> headers) throws IOException {
        if ((uri == null) || (headers == null)) {
            throw new IllegalArgumentException("Argument is null");
        }
        String url = uri.toString();

        String cookie = this.wcm.getCookie(url);
        Log.e(TAG, "cookie: " + cookie);
        if (cookie != null) {
            return Collections.singletonMap("Cookie", Arrays.asList(cookie));
        } else {
            return Collections.emptyMap();
        }
    }
}

缓存(Cache)

设置缓存模式

  • WebSettings.LOAD_DEFAULT 根据cache-control决定是否从网络上取数据
  • WebSettings.LOAD_CACHE_ELSE_NETWORK 无网，离线加载，优先加载缓存(即使已经过期)
  • WebSettings.LOAD_NO_CACHE 仅从网络加载
  • WebSettings.LOAD_CACHE_ONLY 仅从缓存加载
// 网络正常时根据cache-control决定是否从网络上取数据 
if (isNetworkConnected(mActivity)) {
    settings.setCacheMode(WebSettings.LOAD_DEFAULT); 
} else {
    settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
}

清除缓存

// 传入true表示同时内存与磁盘，false表示仅清除内存
// 由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序
web.clearCache(true);

预加载(Preload)

一个简单的预加载示例(shouldInterceptRequest)
点击 assets/demo.xml 里的链接"hello"时会加载本地的 assets/hello.html

assets/demo.xml

<html>
<body>
<a href="http://demo.com/assets/hello.html">hello</a>
</body>
</html>

assets/hello.html

<html>
<body>
hello world!
</body>
</html>

重载 shouldInterceptRequest

@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
    return preload("assets/", url);
}

WebResourceResponse preload(String path, String url) { 
    if (!url.contains(path)) {
        return null;
    }
    String local = url.replaceFirst("^http.*" + path, ""); 
    try {
        InputStream is = getApplicationContext().getAssets().open(local);
        String ext = MimeTypeMap.getFileExtensionFromUrl(local);
        String mimeType = MimeTypeMap.getSingleton().getMimeTypeFromExtension(ext);
        return new WebResourceResponse(mimeType, "UTF-8", is);
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    } 
}

与Javascript交互

启用Javascript

// 是否支持Javascript，默认值false
settings.setJavaScriptEnabled(true);

注入对象到Javascript

// 注入对象'jsobj'，在网页中通过`jsobj.say(...)`调用
web.addJavascriptInterface(new JSObject(), "jsobj")

在API17后支持白名单，只有添加了@JavascriptInterface注解的方法才会注入JS

public class JSObject {
    @JavascriptInterface
    public void say(String words) {
      // todo
    }
}

移除已注入Javascript的对象

web.removeJavascriptInterface("jsobj")

执行JS表达式

// 弹出提示框
web.loadUrl("javascript:alert('hello')");
// 调用注入的jsobj.say方法
web.loadUrl("javascript:jsobj.say('hello')");

在API19后可异步执行JS表达式，并通过回调返回值

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    vWeb.evaluateJavascript("111+222", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            // value => "333"
        }
    });
}

地理位置(Geolocation)

https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation

需要以下权限

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

默认可用

settings.setGeolocationEnabled(true);

当H5调用地理位置API时，会先通过WebChromeClient.onGeolocationPermissionsShowPrompt申请授权

// 指定源的网页内容在没有设置权限状态下尝试使用地理位置API。 
@Override
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
    boolean allow = true;   // 是否允许origin使用定位API
    boolean retain = false; // 内核是否记住这次制授权
    callback.invoke(origin, true, false);
}

// 之前调用 onGeolocationPermissionsShowPrompt() 申请的授权被取消时，隐藏相关的UI。
@Override
public void onGeolocationPermissionsHidePrompt() {
}

注：从API24开始，仅支持安全源(https)的请求，非安全源的请求将自动拒绝且不调用 onGeolocationPermissionsShowPrompt 与 onGeolocationPermissionsHidePrompt

弹框(alert/confirm/prompt/onbeforeunload)

在javascript中使用 alert/confirm/prompt 会弹出对话框，可通过重载 WebChromeClient 的下列方法控制弹框的交互，比如替换系统默认的对话框或屏蔽这些对话框

@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    // 这里处理交互逻辑
    // result.cancel(); 表示用户取消了操作(点击了取消按钮)
    // result.confirm(); 表示用户确认了操作(点击了确认按钮)
    // ...
    // 返回true表示自已处理，返回false表示由系统处理
    return false; 
} 
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
    return false;
} 
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    return false;
}

@Override
public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {
    return false;
}

全屏(Fullscreen)

Fullscreen API
https://developer.mozilla.org/zh-CN/docs/DOM/Using_fullscreen_mode

  • 当H5请求全屏时，会回调 WebChromeClient.onShowCustomView 方法
  • 当H5退出全屏时，会回调 WebChromeClient.onHideCustomView 方法

1.manifest

自己处理屏幕尺寸方向的变化(切换屏幕方向时不重建activity)
WebView播放视频需要开启硬件加速

<activity
    android:name=".WebViewActivity"
    android:configChanges="orientation|screenSize"
    android:hardwareAccelerated="true"
    android:screenOrientation="portrait" />

2.页面布局

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/Toolbar.Back"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView
            android:id="@+id/web"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        ...
    </FrameLayout>

</LinearLayout>

3.处理全屏回调

CustomViewCallback mCallback;
View vCustom;

@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
    setFullscreen(true);
    vCustom = view;
    mCallback = callback;
    if (vCustom != null) {
        ViewGroup parent = (ViewGroup) vWeb.getParent();
        parent.addView(vCustom);
    }
}

@Override
public void onHideCustomView() {
    setFullscreen(false);
    if (vCustom != null) {
        ViewGroup parent = (ViewGroup) vWeb.getParent();
        parent.removeView(vCustom);
        vCustom = null;
    }
    if (mCallback != null) {
        mCallback.onCustomViewHidden();
        mCallback = null;
    } 
}

4.设置全屏，切换屏幕方向

void setFullscreen(boolean fullscreen) { 
    if (fullscreen) {
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        vToolbar.setVisibility(View.GONE);
        vWeb.setVisibility(View.GONE);
    } else {
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN, WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
        vToolbar.setVisibility(View.VISIBLE);
        vWeb.setVisibility(View.VISIBLE);
    }
    if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    } else {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }
}

内存泄漏

直接 new WebView 并传入 application context 代替在 XML 里面声明以防止 activity 引用被滥用，能解决90+%的 WebView 内存泄漏。

vWeb =  new WebView(getContext().getApplicationContext());
container.addView(vWeb);

注：此方法会导致select无法弹出，因为select默认会弹出一个原生的框，需要activity承载。

W/WindowManager: Attempted to add window with non-application token WindowToken{75b7f7c null}.  Aborting.

销毁 WebView

if (vWeb != null) {
    vWeb.setWebViewClient(null);
    vWeb.setWebChromeClient(null);
    vWeb.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
    vWeb.clearHistory();

    ((ViewGroup) vWeb.getParent()).removeView(vWeb);
    vWeb.destroy();
    vWeb = null;
}

参考

https://developer.android.com/reference/android/webkit/package-summary.html

Fullscreen API 全屏显示网页
http://calefy.org/2012/06/03/fullscreen-web-page-width-fullscreen-api.html

WebView实现全屏播放的一种方法
https://segmentfault.com/a/1190000007561455

第一方Cookie和第三方Cookie区别
https://www.biaodianfu.com/first-party-cookie-and-third-party-cookie.html

Android WebView的Js对象注入漏洞解决方案
http://blog.csdn.net/leehong2005/article/details/11808557

Android安全开发之WebView中的地雷
http://yaq.qq.com/blog/10

Android WebView：性能优化不得不说的事
https://juejin.im/entry/57d6434067f3560057e50b20

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270

推荐阅读更多精彩内容