1. WebView容器是什么？
基本定义
- WebView 是一个内嵌在原生应用（如Android、iOS、鸿蒙应用）中的浏览器引擎组件，用于在应用内部加载和显示网页内容。
- 它本质上是一个“简化版浏览器”，可以渲染HTML/CSS/JavaScript，但与原生系统深度集成，允许网页与原生代码（如Java/Kotlin/Swift/ArkTS）交互。
核心功能
- 加载网页：通过URL或本地HTML文件加载网页内容。
- 与原生交互：通过JavaScript桥接（如
@JavascriptInterface或postMessage）调用原生功能（如摄像头、存储）。 - 混合开发：在原生应用中嵌入H5页面，实现动态更新或跨平台复用代码。
典型应用场景
- 应用内的活动页、帮助文档、用户协议等静态内容。
- 需要动态更新的功能模块（如电商首页、新闻详情页）。
- 混合开发框架（如React Native、Flutter）的底层渲染引擎。
2. location.href跳转 vs 新开WebView
场景假设
假设你的应用中有两个页面：
- 页面A：当前WebView加载的页面。
- 页面B：目标跳转页面。
方式1：通过location.href跳转
javascript复制代码
// 在页面A的JavaScript中执行
window.location.href = "https://example.com/pageB";
行为分析
-
同一WebView实例：页面A的WebView会销毁当前页面A的DOM和JavaScript环境，加载页面B的内容。
-
生命周期：
- 页面A的
onUnload事件触发。 - 页面B的
onLoad事件触发。
- 页面A的
-
内存占用：仅占用一个WebView的内存，适合轻量级跳转。
-
用户体验：
- 用户感知为“页面刷新”，可能短暂白屏。
- 无法保留页面A的状态（如JavaScript变量、表单输入）。
适用场景
- 简单的页面跳转，无需保留前序页面状态。
- 需要减少内存占用的场景（如低端设备）。
方式2：新开一个WebView
javascript复制代码
// 在页面A的JavaScript中调用原生接口
window.NativeBridge.openNewWebView("https://example.com/pageB");
行为分析
-
新建WebView实例：原生代码会创建一个新的WebView实例来加载页面B。
-
生命周期：
- 页面A的WebView保持活跃，状态（如DOM、JS变量）保留。
- 页面B的WebView独立运行，与原页面A无关。
-
内存占用：两个WebView实例同时存在，内存占用翻倍。
-
用户体验：
- 用户感知为“打开新页面”（类似浏览器新标签页）。
- 可以通过原生导航栏的“返回”按钮关闭新WebView。
适用场景
- 需要保留页面A状态（如填写了一半的表单）。
- 需要并行加载多个页面（如商品列表页和详情页同时存在）。
- 需要独立控制页面B的生命周期（如支付页面需强制关闭）。
容器内二次跳转-
在当前的webView容器，使用location.href进行跳转
openWebview的话，如果回退到前面的页面，当前页面的状态不会进行重新刷新，但是如果使用window.location.href的话则页面会重新刷新
这张图总结地非常到位了
