中俊为 | OpenHarmony文档中心 | 搜索更快捷

Web

Web

提供具有网页显示能力的Web组件。

说明：

  • 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • 示例效果请以真机运行为准，当前IDE预览器不支持。

需要权限

访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考权限申请声明。

子组件

无

接口

Web(options: { src: ResourceStr, controller: WebController | WebviewController})

说明：

不支持转场动画。

参数：

参数名 参数类型 必填 参数描述
src ResourceStr 是 网页资源地址。
controller WebController | WebviewController9+ 是 控制器。

示例：

加载在线网页

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
// 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 })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

加载本地网页

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
<!-- index.html -->
<!DOCTYPE html>
<html>
    <body>
        <p>Hello World</p>
    </body>
</html>
1
2
3
4
5
6
7

属性

通用属性仅支持width、height、padding、margin、border。

domStorageAccess

domStorageAccess(domStorageAccess: boolean)

设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。

参数：

参数名 参数类型 必填 默认值 参数描述
domStorageAccess boolean 是 false 设置是否开启文档对象模型存储接口（DOM Storage API）权限。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .domStorageAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

fileAccess

fileAccess(fileAccess: boolean)

设置是否开启应用中文件系统的访问，默认启用。$rawfile(filepath/filename)中rawfile路径的文件不受该属性影响而限制访问。

参数：

参数名 参数类型 必填 默认值 参数描述
fileAccess boolean 是 true 设置是否开启应用中文件系统的访问，默认启用。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .fileAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

imageAccess

imageAccess(imageAccess: boolean)

设置是否允许自动加载图片资源，默认允许。

参数：

参数名 参数类型 必填 默认值 参数描述
imageAccess boolean 是 true 设置是否允许自动加载图片资源。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .imageAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

javaScriptProxy

javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>, controller: WebController | WebviewController})

注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。

参数：

参数名 参数类型 必填 默认值 参数描述
object object 是 - 参与注册的对象。只能声明方法，不能声明属性。
name string 是 - 注册对象的名称，与window中调用的对象名一致。
methodList Array<string> 是 - 参与注册的应用侧JavaScript对象的方法。
controller WebController 或 WebviewController 是 - 控制器。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  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,
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 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,
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

javaScriptAccess

javaScriptAccess(javaScriptAccess: boolean)

设置是否允许执行JavaScript脚本，默认允许执行。

参数：

参数名 参数类型 必填 默认值 参数描述
javaScriptAccess boolean 是 true 是否允许执行JavaScript脚本。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .javaScriptAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

mixedMode

mixedMode(mixedMode: MixedMode)

设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。

参数：

参数名 参数类型 必填 默认值 参数描述
mixedMode MixedMode 是 MixedMode.None 要设置的混合内容。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State mode: MixedMode = MixedMode.All
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mixedMode(this.mode)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

onlineImageAccess

onlineImageAccess(onlineImageAccess: boolean)

设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。

参数：

参数名 参数类型 必填 默认值 参数描述
onlineImageAccess boolean 是 true 设置是否允许从网络加载图片资源。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onlineImageAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

zoomAccess

zoomAccess(zoomAccess: boolean)

设置是否支持手势进行缩放，默认允许执行缩放。

参数：

参数名 参数类型 必填 默认值 参数描述
zoomAccess boolean 是 true 设置是否支持手势进行缩放。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .zoomAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

overviewModeAccess

overviewModeAccess(overviewModeAccess: boolean)

设置是否使用概览模式加载网页，默认使用该方式。

参数：

参数名 参数类型 必填 默认值 参数描述
overviewModeAccess boolean 是 true 设置是否使用概览模式加载网页。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .overviewModeAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

databaseAccess

databaseAccess(databaseAccess: boolean)

设置是否开启数据库存储API权限，默认不开启。

参数：

参数名 参数类型 必填 默认值 参数描述
databaseAccess boolean 是 false 设置是否开启数据库存储API权限。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

geolocationAccess

geolocationAccess(geolocationAccess: boolean)

设置是否开启获取地理位置权限，默认开启。

参数：

参数名 参数类型 必填 默认值 参数描述
geolocationAccess boolean 是 true 设置是否开启获取地理位置权限。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .geolocationAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

mediaPlayGestureAccess

mediaPlayGestureAccess(access: boolean)

设置视频播放是否需要用户手动点击。

参数：

参数名 参数类型 必填 默认值 参数描述
access boolean 是 true 设置视频播放是否需要用户手动点击。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State access: boolean = true
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mediaPlayGestureAccess(this.access)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

multiWindowAccess9+

multiWindowAccess(multiWindow: boolean)

设置是否开启多窗口权限，默认不开启。

参数：

参数名 参数类型 必填 默认值 参数描述
multiWindow boolean 是 false 设置是否开启多窗口权限。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
      .multiWindowAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

cacheMode

cacheMode(cacheMode: CacheMode)

设置缓存模式。

参数：

参数名 参数类型 必填 默认值 参数描述
cacheMode CacheMode 是 CacheMode.Default 要设置的缓存模式。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State mode: CacheMode = CacheMode.None
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

textZoomRatio9+

textZoomRatio(textZoomRatio: number)

设置页面的文本缩放百分比，默认为100%。

参数：

参数名 参数类型 必填 默认值 参数描述
textZoomRatio number 是 100 要设置的页面的文本缩放百分比。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State atio: number = 150
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .textZoomRatio(this.atio)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

initialScale9+

initialScale(percent: number)

设置整体页面的缩放百分比，默认为100%。

参数：

参数名 参数类型 必填 默认值 参数描述
percent number 是 100 要设置的整体页面的缩放百分比。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State percent: number = 100
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .initialScale(this.percent)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

userAgent

userAgent(userAgent: string)

设置用户代理。

参数：

参数名 参数类型 必填 默认值 参数描述
userAgent string 是 - 要设置的用户代理。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

webDebuggingAccess9+

webDebuggingAccess(webDebuggingAccess: boolean)

设置是否启用网页调试功能。

参数：

参数名 参数类型 必填 默认值 参数描述
webDebuggingAccess boolean 是 false 设置是否启用网页调试功能。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State webDebuggingAccess: boolean = true
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webDebuggingAccess(this.webDebuggingAccess)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

blockNetwork9+

blockNetwork(block: boolean)

设置Web组件是否阻止从网络加载资源。

参数：

参数名 参数类型 必填 默认值 参数描述
block boolean 是 false 设置Web组件是否阻止从网络加载资源。

示例：

// 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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

defaultFixedFontSize9+

defaultFixedFontSize(size: number)

设置网页的默认等宽字体大小。

参数：

参数名 参数类型 必填 默认值 参数描述
size number 是 13 设置网页的默认等宽字体大小，单位px。输入值的范围为-231到231-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State size: number = 16
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .defaultFixedFontSize(this.size)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

defaultFontSize9+

defaultFontSize(size: number)

设置网页的默认字体大小。

参数：

参数名 参数类型 必填 默认值 参数描述
size number 是 16 设置网页的默认字体大小，单位px。输入值的范围为-231到231-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State size: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .defaultFontSize(this.size)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

minFontSize9+

minFontSize(size: number)

设置网页字体大小最小值。

参数：

参数名 参数类型 必填 默认值 参数描述
size number 是 8 设置网页字体大小最小值，单位px。输入值的范围为-231到231-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State size: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .minFontSize(this.size)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

minLogicalFontSize9+

minLogicalFontSize(size: number)

设置网页逻辑字体大小最小值。

参数：

参数名 参数类型 必填 默认值 参数描述
size number 是 8 设置网页逻辑字体大小最小值，单位px。输入值的范围为-231到231-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State size: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .minLogicalFontSize(this.size)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

webFixedFont9+

webFixedFont(family: string)

设置网页的fixed font字体库。

参数：

参数名 参数类型 必填 默认值 参数描述
family string 是 monospace 设置网页的fixed font字体库。

示例：

// 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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

webSansSerifFont9+

webSansSerifFont(family: string)

设置网页的sans serif font字体库。

参数：

参数名 参数类型 必填 默认值 参数描述
family string 是 sans-serif 设置网页的sans serif font字体库。

示例：

// 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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

webSerifFont9+

webSerifFont(family: string)

设置网页的serif font字体库。

参数：

参数名 参数类型 必填 默认值 参数描述
family string 是 serif 设置网页的serif font字体库。

示例：

// 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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

webStandardFont9+

webStandardFont(family: string)

设置网页的standard font字体库。

参数：

参数名 参数类型 必填 默认值 参数描述
family string 是 sans serif 设置网页的standard font字体库。

示例：

// 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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

webFantasyFont9+

webFantasyFont(family: string)

设置网页的fantasy font字体库。

参数：

参数名 参数类型 必填 默认值 参数描述
family string 是 fantasy 设置网页的fantasy font字体库。

示例：

// 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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

webCursiveFont9+

webCursiveFont(family: string)

设置网页的cursive font字体库。

参数：

参数名 参数类型 必填 默认值 参数描述
family string 是 cursive 设置网页的cursive font字体库。

示例：

// 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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

事件

不支持通用事件。

onAlert

onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

网页触发alert()告警弹窗时触发回调。

参数：

参数名 参数类型 参数描述
url string 当前显示弹窗所在网页的URL。
message string 弹窗中显示的信息。
result JsResult 通知Web组件用户操作行为。

返回值：

