面向前端的webview知识总结

吕大瓜

已于 2022-11-04 20:08:44 修改

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签：前端 android webview javascript

于 2022-11-04 17:50:11 首次发布

本文链接：https://blog.csdn.net/weixin_42490398/article/details/127693543

版权

webview

本篇文主要面向前端同学食用，分别从简介，内核&组件，基本配置，加载，缓存机制，通信等几个方向列举安卓和iOS有关 webview 的知识点，希望前端在和客户端同学对接时不会太懵逼…

🌝 简介

webview 是一个可以加载网页的可视组件，在原生应用中经常使用 webview 来嵌入一个网页，以此来开发混合APP（可以简单理解为就是一个浏览器）

webview 可以借助原生APP在 web 中调用系统功能，同时，webview 也可以限制 web 的一些功能权限。一般开发阶段都可以直接面向浏览器调试，除了需要调用到原生系统功能才需要在 webivew 里面联调

🌝 内核&组件

安卓

安卓 weiview 内核主要有两个分类：Android系统webview 和第三方webview内核

Android系统webview

在安卓4.4之前，Android WebView 基于WebKit内核的实现。
而在安卓4.4及之后，Android WebView 就换成基于 Google 的 Chromium 实现，Chromium 在性能，H5支持等方面都有很大的提升。
在安卓5.0开始，WebView 移植成了一个独立的apk，可以不依赖系统而独立存在和更新。

第三方webview内核

x5内核TBS
Crosswallk （体积偏大）

iOS

iOS 只要有两种 webview 组件： UIWebView 和 WKWebView

UIWebView 是 iOS 2 中推出的网页容器
直到 iOS 8 以后，苹果推出了 WKWebView ，具有占用内存小，性能好、稳定性高、H5支持度高及功能丰富等优点
iOS 12 中，苹果正式弃用 UIWebView，要求开发者用 WKWebView 全面替换 UIWebView
apple 文档

🌝 webview基本配置

列举一些可能对前端有用的配置信息

安卓

允许js代码
允许SessionStorage/LocalStorage存储
允许访问文件
禁用放缩
禁用文字缩放
允许缓存，设置缓存位置
不保存密码
设置UA
移除部分系统JavaScript接口
自动加载图片
关于前进 / 后退网页
在不做任何处理前提下，浏览网页时点击系统的“Back”键，整个 Browser 会调用 finish() 而结束自身，安卓可以拦截到该事件，并做返回上一条历史记录的处理
从 Android 5.0 开始，webview 默认不支持同时加载 Https 和 Http 资源，可以设置更改为允许
…

iOS

最小字体大小
是否支持JavaScript
播放视频
allowsInlineMediaPlayback 设置HTML5视频是否允许网页内联播放（同时前端的 video 还需要设置 playinline 属性才有效）
HTML5视频是否可以播放画中画
默认情况下，Web 视图会自动将出现在 Web 内容中的电话号码，链接，日历转换为链接，当链接被点击时，程序就会拨打该号码或打开日历或链接，可关闭这个默认的行为
Web 视图是否应始终允许缩放网页（会覆盖前端设置的值）
JavaScript 是否可以在没有用户交互的情况下打开窗口
禁止用户选择或者长按操作
…

PS：以前遇到过页面在 APP Demo 包内打开测试时，发现在 web 上点击上传文件调不起系统文件选择器，是由于 webview 没有配置允许访问文件；还有发现 web 中代码执行不了报错，是由于 webview 没有配置允许 JavaScript 等等。

🌝 加载

安卓

加载方式

//方式1. 加载一个网页：
webView.loadUrl("http://www.google.com/");

//方式2：加载apk包中的html页面
webView.loadUrl("file:///android_asset/test.html");

//方式3：加载手机本地的html页面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

// 方式4： 加载 HTML 页面的一小段内容
webView.loadData(String data