# web-view ## Instructions web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。 各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。 属性说明 ### Syntax - 使用 ``（或 ``，当需要包裹子节点时）。 - 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。 #### Properties | 属性名 | 类型 | 说明 | 平台差异说明 | | --- | --- | --- | --- | | src | String | webview 指向网页的链接 | | | allow | String | 用于为 iframe 指定其 特征策略 | H5 | | sandbox | String | 该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。 | H5 | | fullscreen | Boolean | 是否铺满整个页面，默认值： true 。 | H5 (HBuilder X 3.5.4+)、App-HarmonyOS | | webview-styles | Object | webview 的样式 | App-vue | | update-title | Boolean | 是否自动更新当前页面标题。默认值： true | App-vue (HBuilder X 3.3.8+) | #### Events | 事件名 | 类型 | 说明 | 平台差异说明 | | --- | --- | --- | --- | | @message | EventHandler | 网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 | H5 暂不支持（可以直接使用 window.postMessage ） | | @onPostMessage | EventHandler | 网页向应用实时 postMessage | App-nvue | | @load | EventHandler | 网页加载成功时候触发此事件。 | 微信小程序、支付宝小程序、抖音小程序、QQ小程序、H5、小红书小程序 | | @error | EventHandler | 网页加载失败的时候触发此事件。 | 微信小程序、支付宝小程序、抖音小程序、QQ小程序、小红书小程序 | #### Platform Compatibility | 方法名 | 说明 | 平台差异说明 | | --- | --- | --- | | uni.navigateTo | navigateTo | | | uni.redirectTo | redirectTo | | | uni.reLaunch | reLaunch | | | uni.switchTab | switchTab | | | uni.navigateBack | navigateBack | | | uni.postMessage | 向应用发送消息 | 抖音小程序不支持、H5 暂不支持（可以直接使用 window.postMessage ） | | uni.getEnv | 获取当前环境 | 抖音小程序与飞书小程序不支持 | ### Examples ### Example (Example 1) ```vue ``` ### Example (Example 2) ```html ``` ### Example (Example 3) ```vue ┌─components ├─hybrid │ └─html │ ├─css │ │ └─test.css │ ├─img │ │ └─icon.png │ ├─js │ │ └─test.js │ └─local.html ├─pages │ └─index │ └─index.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json ``` ### Example (Example 4) ```vue ``` ### Example (Example 5) ```html ``` ### Example (Example 6) ```vue 网络网页

web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。

网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。

``` Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/web-view.html)