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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
2
3
4
5
6
7
8
9
10
11
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
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)
}
}
}
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)
}
}
}
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)
}
}
}
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,
})
}
}
}
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,
})
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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
})
}
}
}
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
})
}
}
}
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
})
}
}
}
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
})
}
}
}
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
})
}
}
}
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)
})
}
}
}
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)
}
})
}
}
}
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)
}
})
}
}
}
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)
})
}
}
}
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)
})
}
}
}
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)
})
}
}
}
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)
})
}
}
}
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)
})
}
}
}
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)
})
}
}
}
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
})
}
}
}
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)
})
}
}
}
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)
})
}
}
}
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
})
}
}
}
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
})
}
}
}
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
})
}
}
}
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
})
}
}
}
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
通知用户收到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
})
}
}
}
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()
}
})
})
}
}
}
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
})
}
}
}
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)
})
}
}
}
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)
}
})
})
}
}
}
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...")
})
}
}
}
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
})
}
}
}
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
})
}
}
}
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)
})
}
}
}
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...")
})
}
}
}
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)
})
}
}
}
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();
})
}
}
}
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)
})
}
}
}
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;
})
}
}
}
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))
})
}
}
}
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;
})
}
}
}
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 | 返回资源请求是否与手势(如点击)相关联。 |
Header
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()
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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)
}
}
}
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>
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)
})
}
}
}
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>
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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)
}
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 })
}
}
}
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)
})
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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)
}
}
}
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 | 可编辑的区域。 |
电子邮件地址。 | |
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);
2
storeWebArchive9+
storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback
以回调方式异步保存当前页面。
参数:
参数名 | 参数类型 | 必填 | 说明 |
---|---|---|---|
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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 })
}
}
}
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)
})
}
}
}
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 })
}
}
}
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)
})
}
}
}
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 })
}
}
}
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();
})
}
}
}
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();
})
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16