类型 说明
boolean 当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onAlert((event) => {
          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
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

onBeforeUnload

onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

刷新或关闭场景下，在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点，才会触发此回调。

参数：

参数名 参数类型 参数描述
url string 当前显示弹窗所在网页的URL。
message string 弹窗中显示的信息。
result JsResult 通知Web组件用户操作行为。

返回值：

类型 说明
boolean 当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', 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
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

onConfirm

onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

网页调用confirm()告警时触发此回调。

参数：

参数名 参数类型 参数描述
url string 当前显示弹窗所在网页的URL。
message string 弹窗中显示的信息。
result JsResult 通知Web组件用户操作行为。

返回值：

类型 说明
boolean 当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onConfirm((event) => {
          console.log("event.url:" + event.url)
          console.log("event.message:" + event.message)
          console.log("event.result:" + event.result)
          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
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

onPrompt9+

onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)

参数：

参数名 参数类型 参数描述
url string 当前显示弹窗所在网页的URL。
message string 弹窗中显示的信息。
result JsResult 通知Web组件用户操作行为。

返回值：

类型 说明
boolean 当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', 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.handleConfirm()
              }
            },
            cancel: () => {
              event.result.handleCancel()
            }
          })
          return true
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

onConsole

onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)

通知宿主应用JavaScript console消息。

参数：

参数名 参数类型 参数描述
message ConsoleMessage 触发的控制台信息。

返回值：

类型 说明
boolean 当返回true时，该条消息将不会再打印至控制台，反之仍会打印至控制台。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  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
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

onDownloadStart

onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)

参数：

参数名 参数类型 参数描述
url string 文件下载的URL。
contentDisposition string 服务器返回的 Content-Disposition响应头，可能为空。
mimetype string 服务器返回内容媒体类型（MIME）信息。
contentLength contentLength 服务器返回文件的长度。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  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)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

onErrorReceive

onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void)

网页加载遇到错误时触发该回调。出于性能考虑，建议此回调中尽量执行简单逻辑。

参数：

参数名 参数类型 参数描述
request WebResourceRequest 网页请求的封装信息。
error WebResourceError 网页加载资源错误的封装信息 。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  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)
          }
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

onHttpErrorReceive

onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void)

网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。

参数：

参数名 参数类型 参数描述
request WebResourceRequest 网页请求的封装信息。
response WebResourceResponse 资源响应的封装信息。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  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)
          }
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

onPageBegin

onPageBegin(callback: (event?: { url: string }) => void)

网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。

参数：

