JS学习笔记——前端的webview是什么东西

1、webview的概念

疑问：webview是什么？作用是什么？和浏览器有什么关系？

先放一段基本定义：

A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

大致翻译：

webview用来展示网页的view组件，该组件是你运行自己的浏览器或者在你的线程中展示线上内容的基础。使用webkit渲染引擎来展示，并且支持前进后退等基于浏览历史，放大缩小，等更多功能。

简单来说：

• WebView是手机客户端中内置了一款高性能基于 webkit 内核浏览器，在 SDK 中封装的一个组件。不给过没有提供地址栏和导航栏，只是单纯的展示一个网页界面
• 可以解析DOM 元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。

（chrome浏览器也是基于webkit引擎开发的，Mozilla浏览器是基于Gecko引擎开发的）

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

不过上面更过的是站在客户端开发的角度来讲，如果站在前端H5的开发者角度来讲：

• WebView可以简单理解为页面里的 iframe
• 原生app与 WebView 的交互可以简单看作是页面与页面内 iframe页面进行的交互。就如页面与页面内的 iframe 共用一个 Window一样，原生与 WebView也共用了一套原生的方法。

2、webview的使用场景

疑问：webview主要用于什么地方？或者说什么需求下会使用到webview?

电脑上展示html页面，通过浏览器打开页面即可浏览，而手机系统层面，如果没有webview支持，是无法展示html页面，所以webview的作用即用于手机系统来展示html界面的。

所以它主要在需要在手机系统上加载html文件时被需要。

3、一个原生应用调用html页面的过程？(客户端角度)

1、原生应用加载html页面（加载页面的方式可能有多种，比如加载本地写好的html文件，或者放置在服务器的文件）

2、加载完成，展示就是通过webview来渲染展示的，如果系统没有webview，则是无法渲染展示html的；

3、其实经过1和2步，一个原生应用调用html页面过程已经完成了，那么页面不光展示，有时候可能还需要交互，这里的话就需要写一些方法了，比如html界面的按钮需要调用系统原生的东西（比如：拍照，系统的文件，相册之类的）。

• 原生端就负责维护html调用的接口，然后按照需要返回（原生端充当一个server的角色，html充当一个client角色）
• webview与native的交互的核心就是两者的交互如何实现，作为两者之间的沟通桥梁，jsbridge就应运而生了

4、使用webview的好处

原生APP是将页面的布局设计，以及业务代码打包然后用户下载安装使用，而webview是通过加载html文件来进行页面的展示，当需要更新页面布局的或者业务逻辑变更时，如果是原生的APP就需要修改前端内容，升级打包，重新发布才可以使用最新的。

而通过webview方式的页面则只需要修改html代码或者js文件（如果是从服务器端获取，只要新的文件部署完成），用户重新刷新就可以使用更新后的，无需通过下载安装的方式完成升级

5、安卓系统自带的浏览器

首先我们得明白，国内手机的自带浏览器不是chrome，主要是版权的原因，自带的浏览器都是手机厂商基于国内主流的几大浏览器自己定制，然后发布在自己手机系统版本中。

不过国内几大浏览器厂商如QQ浏览器，UC浏览器、都是基于webkit引擎的

iphone的自带浏览器是Safari，Safari浏览器的内核是webkit

6、APP webview页面和手机浏览器打开的页面

不管是ios还是安卓，自带浏览器底层都是基于webkit的，然后各自系统中均带有webview控件，也是基于webkit引擎，所以不管通过APP调用webview展示html页面还是通过在浏览器打开html页面，效果是一样的。

7、webview 和 iframe 的区别

简单来说：

• webview是网页的原生载体，用于在原生环境中加载一个页面
• iframe是网页的html载体，用于在网页中加载一个页面

以Android为例：

• 在Android手机中内置了一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView组件
• iframe是html标签的一种，浏览器环境能够使用，当然在webview环境中也可以使用

---

本博客参考：

• webview是什么？
• 前端webview解读