WebView基本知识点介绍

2019-02-01 本文已影响52人码上就说

Webview知识点

1.常用方法

void loadUrl(String url):加载网络链接 url

boolean canGoBack():判断 WebView 当前是否可以返回上一页

goBack():回退到上一页

boolean canGoForward():判断 WebView 当前是否可以向前一页

goForward():回退到前一页

onPause():类似 Activity 生命周期，页面进入后台不可见状态

pauseTimers():该方法面向全局整个应用程序的webview，它会暂停所有webview的layout，parsing，JavaScript Timer。当程序进入后台时，该方法的调用可以降低CPU功耗。

onResume():在调用 onPause()后，可以调用该方法来恢复 WebView 的运行。

resumeTimers():恢复pauseTimers时的所有操作。(注：pauseTimers和resumeTimers 方法必须一起使用，否则再使用其它场景下的 WebView 会有问题)

destroy():销毁 WebView

clearHistory():清除当前 WebView 访问的历史记录。

clearCache(boolean includeDiskFiles):清空网页访问留下的缓存数据。需要注意的时，由于缓存是全局的，所以只要是WebView用到的缓存都会被清空，即便其他地方也会使用到。该方法接受一个参数，从命名即可看出作用。若设为false，则只清空内存里的资源缓存，而不清空磁盘里的。

reload():重新加载当前请求

setLayerType(int layerType, Paint paint):设置硬件加速、软件加速

removeAllViews():清除子view。

clearSslPreferences():清除ssl信息。

clearMatches():清除网页查找的高亮匹配字符。

removeJavascriptInterface(String interfaceName):删除interfaceName 对应的注入对象

addJavascriptInterface(Object object,String interfaceName):注入 java 对象。

setVerticalScrollBarEnabled(boolean verticalScrollBarEnabled):设置垂直方向滚动条。

setHorizontalScrollBarEnabled(boolean horizontalScrollBarEnabled):设置横向滚动条。

loadUrl(String url, Map<String, String> additionalHttpHeaders):加载制定url并携带http header数据。

evaluateJavascript(String script, ValueCallback<String> resultCallback):Api 19 之后可以采用此方法之行 Js。

stopLoading():停止 WebView 当前加载。

clearView():在Android 4.3及其以上系统这个api被丢弃了，并且这个api大多数情况下会有bug，经常不能清除掉之前的渲染数据。官方建议通过loadUrl("about:blank")来实现这个功能，阴雨需要重新加载一个页面自然时间会收到影响。

freeMemory():释放内存，不过貌似不好用。

clearFormData():清除自动完成填充的表单数据。需要注意的是，该方法仅仅清除当前表单域自动完成填充的表单数据，并不会清除WebView存储到本地的数据。

我这里在介绍下下面几组方法，比较重要，项目当中可能会遇到坑

onPause() 尽力尝试暂停可以暂停的任何处理，如动画和地理位置。不会暂停JavaScript。要全局暂停JavaScript，可使用pauseTimers。

onResume() 恢复onPause() 停掉的操作；

pauseTimers() 暂停所有WebView的布局，解析和JavaScript定时器。这个是一个全局请求，不仅限于这个WebView。

resumeTimers() 恢复所有WebView的所有布局，解析和JavaScript计时器，将恢复调度所有计时器.

另外注意 JS 端setTimeout()、setInterval() 方法使用，自测来看，当不使用 pauseTimers() 和 pauseTimers() ，从 Activity 返回上一个包含WebView 的Activity时，页面里的 setTimeout() 是不执行的，setInterval() 是可以恢复执行的。

在适当的生命周期使用 pauseTimers() 和 pauseTimers() 既可以恢复setTimeout() 执行。

2.常用属性

主要包含三部分：WebSettings、WebViewClient、WebChromeClient。

WebSettings