参数名 参数类型 参数描述
url string 页面的URL地址。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onPageBegin((event) => {
          console.log('url:' + event.url)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onPageEnd

onPageEnd(callback: (event?: { url: string }) => void)

网页加载完成时触发该回调，且只在主frame触发。

参数：

参数名 参数类型 参数描述
url string 页面的URL地址。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onPageEnd((event) => {
          console.log('url:' + event.url)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onProgressChange

onProgressChange(callback: (event?: { newProgress: number }) => void)

网页加载进度变化时触发该回调。

参数：

参数名 参数类型 参数描述
newProgress number 新的加载进度，取值范围为0到100的整数。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onProgressChange((event) => {
          console.log('newProgress:' + event.newProgress)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onTitleReceive

onTitleReceive(callback: (event?: { title: string }) => void)

网页document标题更改时触发该回调。

参数：

参数名 参数类型 参数描述
title string document标题内容。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onTitleReceive((event) => {
          console.log('title:' + event.title)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onRefreshAccessedHistory

onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void)

加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。

参数：

参数名 参数类型 参数描述
url string 访问的url。
isRefreshed boolean true表示该页面是被重新加载的（调用refresh接口），false表示该页面是新加载的。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onRefreshAccessedHistory((event) => {
          console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onRenderExited

onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)

应用渲染进程异常退出时触发该回调。

参数：

参数名 参数类型 参数描述
renderExitReason RenderExitReason 渲染进程进程异常退出的具体原因。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'chrome://crash/', controller: this.controller })
        .onRenderExited((event) => {
          console.log('reason:' + event.renderExitReason)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onShowFileSelector9+

onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)

调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。

参数：

参数名 参数类型 参数描述
result FileSelectorResult 用于通知Web组件文件选择的结果。
fileSelector FileSelectorParam 文件选择器的相关信息。

返回值：

类型 说明
boolean 当返回值为true时，用户可以调用系统提供的弹窗能力。当返回值为false时，触发Web默认弹窗。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onShowFileSelector((event) => {
          AlertDialog.show({
            title: event.fileSelector.getTitle(),
            message: 'isCapture:' + event.fileSelector.isCapture() + " mode:" + event.fileSelector.getMode() + 'acceptType:' + event.fileSelector.getAcceptType(),
            confirm: {
              value: 'upload',
              action: () => {
                let fileList: Array<string> = [
                  '/data/storage/el2/base/test',
                ]
                event.result.handleFileList(fileList)
              }
            },
            cancel: () => {
              let fileList: Array<string> = []
              event.result.handleFileList(fileList)
            }
          })
          return true
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

onResourceLoad9+

onResourceLoad(callback: (event: {url: string}) => void)

通知Web组件所加载的资源文件url信息。

参数：

参数名 参数类型 参数描述
url string 所加载的资源文件url信息。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onResourceLoad((event) => {
          console.log('onResourceLoad: ' + event.url)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onScaleChange9+

onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void)

当前页面显示比例的变化时触发该回调。

参数：

参数名 参数类型 参数描述
oldScale number 变化前的显示比例百分比。
newScale number 变化后的显示比例百分比。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onScaleChange((event) => {
          console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onUrlLoadIntercept

onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean)

当Web组件加载url之前触发该回调，用于是否阻止此次访问。

参数：

参数名 参数类型 参数描述
data string / WebResourceRequest url的相关信息。

返回值：

类型 说明
boolean 返回true表示阻止此次加载，否则允许此次加载。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onUrlLoadIntercept((event) => {
          console.log('onUrlLoadIntercept ' + event.data.toString())
          return true
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onInterceptRequest9+

onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)

当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。

参数：

参数名 参数类型 参数描述
request WebResourceRequest url请求的相关信息。

返回值：

类型 说明
WebResourceResponse 返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  responseweb: WebResourceResponse = new WebResourceResponse()
  heads:Header[] = new Array()
  @State webdata: string = "<!DOCTYPE html>\n" +
  "<html>\n"+
  "<head>\n"+
  "<title>intercept test</title>\n"+
  "</head>\n"+
  "<body>\n"+
  "<h1>intercept test</h1>\n"+
  "</body>\n"+
  "</html>"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onInterceptRequest((event) => {
          console.log('url:' + event.request.getRequestUrl())
          var head1:Header = {
            headerKey:"Connection",
            headerValue:"keep-alive"
          }
          var head2:Header = {
            headerKey:"Cache-Control",
            headerValue:"no-cache"
          }
          var length = this.heads.push(head1)
          length = this.heads.push(head2)
          this.responseweb.setResponseHeader(this.heads)
          this.responseweb.setResponseData(this.webdata)
          this.responseweb.setResponseEncoding('utf-8')
          this.responseweb.setResponseMimeType('text/html')
          this.responseweb.setResponseCode(200)
          this.responseweb.setReasonMessage('OK')
          return this.responseweb
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

onHttpAuthRequest9+

onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean)

通知收到http auth认证请求。

参数：

参数名 参数类型 参数描述
handler HttpAuthHandler 通知Web组件用户操作行为。
host string HTTP身份验证凭据应用的主机。
realm string HTTP身份验证凭据应用的域。

返回值：

类型 说明
boolean 返回false表示此次认证失败，否则成功。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  httpAuth: boolean = false

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onHttpAuthRequest((event) => {
          AlertDialog.show({
            title: 'onHttpAuthRequest',
            message: 'text',
            primaryButton: {
              value: 'cancel',
              action: () => {
                event.handler.cancel()
              }
            },
            secondaryButton: {
              value: 'ok',
              action: () => {
                this.httpAuth = event.handler.isHttpAuthInfoSaved()
                if (this.httpAuth == false) {
                  web_webview.WebDataBase.saveHttpAuthCredentials(
                    event.host,
                    event.realm,
                    "2222",
                    "2222"
                  )
                  event.handler.cancel()
                }
              }
            },
            cancel: () => {
              event.handler.cancel()
            }
          })
          return true
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

onSslErrorEventReceive9+

onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslError }) => void)

通知用户加载资源时发生SSL错误。

参数：

参数名 参数类型 参数描述
handler SslErrorHandler 通知Web组件用户操作行为。
error SslError 错误码。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onSslErrorEventReceive((event) => {
          AlertDialog.show({
            title: 'onSslErrorEventReceive',
            message: 'text',
            primaryButton: {
              value: 'confirm',
              action: () => {
                event.handler.handleConfirm()
              }
            },
            secondaryButton: {
              value: 'cancel',
              action: () => {
                event.handler.handleCancel()
              }
            },
            cancel: () => {
              event.handler.handleCancel()
            }
          })
          return true
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

onClientAuthenticationRequest9+

onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array, issuers : Array}) => void)

通知用户收到SSL客户端证书请求事件。

参数：

参数名 参数类型 参数描述
handler ClientAuthenticationHandler 通知Web组件用户操作行为。
host string 请求证书服务器的主机名。
port number 请求证书服务器的端口号。
keyTypes Array 可接受的非对称秘钥类型。
issuers Array 与私钥匹配的证书可接受颁发者。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onClientAuthenticationRequest((event) => {
          AlertDialog.show({
            title: 'onClientAuthenticationRequest',
            message: 'text',
            primaryButton: {
              value: 'confirm',
              action: () => {
                event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")
              }
            },
            secondaryButton: {
              value: 'cancel',
              action: () => {
                event.handler.cancel()
              }
            },
            cancel: () => {
              event.handler.ignore()
            }
          })
          return true
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

onPermissionRequest9+

onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)

通知收到获取权限请求。

参数：

参数名 参数类型 参数描述
request PermissionRequest 通知Web组件用户操作行为。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onPermissionRequest((event) => {
          AlertDialog.show({
            title: 'title',
            message: 'text',
            primaryButton: {
              value: 'deny',
              action: () => {
                event.request.deny()
              }
            },
            secondaryButton: {
              value: 'onConfirm',
              action: () => {
                event.request.grant(event.request.getAccessibleResource())
              }
            },
            cancel: () => {
              event.request.deny()
            }
          })
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

onContextMenuShow9+

onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)

长按特定元素（例如图片，链接），跳出菜单。

参数：

参数名 参数类型 参数描述
param WebContextMenuParam 菜单相关参数。
result WebContextMenuResult 菜单相应事件传入内核。

返回值：

类型 说明
boolean 自定义菜单返回true，默认菜单返回false。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onContextMenuShow((event) => {
          console.info("x coord = " + event.param.x())
          console.info("link url = " + event.param.getLinkUrl())
          return true
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onScroll9+

onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)

通知网页滚动条滚动位置。

参数：

参数名 参数类型 参数描述
xOffset number 水平滚动条滚动所在位置。
yOffset number 竖直滚动条滚动所在位置。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
      .onScroll((event) => {
          console.info("x = " + event.xOffset)
          console.info("y = " + event.yOffset)
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onGeolocationShow

onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void)

通知用户收到地理位置信息获取请求。

参数：

参数名 参数类型 参数描述
origin string 指定源的字符串索引。
geolocation JsGeolocation 通知Web组件用户操作行为。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller:WebController = new WebController()
  build() {
    Column() {
      Web({ src:'www.example.com', controller:this.controller })
      .geolocationAccess(true)
      .onGeolocationShow((event) => {
        AlertDialog.show({
          title: 'title',
          message: 'text',
          confirm: {
            value: 'onConfirm',
            action: () => {
              event.geolocation.invoke(event.origin, true, true)
            }
          },
          cancel: () => {
            event.geolocation.invoke(event.origin, false, true)
          }
        })
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

onGeolocationHide

onGeolocationHide(callback: () => void)

通知用户先前被调用onGeolocationShow时收到地理位置信息获取请求已被取消。

参数：

参数名 参数类型 参数描述
callback () => void 地理位置信息获取请求已被取消的回调函数。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller:WebController = new WebController()
  build() {
    Column() {
      Web({ src:'www.example.com', controller:this.controller })
      .geolocationAccess(true)
      .onGeolocationHide(() => {
        console.log("onGeolocationHide...")
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onFullScreenEnter9+

onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)

通知开发者web组件进入全屏模式。

参数：

参数名 参数类型 参数描述
handler FullScreenExitHandler 用于退出全屏模式的函数句柄。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller:WebController = new WebController()
  handler: FullScreenExitHandler = null
  build() {
    Column() {
      Web({ src:'www.example.com', controller:this.controller })
      .onFullScreenEnter((event) => {
        console.log("onFullScreenEnter...")
        this.handler = event.handler
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onFullScreenExit9+

onFullScreenExit(callback: () => void)

通知开发者web组件退出全屏模式。

参数：

参数名 参数类型 参数描述
callback () => void 退出全屏模式时的回调函数。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller:WebController = new WebController()
  handler: FullScreenExitHandler = null
  build() {
    Column() {
      Web({ src:'www.example.com', controller:this.controller })
      .onFullScreenExit(() => {
        console.log("onFullScreenExit...")
        this.handler.exitFullScreen()
      })
      .onFullScreenEnter((event) => {
        this.handler = event.handler
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

onWindowNew9+

onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetUrl: string, handler: ControllerHandler}) => void)

通知用户新建窗口请求。

参数：

参数名 参数类型 参数描述
isAlert boolean true代表请求创建对话框，false代表新标签页。
isUserTrigger boolean true代表用户触发，false代表非用户触发。
targetUrl string 目标url。
handler ControllerHandler 用于设置新建窗口的WebController实例。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
      .multiWindowAccess(true)
      .onWindowNew((event) => {
        console.log("onWindowNew...")
        var popController: web_webview.WebviewController = new web_webview.WebviewController()
        event.handler.setWebController(popController)
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

onWindowExit9+

onWindowExit(callback: () => void)

通知用户窗口关闭请求。

参数：

参数名 参数类型 参数描述
callback () => void 窗口请求关闭的回调函数。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller:WebController = new WebController()
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
      .onWindowExit(() => {
        console.log("onWindowExit...")
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

onSearchResultReceive9+

onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMatches: number, isDoneCounting: boolean}) => void): WebAttribute

回调通知调用方网页页内查找的结果。

参数：

参数名 参数类型 参数描述
activeMatchOrdinal number 当前匹配的查找项的序号（从0开始）。
numberOfMatches number 所有匹配到的关键词的个数。
isDoneCounting boolean 当次页内查找操作是否结束。该方法可能会回调多次，直到isDoneCounting为true为止。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
   	  .onSearchResultReceive(ret => {
          console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
            "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onDataResubmitted9+

onDataResubmitted(callback: (event: {handler: DataResubmissionHandler}) => void)

设置网页表单可以重新提交时触发的回调函数。

参数：

参数名 参数类型 参数描述
handler DataResubmissionHandler 表单数据重新提交句柄。

示例：

// 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 })
       .onDataResubmitted((event) => {
        console.log('onDataResubmitted')
        event.handler.resend();
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onPageVisible9+

onPageVisible(callback: (event: {url: string}) => void)

设置旧页面不再呈现，新页面即将可见时触发的回调函数。

参数：

参数名 参数类型 参数描述
url string 旧页面不再呈现，新页面即将可见时新页面的url地址。

示例：

// 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 })
       .onPageVisible((event) => {
        console.log('onPageVisible url:' + event.url)
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onInterceptKeyEvent9+

onInterceptKeyEvent(callback: (event: KeyEvent) => boolean)

设置键盘事件的回调函数，该回调在被Webview消费前触发。

参数：

参数名 参数类型 参数描述
event KeyEvent 触发的KeyEvent事件。

返回值：

类型 说明
boolean 回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入Webview内核。

示例：

// 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 })
       .onInterceptKeyEvent((event) => {
        	if (event.keyCode == 2017 || event.keyCode == 2018) {
          console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`)
          return true;
        }
        return false;
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

onTouchIconUrlReceived9+

onTouchIconUrlReceived(callback: (event: {url: string, precomposed: boolean}) => void)

设置接收到apple-touch-icon url地址时的回调函数。

参数：

参数名 参数类型 参数描述
url string 接收到的apple-touch-icon url地址。
precomposed boolean 对应apple-touch-icon是否为预合成。

示例：

// 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.baidu.com', controller: this.controller })
       .onTouchIconUrlReceived((event) => {
        console.log('onTouchIconUrlReceived:' + JSON.stringify(event))
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

onFaviconReceived9+

onFaviconReceived(callback: (event: {favicon: image.PixelMap}) => void)

设置应用为当前页面接收到新的favicon时的回调函数。

参数：

参数名 参数类型 参数描述
favicon PixelMap 接收到的favicon图标的PixelMap对象。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
import image from "@ohos.multimedia.image"
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State icon: image.PixelMap = undefined;
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
       .onFaviconReceived((event) => {
        console.log('onFaviconReceived:' + JSON.stringify(event))
        this.icon = event.favicon;
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

ConsoleMessage

Web组件获取控制台信息对象。示例代码参考onConsole事件。

getLineNumber

getLineNumber(): number

获取ConsoleMessage的行数。

返回值：

类型 说明
number 返回ConsoleMessage的行数。

getMessage

getMessage(): string

获取ConsoleMessage的日志信息。

返回值：

类型 说明
string 返回ConsoleMessage的日志信息。

getMessageLevel

getMessageLevel(): MessageLevel

获取ConsoleMessage的信息级别。

返回值：

类型 说明
MessageLevel 返回ConsoleMessage的信息级别。

getSourceId

getSourceId(): string

获取网页源文件路径和名字。

返回值：

类型 说明
string 返回网页源文件路径和名字。

JsResult

Web组件返回的弹窗确认或弹窗取消功能对象。示例代码参考onAlert事件。

handleCancel

handleCancel(): void

通知Web组件用户取消弹窗操作。

handleConfirm

handleConfirm(): void

通知Web组件用户确认弹窗操作。

handlePromptConfirm9+

handlePromptConfirm(result: string): void

通知Web组件用户确认弹窗操作及对话框内容。

参数：

参数名 参数类型 必填 默认值 参数描述
result string 是 - 用户输入的对话框内容。

FullScreenExitHandler9+

通知开发者Web组件退出全屏。示例代码参考onFullScreenEnter事件。

exitFullScreen9+

exitFullScreen(): void

通知开发者Web组件退出全屏。

ControllerHandler9+

设置用户新建web组件的的WebviewController对象。示例代码参考onWindowNew事件。

setWebController9+

setWebController(controller: WebviewController): void

设置WebviewController对象。

参数：

参数名 参数类型 必填 默认值 参数描述
controller WebviewController 是 - 新建web组件的的WebviewController对象。

WebResourceError

web组件资源管理错误信息对象。示例代码参考onErrorReceive事件。

getErrorCode

getErrorCode(): number

获取加载资源的错误码。

返回值：

类型 说明
number 返回加载资源的错误码。

getErrorInfo

getErrorInfo(): string

获取加载资源的错误信息。

返回值：

类型 说明
string 返回加载资源的错误信息。

WebResourceRequest

web组件获取资源请求对象。示例代码参考onErrorReceive事件。

getRequestHeader

getResponseHeader() : Array<Header>

获取资源请求头信息。

返回值：

类型 说明
Array<Header> 返回资源请求头信息。

getRequestUrl

getRequestUrl(): string

获取资源请求的URL信息。

返回值：

类型 说明
string 返回资源请求的URL信息。

isMainFrame

isMainFrame(): boolean

判断资源请求是否为主frame。

返回值：

类型 说明
boolean 返回资源请求是否为主frame。

isRedirect

isRedirect(): boolean

判断资源请求是否被服务端重定向。

返回值：

类型 说明
boolean 返回资源请求是否被服务端重定向。

isRequestGesture

isRequestGesture(): boolean

获取资源请求是否与手势（如点击）相关联。

返回值：

类型 说明
boolean 返回资源请求是否与手势（如点击）相关联。

Web组件返回的请求/响应头对象。

名称 类型 描述
headerKey string 请求/响应头的key。
headerValue string 请求/响应头的value。

WebResourceResponse

web组件资源响应对象。示例代码参考onHttpErrorReceive事件。

getReasonMessage

getReasonMessage(): string

获取资源响应的状态码描述。

返回值：

类型 说明
string 返回资源响应的状态码描述。

getResponseCode

getResponseCode(): number

获取资源响应的状态码。

返回值：

类型 说明
number 返回资源响应的状态码。

getResponseData

getResponseData(): string

获取资源响应数据。

返回值：

类型 说明
string 返回资源响应数据。

getResponseEncoding

getResponseEncoding(): string

获取资源响应的编码。

返回值：

类型 说明
string 返回资源响应的编码。

getResponseHeader

getResponseHeader() : Array<Header>

获取资源响应头。

返回值：

类型 说明
Array<Header> 返回资源响应头。

getResponseMimeType

getResponseMimeType(): string

获取资源响应的媒体（MIME）类型。

返回值：

类型 说明
string 返回资源响应的媒体（MIME）类型。

setResponseData9+

setResponseData(data: string)

设置资源响应数据。

参数：

参数名 参数类型 必填 默认值 参数描述
data string 是 - 要设置的资源响应数据。

setResponseEncoding9+

setResponseEncoding(encoding: string)

设置资源响应的编码。

参数：

参数名 参数类型 必填 默认值 参数描述
encoding string 是 - 要设置的资源响应的编码。

setResponseMimeType9+

setResponseMimeType(mimeType: string)

设置资源响应的媒体（MIME）类型。

参数：

参数名 参数类型 必填 默认值 参数描述
mimeType string 是 - 要设置的资源响应的媒体（MIME）类型。

setReasonMessage9+

setReasonMessage(reason: string)

设置资源响应的状态码描述。

参数：

参数名 参数类型 必填 默认值 参数描述
reason string 是 - 要设置的资源响应的状态码描述。

setResponseHeader9+

setResponseHeader(header: Array<Header>)

设置资源响应头。

参数：

参数名 参数类型 必填 默认值 参数描述
header Array<Header> 是 - 要设置的资源响应头。

setResponseCode9+

setResponseCode(code: number)

设置资源响应的状态码。

参数：

参数名 参数类型 必填 默认值 参数描述
code number 是 - 要设置的资源响应的状态码。

FileSelectorResult9+

通知Web组件的文件选择结果。示例代码参考onShowFileSelector事件。

handleFileList9+

handleFileList(fileList: Array<string>): void

通知Web组件进行文件选择操作。

参数：

参数名 参数类型 必填 默认值 参数描述
fileList Array<string> 是 - 需要进行操作的文件列表。

FileSelectorParam9+

web组件获取文件对象。示例代码参考onShowFileSelector事件。

getTitle9+

getTitle(): string

获取文件选择器标题。

返回值：

类型 说明
string 返回文件选择器标题。

getMode9+

getMode(): FileSelectorMode

获取文件选择器的模式。

返回值：

类型 说明
FileSelectorMode 返回文件选择器的模式。

getAcceptType9+

getAcceptType(): Array<string>

获取文件过滤类型。

返回值：

类型 说明
Array<string> 返回文件过滤类型。

isCapture9+

isCapture(): boolean

获取是否调用多媒体能力。

返回值：

类型 说明
boolean 返回是否调用多媒体能力。

HttpAuthHandler9+

Web组件返回的http auth认证请求确认或取消和使用缓存密码认证功能对象。示例代码参考onHttpAuthRequest事件。

cancel9+

cancel(): void

通知Web组件用户取消HTTP认证操作。

confirm9+

confirm(userName: string, pwd: string): boolean

使用用户名和密码进行HTTP认证操作。

参数：

参数名 参数类型 必填 默认值 参数描述
userName string 是 - HTTP认证用户名。
pwd string 是 - HTTP认证密码。

返回值：

类型 说明
boolean 认证成功返回true，失败返回false。

isHttpAuthInfoSaved9+

isHttpAuthInfoSaved(): boolean

通知Web组件用户使用服务器缓存的账号密码认证。

返回值：

类型 说明
boolean 存在密码认证成功返回true，其他返回false。

SslErrorHandler9+

Web组件返回的SSL错误通知事件用户处理功能对象。示例代码参考onSslErrorEventReceive事件。

handleCancel9+

handleCancel(): void

通知Web组件取消此请求。

handleConfirm9+

handleConfirm(): void

通知Web组件继续使用SSL证书。

ClientAuthenticationHandler9+

Web组件返回的SSL客户端证书请求事件用户处理功能对象。示例代码参考onClientAuthenticationRequest事件。

confirm9+

confirm(priKeyFile : string, certChainFile : string): void

通知Web组件使用指定的私钥和客户端证书链。

参数：

参数名 参数类型 必填 参数描述
priKeyFile string 是 存放私钥的文件，包含路径和文件名。
certChainFile string 是 存放证书链的文件，包含路径和文件名。

cancel9+

cancel(): void

通知Web组件取消相同host和port服务器发送的客户端证书请求事件。同时，相同host和port服务器的请求，不重复上报该事件。

ignore9+

ignore(): void

通知Web组件忽略本次请求。

PermissionRequest9+

Web组件返回授权或拒绝权限功能的对象。示例代码参考onPermissionRequest事件。

deny9+

deny(): void

拒绝网页所请求的权限。

getOrigin9+

getOrigin(): string

获取网页来源。

返回值：

类型 说明
string 当前请求权限网页的来源。

getAccessibleResource9+

getAccessibleResource(): Array<string>

获取网页所请求的权限资源列表，资源列表类型参考ProtectedResourceType。

返回值：

类型 说明
Array<string> 网页所请求的权限资源列表。

grant9+

grant(resources: Array<string>): void

对网页访问的给定权限进行授权。

参数：

参数名 参数类型 必填 默认值 参数描述
resources Array<string> 是 - 网页所请求的权限资源列表。

WebContextMenuParam9+

实现长按页面元素跳出来的菜单信息。示例代码参考onContextMenuShow事件。

x9+

x(): number

弹出菜单的x坐标。

返回值：

类型 说明
number 显示正常返回非负整数，否则返回-1。

y9+

y(): number

弹出菜单的y坐标。

返回值：

类型 说明
number 显示正常返回非负整数，否则返回-1。

getLinkUrl9+

getLinkUrl(): string

获取链接地址。

返回值：

类型 说明
string 如果长按位置是链接，返回经过安全检查的url链接。

getUnfilteredLinkUrl9+

getUnfilteredLinkUrl(): string

获取链接地址。

返回值：

类型 说明
string 如果长按位置是链接，返回原始的url链接。

getSourceUrl9+

getSourceUrl(): string

获取sourceUrl链接。

返回值：

类型 说明
string 如果选中的元素有src属性，返回src的url。

existsImageContents9+

existsImageContents(): boolean

是否存在图像内容。

返回值：

类型 说明
boolean 长按位置中有图片返回true，否则返回false。

WebContextMenuResult9+

实现长按页面元素跳出来的菜单所执行的响应事件。示例代码参考onContextMenuShow事件。

closeContextMenu9+

closeContextMenu(): void

不执行WebContextMenuResult其他接口操作时，需要调用此接口关闭菜单。

copyImage9+

copyImage(): void

WebContextMenuParam有图片内容则复制图片。

JsGeolocation

Web组件返回授权或拒绝权限功能的对象。示例代码参考onGeolocationShow事件。

invoke

invoke(origin: string, allow: boolean, retain: boolean): void

设置网页地理位置权限状态。

参数：

参数名 参数类型 必填 默认值 参数描述
origin string 是 - 指定源的字符串索引。
allow boolean 是 - 设置的地理位置权限状态。
retain boolean 是 - 是否允许将地理位置权限状态保存到系统中。可通过GeolocationPermissions接口管理保存到系统的地理位置权限。

WebController

通过WebController可以控制Web组件各种行为。一个WebController对象只能控制一个Web组件，且必须在Web组件和WebController绑定后，才能调用WebController上的方法。

创建对象

webController: WebController = new WebController()
1

requestFocus

requestFocus()

使当前web页面获取焦点。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('requestFocus')
        .onClick(() => {
          this.controller.requestFocus()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

accessBackward

accessBackward(): boolean

当前页面是否可后退，即当前页面是否有返回历史记录。

返回值：

类型 说明
boolean 可以后退返回true,否则返回false。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('accessBackward')
        .onClick(() => {
          let result = this.controller.accessBackward()
          console.log('result:' + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

accessForward

accessForward(): boolean

当前页面是否可前进，即当前页面是否有前进历史记录。

返回值：

类型 说明
boolean 可以前进返回true,否则返回false。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('accessForward')
        .onClick(() => {
          let result = this.controller.accessForward()
          console.log('result:' + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

accessStep

accessStep(step: number): boolean

当前页面是否可前进或者后退给定的step步。

参数：

参数名 参数类型 必填 默认值 参数描述
step number 是 - 要跳转的步数，正数代表前进，负数代表后退。

返回值：

类型 说明
boolean 页面是否前进或后退

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State steps: number = 2

  build() {
    Column() {
      Button('accessStep')
        .onClick(() => {
          let result = this.controller.accessStep(this.steps)
          console.log('result:' + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

backward

backward(): void

按照历史栈，后退一个页面。一般结合accessBackward一起使用。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('backward')
        .onClick(() => {
          this.controller.backward()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

forward

forward(): void

按照历史栈，前进一个页面。一般结合accessForward一起使用。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('forward')
        .onClick(() => {
          this.controller.forward()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

backOrForward9+

backOrForward(step: number): void

按照历史栈，前进或者后退指定步长的页面，当历史栈中不存在对应步长的页面时，不会进行页面跳转。

参数：

参数名 参数类型 必填 默认值 参数描述
step number 是 - 需要前进或后退的步长。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State step: number = -2

  build() {
    Column() {
      Button('backOrForward')
        .onClick(() => {
          this.controller.backOrForward(this.step)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

deleteJavaScriptRegister

deleteJavaScriptRegister(name: string)

删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。删除后立即生效，无须调用refresh接口。

参数：

参数名 参数类型 必填 默认值 参数描述
name string 是 - 注册对象的名称，可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State name: string = 'Object'

  build() {
    Column() {
      Button('deleteJavaScriptRegister')
        .onClick(() => {
          this.controller.deleteJavaScriptRegister(this.name)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

getHitTest

getHitTest(): HitTestType

获取当前被点击区域的元素类型。

返回值：

类型 说明
HitTestType 被点击区域的元素类型。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('getHitTest')
        .onClick(() => {
          let hitType = this.controller.getHitTest()
          console.log("hitType: " + hitType)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

getHitTestValue9+

getHitTestValue(): HitTestValue

获取当前被点击区域的元素信息。

返回值：

类型 说明
HitTestValue 点击区域的元素信息。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('getHitTestValue')
        .onClick(() => {
          let hitValue = this.controller.getHitTestValue()
          console.log("hitType: " + hitValue.getType())
          console.log("extra: " + hitValue.getExtra())
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

getWebId9+

getWebId(): number

获取当前Web组件的索引值，用于多个Web组件的管理。

返回值：

类型 说明
number 当前Web组件的索引值。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('getWebId')
        .onClick(() => {
          let id = this.controller.getWebId()
          console.log("id: " + id)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

getTitle9+

getTitle(): string

获取当前网页的标题。

返回值：

类型 说明
string 当前网页的标题。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('getTitle')
        .onClick(() => {
          let title = this.controller.getTitle()
          console.log("title: " + title)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

getPageHeight9+

getPageHeight(): number

获取当前网页的页面高度。

返回值：

类型 说明
number 当前网页的页面高度。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('getPageHeight')
        .onClick(() => {
          let pageHeight = this.controller.getPageHeight()
          console.log("pageHeight: " + pageHeight)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

getDefaultUserAgent9+

getDefaultUserAgent(): string

获取当前默认用户代理。

返回值：

类型 说明
string 默认用户代理。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('getDefaultUserAgent')
        .onClick(() => {
          let userAgent = this.controller.getDefaultUserAgent()
          console.log("userAgent: " + userAgent)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

loadData

loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string })

baseUrl为空时，通过”data“协议加载指定的一段字符串。

当baseUrl为”data“协议时，编码后的data字符串将被Web组件作为”data"协议加载。

当baseUrl为“http/https"协议时，编码后的data字符串将被Web组件以类似loadUrl的方式以非编码字符串处理。

参数：

参数名 参数类型 必填 默认值 参数描述
data string 是 - 按照”Base64“或者”URL"编码后的一段字符串。
mimeType string 是 - 媒体类型（MIME）。
encoding string 是 - 编码类型，具体为“Base64"或者”URL编码。
baseUrl string 否 - 指定的一个URL路径（“http”/“https”/"data"协议），并由Web组件赋值给window.origin。
historyUrl string 否 - 历史记录URL。非空时，可被历史记录管理，实现前后后退功能。当baseUrl为空时，此属性无效。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          this.controller.loadData({
            data: "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
            mimeType: "text/html",
            encoding: "UTF-8"
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

loadUrl

loadUrl(options: { url: string | Resource, headers?: Array<Header> })

使用指定的http头加载指定的URL。

通过loadUrl注入的对象只在当前document有效，即通过loadUrl导航到新的页面会无效。

而通过registerJavaScriptProxy注入的对象，在loadUrl导航到新的页面也会有效。

参数：

参数名 参数类型 必填 默认值 参数描述
url string 是 - 需要加载的 URL。
headers Array<Header> 否 [] URL的附加HTTP请求头。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          this.controller.loadUrl({ url: 'www.example.com' })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onActive

onActive(): void

调用此接口通知Web组件进入前台激活状态。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('onActive')
        .onClick(() => {
          this.controller.onActive()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onInactive

onInactive(): void

调用此接口通知Web组件进入未激活状态。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('onInactive')
        .onClick(() => {
          this.controller.onInactive()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

zoom

zoom(factor: number): void

调整当前网页的缩放比例。

参数：

参数名 参数类型 必填 参数描述
factor number 是 基于当前网页所需调整的相对缩放比例，正值为放大，负值为缩小。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State factor: number = 1

  build() {
    Column() {
      Button('zoom')
        .onClick(() => {
          this.controller.zoom(this.factor)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

zoomIn9+

zoomIn(): boolean

调用此接口将当前网页进行放大，比列20%。

返回值：

类型 说明
boolean 放大操作是否成功执行。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('zoomIn')
        .onClick(() => {
          let result = this.controller.zoomIn()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

zoomOut9+

zoomOut(): boolean

调用此接口将当前网页进行缩小，比列20%。

返回值：

类型 说明
boolean 缩小操作是否成功执行。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('zoomOut')
        .onClick(() => {
          let result = this.controller.zoomOut()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

refresh

refresh()

调用此接口通知Web组件刷新网页。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          this.controller.refresh()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

registerJavaScriptProxy

registerJavaScriptProxy(options: { object: object, name: string, methodList: Array<string> })

注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用refresh接口生效。

参数：

参数名 参数类型 必填 默认值 参数描述
object object 是 - 参与注册的应用侧JavaScript对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean
name string 是 - 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。
methodList Array<string> 是 - 参与注册的应用侧JavaScript对象的方法。

示例：

// xxx.ets
@Entry
@Component
struct Index {
  controller: WebController = new WebController()
  testObj = {
    test: (data) => {
      return "ArkUI Web Component"
    },
    toString: () => {
      console.log('Web Component toString')
    }
  }
  build() {
    Column() {
      Row() {
        Button('Register JavaScript To Window').onClick(() => {
          this.controller.registerJavaScriptProxy({
            object: this.testObj,
            name: "objName",
            methodList: ["test", "toString"],
          })
        })
      }
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- index.html -->
<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <body>
        Hello world!
    </body>
    <script type="text/javascript">
    function htmlTest() {
        str = objName.test("test function")
        console.log('objName.test result:'+ str)
    }
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

runJavaScript

runJavaScript(options: { script: string, callback?: (result: string) => void })

异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。

参数：

参数名 参数类型 必填 默认值 参数描述
script string 是 - JavaScript脚本。
callback (result: string) => void 否 - 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State webResult: string = ''
  build() {
    Column() {
      Text(this.webResult).fontSize(20)
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .javaScriptAccess(true)
      .onPageEnd(e => {
        this.controller.runJavaScript({
          script: 'test()',
          callback: (result: string)=> {
            this.webResult = result
            console.info(`The test() return value is: ${result}`)
          }})
        console.info('url: ', e.url)
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- index.html -->
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <body>
      Hello world!
  </body>
  <script type="text/javascript">
  function test() {
      console.log('Ark WebComponent')
      return "This value is from index.html"
  }
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

stop

stop()

停止页面加载。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('stop')
        .onClick(() => {
          this.controller.stop()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

clearHistory

clearHistory(): void

删除所有前进后退记录。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('clearHistory')
        .onClick(() => {
          this.controller.clearHistory()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

clearSslCache

clearSslCache(): void

清除Web组件记录的SSL证书错误事件对应的用户操作行为。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('clearSslCache')
        .onClick(() => {
          this.controller.clearSslCache()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

clearClientAuthenticationCache

clearClientAuthenticationCache(): void

清除Web组件记录的客户端证书请求事件对应的用户操作行为。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('clearClientAuthenticationCache')
        .onClick(() => {
          this.controller.clearClientAuthenticationCache()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

getCookieManager9+

getCookieManager(): WebCookie

获取web组件cookie管理对象。

返回值：

类型 说明
WebCookie web组件cookie管理对象，参考WebCookie定义。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('getCookieManager')
        .onClick(() => {
          let cookieManager = this.controller.getCookieManager()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

createWebMessagePorts9+

createWebMessagePorts(): Array<WebMessagePort>

创建Web消息端口。

返回值：

类型 说明
Array<WebMessagePort> web消息端口列表。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  ports: WebMessagePort[] = null
  build() {
    Column() {
      Button('createWebMessagePorts')
        .onClick(() => {
          this.ports = this.controller.createWebMessagePorts()
          console.log("createWebMessagePorts size:" + this.ports.length)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

postMessage9+

postMessage(options: { message: WebMessageEvent, uri: string}): void

发送Web消息端口到HTML5。

参数：

参数名 参数类型 必填 默认值 参数描述
message WebMessageEvent 是 - 要发送的消息，包含数据和消息端口。
uri string 是 - 接收该消息的URI。

示例：

// index.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  ports: WebMessagePort[] = null
  @State sendFromEts: string = 'Send this message from ets to HTML'
  @State receivedFromHtml: string = 'Display received message send from HTML'

  build() {
    Column() {
      // 展示接收到的来自HTML的内容
      Text(this.receivedFromHtml)
      // 输入框的内容发送到HTML
      TextInput({placeholder: 'Send this message from ets to HTML'})
      .onChange((value: string) => {
        this.sendFromEts = value
      })

      // 1、创建两个消息端口
      Button('1.CreateWebMessagePorts')
        .onClick(() => {
          this.ports = this.controller.createWebMessagePorts()
          console.log("createWebMessagePorts size:" + this.ports.length)
        })

      // 2、将其中一个消息端口发送到HTML侧，由HTML侧保存并使用。
      Button('2.PostMessagePort')
        .onClick(() => {
          var sendPortArray = new Array(this.ports[1])
          var msgEvent = new WebMessageEvent()
          msgEvent.setData("__init_port__")
          msgEvent.setPorts(sendPortArray)
          this.controller.postMessage({message: msgEvent, uri: "*"})
        })

      // 3、另一个消息端口在应用侧注册回调事件。
      Button('3.RegisterCallback')
        .onClick(() => {
            this.ports[0].onMessageEvent((result: string) => {
              var msg = 'Got msg from HTML: ' + result
              this.receivedFromHtml = msg
            })
        })

      // 4、使用应用侧的端口给另一个已经发送到HTML的消息端口发送消息。
      Button('4.SendDataToHtml5')
        .onClick(() => {
          var msg = new WebMessageEvent()
          msg.setData(this.sendFromEts)
          this.ports[0].postMessageEvent(msg)
        })
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .javaScriptAccess(true)
        .fileAccess(true)
    }
  }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Web Message Port Demo</h1>
        <div style="font-size: 24pt;">
          <input type="button" value="5.SendToEts" onclick="PostMsgToEts(msgFromJS.value);" /><br/>
          <input id="msgFromJS" type="text" value="send this message from HTML to ets" style="font-size: 16pt;" /><br/>
        </div>
        <p class="output">display received message send from ets</p>
    </body>
    <script src="index.js"></script>
</html>

// index.js
var h5Port;
var output = document.querySelector('.output');
window.addEventListener('message', function(event) {
  if (event.data == '__init_port__') {
    if(event.ports[0] != null) {
      h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
      h5Port.onmessage = function(event) {
        // 2. 接收ets侧发送过来的消息.
        var msg = 'Got message from ets:' + event.data;
        output.innerHTML = msg;
      }
    }
  }
})

// 3. 使用h5Port往ets侧发送消息.
function PostMsgToEts(data) {
  h5Port.postMessage(data)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

getUrl9+

getUrl(): string

获取当前页面的url地址。

返回值：

类型 说明
string 当前页面的url地址。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Button('getUrl')
        .onClick(() => {
          console.log("url: " + this.controller.getUrl())
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

searchAllAsync9+

searchAllAsync(searchString: string): void

异步查找网页中所有匹配关键字'searchString'的内容并高亮，结果通过onSearchResultReceive异步返回。

参数：

参数名 参数类型 必填 默认值 参数描述
searchString string 是 - 查找的关键字。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State searchString: string = "xxx"

  build() {
    Column() {
      Button('searchString')
        .onClick(() => {
          this.controller.searchAllAsync(this.searchString)
        })
      Button('clearMatches')
        .onClick(() => {
          this.controller.clearMatches()
        })
      Button('searchNext')
        .onClick(() => {
          this.controller.searchNext(true)
        })
      Web({ src: 'www.example.com', controller: this.controller })
   	  .onSearchResultReceive(ret => {
          console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
            "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

clearMatches9+

clearMatches(): void

清除所有通过searchAllAsync匹配到的高亮字符查找结果。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('clearMatches')
        .onClick(() => {
          this.controller.clearMatches()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

searchNext9+

searchNext(forward: boolean): void

滚动到下一个匹配的查找结果并高亮。

参数：

参数名 参数类型 必填 默认值 参数描述
forward boolean 是 - 从前向后或者逆向查找。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('searchNext')
        .onClick(() => {
          this.controller.searchNext(true)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

HitTestValue9+

提供点击区域的元素信息。示例代码参考getHitTestValue。

getType9+

getType(): HitTestType

获取当前被点击区域的元素类型。

返回值：

类型 说明
HitTestType 当前被点击区域的元素类型。

getExtra9+

getExtra(): string

若被点击区域为图片或链接，则附加参数信息为其url地址。

返回值：

类型 说明
string 点击区域的附加参数信息。

WebCookie

通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。

setCookie9+

setCookie(url: string, value: string): boolean

设置cookie，该方法为同步方法。设置成功返回true，否则返回false。

参数：

参数名 参数类型 必填 默认值 参数描述
url string 是 - 要设置的cookie所属的url。
value string 是 - cookie的值。

返回值：

类型 说明
boolean 设置cookie是否成功。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('setCookie')
        .onClick(() => {
          let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b")
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

saveCookieSync9+

saveCookieSync(): boolean

将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。

返回值：

类型 说明
boolean 同步内存cookie到磁盘操作是否成功。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('saveCookieSync')
        .onClick(() => {
          let result = this.controller.getCookieManager().saveCookieSync()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

getCookie9+

getCookie(url: string): string

获取指定url对应cookie的值。

参数：

参数名 参数类型 必填 默认值 参数描述
url string 是 - 要获取的cookie所属的url。

返回值：

类型 说明
string 指定url对应的cookie的值。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('getCookie')
        .onClick(() => {
          let value = webview.WebCookieManager.getCookie('www.example.com')
          console.log("value: " + value)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

setCookie9+

setCookie(url: string, value: string): boolean

为指定url设置单个cookie的值。

参数：

参数名 参数类型 必填 默认值 参数描述
url string 是 - 要设置的cookie所属的url。
value string 是 - 要设置的cookie的值。

返回值：

类型 说明
boolean 设置cookie是否成功。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('setCookie')
        .onClick(() => {
          let result = web_webview.WebCookieManager.setCookie('www.example.com', 'a=b')
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

saveCookieSync9+

saveCookieSync(): boolean

将当前存在内存中的cookie保存到磁盘中，该方法为同步方法。

返回值：

类型 说明
boolean 同步内存cookie到磁盘操作是否成功。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('saveCookieSync')
        .onClick(() => {
          let result = web_webview.WebCookieManager.saveCookieSync()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

saveCookieAsync9+

saveCookieAsync(): Promise<boolean>

将当前存在内存中的cookie以Promise方法异步保存到磁盘中。

返回值：

类型 说明
Promise<boolean> Promise实例，用于获取cookie是否成功保存。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('saveCookieAsync')
        .onClick(() => {
          web_webview.WebCookieManager.saveCookieAsync()
            .then (function(result) {
              console.log("result: " + result)
            })
            .catch(function(error) {
              console.error("error: " + error)
            })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

saveCookieAsync9+

saveCookieAsync(callback: AsyncCallback<boolean>): void

将当前存在内存中的cookie异步保存到磁盘中。

参数：

参数名 参数类型 必填 默认值 参数描述
callback AsyncCallback<boolean> 是 - 返回cookie是否成功保存的布尔值作为回调函数的入参。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('saveCookieAsync')
        .onClick(() => {
          web_webview.WebCookieManager.saveCookieAsync(function(result) {
            console.log("result: " + result)
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

isCookieAllowed9+

isCookieAllowed(): boolean

获取WebCookieManager实例是否拥有发送和接收cookie的权限。

返回值：

类型 说明
boolean 是否拥有发送和接收cookie的权限。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('isCookieAllowed')
        .onClick(() => {
          let result = web_webview.WebCookieManager.isCookieAllowed()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

putAcceptCookieEnabled9+

putAcceptCookieEnabled(accept: boolean): void

设置WebCookieManager实例是否拥有发送和接收cookie的权限。

参数：

参数名 参数类型 必填 默认值 参数描述
accept boolean 是 - 设置是否拥有发送和接收cookie的权限。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('putAcceptCookieEnabled')
        .onClick(() => {
          web_webview.WebCookieManager.putAcceptCookieEnabled(false)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

isThirdPartyCookieAllowed9+

isThirdCookieAllowed(): boolean

获取WebCookieManager实例是否拥有发送和接收第三方cookie的权限。

返回值：

类型 说明
boolean 是否拥有发送和接收第三方cookie的权限。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('isThirdPartyCookieAllowed')
        .onClick(() => {
          let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

putAcceptThirdPartyCookieEnabled9+

putAcceptThirdPartyCookieEnabled(accept: boolean): void

设置WebCookieManager实例是否拥有发送和接收第三方cookie的权限。

参数：

参数名 参数类型 必填 默认值 参数描述
accept boolean 是 - 设置是否拥有发送和接收第三方cookie的权限。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('putAcceptThirdPartyCookieEnabled')
        .onClick(() => {
          web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

existCookie9+

existCookie(): boolean

获取是否存在cookie。

返回值：

类型 说明
boolean 是否存在cookie。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('existCookie')
        .onClick(() => {
          let result = web_webview.WebCookieManager.existCookie()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

deleteEntireCookie9+

deleteEntireCookie(): void

清除所有cookie。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('deleteEntireCookie')
        .onClick(() => {
          web_webview.WebCookieManager.deleteEntireCookie()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

deleteSessionCookie9+

deleteSessionCookie(): void

清除所有会话cookie。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('deleteSessionCookie')
        .onClick(() => {
          webview.WebCookieManager.deleteSessionCookie()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

WebDataBase9+

web组件数据库管理对象。

existHttpAuthCredentials9+

static existHttpAuthCredentials(): boolean

判断是否存在任何已保存的HTTP身份验证凭据，该方法为同步方法。存在返回true，不存在返回false。

返回值：

类型 说明
boolean 是否存在任何已保存的HTTP身份验证凭据。存在返回true，不存在返回false

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('existHttpAuthCredentials')
        .onClick(() => {
          let result = web_webview.WebDataBase.existHttpAuthCredentials()
          console.log('result: ' + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

deleteHttpAuthCredentials9+

static deleteHttpAuthCredentials(): void

清除所有已保存的HTTP身份验证凭据，该方法为同步方法。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('deleteHttpAuthCredentials')
        .onClick(() => {
          web_webview.WebDataBase.deleteHttpAuthCredentials()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

getHttpAuthCredentials9+

static getHttpAuthCredentials(host: string, realm: string): Array<string>

检索给定主机和域的HTTP身份验证凭据，该方法为同步方法。检索成功返回一个包含用户名和密码的组数，检索不成功返回空数组。

参数：

参数名 参数类型 必填 默认值 参数描述
host string 是 - HTTP身份验证凭据应用的主机。
realm string 是 - HTTP身份验证凭据应用的域。

返回值：

类型 说明
Array<string> 包含用户名和密码的组数，检索失败返回空数组。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  host: string = "www.spincast.org"
  realm: string = "protected example"
  username_password: string[]
  build() {
    Column() {
      Button('getHttpAuthCredentials')
        .onClick(() => {
          this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm)
          console.log('num: ' + this.username_password.length)
          ForEach(this.username_password, (item) => {
            console.log('username_password: ' + item)
          }, item => item)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

saveHttpAuthCredentials9+

static saveHttpAuthCredentials(host: string, realm: string, username: string, password: string): void

保存给定主机和域的HTTP身份验证凭据，该方法为同步方法。

参数：

参数名 参数类型 必填 默认值 参数描述
host string 是 - HTTP身份验证凭据应用的主机。
realm string 是 - HTTP身份验证凭据应用的域。
username string 是 - 用户名。
password string 是 - 密码。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  host: string = "www.spincast.org"
  realm: string = "protected example"
  build() {
    Column() {
      Button('saveHttpAuthCredentials')
        .onClick(() => {
          web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche")
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

GeolocationPermissions9+

web组件地理位置权限管理对象。

allowGeolocation9+

static allowGeolocation(origin: string): void

允许指定来源使用地理位置接口。

参数：

参数名 参数类型 必填 默认值 参数描述
origin string 是 - 指定源的字符串索引。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  origin: string = "file:///"
  build() {
    Column() {
      Button('allowGeolocation')
        .onClick(() => {
          web_webview.GeolocationPermissions.allowGeolocation(this.origin)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

deleteGeolocation9+

static deleteGeolocation(origin: string): void

清除指定来源的地理位置权限状态。

参数：

参数名 参数类型 必填 默认值 参数描述
origin string 是 - 指定源的字符串索引。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  origin: string = "file:///"
  build() {
    Column() {
      Button('deleteGeolocation')
        .onClick(() => {
          web_webview.GeolocationPermissions.deleteGeolocation(this.origin)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

deleteAllGeolocation9+

static deleteAllGeolocation(): void

清除所有来源的地理位置权限状态。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Button('deleteAllGeolocation')
        .onClick(() => {
          web_webview.GeolocationPermissions.deleteAllGeolocation()
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

getAccessibleGeolocation9+

static getAccessibleGeolocation(origin: string, callback: AsyncCallback<boolean>): void

以回调方式异步获取指定源的地理位置权限状态。

参数：

参数名 参数类型 必填 默认值 参数描述
origin string 是 - 指定源的字符串索引。
callback AsyncCallback<boolean> 是 - 返回指定源的地理位置权限状态。获取成功，true表示已授权，false表示拒绝访问。获取失败，表示不存在指定源的权限状态。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  origin: string = "file:///"
  build() {
    Column() {
      Button('getAccessibleGeolocationAsync')
        .onClick(() => {
          web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
            if (error) {
              console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error))
              return
            }
            console.log('getAccessibleGeolocationAsync result: ' + result)
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

getAccessibleGeolocation9+

static getAccessibleGeolocation(origin: string): Promise<boolean>

以Promise方式异步获取指定源的地理位置权限状态。

参数：

参数名 参数类型 必填 默认值 参数描述
origin string 是 - 指定源的字符串索引。

返回值：

类型 说明
Promise<boolean> Promise实例，用于获取指定源的权限状态，获取成功，true表示已授权，false表示拒绝访问。获取失败，表示不存在指定源的权限状态。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  origin: string = "file:///"
  build() {
    Column() {
      Button('getAccessibleGeolocationPromise')
        .onClick(() => {
          web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin).then(result => {
            console.log('getAccessibleGeolocationPromise result: ' + result)
          }).catch(error => {
            console.log('getAccessibleGeolocationPromise error: ' + JSON.stringify(error))
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

getStoredGeolocation9+

static getStoredGeolocation(callback: AsyncCallback<Array<string>>): void

以回调方式异步获取已存储地理位置权限状态的所有源信息。

参数：

参数名 参数类型 必填 默认值 参数描述
callback AsyncCallback<Array<string>> 是 - 返回已存储地理位置权限状态的所有源信息。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Button('getStoredGeolocationAsync')
        .onClick(() => {
          web_webview.GeolocationPermissions.getStoredGeolocation((error, origins) => {
            if (error) {
              console.log('getStoredGeolocationAsync error: ' + JSON.stringify(error))
              return
            }
            let origins_str: string = origins.join()
            console.log('getStoredGeolocationAsync origins: ' + origins_str)
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

getStoredGeolocation9+

static getStoredGeolocation(): Promise<Array<string>>

以Promise方式异步获取已存储地理位置权限状态的所有源信息。

参数：

参数名 参数类型 必填 默认值 参数描述
callback AsyncCallback<Array<string>> 是 - 返回已存储地理位置权限状态的所有源信息。

返回值：

类型 说明
Promise<Array<string>> Promise实例，用于获取已存储地理位置权限状态的所有源信息。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Button('getStoredGeolocationPromise')
        .onClick(() => {
          web_webview.GeolocationPermissions.getStoredGeolocation().then(origins => {
            let origins_str: string = origins.join()
            console.log('getStoredGeolocationPromise origins: ' + origins_str)
          }).catch(error => {
              console.log('getStoredGeolocationPromise error: ' + JSON.stringify(error))
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

WebStorage9+

通过WebStorage可管理Web SQL数据库接口和HTML5 Web存储接口，每个应用中的所有Web组件共享一个WebStorage。

deleteAllData9+

static deleteAllData(): void

清除Web SQL数据库当前使用的所有存储。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Button('deleteAllData')
        .onClick(() => {
          web_webview.WebStorage.deleteAllData()
        })
      Web({ src: 'www.example.com', controller: this.controller })
      .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

deleteOrigin9+

static deleteOrigin(origin : string): void

清除指定源所使用的存储。

参数：

参数名 参数类型 必填 说明
origin string 是 指定源的字符串索引。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  origin: string = "origin"
  build() {
    Column() {
      Button('getHttpAuthCredentials')
        .onClick(() => {
          web_webview.WebStorage.deleteOrigin(this.origin)
        })
      Web({ src: 'www.example.com', controller: this.controller })
      .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

getOrigins9+

static getOrigins(callback: AsyncCallback<Array<WebStorageOrigin>>) : void

以回调方式异步获取当前使用Web SQL数据库的所有源的信息。

参数：

参数名 参数类型 必填 说明
callback AsyncCallback<Array<WebStorageOrigin>> 是 以数组方式返回源的信息，信息内容参考WebStorageOrigin。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  origin: string = "origin"
  build() {
    Column() {
      Button('getOrigins')
        .onClick(() => {
          web_webview.WebStorage.getOrigins((error, origins) => {
            if (error) {
              console.log('error: ' + error)
              return
            }
            for (let i = 0; i < origins.length; i++) {
              console.log('origin: ' + origins[i].origin)
              console.log('usage: ' + origins[i].usage)
              console.log('quota: ' + origins[i].quota)
            }
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
      .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

getOrigins9+

static getOrigins() : Promise<Array<WebStorageOrigin>>

以Promise方式异步获取当前使用Web SQL数据库的所有源的信息。

返回值：

类型 说明
Promise<Array<WebStorageOrigin>> Promise实例，用于获取当前所有源的信息，信息内容参考WebStorageOrigin。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  origin: string = "origin"
  build() {
    Column() {
      Button('getOrigins')
        .onClick(() => {
          web_webview.WebStorage.getOrigins()
            .then(origins => {
              for (let i = 0; i < origins.length; i++) {
                console.log('origin: ' + origins[i].origin)
                console.log('usage: ' + origins[i].usage)
                console.log('quota: ' + origins[i].quota)
              }
            })
            .catch(error => {
              console.log('error: ' + error)
            })
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

getOriginQuota9+

static getOriginQuota(origin : string, callback : AsyncCallback<number>) : void

使用callback回调异步获取指定源的Web SQL数据库的存储配额，配额以字节为单位。

参数：

参数名 参数类型 必填 说明
origin string 是 指定源的字符串索引
callback AsyncCallback<number> 是 指定源的存储配额。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  origin: string = "origin"
  build() {
    Column() {
      Button('getOriginQuota')
        .onClick(() => {
          web_webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
            if (error) {
              console.log('error: ' + error)
              return
            }
            console.log('quota: ' + quota)
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

getOriginQuota9+

static getOriginQuota(origin : string) : Promise<number>

以Promise方式异步获取指定源的Web SQL数据库的存储配额，配额以字节为单位。

参数：

参数名 参数类型 必填 说明
origin string 是 指定源的字符串索引。

返回值：

类型 说明
Promise<number> Promise实例，用于获取指定源的存储配额。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController();
  origin: string = "origin"
  build() {
    Column() {
      Button('getOriginQuota')
        .onClick(() => {
          web_webview.WebStorage.getOriginQuota(this.origin)
            .then(quota => {
              console.log('quota: ' + quota)
            })
            .catch(error => {
              console.log('error: ' + error)
            })
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

getOriginUsage9+

static getOriginUsage(origin : string, callback : AsyncCallback<number>) : void

以回调方式异步获取指定源的Web SQL数据库的存储量，存储量以字节为单位。

参数：

参数名 参数类型 必填 说明
origin string 是 指定源的字符串索引。
callback AsyncCallback<number> 是 指定源的存储量。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController();
  origin: string = "origin"
  build() {
    Column() {
      Button('getOriginUsage')
        .onClick(() => {
          web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
            if (error) {
              console.log('error: ' + error)
              return
            }
            console.log('usage: ' + usage)
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

getOriginUsage9+

static getOriginUsage(origin : string) : Promise<number>

以Promise方式异步获取指定源的Web SQL数据库的存储量，存储量以字节为单位。

参数：

参数名 参数类型 必填 说明
origin string 是 指定源的字符串索引。

返回值：

类型 说明
Promise<number> Promise实例，用于获取指定源的存储量。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController();
  origin: string = "origin"
  build() {
    Column() {
      Button('getOriginQuota')
        .onClick(() => {
          web_webview.WebStorage.getOriginUsage(this.origin)
            .then(usage => {
              console.log('usage: ' + usage)
            })
            .catch(error => {
              console.log('error: ' + error)
            })
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .databaseAccess(true)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

WebStorageOrigin9+

提供Web SQL数据库的使用信息。

参数：

参数名 参数类型 必填 说明
origin string 是 指定源的字符串索引。
usage number 是 指定源的存储量。
quota number 是 指定源的存储配额。

MessageLevel枚举说明

名称 描述
Debug 调试级别。
Error 错误级别。
Info 消息级别。
Log 日志级别。
Warn 警告级别。

RenderExitReason枚举说明

onRenderExited接口返回的渲染进程退出的具体原因。

名称 描述
ProcessAbnormalTermination 渲染进程异常退出。
ProcessWasKilled 收到SIGKILL，或被手动终止。
ProcessCrashed 渲染进程崩溃退出，如段错误。
ProcessOom 程序内存不足。
ProcessExitUnknown 其他原因。

MixedMode枚举说明

名称 描述
All 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。
Compatible 混合内容兼容性模式，部分不安全的内容可能被加载。
None 不允许加载HTTP和HTTPS混合内容。

CacheMode枚举说明

名称 描述
Default 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。
None 加载资源使用cache，如果cache中无该资源则从网络中获取。
Online 加载资源不使用cache，全部从网络中获取。
Only 只从cache中加载资源。

FileSelectorMode枚举说明

名称 描述
FileOpenMode 打开上传单个文件。
FileOpenMultipleMode 打开上传多个文件。
FileOpenFolderMode 打开上传文件夹模式。
FileSaveMode 文件保存模式。

HitTestType枚举说明

名称 描述
EditText 可编辑的区域。
Email 电子邮件地址。
HttpAnchor 超链接，其src为http。
HttpAnchorImg 带有超链接的图片，其中超链接的src为http。
Img HTML::img标签。
Map 地理地址。
Phone 电话号码。
Unknown 未知内容。

SslError9+枚举说明

onSslErrorEventReceive接口返回的SSL错误的具体原因。

名称 描述
Invalid 一般错误。
HostMismatch 主机名不匹配。
DateInvalid 证书日期无效。
Untrusted 证书颁发机构不受信任。

ProtectedResourceType9+枚举说明

名称 描述 备注
MidiSysex MIDI SYSEX资源。 目前仅支持权限事件上报，MIDI设备的使用还未支持。

WebAsyncController

通过WebAsyncController可以控制Web组件具有异步回调通知的行为，一个WebAsyncController对象控制一个Web组件。

创建对象

webController: WebController = new WebController();
webAsyncController: WebAsyncController = new WebAsyncController(webController);
1
2

storeWebArchive9+

storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback): void

以回调方式异步保存当前页面。

参数：

参数名 参数类型 必填 说明
baseName string 是 文件存储路径，该值不能为空。
autoName boolean 是 决定是否自动生成文件名。
如果为false，则将baseName作为文件存储路径。
如果为true，则假定baseName是一个目录，将根据当前页的Url自动生成文件名。
callback AsyncCallback 是 返回文件存储路径，保持网页失败会返回null。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  build() {
    Column() {
      Button('saveWebArchive')
        .onClick(() => {
          let webAsyncController = new web_webview.WebAsyncController(this.controller)
          webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => {
            if (filename != null) {
              console.info(`save web archive success: ${filename}`)
            }
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

storeWebArchive9+

storeWebArchive(baseName: string, autoName: boolean): Promise

以Promise方式异步保存当前页面。

参数：

参数名 参数类型 必填 说明
baseName string 是 文件存储路径，该值不能为空。
autoName boolean 是 决定是否自动生成文件名。
如果为false，则将baseName作为文件存储路径。
如果为true，则假定baseName是一个目录，将根据当前页的Url自动生成文件名。

返回值：

类型 说明
Promise Promise实例，保存成功返回文件路径，保存失败返回null。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController();
  build() {
    Column() {
      Button('saveWebArchive')
        .onClick(() => {
          let webAsyncController = new web_webview.WebAsyncController(this.controller);
          webAsyncController.storeWebArchive("/data/storage/el2/base/", true)
            .then(filename => {
              if (filename != null) {
                console.info(`save web archive success: ${filename}`)
              }
            })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

WebMessagePort9+

通过WebMessagePort可以进行消息的发送以及接收。

close9+

close(): void

关闭该消息端口。

postMessageEvent9+

postMessageEvent(message: WebMessageEvent): void

发送消息。完整示例代码参考postMessage

参数：

参数名 参数类型 必填 默认值 参数描述
message WebMessageEvent 是 - 要发送的消息。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  ports: WebMessagePort[] = null

  build() {
    Column() {
      Button('postMessageEvent')
        .onClick(() => {
          var msg = new WebMessageEvent()
          msg.setData("post message from ets to html5")
          this.ports[0].postMessageEvent(msg)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

onMessageEvent9+

onMessageEvent(callback: (result: string) => void): void

注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考postMessage

参数：

参数名 参数类型 必填 默认值 参数描述
callback function 是 - 接收消息的回调函数。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  ports: WebMessagePort[] = null

  build() {
    Column() {
      Button('onMessageEvent')
        .onClick(() => {
          this.ports[0].onMessageEvent((result: string) => {
            console.log("received message from html5, on message:" + result);
          })
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

WebMessageEvent9+

通过WebMessagePort对要发送的消息和端口进行封装。

getData9+

getData(): string

获取当前对象中存放的消息。

返回值：

类型 说明
string 当前该类型对象中存放的消息。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  build() {
    Column() {
      Button('getPorts')
        .onClick(() => {
          var msgEvent = new WebMessageEvent();
          msgEvent.setData("message event data")
          var messageData = msgEvent.getData()
          console.log("message is:" + messageData)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

setData9+

setData(data: string): void

设置当前对象中的消息。完整示例代码参考postMessage

参数：

参数名 参数类型 必填 默认值 参数描述
data string 是 - 要发送的消息。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  ports: WebMessagePort[] = null

  build() {
    Column() {
      Button('setData')
        .onClick(() => {
          var msg = new WebMessageEvent()
          msg.setData("post message from ets to HTML5")
          this.ports[0].postMessageEvent(msg)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

getPorts9+

getPorts(): Array<WebMessagePort>

获取当前对象中存放的消息端口。

返回值：

类型 说明
Array<WebMessagePort> 当前该类型对象中存放的消息端口。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  ports: WebMessagePort[] = null
  build() {
    Column() {
      Button('getPorts')
        .onClick(() => {
          var sendPortArray = new Array(this.ports[0])
          var msgEvent = new WebMessageEvent()
          msgEvent.setPorts(sendPortArray)
          var getPorts = msgEvent.getPorts()
          console.log("Ports is:" + getPorts)
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

setPorts9+

setPorts(ports: Array<WebMessagePort>): void

设置当前对象中的消息端口。完整示例代码参考postMessage

参数：

参数名 参数类型 必填 默认值 参数描述
ports Array<WebMessagePort> 是 - 要发送的消息端口。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  ports: WebMessagePort[] = null

  build() {
    Column() {
      Button('setPorts')
        .onClick(() => {
          var sendPortArray = new Array(this.ports[1])
          var msgEvent = new WebMessageEvent()
          msgEvent.setData("__init_ports__")
          msgEvent.setPorts(sendPortArray)
          this.controller.postMessage({message: msgEvent, uri: "*"})
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

DataResubmissionHandler9+

通过DataResubmissionHandler可以重新提交表单数据或取消。

resend9+

resend(): void

重新发送表单数据。

示例：

// 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 })
       .onDataResubmitted((event) => {
        console.log('onDataResubmitted')
        event.handler.resend();
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

cancel9+

cancel(): void

取消重新发送表单数据。

示例：

// 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 })
       .onDataResubmitted((event) => {
        console.log('onDataResubmitted')
        event.handler.cancel();
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16