# Web
提供具有网页显示能力的Web组件，[@ohos.web.webview](../apis/js-apis-webview.md)提供web控制能力。
> **说明：**
>
> - 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - 示例效果请以真机运行为准，当前IDE预览器不支持。
## 需要权限
访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。
## 子组件
无
## 接口
Web(options: { src: ResourceStr, controller: WebviewController | WebController})
> **说明：**
>
> 不支持转场动画。
> 同一页面的多个web组件，必须绑定不同的WebviewController。
**参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ---------------------------------------- | ---- | ------- |
| src | [ResourceStr](ts-types.md) | 是 | 网页资源地址。如果访问本地资源文件，请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。 |
| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 |
**示例：**
加载在线网页
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
加载本地网页
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
// 通过$rawfile加载本地资源文件。
Web({ src: $rawfile("index.html"), controller: this.controller })
}
}
}
```
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
// 通过resource协议加载本地资源文件。
Web({ src: "resource://rawfile/index.html", controller: this.controller })
}
}
}
```
加载沙箱路径下的本地资源文件
1.通过[globalthis](../../application-models/uiability-data-sync-with-ui.md#uiability和page之间使用globalthis)获取沙箱路径。
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
let url = 'file://' + globalThis.filesDir + '/index.html'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
// 加载沙箱路径文件。
Web({ src: url, controller: this.controller })
}
}
}
```
2.修改EntryAbility.ts。
以filesDir为例，获取沙箱路径。若想获取其他路径，请参考[应用文件路径](../../application-models/application-context-stage.md#获取应用文件路径)。
```ts
// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview';
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
// 通过在globalThis对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
globalThis.filesDir = this.context.filesDir
console.log("Sandbox path is " + globalThis.filesDir)
}
}
```
加载的html文件。
```html
Hello World
```
## 属性
通用属性仅支持[width](ts-universal-attributes-size.md#属性)、[height](ts-universal-attributes-size.md#属性)、[padding](ts-universal-attributes-size.md#属性)、[margin](ts-universal-attributes-size.md#属性)、[border](ts-universal-attributes-border.md#属性)。
### domStorageAccess
domStorageAccess(domStorageAccess: boolean)
设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------------- | ------- | ---- | ----- | ------------------------------------ |
| domStorageAccess | boolean | 是 | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.domStorageAccess(true)
}
}
}
```
### fileAccess
fileAccess(fileAccess: boolean)
设置是否开启应用中文件系统的访问，默认启用。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------- | ---- | ---- | ---------------------- |
| fileAccess | boolean | 是 | true | 设置是否开启应用中文件系统的访问，默认启用。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.fileAccess(true)
}
}
}
```
### imageAccess
imageAccess(imageAccess: boolean)
设置是否允许自动加载图片资源，默认允许。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ------- | ---- | ---- | --------------- |
| imageAccess | boolean | 是 | true | 设置是否允许自动加载图片资源。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.imageAccess(true)
}
}
}
```
### javaScriptProxy
javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array\,
controller: WebviewController | WebController})
注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ------------------------- |
| object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 |
| name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 |
| methodList | Array\ | 是 | - | 参与注册的应用侧JavaScript对象的方法。 |
| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
testObj = {
test: (data1, data2, data3) => {
console.log("data1:" + data1)
console.log("data2:" + data2)
console.log("data3:" + data3)
return "AceString"
},
toString: () => {
console.log('toString' + "interface instead.")
}
}
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.javaScriptAccess(true)
.javaScriptProxy({
object: this.testObj,
name: "objName",
methodList: ["test", "toString"],
controller: this.controller,
})
}
}
}
```
### javaScriptAccess
javaScriptAccess(javaScriptAccess: boolean)
设置是否允许执行JavaScript脚本，默认允许执行。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------------- | ------- | ---- | ---- | ------------------- |
| javaScriptAccess | boolean | 是 | true | 是否允许执行JavaScript脚本。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.javaScriptAccess(true)
}
}
}
```
### mixedMode
mixedMode(mixedMode: MixedMode)
设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | --------------------------- | ---- | -------------- | --------- |
| mixedMode | [MixedMode](#mixedmode枚举说明) | 是 | MixedMode.None | 要设置的混合内容。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State mode: MixedMode = MixedMode.All
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.mixedMode(this.mode)
}
}
}
```
### onlineImageAccess
onlineImageAccess(onlineImageAccess: boolean)
设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------- | ------- | ---- | ---- | ---------------- |
| onlineImageAccess | boolean | 是 | true | 设置是否允许从网络加载图片资源。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onlineImageAccess(true)
}
}
}
```
### zoomAccess
zoomAccess(zoomAccess: boolean)
设置是否支持手势进行缩放，默认允许执行缩放。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------- | ---- | ---- | ------------- |
| zoomAccess | boolean | 是 | true | 设置是否支持手势进行缩放。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.zoomAccess(true)
}
}
}
```
### overviewModeAccess
overviewModeAccess(overviewModeAccess: boolean)
设置是否使用概览模式加载网页，默认使用该方式。当前仅支持移动设备。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------------ | ------- | ---- | ---- | --------------- |
| overviewModeAccess | boolean | 是 | true | 设置是否使用概览模式加载网页。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.overviewModeAccess(true)
}
}
}
```
### databaseAccess
databaseAccess(databaseAccess: boolean)
设置是否开启数据库存储API权限，默认不开启。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------- | ------- | ---- | ----- | ----------------- |
| databaseAccess | boolean | 是 | false | 设置是否开启数据库存储API权限。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
```
### geolocationAccess
geolocationAccess(geolocationAccess: boolean)
设置是否开启获取地理位置权限，默认开启。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------- | ------- | ---- | ---- | --------------- |
| geolocationAccess | boolean | 是 | true | 设置是否开启获取地理位置权限。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.geolocationAccess(true)
}
}
}
```
### mediaPlayGestureAccess
mediaPlayGestureAccess(access: boolean)
设置有声视频播放是否需要用户手动点击，静音视频播放不受该接口管控，默认需要。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------- | ---- | ---- | ----------------- |
| access | boolean | 是 | true | 设置有声视频播放是否需要用户手动点击。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State access: boolean = true
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.mediaPlayGestureAccess(this.access)
}
}
}
```
### multiWindowAccess9+
multiWindowAccess(multiWindow: boolean)
设置是否开启多窗口权限，默认不开启。
使能多窗口权限时，需要实现onWindowNew事件，示例代码参考[onWindowNew事件](#onwindownew9)。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ------- | ---- | ----- | ------------ |
| multiWindow | boolean | 是 | false | 设置是否开启多窗口权限。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.multiWindowAccess(false)
}
}
}
```
### horizontalScrollBarAccess9+
horizontalScrollBarAccess(horizontalScrollBar: boolean)
设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ------- | ---- | ----- | ------------ |
| horizontalScrollBar | boolean | 是 | true | 设置是否显示横向滚动条。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile('index.html'), controller: this.controller })
.horizontalScrollBarAccess(true)
}
}
}
```
加载的html文件。
```html
Demo
Scroll Test
```
### verticalScrollBarAccess9+
verticalScrollBarAccess(verticalScrollBar: boolean)
设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ------- | ---- | ----- | ------------ |
| verticalScrollBarAccess | boolean | 是 | true | 设置是否显示纵向滚动条。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile('index.html'), controller: this.controller })
.verticalScrollBarAccess(true)
}
}
}
```
加载的html文件。
```html
Demo
Scroll Test
```
### password(deprecated)
password(password: boolean)
设置是否应保存密码。该接口为空接口。
> **说明：**
>
> 从API version 10开始废弃，并且不再提供新的接口作为替代。
### cacheMode
cacheMode(cacheMode: CacheMode)
设置缓存模式。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | --------------------------- | ---- | ----------------- | --------- |
| cacheMode | [CacheMode](#cachemode枚举说明) | 是 | CacheMode.Default | 要设置的缓存模式。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State mode: CacheMode = CacheMode.None
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.cacheMode(this.mode)
}
}
}
```
### textZoomAtio(deprecated)
textZoomAtio(textZoomAtio: number)
设置页面的文本缩放百分比，默认为100%。
从API version 9开始不再维护，建议使用[textZoomRatio9+](#textzoomratio9)代替。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------- | ------ | ---- | ---- | --------------- |
| textZoomAtio | number | 是 | 100 | 要设置的页面的文本缩放百分比。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
@State atio: number = 150
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.textZoomAtio(this.atio)
}
}
}
```
### textZoomRatio9+
textZoomRatio(textZoomRatio: number)
设置页面的文本缩放百分比，默认为100%。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------- | ------ | ---- | ---- | --------------- |
| textZoomRatio | number | 是 | 100 | 要设置的页面的文本缩放百分比。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State atio: number = 150
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.textZoomRatio(this.atio)
}
}
}
```
### initialScale9+
initialScale(percent: number)
设置整体页面的缩放百分比，默认为100%。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | --------------- |
| percent | number | 是 | 100 | 要设置的整体页面的缩放百分比。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State percent: number = 100
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.initialScale(this.percent)
}
}
}
```
### userAgent
userAgent(userAgent: string)
设置用户代理。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------ | ---- | ---- | --------- |
| userAgent | string | 是 | - | 要设置的用户代理。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36'
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.userAgent(this.userAgent)
}
}
}
```
### blockNetwork9+
blockNetwork(block: boolean)
设置Web组件是否阻止从网络加载资源。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | ----------------------------------- |
| block | boolean | 是 | false | 设置Web组件是否阻止从网络加载资源。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State block: boolean = true
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.blockNetwork(this.block)
}
}
}
```
### defaultFixedFontSize9+
defaultFixedFontSize(size: number)
设置网页的默认等宽字体大小。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | ---------------------------- |
| size | number | 是 | 13 | 设置网页的默认等宽字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State fontSize: number = 16
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.defaultFixedFontSize(this.fontSize)
}
}
}
```
### defaultFontSize9+
defaultFontSize(size: number)
设置网页的默认字体大小。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | ------------------------ |
| size | number | 是 | 16 | 设置网页的默认字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State fontSize: number = 13
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.defaultFontSize(this.fontSize)
}
}
}
```
### minFontSize9+
minFontSize(size: number)
设置网页字体大小最小值。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | ------------------------ |
| size | number | 是 | 8 | 设置网页字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State fontSize: number = 13
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.minFontSize(this.fontSize)
}
}
}
```
### minLogicalFontSize9+
minLogicalFontSize(size: number)
设置网页逻辑字体大小最小值。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | ------------------------ |
| size | number | 是 | 8 | 设置网页逻辑字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State fontSize: number = 13
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.minLogicalFontSize(this.fontSize)
}
}
}
```
### webFixedFont9+
webFixedFont(family: string)
设置网页的fixed font字体库。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | --------- | ---------------------------- |
| family | string | 是 | monospace | 设置网页的fixed font字体库。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State family: string = "monospace"
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.webFixedFont(this.family)
}
}
}
```
### webSansSerifFont9+
webSansSerifFont(family: string)
设置网页的sans serif font字体库。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ---------- | --------------------------------- |
| family | string | 是 | sans-serif | 设置网页的sans serif font字体库。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State family: string = "sans-serif"
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.webSansSerifFont(this.family)
}
}
}
```
### webSerifFont9+
webSerifFont(family: string)
设置网页的serif font字体库。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | ---------------------------- |
| family | string | 是 | serif | 设置网页的serif font字体库。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State family: string = "serif"
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.webSerifFont(this.family)
}
}
}
```
### webStandardFont9+
webStandardFont(family: string)
设置网页的standard font字体库。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ---------- | ------------------------------- |
| family | string | 是 | sans serif | 设置网页的standard font字体库。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State family: string = "sans-serif"
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.webStandardFont(this.family)
}
}
}
```
### webFantasyFont9+
webFantasyFont(family: string)
设置网页的fantasy font字体库。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------- | ------------------------------ |
| family | string | 是 | fantasy | 设置网页的fantasy font字体库。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State family: string = "fantasy"
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.webFantasyFont(this.family)
}
}
}
```
### webCursiveFont9+
webCursiveFont(family: string)
设置网页的cursive font字体库。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------- | ------------------------------ |
| family | string | 是 | cursive | 设置网页的cursive font字体库。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State family: string = "cursive"
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.webCursiveFont(this.family)
}
}
}
```
### darkMode9+
darkMode(mode: WebDarkMode)
设置Web深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合[forceDarkAccess](#forcedarkaccess9)使用。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ----------- | ---- | --------------- | ------------------ |
| mode | [WebDarkMode](#webdarkmode9枚举说明) | 是 | WebDarkMode.Off | 设置Web的深色模式为关闭、开启或跟随系统。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State mode: WebDarkMode = WebDarkMode.On
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.darkMode(this.mode)
}
}
}
```
### forceDarkAccess9+
forceDarkAccess(access: boolean)
设置网页是否开启强制深色模式。默认关闭。该属性仅在[darkMode](#darkmode9)开启深色模式时生效。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------- | ---- | ----- | ------------------ |
| access | boolean | 是 | false | 设置网页是否开启强制深色模式。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State mode: WebDarkMode = WebDarkMode.On
@State access: boolean = true
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.darkMode(this.mode)
.forceDarkAccess(this.access)
}
}
}
```
### tableData(deprecated)
tableData(tableData: boolean)
设置是否应保存表单数据。该接口为空接口。
> **说明：**
>
> 从API version 10开始废弃，并且不再提供新的接口作为替代。
### wideViewModeAccess(deprecated)
wideViewModeAccess(wideViewModeAccess: boolean)
设置web是否支持html中meta标签的viewport属性。该接口为空接口。
> **说明：**
>
> 从API version 10开始废弃，并且不再提供新的接口作为替代。
### pinchSmooth9+
pinchSmooth(isEnabled: boolean)
设置网页是否开启捏合流畅模式，默认不开启。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | -------- | ---- | ------ | -------------------------- |
| isEnabled | boolean | 是 | false | 网页是否开启捏合流畅模式。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.pinchSmooth(true)
}
}
}
```
### allowWindowOpenMethod10+
allowWindowOpenMethod(flag: boolean)
设置网页是否可以通过JavaScript自动打开新窗口。
该属性为true时，可通过JavaScript自动打开新窗口。该属性为false时，用户行为仍可通过JavaScript自动打开新窗口，但非用户行为不能通过JavaScript自动打开新窗口。此处的用户行为是指用户在5秒内请求打开新窗口（window.open）。
该属性仅在[javaScriptAccess](#javascriptaccess)开启时生效。
该属性在[multiWindowAccess](#multiwindowaccess9)开启时打开新窗口，关闭时打开本地窗口。
该属性的默认值与系统属性persist.web.allowWindowOpenMethod.enabled 保持一致，如果未设置系统属性则默认值为false。
检查系统配置项persist.web.allowWindowOpenMethod.enabled 是否开启。
通过`hdc shell param get persist.web.allowWindowOpenMethod.enabled` 查看，若配置项为0或不存在，
可通过命令`hdc shell param set persist.web.allowWindowOpenMethod.enabled 1` 开启配置。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------- | ---- | ----- | ------------------ |
| flag | boolean | 是 | 默认值与系统参数关联，当系统参数persist.web.allowWindowOpenMethod.enabled为true时，默认值为true, 否则为false | 网页是否可以通过JavaScript自动打开窗口。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller: CustomDialogController
webviewController1: web_webview.WebviewController
build() {
Column() {
Web({ src: "", controller: this.webviewController1 })
.javaScriptAccess(true)
.multiWindowAccess(false)
.onWindowExit(()=> {
console.info("NewWebViewComp onWindowExit")
this.controller.close()
})
}
}
}
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
dialogController: CustomDialogController = null
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.javaScriptAccess(true)
//需要使能multiWindowAccess
.multiWindowAccess(true)
.allowWindowOpenMethod(true)
.onWindowNew((event) => {
if (this.dialogController) {
this.dialogController.close()
}
let popController:web_webview.WebviewController = new web_webview.WebviewController()
this.dialogController = new CustomDialogController({
builder: NewWebViewComp({webviewController1: popController})
})
this.dialogController.open()
//将新窗口对应WebviewController返回给Web内核。
//如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
//若不调用event.handler.setWebController接口，会造成render进程阻塞。
event.handler.setWebController(popController)
})
}
}
}
```
### mediaOptions10+
mediaOptions(options: WebMediaOptions)
设置Web媒体播放的策略，其中包括：Web中的音频在重新获焦后能够自动续播的有效期、应用内多个Web实例的音频是否独占。
> **说明：**
>
> - 同一Web实例中的多个音频均视为同一音频。
> - 该媒体播放策略将同时管控有声视频。
> - 属性参数更新后需重新播放音频方可生效。
> - 建议为所有Web组件设置相同的audioExclusive值。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ----------- | ---- | --------------- | ------------------ |
| options | [WebMediaOptions](#webmediaoptions10) | 是 | {resumeInterval: 0, audioExclusive: true} | 设置Web的媒体策略。其中，resumeInterval的默认值为0表示不自动续播。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State options: WebMediaOptions = {resumeInterval: 10, audioExclusive: true}
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.mediaOptions(this.options)
}
}
}
```
## 事件
不支持通用事件。
### onAlert
onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
网页触发alert()告警弹窗时触发回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | --------------------- | --------------- |
| url | string | 当前显示弹窗所在网页的URL。 |
| message | string | 弹窗中显示的信息。 |
| result | [JsResult](#jsresult) | 通知Web组件用户操作行为。 |
**返回值：**
| 类型 | 说明 |
| ------- | ---------------------------------------- |
| boolean | 当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，web组件暂不支持触发默认弹窗。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onAlert((event) => {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
title: 'onAlert',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.result.handleConfirm()
}
},
cancel: () => {
event.result.handleCancel()
}
})
return true
})
}
}
}
```
加载的html文件。
```html
WebView onAlert Demo
```
### onBeforeUnload
onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
刷新或关闭场景下，在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点，才会触发此回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | --------------------- | --------------- |
| url | string | 当前显示弹窗所在网页的URL。 |
| message | string | 弹窗中显示的信息。 |
| result | [JsResult](#jsresult) | 通知Web组件用户操作行为。 |
**返回值：**
| 类型 | 说明 |
| ------- | ---------------------------------------- |
| boolean | 当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，web组件暂不支持触发默认弹窗。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onBeforeUnload((event) => {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
title: 'onBeforeUnload',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.result.handleConfirm()
}
},
cancel: () => {
event.result.handleCancel()
}
})
return true
})
}
}
}
```
加载的html文件。
```html
WebView onBeforeUnload Demo
Click here
```
### onConfirm
onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
网页调用confirm()告警时触发此回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | --------------------- | --------------- |
| url | string | 当前显示弹窗所在网页的URL。 |
| message | string | 弹窗中显示的信息。 |
| result | [JsResult](#jsresult) | 通知Web组件用户操作行为。 |
**返回值：**
| 类型 | 说明 |
| ------- | ---------------------------------------- |
| boolean | 当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时，web组件暂不支持触发默认弹窗。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onConfirm((event) => {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
title: 'onConfirm',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.result.handleConfirm()
}
},
cancel: () => {
event.result.handleCancel()
}
})
return true
})
}
}
}
```
加载的html文件。
```html
WebView onConfirm Demo
```
### onPrompt9+
onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | --------------------- | --------------- |
| url | string | 当前显示弹窗所在网页的URL。 |
| message | string | 弹窗中显示的信息。 |
| result | [JsResult](#jsresult) | 通知Web组件用户操作行为。 |
**返回值：**
| 类型 | 说明 |
| ------- | ---------------------------------------- |
| boolean | 当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时，web组件暂不支持触发默认弹窗。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onPrompt((event) => {
console.log("url:" + event.url)
console.log("message:" + event.message)
console.log("value:" + event.value)
AlertDialog.show({
title: 'onPrompt',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.result.handlePromptConfirm(event.value)
}
},
cancel: () => {
event.result.handleCancel()
}
})
return true
})
}
}
}
```
加载的html文件。
```html
WebView onPrompt Demo
```
### onConsole
onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
通知宿主应用JavaScript console消息。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | --------------------------------- | --------- |
| message | [ConsoleMessage](#consolemessage) | 触发的控制台信息。 |
**返回值：**
| 类型 | 说明 |
| ------- | ----------------------------------- |
| boolean | 当返回true时，该条消息将不会再打印至控制台，反之仍会打印至控制台。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onConsole((event) => {
console.log('getMessage:' + event.message.getMessage())
console.log('getSourceId:' + event.message.getSourceId())
console.log('getLineNumber:' + event.message.getLineNumber())
console.log('getMessageLevel:' + event.message.getMessageLevel())
return false
})
}
}
}
```
### onDownloadStart
onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)
通知主应用开始下载一个文件。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------------------ | ------------- | ----------------------------------- |
| url | string | 文件下载的URL。 |
| userAgent | string | 用于下载的用户代理。 |
| contentDisposition | string | 服务器返回的 Content-Disposition响应头，可能为空。 |
| mimetype | string | 服务器返回内容媒体类型（MIME）信息。 |
| contentLength | contentLength | 服务器返回文件的长度。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onDownloadStart((event) => {
console.log('url:' + event.url)
console.log('userAgent:' + event.userAgent)
console.log('contentDisposition:' + event.contentDisposition)
console.log('contentLength:' + event.contentLength)
console.log('mimetype:' + event.mimetype)
})
}
}
}
```
### onErrorReceive
onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void)
网页加载遇到错误时触发该回调。出于性能考虑，建议此回调中尽量执行简单逻辑。在无网络的情况下，触发此回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------- | --------------- |
| request | [WebResourceRequest](#webresourcerequest) | 网页请求的封装信息。 |
| error | [WebResourceError](#webresourceerror) | 网页加载资源错误的封装信息 。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onErrorReceive((event) => {
console.log('getErrorInfo:' + event.error.getErrorInfo())
console.log('getErrorCode:' + event.error.getErrorCode())
console.log('url:' + event.request.getRequestUrl())
console.log('isMainFrame:' + event.request.isMainFrame())
console.log('isRedirect:' + event.request.isRedirect())
console.log('isRequestGesture:' + event.request.isRequestGesture())
console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString())
let result = event.request.getRequestHeader()
console.log('The request header result size is ' + result.length)
for (let i of result) {
console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)
}
})
}
}
}
```
### onHttpErrorReceive
onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void)
网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------- | --------------- |
| request | [WebResourceRequest](#webresourcerequest) | 网页请求的封装信息。 |
| response | [WebResourceResponse](#webresourceresponse) | 资源响应的封装信息。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onHttpErrorReceive((event) => {
console.log('url:' + event.request.getRequestUrl())
console.log('isMainFrame:' + event.request.isMainFrame())
console.log('isRedirect:' + event.request.isRedirect())
console.log('isRequestGesture:' + event.request.isRequestGesture())
console.log('getResponseData:' + event.response.getResponseData())
console.log('getResponseEncoding:' + event.response.getResponseEncoding())
console.log('getResponseMimeType:' + event.response.getResponseMimeType())
console.log('getResponseCode:' + event.response.getResponseCode())
console.log('getReasonMessage:' + event.response.getReasonMessage())
let result = event.request.getRequestHeader()
console.log('The request header result size is ' + result.length)
for (let i of result) {
console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
}
let resph = event.response.getResponseHeader()
console.log('The response header result size is ' + resph.length)
for (let i of resph) {
console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
}
})
}
}
}
```
### onPageBegin
onPageBegin(callback: (event?: { url: string }) => void)
网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ---- | ------ | --------- |
| url | string | 页面的URL地址。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onPageBegin((event) => {
console.log('url:' + event.url)
})
}
}
}
```
### onPageEnd
onPageEnd(callback: (event?: { url: string }) => void)
网页加载完成时触发该回调，且只在主frame触发。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ---- | ------ | --------- |
| url | string | 页面的URL地址。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onPageEnd((event) => {
console.log('url:' + event.url)
})
}
}
}
```
### onProgressChange
onProgressChange(callback: (event?: { newProgress: number }) => void)
网页加载进度变化时触发该回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ----------- | ------ | --------------------- |
| newProgress | number | 新的加载进度，取值范围为0到100的整数。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onProgressChange((event) => {
console.log('newProgress:' + event.newProgress)
})
}
}
}
```
### onTitleReceive
onTitleReceive(callback: (event?: { title: string }) => void)
网页document标题更改时触发该回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ----- | ------ | ------------- |
| title | string | document标题内容。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onTitleReceive((event) => {
console.log('title:' + event.title)
})
}
}
}
```
### onRefreshAccessedHistory
onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void)
加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ----------- | ------- | ---------------------------------------- |
| url | string | 访问的url。 |
| isRefreshed | boolean | true表示该页面是被重新加载的（调用[refresh9+](../apis/js-apis-webview.md#refresh)接口），false表示该页面是新加载的。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onRefreshAccessedHistory((event) => {
console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
})
}
}
}
```
### onSslErrorReceive(deprecated)
onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)
通知用户加载资源时发生SSL错误。
> **说明：**
>
> 从API version 8开始支持，从API version 9开始废弃。建议使用[onSslErrorEventReceive9+](#onsslerroreventreceive9)替代。
### onFileSelectorShow(deprecated)
onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)
调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。
> **说明：**
>
> 从API version 8开始支持，从API version 9开始废弃。建议使用[onShowFileSelector9+](#onshowfileselector9)替代。
### onRenderExited9+
onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)
应用渲染进程异常退出时触发该回调。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ---------------- | ---------------------------------------- | ---------------- |
| renderExitReason | [RenderExitReason](#renderexitreason枚举说明) | 渲染进程进程异常退出的具体原因。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'chrome://crash/', controller: this.controller })
.onRenderExited((event) => {
console.log('reason:' + event.renderExitReason)
})
}
}
}
```
### onShowFileSelector9+
onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)
调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------------ | ---------------------------------------- | ----------------- |
| result | [FileSelectorResult](#fileselectorresult9) | 用于通知Web组件文件选择的结果。 |
| fileSelector | [FileSelectorParam](#fileselectorparam9) | 文件选择器的相关信息。 |
**返回值：**
| 类型 | 说明 |
| ------- | ---------------------------------------- |
| boolean | 当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，web组件暂不支持触发默认弹窗。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile('index.html'), controller: this.controller })
.onShowFileSelector((event) => {
console.log('MyFileUploader onShowFileSelector invoked')
const documentSelectOptions = new picker.DocumentSelectOptions();
let uri = null;
const documentViewPicker = new picker.DocumentViewPicker();
documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
uri = documentSelectResult[0];
console.info('documentViewPicker.select to file succeed and uri is:' + uri);
event.result.handleFileList([uri]);
}).catch((err) => {
console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
})
return true
})
}
}
}
```
加载的html文件。
```html