常用方法
setJavaScriptEnabled(boolean flag):是否支持 Js 使用。
setCacheMode(int mode):设置 WebView 的缓存模式。
setAppCacheEnabled(boolean flag):是否启用缓存模式。
setAppCachePath(String appCachePath):Android 私有缓存存储，如果你不调用setAppCachePath方法，WebView将不会产生这个目录。
setSupportZoom(boolean support):是否支持缩放。
setTextZoom(int textZoom):Sets the text zoom of the page in percent. The default is 100。
setAllowFileAccess(boolean allow):是否允许加载本地 html 文件/false。
setDatabaseEnabled(boolean flag):是否开启数据库缓存
setDomStorageEnabled(boolean flag):是否开启DOM缓存。
setUserAgentString(String ua):设置 UserAgent 属性。
setLoadsImagesAutomatically(boolean flag):支持自动加载图片
setAllowFileAccessFromFileURLs(boolean flag：:允许通过 file url 加载的 Javascript 读取其他的本地文件,Android 4.1 之前默认是true，在 Android 4.1 及以后默认是false,也就是禁止。
setAllowUniversalAccessFromFileURLs(boolean flag):允许通过 file url 加载的 Javascript 可以访问其他的源，包括其他的文件和 http，https 等其他的源，Android 4.1 之前默认是true，在 Android 4.1 及以后默认是false,也就是禁止如果此设置是允许，则 setAllowFileAccessFromFileURLs 不起做用。
boolean getLoadsImagesAutomatically():是否支持自动加载图片。

WebViewClient

常用方法
onPageStarted(WebView view, String url, Bitmap favicon):WebView 开始加载页面时回调，一次Frame加载对应一次回调。
onLoadResource(WebView view, String url):WebView 加载页面资源时会回调，每一个资源产生的一次网络加载，除非本地有当前 url 对应有缓存，否则就会加载。
shouldInterceptRequest(WebView view, String url):WebView 可以拦截某一次的 request 来返回我们自己加载的数据，这个方法在后面缓存会有很大作用。
shouldInterceptRequest(WebView view, android.webkit.WebResourceRequest request):WebView 可以拦截某一次的 request 来返回我们自己加载的数据，这个方法在后面缓存会有很大作用。
shouldOverrideUrlLoading(WebView view, String url):是否在 WebView 内加载页面。
onReceivedSslError(WebView view, SslErrorHandler handler, SslError error):WebView ssl 访问证书出错，handler.cancel()取消加载，handler.proceed()对然错误也继续加载。
onPageFinished(WebView view, String url):WebView 完成加载页面时回调，一次Frame加载对应一次回调。
onReceivedError(WebView view, int errorCode, String description, String failingUrl):WebView 访问 url 出错。

WebChromeClient

常用方法
onConsoleMessage(String message, int lineNumber,String sourceID):输出 Web 端日志。
onProgressChanged(WebView view, int newProgress):当前 WebView 加载网页进度。
onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result):处理 JS 中的 Prompt对话框
onJsAlert(WebView view, String url, String message, JsResult result): Js 中调用 alert() 函数，产生的对话框。
onReceivedTitle(WebView view, String title):接收web页面的 Title。
onReceivedIcon(WebView view, Bitmap icon):接收web页面的icon。

3.与JS交互

1、使用系统方法 addJavascriptInterface 注入 java 对象来实现。

2、利用 WebViewClient 中 shouldOverrideUrlLoading (WebView view, String url) 接口，拦截操作。这个就是很多公司在用的 scheme 方式，通过制定url协议，双方各自解析，使用iframe来调用native代码，实现互通。

3、利用 WebChromeClient 中的 onJsAlert、onJsConfirm、onJsPrompt 提示接口，同样也是拦截操作。

JSBridge原理

相信很多都或多或少的了解 JsBridge,不管是 iOS 平台还是 Android平台，特别是 Hybrid 应用，肯定是要用的 JsBridge 这个机制来建立 Native 和 Web 端的通信。

JsBridge 介绍：
JSBridge 我们可以比喻成一座桥或者一根管道，一端是 Web一端是 Native。我们搭建这个通道的目的就是让 Native 和 Web 之间互相调用更为方便统一和简洁。 JSBridge 做得好的一个典型就是微信，微信给开发者提供了 JSSDK，该SDK中暴露了很多微信native层的方法，比如支付，定位等。使用起来非常方便。

前面我们分析了 WebView 如何于 JavaScript 交互的，JSBridge 就是在这些基础之上做扩展使它支持更复杂的功能，三种形式两种原理分析如下：

1、使用 addJavascriptInterface

原理：这是Android提供的Js与Native通信的官方解决方案，将 java 对象注入到 Js 中直接作为window的某一变量来使用。

2、WebViewClient 中 shouldOverrideUrlLoading (WebView view, String url)。

利用 scheme iframe 机制，只要有iframe 加载，shouldOverrideUrlLoading 方法就会有回调。可以构造一个特殊格式的url，使用shouldOverrideUrlLoading 方法拦截url，根据解析url来之行native方法逻辑。

3、利用 WebChromeClient 中的 onJsAlert、onJsConfirm、onJsPrompt 提示接口，同样也是拦截操作。

利用 js调用window对象的对应的方法，即 window.alert，window.confirm，window.prompt，WebChromeClient 对象中的三个方法 onJsAlert、onJsConfirm、onJsPrompt 就会被触发，有了js到native的通道，那么我们就可以制定协议来约束对方。最终我们选择使用 prompt 方法，onJsPrompt()方法的message参数的值正是Js的方法window.prompt()的message的值。

汇总：后面两种虽然形式不同，但是原理是相同的，都是对url或者参数做文章，通过制定参数协议，不管是url还是message，到native拦截处理。native 调用 Js 只有一种方式，就是使用loadUrl(js),js 为在web端定义好的javascript 函数。

以上就是所有 JsBridge 的原理，自己可以写给demo跑一下，下面看几个问题：

1、如何避免 JS、Android、iOS 相互调用时，需要事先“约定”方法名称和参数？
2、原生调用 JS 方法，能否类似原生开发一样，使用 Callback（block）做为回调方式？
3、JS 调用原生能否使用 function 获得返回值?