@ohos.web.webview (Webview)
@ohos.web.webview (Webview)
@ohos.web.webview提供web控制能力，web组件提供具有网页显示能力。
说明：
本模块接口从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
示例效果请以真机运行为准，当前IDE预览器不支持。
需要权限
访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考权限申请声明。
导入模块
import web_webview from '@ohos.web.webview';
1
once
once(type: string, callback: Callback<void>): void
订阅一次指定类型Web事件的回调。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| type | string | 是 | Web事件的类型，目前支持："webInited"（Web初始化完成）。 |
| headers | Callback<void> | 是 | 所订阅的回调函数。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
web_webview.once("webInited", () => {
console.log("setCookie")
web_webview.WebCookieManager.setCookie("https://www.example.com", "a=b")
})
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
WebMessagePort
通过WebMessagePort可以进行消息的发送以及接收。
close
close(): void
关闭该消息端口。
系统能力： SystemCapability.Web.Webview.Core
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
msgPort: web_webview.WebMessagePort[] = null;
build() {
Column() {
Button('close')
.onClick(() => {
if (this.msgPort && this.msgPort[1]) {
this.msgPort[1].close();
} else {
console.error("msgPort is null, Please initialize first");
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
postMessageEvent
postMessageEvent(message: WebMessage): void
发送消息。完整示例代码参考postMessage。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| message | WebMessage | 是 | 要发送的消息。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100010 | Can not post message using this port. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
ports: web_webview.WebMessagePort[];
build() {
Column() {
Button('postMessageEvent')
.onClick(() => {
try {
this.ports = this.controller.createWebMessagePorts();
this.controller.postMessage('__init_port__', [this.ports[0]], '*');
this.ports[1].postMessageEvent("post message from ets to html5");
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
onMessageEvent
onMessageEvent(callback: (result: WebMessage) => void): void
注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考postMessage。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| result | WebMessage | 是 | 接收到的消息。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100006 | Can not register message event using this port. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
ports: web_webview.WebMessagePort[];
build() {
Column() {
Button('onMessageEvent')
.onClick(() => {
try {
this.ports = this.controller.createWebMessagePorts();
this.ports[1].onMessageEvent((msg) => {
if (typeof(msg) == "string") {
console.log("received string message from html5, string is:" + msg);
} else if (typeof(msg) == "object") {
if (msg instanceof ArrayBuffer) {
console.log("received arraybuffer from html5, length is:" + msg.byteLength);
} else {
console.log("not support");
}
} else {
console.log("not support");
}
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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
isExtentionType10+
系统能力： SystemCapability.Web.Webview.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
|---|---|---|---|---|
| isExtentionType | boolean | 是 | 否 | 创建WebMessagePort时是否指定使用扩展增强接口。 |
postMessageEventExt10+
postMessageEventExt(message: WebMessageExt): void
发送消息。完整示例代码参考onMessageEventExt。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| message | WebMessageExt | 是 | 要发送的消息。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100010 | Can not post message using this port. |
onMessageEventExt10+
onMessageEventExt(callback: (result: WebMessageExt) => void): void
注册回调函数，接收HTML5侧发送过来的消息。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| result | WebMessageExt | 是 | 接收到的消息。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100006 | Can not register message event using this port. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
// 应用与网页互发消息的示例：使用"init_web_messageport"的通道，通过端口0在应用侧接受网页发送的消息，通过端口1在网页侧接受应用发送的消息。
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
ports: web_webview.WebMessagePort[] = null;
nativePort: web_webview.WebMessagePort = null;
@State msg1:string = "";
@State msg2:string = "";
message: web_webview.WebMessageExt = new web_webview.WebMessageExt();
build() {
Column() {
Text(this.msg1).fontSize(16)
Text(this.msg2).fontSize(16)
Button('SendToH5')
.onClick(() => {
// 使用本侧端口发送消息给HTML5
try {
console.log("In eTS side send true start");
if (this.nativePort) {
this.message.setString("helloFromEts");
this.nativePort.postMessageEventExt(this.message);
}
}
catch (error) {
console.log("In eTS side send message catch error:" + error.code + ", msg:" + error.message);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.onPageEnd((e)=>{
console.log("In eTS side message onPageEnd init mesaage channel");
// 1. 创建消息端口
this.ports = this.controller.createWebMessagePorts(true);
// 2. 发送端口1到HTML5
this.controller.postMessage("init_web_messageport", [this.ports[1]], "*");
// 3. 保存端口0到本地
this.nativePort = this.ports[0];
// 4. 设置回调函数
this.nativePort.onMessageEventExt((result) => {
console.log("In eTS side got message");
try {
var type = result.getType();
console.log("In eTS side getType:" + type);
switch (type) {
case web_webview.WebMessageType.STRING: {
this.msg1 = "result type:" + typeof (result.getString());
this.msg2 = "result getString:" + ((result.getString()));
break;
}
case web_webview.WebMessageType.NUMBER: {
this.msg1 = "result type:" + typeof (result.getNumber());
this.msg2 = "result getNumber:" + ((result.getNumber()));
break;
}
case web_webview.WebMessageType.BOOLEAN: {
this.msg1 = "result type:" + typeof (result.getBoolean());
this.msg2 = "result getBoolean:" + ((result.getBoolean()));
break;
}
case web_webview.WebMessageType.ARRAY_BUFFER: {
this.msg1 = "result type:" + typeof (result.getArrayBuffer());
this.msg2 = "result getArrayBuffer byteLength:" + ((result.getArrayBuffer().byteLength));
break;
}
case web_webview.WebMessageType.ARRAY: {
this.msg1 = "result type:" + typeof (result.getArray());
this.msg2 = "result getArray:" + result.getArray();
break;
}
case web_webview.WebMessageType.ERROR: {
this.msg1 = "result type:" + typeof (result.getError());
this.msg2 = "result getError:" + result.getError();
break;
}
default: {
this.msg1 = "default break, type:" + type;
break;
}
}
}
catch (resError) {
console.log(`log error code: ${resError.code}, Message: ${resError.message}`);
}
});
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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
<!--index.html-->
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>WebView MessagePort Demo</title>
</head>
<body>
<h1>Html5 Send and Receive Message</h1>
<h3 id="msg">Receive string:</h3>
<h3 id="msg2">Receive arraybuffer:</h3>
<div style="font-size: 10pt; text-align: center;">
<input type="button" value="Send String" onclick="postStringToApp();" /><br/>
</div>
</body>
<script src="index.js"></script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//index.js
var h5Port;
window.addEventListener('message', function(event) {
if (event.data == 'init_web_messageport') {
if(event.ports[0] != null) {
h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
h5Port.onmessage = function(event) {
console.log("hwd In html got message");
// 2. 接收ets侧发送过来的消息.
var result = event.data;
console.log("In html got message, typeof: ", typeof(result));
console.log("In html got message, result: ", (result));
if (typeof(result) == "string") {
console.log("In html got message, String: ", result);
document.getElementById("msg").innerHTML = "String:" + result;
} else if (typeof(result) == "number") {
console.log("In html side got message, number: ", result);
document.getElementById("msg").innerHTML = "Number:" + result;
} else if (typeof(result) == "boolean") {
console.log("In html side got message, boolean: ", result);
document.getElementById("msg").innerHTML = "Boolean:" + result;
} else if (typeof(result) == "object") {
if (result instanceof ArrayBuffer) {
document.getElementById("msg2").innerHTML = "ArrayBuffer:" + result.byteLength;
console.log("In html got message, byteLength: ", result.byteLength);
} else if (result instanceof Error) {
console.log("In html error message, err:" + (result));
console.log("In html error message, typeof err:" + typeof(result));
document.getElementById("msg2").innerHTML = "Error:" + result.name + ", msg:" + result.message;
} else if (result instanceof Array) {
console.log("In html got message, Array");
console.log("In html got message, Array length:" + result.length);
console.log("In html got message, Array[0]:" + (result[0]));
console.log("In html got message, typeof Array[0]:" + typeof(result[0]));
document.getElementById("msg2").innerHTML = "Array len:" + result.length + ", value:" + result;
} else {
console.log("In html got message, not any instance of support type");
document.getElementById("msg").innerHTML = "not any instance of support type";
}
} else {
console.log("In html got message, not support type");
document.getElementById("msg").innerHTML = "not support type";
}
}
h5Port.onmessageerror = (event) => {
console.error(`hwd In html Error receiving message: ${event}`);
};
}
}
})
// 使用h5Port往ets侧发送String类型的消息.
function postStringToApp() {
if (h5Port) {
console.log("In html send string message");
h5Port.postMessage("hello");
console.log("In html send string message end");
} else {
console.error("In html h5port is null, please init first");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
WebviewController
通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法（静态方法除外）。
initializeWebEngine
static initializeWebEngine(): void
在 Web 组件初始化之前，通过此接口加载 Web 引擎的动态库文件，以提高启动性能。
系统能力： SystemCapability.Web.Webview.Core
示例：
本示例以EntryAbility为例，描述了在 Ability 创建阶段完成 Web 组件动态库加载的功能。
// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview';
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
console.log("EntryAbility onCreate")
web_webview.WebviewController.initializeWebEngine()
globalThis.abilityWant = want
console.log("EntryAbility onCreate done")
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
setHttpDns10+
static setHttpDns(secureDnsMode:SecureDnsMode, secureDnsConfig:string): void
设置Web组件是否使用HTTPDNS解析dns。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| secureDnsMode | SecureDnsMode | 是 | 使用HTTPDNS的模式。 |
| secureDnsConfig | string | 是 | HTTPDNS server的配置，必须是https协议并且只允许配置一个server。 |
示例：
// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview';
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
console.log("EntryAbility onCreate")
web_webview.WebviewController.initializeWebEngine()
try {
web_webview.WebviewController.setHttpDns(web_webview.SecureDnsMode.Auto, "https://example1.test")
} catch(error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
globalThis.abilityWant = want
console.log("EntryAbility onCreate done")
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
创建对象
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
setWebDebuggingAccess
static setWebDebuggingAccess(webDebuggingAccess: boolean): void
设置是否启用网页调试功能。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| webDebuggingAccess | boolean | 是 | 设置是否启用网页调试功能。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
aboutToAppear():void {
try {
web_webview.WebviewController.setWebDebuggingAccess(true);
} catch(error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
}
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
loadUrl
loadUrl(url: string | Resource, headers?: Array<WebHeader>): void
加载指定的URL。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | string | Resource | 是 | 需要加载的 URL。 |
| headers | Array<WebHeader> | 否 | URL的附加HTTP请求头。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
| 17100002 | Invalid url. |
| 17100003 | Invalid resource path or file type. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
//需要加载的URL是string类型
this.controller.loadUrl('www.example.com');
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
//带参数headers
this.controller.loadUrl('www.example.com', [{headerKey: "headerKey", headerValue: "headerValue"}]);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
加载本地网页，加载本地资源文件有三种方式。 1.$rawfile方式。
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
//通过$rawfile加载本地资源文件
this.controller.loadUrl($rawfile('xxx.html'));
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2.resources协议。
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
//通过resource协议加载本地资源文件
this.controller.loadUrl("resource://rawfile/xxx.html");
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3.通过沙箱路径加载本地文件，可以参考web加载沙箱路径的示例代码。
<!-- xxx.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
1
2
3
4
5
6
7
2
3
4
5
6
7
loadData
loadData(data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string): void
加载指定的数据。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| data | string | 是 | 按照”Base64“或者”URL"编码后的一段字符串。 |
| mimeType | string | 是 | 媒体类型（MIME）。 |
| encoding | string | 是 | 编码类型，具体为“Base64"或者”URL编码。 |
| baseUrl | string | 否 | 指定的一个URL路径（“http”/“https”/"data"协议），并由Web组件赋值给window.origin。 |
| historyUrl | string | 否 | 用作历史记录所使用的URL。非空时，历史记录以此URL进行管理。当baseUrl为空时，此属性无效。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
| 17100002 | Invalid url. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadData')
.onClick(() => {
try {
this.controller.loadData(
"<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
"text/html",
"UTF-8"
);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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
加载本地资源
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
updataContent: string = '<body><div><image src=resource://rawfile/xxx.png alt="image -- end" width="500" height="250"></image></div></body>'
build() {
Column() {
Button('loadData')
.onClick(() => {
try {
this.controller.loadData(this.updataContent, "text/html", "UTF-8", " ", " ");
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
accessForward
accessForward(): boolean
当前页面是否可前进，即当前页面是否有前进历史记录。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 可以前进返回true，否则返回false。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('accessForward')
.onClick(() => {
try {
let result = this.controller.accessForward();
console.log('result:' + result);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
forward
forward(): void
按照历史栈，前进一个页面。一般结合accessForward一起使用。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('forward')
.onClick(() => {
try {
this.controller.forward();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
accessBackward
accessBackward(): boolean
当前页面是否可后退，即当前页面是否有返回历史记录。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 可以后退返回true,否则返回false。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('accessBackward')
.onClick(() => {
try {
let result = this.controller.accessBackward();
console.log('result:' + result);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
backward
backward(): void
按照历史栈，后退一个页面。一般结合accessBackward一起使用。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('backward')
.onClick(() => {
try {
this.controller.backward();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
onActive
onActive(): void
调用此接口通知Web组件进入前台激活状态。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('onActive')
.onClick(() => {
try {
this.controller.onActive();
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
onInactive
onInactive(): void
调用此接口通知Web组件进入未激活状态。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('onInactive')
.onClick(() => {
try {
this.controller.onInactive();
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
refresh
refresh(): void
调用此接口通知Web组件刷新网页。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('refresh')
.onClick(() => {
try {
this.controller.refresh();
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
accessStep
accessStep(step: number): boolean
当前页面是否可前进或者后退给定的step步。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| step | number | 是 | 要跳转的步数，正数代表前进，负数代表后退。 |
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 页面是否前进或后退 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State steps: number = 2;
build() {
Column() {
Button('accessStep')
.onClick(() => {
try {
let result = this.controller.accessStep(this.steps);
console.log('result:' + result);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
clearHistory
clearHistory(): void
删除所有前进后退记录。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('clearHistory')
.onClick(() => {
try {
this.controller.clearHistory();
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
getHitTest
getHitTest(): WebHitTestType
获取当前被点击区域的元素类型。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| WebHitTestType | 被点击区域的元素类型。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getHitTest')
.onClick(() => {
try {
let hitTestType = this.controller.getHitTest();
console.log("hitTestType: " + hitTestType);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
registerJavaScriptProxy
registerJavaScriptProxy(object: object, name: string, methodList: Array<string>): void
注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用refresh接口生效。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| object | object | 是 | 参与注册的应用侧JavaScript对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean |
| name | string | 是 | 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。 |
| methodList | Array<string> | 是 | 参与注册的应用侧JavaScript对象的方法。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct Index {
controller: web_webview.WebviewController = new web_webview.WebviewController();
testObj = {
test: (data) => {
return "ArkUI Web Component";
},
toString: () => {
console.log('Web Component toString');
}
}
build() {
Column() {
Button('refresh')
.onClick(() => {
try {
this.controller.refresh();
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Button('Register JavaScript To Window')
.onClick(() => {
try {
this.controller.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
runJavaScript
runJavaScript(script: string, callback : AsyncCallback<string>): void
异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| script | string | 是 | JavaScript脚本。 |
| callback | AsyncCallback<string> | 是 | 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State webResult: string = ''
build() {
Column() {
Text(this.webResult).fontSize(20)
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
.onPageEnd(e => {
try {
this.controller.runJavaScript(
'test()',
(error, result) => {
if (error) {
console.info(`run JavaScript error: ` + JSON.stringify(error))
return;
}
if (result) {
this.webResult = result
console.info(`The test() return value is: ${result}`)
}
});
console.info('url: ', e.url);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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
runJavaScript
runJavaScript(script: string): Promise<string>
异步执行JavaScript脚本，并通过Promise方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| script | string | 是 | JavaScript脚本。 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise<string> | Promise实例，返回脚本执行的结果，执行失败返回null。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State webResult: string = '';
build() {
Column() {
Text(this.webResult).fontSize(20)
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
.onPageEnd(e => {
try {
this.controller.runJavaScript('test()')
.then(function (result) {
console.log('result: ' + result);
})
.catch(function (error) {
console.error("error: " + error);
})
console.info('url: ', e.url);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
runJavaScriptExt10+
runJavaScriptExt(script: string, callback : AsyncCallback<JsMessageExt>): void
异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScriptExt需要在loadUrl完成后，比如onPageEnd中调用。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| script | string | 是 | JavaScript脚本。 |
| callback | AsyncCallback<JsMessageExt> | 是 | 回调执行JavaScript脚本结果。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State msg1: string = ''
@State msg2: string = ''
build() {
Column() {
Text(this.msg1).fontSize(20)
Text(this.msg2).fontSize(20)
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
.onPageEnd(e => {
try {
this.controller.runJavaScriptExt(
'test()',
(error, result) => {
if (error) {
console.info(`run JavaScript error: ` + JSON.stringify(error))
return;
}
if (result) {
try {
var type = result.getType();
switch (type) {
case web_webview.JsMessageType.STRING: {
this.msg1 = "result type:" + typeof (result.getString());
this.msg2 = "result getString:" + ((result.getString()));
break;
}
case web_webview.JsMessageType.NUMBER: {
this.msg1 = "result type:" + typeof (result.getNumber());
this.msg2 = "result getNumber:" + ((result.getNumber()));
break;
}
case web_webview.JsMessageType.BOOLEAN: {
this.msg1 = "result type:" + typeof (result.getBoolean());
this.msg2 = "result getBoolean:" + ((result.getBoolean()));
break;
}
case web_webview.JsMessageType.ARRAY_BUFFER: {
this.msg1 = "result type:" + typeof (result.getArrayBuffer());
this.msg2 = "result getArrayBuffer byteLength:" + ((result.getArrayBuffer().byteLength));
break;
}
case web_webview.JsMessageType.ARRAY: {
this.msg1 = "result type:" + typeof (result.getArray());
this.msg2 = "result getArray:" + result.getArray();
break;
}
default: {
this.msg1 = "default break, type:" + type;
break;
}
}
}
catch (resError) {
console.log(`log error code: ${resError.code}, Message: ${resError.message}`);
}
}
});
console.info('url: ', e.url);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
}
}
}
//index.html
<!DOCTYPE html>
<html lang="en-gb">
<body>
<h1>run JavaScript Ext demo</h1>
</body>
<script type="text/javascript">
function test() {
return "hello, world";
}
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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
runJavaScriptExt10+
runJavaScriptExt(script: string): Promise<JsMessageExt>
异步执行JavaScript脚本，并通过Promise方式返回脚本执行的结果。runJavaScriptExt需要在loadUrl完成后，比如onPageEnd中调用。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| script | string | 是 | JavaScript脚本。 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise<JsMessageExt> | Promise实例，返回脚本执行的结果。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State webResult: string = '';
@State msg1: string = ''
@State msg2: string = ''
build() {
Column() {
Text(this.webResult).fontSize(20)
Text(this.msg1).fontSize(20)
Text(this.msg2).fontSize(20)
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
.onPageEnd(e => {
this.controller.runJavaScriptExt('test()')
.then((result) => {
try {
var type = result.getType();
switch (type) {
case web_webview.JsMessageType.STRING: {
this.msg1 = "result type:" + typeof (result.getString());
this.msg2 = "result getString:" + ((result.getString()));
break;
}
case web_webview.JsMessageType.NUMBER: {
this.msg1 = "result type:" + typeof (result.getNumber());
this.msg2 = "result getNumber:" + ((result.getNumber()));
break;
}
case web_webview.JsMessageType.BOOLEAN: {
this.msg1 = "result type:" + typeof (result.getBoolean());
this.msg2 = "result getBoolean:" + ((result.getBoolean()));
break;
}
case web_webview.JsMessageType.ARRAY_BUFFER: {
this.msg1 = "result type:" + typeof (result.getArrayBuffer());
this.msg2 = "result getArrayBuffer byteLength:" + ((result.getArrayBuffer().byteLength));
break;
}
case web_webview.JsMessageType.ARRAY: {
this.msg1 = "result type:" + typeof (result.getArray());
this.msg2 = "result getArray:" + result.getArray();
break;
}
default: {
this.msg1 = "default break, type:" + type;
break;
}
}
}
catch (resError) {
console.log(`log error code: ${resError.code}, Message: ${resError.message}`);
}
})
.catch(function (error) {
console.error("error: " + error);
})
})
}
}
}
//index.html
<!DOCTYPE html>
<html lang="en-gb">
<body>
<h1>run JavaScript Ext demo</h1>
</body>
<script type="text/javascript">
function test() {
return "hello, world";
}
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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
deleteJavaScriptRegister
deleteJavaScriptRegister(name: string): void
删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。删除后立即生效，无须调用refresh接口。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| name | string | 是 | 注册对象的名称，可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
| 17100008 | Cannot delete JavaScriptProxy. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State name: string = 'Object';
build() {
Column() {
Button('deleteJavaScriptRegister')
.onClick(() => {
try {
this.controller.deleteJavaScriptRegister(this.name);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
zoom
zoom(factor: number): void
调整当前网页的缩放比例。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| factor | number | 是 | 基于当前网页所需调整的相对缩放比例，正值为放大，负值为缩小。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
| 17100004 | Function not enable. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State factor: number = 1;
build() {
Column() {
Button('zoom')
.onClick(() => {
try {
this.controller.zoom(this.factor);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
searchAllAsync
searchAllAsync(searchString: string): void
异步查找网页中所有匹配关键字'searchString'的内容并高亮，结果通过onSearchResultReceive异步返回。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| searchString | string | 是 | 查找的关键字。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State searchString: string = "xxx";
build() {
Column() {
Button('searchString')
.onClick(() => {
try {
this.controller.searchAllAsync(this.searchString);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.onSearchResultReceive(ret => {
console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
"[total]" + ret.numberOfMatches + "[isDone]" + ret.isDoneCounting);
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
clearMatches
clearMatches(): void
清除所有通过searchAllAsync匹配到的高亮字符查找结果。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('clearMatches')
.onClick(() => {
try {
this.controller.clearMatches();
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
searchNext
searchNext(forward: boolean): void
滚动到下一个匹配的查找结果并高亮。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| forward | boolean | 是 | 从前向后或者逆向查找。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('searchNext')
.onClick(() => {
try {
this.controller.searchNext(true);
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
clearSslCache
clearSslCache(): void
清除Web组件记录的SSL证书错误事件对应的用户操作行为。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('clearSslCache')
.onClick(() => {
try {
this.controller.clearSslCache();
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
clearClientAuthenticationCache
clearClientAuthenticationCache(): void
清除Web组件记录的客户端证书请求事件对应的用户操作行为。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('clearClientAuthenticationCache')
.onClick(() => {
try {
this.controller.clearClientAuthenticationCache();
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
createWebMessagePorts
createWebMessagePorts(isExtentionType?: boolean): Array<WebMessagePort>
创建Web消息端口。完整示例代码参考onMessageEventExt。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| isExtentionType10+ | boolean | 否 | 是否使用扩展增强接口，默认false不使用。 |
返回值：
| 类型 | 说明 |
|---|---|
| Array<WebMessagePort> | web消息端口列表。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
ports: web_webview.WebMessagePort[];
build() {
Column() {
Button('createWebMessagePorts')
.onClick(() => {
try {
this.ports = this.controller.createWebMessagePorts();
console.log("createWebMessagePorts size:" + this.ports.length)
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
postMessage
postMessage(name: string, ports: Array<WebMessagePort>, uri: string): void
发送Web消息端口到HTML5。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| name | string | 是 | 要发送的消息名称。 |
| ports | Array<WebMessagePort> | 是 | 要发送的消息端口。 |
| uri | string | 是 | 接收该消息的URI。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
ports: web_webview.WebMessagePort[];
@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;
})
Button('postMessage')
.onClick(() => {
try {
// 1、创建两个消息端口。
this.ports = this.controller.createWebMessagePorts();
// 2、在应用侧的消息端口(如端口1)上注册回调事件。
this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
let msg = 'Got msg from HTML:';
if (typeof(result) == "string") {
console.log("received string message from html5, string is:" + result);
msg = msg + result;
} else if (typeof(result) == "object") {
if (result instanceof ArrayBuffer) {
console.log("received arraybuffer from html5, length is:" + result.byteLength);
msg = msg + "lenght is " + result.byteLength;
} else {
console.log("not support");
}
} else {
console.log("not support");
}
this.receivedFromHtml = msg;
})
// 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
this.controller.postMessage('__init_port__', [this.ports[0]], '*');
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。
Button('SendDataToHTML')
.onClick(() => {
try {
if (this.ports && this.ports[1]) {
this.ports[1].postMessageEvent(this.sendFromEts);
} else {
console.error(`ports is null, Please initialize first`);
}
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: $rawfile('xxx.html'), controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
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
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebView Message Port Demo</title>
</head>
<body>
<h1>WebView Message Port Demo</h1>
<div>
<input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
<input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
</div>
<p class="output">display received message send from ets</p>
</body>
<script src="xxx.js"></script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//xxx.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:';
var result = event.data;
if (typeof(result) == "string") {
console.log("received string message from html5, string is:" + result);
msg = msg + result;
} else if (typeof(result) == "object") {
if (result instanceof ArrayBuffer) {
console.log("received arraybuffer from html5, length is:" + result.byteLength);
msg = msg + "lenght is " + result.byteLength;
} else {
console.log("not support");
}
} else {
console.log("not support");
}
output.innerHTML = msg;
}
}
}
})
// 3. 使用h5Port往ets侧发送消息.
function PostMsgToEts(data) {
if (h5Port) {
h5Port.postMessage(data);
} else {
console.error("h5Port is null, Please initialize first");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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
requestFocus
requestFocus(): void
使当前web页面获取焦点。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('requestFocus')
.onClick(() => {
try {
this.controller.requestFocus();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
});
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
zoomIn
zoomIn(): void
调用此接口将当前网页进行放大，比例为20%。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
| 17100004 | Function not enable. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('zoomIn')
.onClick(() => {
try {
this.controller.zoomIn();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
zoomOut
zoomOut(): void
调用此接口将当前网页进行缩小，比例为20%。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
| 17100004 | Function not enable. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('zoomOut')
.onClick(() => {
try {
this.controller.zoomOut();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
getHitTestValue
getHitTestValue(): HitTestValue
获取当前被点击区域的元素信息。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| HitTestValue | 点击区域的元素信息。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getHitTestValue')
.onClick(() => {
try {
let hitValue = this.controller.getHitTestValue();
console.log("hitType: " + hitValue.type);
console.log("extra: " + hitValue.extra);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
getWebId
getWebId(): number
获取当前Web组件的索引值，用于多个Web组件的管理。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| number | 当前Web组件的索引值。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getWebId')
.onClick(() => {
try {
let id = this.controller.getWebId();
console.log("id: " + id);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
getUserAgent
getUserAgent(): string
获取当前默认用户代理。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| string | 默认用户代理。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getUserAgent')
.onClick(() => {
try {
let userAgent = this.controller.getUserAgent();
console.log("userAgent: " + userAgent);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
getTitle
getTitle(): string
获取当前网页的标题。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| string | 当前网页的标题。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getTitle')
.onClick(() => {
try {
let title = this.controller.getTitle();
console.log("title: " + title);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
getPageHeight
getPageHeight(): number
获取当前网页的页面高度。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| number | 当前网页的页面高度。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getPageHeight')
.onClick(() => {
try {
let pageHeight = this.controller.getPageHeight();
console.log("pageHeight : " + pageHeight);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
storeWebArchive
storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback<string>): void
以回调方式异步保存当前页面。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| baseName | string | 是 | 文件存储路径，该值不能为空。 |
| autoName | boolean | 是 | 决定是否自动生成文件名。 如果为false，则将baseName作为文件存储路径。 如果为true，则假定baseName是一个目录，将根据当前页的Url自动生成文件名。 |
| callback | AsyncCallback<string> | 是 | 返回文件存储路径，保持网页失败会返回null。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
| 17100003 | Invalid resource path or file type. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('saveWebArchive')
.onClick(() => {
try {
this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => {
if (error) {
console.info(`save web archive error: ` + JSON.stringify(error))
return;
}
if (filename != null) {
console.info(`save web archive success: ${filename}`)
}
});
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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
storeWebArchive
storeWebArchive(baseName: string, autoName: boolean): Promise<string>
以Promise方式异步保存当前页面。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| baseName | string | 是 | 文件存储路径，该值不能为空。 |
| autoName | boolean | 是 | 决定是否自动生成文件名。 如果为false，则将baseName作为文件存储路径。 如果为true，则假定baseName是一个目录，将根据当前页的Url自动生成文件名。 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise<string> | Promise实例，保存成功返回文件路径，保存失败返回null。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
| 17100003 | Invalid resource path or file type. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('saveWebArchive')
.onClick(() => {
try {
this.controller.storeWebArchive("/data/storage/el2/base/", true)
.then(filename => {
if (filename != null) {
console.info(`save web archive success: ${filename}`)
}
})
.catch(error => {
console.log('error: ' + JSON.stringify(error));
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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
getUrl
getUrl(): string
获取当前页面的url地址。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| string | 当前页面的url地址。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getUrl')
.onClick(() => {
try {
let url = this.controller.getUrl();
console.log("url: " + url);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
stop
stop(): void
停止页面加载。
系统能力： SystemCapability.Web.Webview.Core
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('stop')
.onClick(() => {
try {
this.controller.stop();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
});
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
backOrForward
backOrForward(step: number): void
按照历史栈，前进或者后退指定步长的页面，当历史栈中不存在对应步长的页面时，不会进行页面跳转。
前进或者后退页面时，直接使用已加载过的网页，无需重新加载网页。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| step | number | 是 | 需要前进或后退的步长。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State step: number = -2;
build() {
Column() {
Button('backOrForward')
.onClick(() => {
try {
this.controller.backOrForward(this.step);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
scrollTo
scrollTo(x:number, y:number): void
将页面滚动到指定的绝对位置。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 绝对位置的水平坐标，当传入数值为负数时，按照传入0处理。 |
| y | number | 是 | 绝对位置的垂直坐标，当传入数值为负数时，按照传入0处理。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('scrollTo')
.onClick(() => {
try {
this.controller.scrollTo(50, 50);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
width:3000px;
height:3000px;
padding-right:170px;
padding-left:170px;
border:5px solid blueviolet
}
</style>
</head>
<body>
Scroll Test
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
scrollBy
scrollBy(deltaX:number, deltaY:number): void
将页面滚动指定的偏移量。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| deltaX | number | 是 | 水平偏移量，其中水平向右为正方向。 |
| deltaY | number | 是 | 垂直偏移量，其中垂直向下为正方向。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('scrollBy')
.onClick(() => {
try {
this.controller.scrollBy(50, 50);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
width:3000px;
height:3000px;
padding-right:170px;
padding-left:170px;
border:5px solid blueviolet
}
</style>
</head>
<body>
Scroll Test
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
slideScroll
slideScroll(vx:number, vy:number): void
按照指定速度模拟对页面的轻扫滚动动作。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| vx | number | 是 | 轻扫滚动的水平速度分量，其中水平向右为速度正方向。 |
| vy | number | 是 | 轻扫滚动的垂直速度分量，其中垂直向下为速度正方向。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('slideScroll')
.onClick(() => {
try {
this.controller.slideScroll(500, 500);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
width:3000px;
height:3000px;
padding-right:170px;
padding-left:170px;
border:5px solid blueviolet
}
</style>
</head>
<body>
Scroll Test
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
getOriginalUrl
getOriginalUrl(): string
获取当前页面的原始url地址。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| string | 当前页面的原始url地址。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getOrgUrl')
.onClick(() => {
try {
let url = this.controller.getOriginalUrl();
console.log("original url: " + url);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
getFavicon
getFavicon(): image.PixelMap
获取页面的favicon图标。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| PixelMap | 页面favicon图标的PixelMap对象。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// 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 pixelmap: image.PixelMap = undefined;
build() {
Column() {
Button('getFavicon')
.onClick(() => {
try {
this.pixelmap = this.controller.getFavicon();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
setNetworkAvailable
setNetworkAvailable(enable: boolean): void
设置JavaScript中的window.navigator.onLine属性。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| enable | boolean | 是 | 是否使能window.navigator.onLine。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('setNetworkAvailable')
.onClick(() => {
try {
this.controller.setNetworkAvailable(true);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
hasImage
hasImage(callback: AsyncCallback<boolean>): void
通过Callback方式异步查找当前页面是否存在图像。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | AsyncCallback<boolean> | 是 | 返回查找页面是否存在图像。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('hasImageCb')
.onClick(() => {
try {
this.controller.hasImage((error, data) => {
if (error) {
console.info(`hasImage error: ` + JSON.stringify(error))
return;
}
console.info("hasImage: " + data);
});
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
hasImage
hasImage(): Promise<boolean>
通过Promise方式异步查找当前页面是否存在图像。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| Promise<boolean> | Promise实例，返回查找页面是否存在图像。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('hasImagePm')
.onClick(() => {
try {
this.controller.hasImage().then((data) => {
console.info('hasImage: ' + data);
})
.catch(function (error) {
console.error("error: " + error);
})
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
removeCache
removeCache(clearRom: boolean): void
清除应用中的资源缓存文件，此方法将会清除同一应用中所有webview的缓存文件。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| clearRom | boolean | 是 | 设置为true时同时清除rom和ram中的缓存，设置为false时只清除ram中的缓存。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('removeCache')
.onClick(() => {
try {
this.controller.removeCache(false);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
pageUp
pageUp(top:boolean): void
将Webview的内容向上滚动半个视框大小或者跳转到页面最顶部，通过top入参控制。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| top | boolean | 是 | 是否跳转到页面最顶部，设置为false时将页面内容向上滚动半个视框大小，设置为true时跳转到页面最顶部。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('pageUp')
.onClick(() => {
try {
this.controller.pageUp(false);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
pageDown
pageDown(bottom:boolean): void
将Webview的内容向下滚动半个视框大小或者跳转到页面最底部，通过bottom入参控制。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| bottom | boolean | 是 | 是否跳转到页面最底部，设置为false时将页面内容向下滚动半个视框大小，设置为true时跳转到页面最底部。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('pageDown')
.onClick(() => {
try {
this.controller.pageDown(false);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
getBackForwardEntries
getBackForwardEntries(): BackForwardList
获取当前Webview的历史信息列表。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| BackForwardList | 当前Webview的历史信息列表。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getBackForwardEntries')
.onClick(() => {
try {
let list = this.controller.getBackForwardEntries()
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
serializeWebState
serializeWebState(): Uint8Array
将当前Webview的页面状态历史记录信息序列化。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| Uint8Array | 当前Webview的页面状态历史记录序列化后的数据。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
1.对文件的操作需要导入文件管理模块，详情请参考文件管理。
// xxx.ets
import web_webview from '@ohos.web.webview';
import fs from '@ohos.file.fs';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('serializeWebState')
.onClick(() => {
try {
let state = this.controller.serializeWebState();
// globalThis.cacheDir从MainAbility.ts中获取。
let path = globalThis.cacheDir;
path += '/WebState';
// 以同步方法打开文件。
let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
fs.writeSync(file.fd, state.buffer);
fs.closeSync(file.fd);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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
2.修改MainAbility.ts。 获取应用缓存文件路径。
// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview';
export default class MainAbility extends UIAbility {
onCreate(want, launchParam) {
// 通过在globalThis对象上绑定cacheDir，可以实现UIAbility组件与Page之间的数据同步。
globalThis.cacheDir = this.context.cacheDir;
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
restoreWebState
restoreWebState(state: Uint8Array): void
当前Webview从序列化数据中恢复页面状态历史记录。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| state | Uint8Array | 是 | 页面状态历史记录序列化数据。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
1.对文件的操作需要导入文件管理模块，详情请参考文件管理。
// xxx.ets
import web_webview from '@ohos.web.webview';
import fs from '@ohos.file.fs';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('RestoreWebState')
.onClick(() => {
try {
// globalThis.cacheDir从MainAbility.ts中获取。
let path = globalThis.cacheDir;
path += '/WebState';
// 以同步方法打开文件。
let file = fs.openSync(path, fs.OpenMode.READ_WRITE);
let stat = fs.statSync(path);
let size = stat.size;
let buf = new ArrayBuffer(size);
fs.read(file.fd, buf, (err, readLen) => {
if (err) {
console.info("mkdir failed with error message: " + err.message + ", error code: " + err.code);
} else {
console.info("read file data succeed");
this.controller.restoreWebState(new Uint8Array(buf.slice(0, readLen)));
fs.closeSync(file);
}
});
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
2.修改MainAbility.ts。 获取应用缓存文件路径。
// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview';
export default class MainAbility extends UIAbility {
onCreate(want, launchParam) {
// 通过在globalThis对象上绑定cacheDir，可以实现UIAbility组件与Page之间的数据同步。
globalThis.cacheDir = this.context.cacheDir;
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
customizeSchemes
static customizeSchemes(schemes: Array<WebCustomScheme>): void
配置Web自定义协议请求的权限。建议在任何Web组件初始化之前进行调用。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| schemes | Array<WebCustomScheme> | 是 | 自定义协议配置，最多支持同时配置10个自定义协议。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
responseweb: WebResourceResponse = new WebResourceResponse()
scheme1: web_webview.WebCustomScheme = {schemeName: "name1", isSupportCORS: true, isSupportFetch: true}
scheme2: web_webview.WebCustomScheme = {schemeName: "name2", isSupportCORS: true, isSupportFetch: true}
scheme3: web_webview.WebCustomScheme = {schemeName: "name3", isSupportCORS: true, isSupportFetch: true}
aboutToAppear():void {
try {
web_webview.WebviewController.customizeSchemes([this.scheme1, this.scheme2, this.scheme3])
} catch(error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
}
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onInterceptRequest((event) => {
console.log('url:' + event.request.getRequestUrl())
return this.responseweb
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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
getCertificate10+
getCertificate(): Promise<Array<cert.X509Cert>>
获取当前网站的证书信息。使用web组件加载https网站，会进行SSL证书校验，该接口会通过Promise异步返回当前网站的X509格式证书（X509Cert证书类型定义见X509Cert定义），便于开发者展示网站证书信息。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| Promise<Array<cert.X509Cert>> | Promise实例，用于获取当前加载的https网站的X509格式证书数组。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
function Uint8ArrayToString(dataArray) {
var dataString = ''
for (var i = 0; i < dataArray.length; i++) {
dataString += String.fromCharCode(dataArray[i])
}
return dataString
}
function ParseX509CertInfo(x509CertArray) {
let res: string = 'getCertificate success: len = ' + x509CertArray.length;
for (let i = 0; i < x509CertArray.length; i++) {
res += ', index = ' + i + ', issuer name = '
+ Uint8ArrayToString(x509CertArray[i].getIssuerName().data) + ', subject name = '
+ Uint8ArrayToString(x509CertArray[i].getSubjectName().data) + ', valid start = '
+ x509CertArray[i].getNotBeforeTime()
+ ', valid end = ' + x509CertArray[i].getNotAfterTime()
}
return res
}
@Entry
@Component
struct Index {
// outputStr在UI界面显示调试信息
@State outputStr: string = ''
webviewCtl: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Row() {
Column() {
List({space: 20, initialIndex: 0}) {
ListItem() {
Button() {
Text('load bad ssl')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.onClick(() => {
// 加载一个过期的证书网站，查看获取到的证书信息
this.webviewCtl.loadUrl('https://expired.badssl.com')
})
.height(50)
}
ListItem() {
Button() {
Text('load example')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.onClick(() => {
// 加载一个https网站，查看网站的证书信息
this.webviewCtl.loadUrl('https://www.example.com')
})
.height(50)
}
ListItem() {
Button() {
Text('getCertificate Promise')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.onClick(() => {
try {
this.webviewCtl.getCertificate().then(x509CertArray => {
this.outputStr = ParseX509CertInfo(x509CertArray);
})
} catch (error) {
this.outputStr = 'getCertificate failed: ' + error.code + ", errMsg: " + error.message;
}
})
.height(50)
}
ListItem() {
Button() {
Text('getCertificate AsyncCallback')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.onClick(() => {
try {
this.webviewCtl.getCertificate((error, x509CertArray) => {
if (error) {
this.outputStr = 'getCertificate failed: ' + error.code + ", errMsg: " + error.message;
} else {
this.outputStr = ParseX509CertInfo(x509CertArray);
}
})
} catch (error) {
this.outputStr = 'getCertificate failed: ' + error.code + ", errMsg: " + error.message;
}
})
.height(50)
}
}
.listDirection(Axis.Horizontal)
.height('10%')
Text(this.outputStr)
.width('100%')
.fontSize(10)
Web({ src: 'https://www.example.com', controller: this.webviewCtl })
.fileAccess(true)
.javaScriptAccess(true)
.domStorageAccess(true)
.onlineImageAccess(true)
.onPageEnd((e) => {
this.outputStr = 'onPageEnd : url = ' + e.url
})
.onSslErrorEventReceive((e) => {
// 忽略ssl证书错误，便于测试一些证书过期的网站，如：https://expired.badssl.com
e.handler.handleConfirm()
})
.width('100%')
.height('70%')
}
.height('100%')
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
getCertificate10+
getCertificate(callback: AsyncCallback<Array<cert.X509Cert>>): void
获取当前网站的证书信息。使用web组件加载https网站，会进行SSL证书校验，该接口会通过AsyncCallback异步返回当前网站的X509格式证书（X509Cert证书类型定义见X509Cert定义），便于开发者展示网站证书信息。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | AsyncCallback<Array<cert.X509Cert>> | 是 | 通过AsyncCallback异步返回当前网站的X509格式证书。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web compoent. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
function Uint8ArrayToString(dataArray) {
var dataString = ''
for (var i = 0; i < dataArray.length; i++) {
dataString += String.fromCharCode(dataArray[i])
}
return dataString
}
function ParseX509CertInfo(x509CertArray) {
let res: string = 'getCertificate success: len = ' + x509CertArray.length;
for (let i = 0; i < x509CertArray.length; i++) {
res += ', index = ' + i + ', issuer name = '
+ Uint8ArrayToString(x509CertArray[i].getIssuerName().data) + ', subject name = '
+ Uint8ArrayToString(x509CertArray[i].getSubjectName().data) + ', valid start = '
+ x509CertArray[i].getNotBeforeTime()
+ ', valid end = ' + x509CertArray[i].getNotAfterTime()
}
return res
}
@Entry
@Component
struct Index {
// outputStr在UI界面显示调试信息
@State outputStr: string = ''
webviewCtl: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Row() {
Column() {
List({space: 20, initialIndex: 0}) {
ListItem() {
Button() {
Text('load bad ssl')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.onClick(() => {
// 加载一个过期的证书网站，查看获取到的证书信息
this.webviewCtl.loadUrl('https://expired.badssl.com')
})
.height(50)
}
ListItem() {
Button() {
Text('load example')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.onClick(() => {
// 加载一个https网站，查看网站的证书信息
this.webviewCtl.loadUrl('https://www.example.com')
})
.height(50)
}
ListItem() {
Button() {
Text('getCertificate Promise')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.onClick(() => {
try {
this.webviewCtl.getCertificate().then(x509CertArray => {
this.outputStr = ParseX509CertInfo(x509CertArray);
})
} catch (error) {
this.outputStr = 'getCertificate failed: ' + error.code + ", errMsg: " + error.message;
}
})
.height(50)
}
ListItem() {
Button() {
Text('getCertificate AsyncCallback')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.onClick(() => {
try {
this.webviewCtl.getCertificate((error, x509CertArray) => {
if (error) {
this.outputStr = 'getCertificate failed: ' + error.code + ", errMsg: " + error.message;
} else {
this.outputStr = ParseX509CertInfo(x509CertArray);
}
})
} catch (error) {
this.outputStr = 'getCertificate failed: ' + error.code + ", errMsg: " + error.message;
}
})
.height(50)
}
}
.listDirection(Axis.Horizontal)
.height('10%')
Text(this.outputStr)
.width('100%')
.fontSize(10)
Web({ src: 'https://www.example.com', controller: this.webviewCtl })
.fileAccess(true)
.javaScriptAccess(true)
.domStorageAccess(true)
.onlineImageAccess(true)
.onPageEnd((e) => {
this.outputStr = 'onPageEnd : url = ' + e.url
})
.onSslErrorEventReceive((e) => {
// 忽略ssl证书错误，便于测试一些证书过期的网站，如：https://expired.badssl.com
e.handler.handleConfirm()
})
.width('100%')
.height('70%')
}
.height('100%')
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
setAudioMuted10+
setAudioMuted(mute: boolean): void
设置网页静音。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| mute | boolean | 是 | 表示是否将网页设置为静音状态，true表示设置为静音状态，false表示取消静音状态。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State muted: boolean = false
build() {
Column() {
Button("Toggle Mute")
.onClick(event => {
this.muted = !this.muted
this.controller.setAudioMuted(this.muted)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
WebCookieManager
通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookieManager实例。
getCookie
static getCookie(url: string): string
获取指定url对应cookie的值。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | string | 是 | 要获取的cookie所属的url，建议使用完整的url。 |
返回值：
| 类型 | 说明 |
|---|---|
| string | 指定url对应的cookie的值。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100002 | Invalid url. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getCookie')
.onClick(() => {
try {
let value = web_webview.WebCookieManager.getCookie('https://www.example.com');
console.log("value: " + value);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
setCookie
static setCookie(url: string, value: string): void
为指定url设置单个cookie的值。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | string | 是 | 要设置的cookie所属的url，建议使用完整的url。 |
| value | string | 是 | 要设置的cookie的值。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100002 | Invalid url. |
| 17100005 | Invalid cookie value. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('setCookie')
.onClick(() => {
try {
web_webview.WebCookieManager.setCookie('https://www.example.com', 'a=b');
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
saveCookieAsync
static saveCookieAsync(callback: AsyncCallback<void>): void
将当前存在内存中的cookie异步保存到磁盘中。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | AsyncCallback<void> | 是 | 返回cookie是否成功保存的布尔值作为回调函数的入参。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('saveCookieAsync')
.onClick(() => {
try {
web_webview.WebCookieManager.saveCookieAsync((error) => {
if (error) {
console.log("error: " + error);
}
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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
saveCookieAsync
static saveCookieAsync(): Promise<void>
将当前存在内存中的cookie以Promise方法异步保存到磁盘中。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| Promise<void> | Promise实例，用于获取cookie是否成功保存。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('saveCookieAsync')
.onClick(() => {
try {
web_webview.WebCookieManager.saveCookieAsync()
.then(() => {
console.log("saveCookieAsyncCallback success!");
})
.catch((error) => {
console.error("error: " + error);
});
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
putAcceptCookieEnabled
static putAcceptCookieEnabled(accept: boolean): void
设置WebCookieManager实例是否拥有发送和接收cookie的权限。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| accept | boolean | 是 | 设置是否拥有发送和接收cookie的权限。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('putAcceptCookieEnabled')
.onClick(() => {
try {
web_webview.WebCookieManager.putAcceptCookieEnabled(false);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
isCookieAllowed
static isCookieAllowed(): boolean
获取WebCookieManager实例是否拥有发送和接收cookie的权限。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 是否拥有发送和接收cookie的权限，默认为true。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('isCookieAllowed')
.onClick(() => {
let result = web_webview.WebCookieManager.isCookieAllowed();
console.log("result: " + result);
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
putAcceptThirdPartyCookieEnabled
static putAcceptThirdPartyCookieEnabled(accept: boolean): void
设置WebCookieManager实例是否拥有发送和接收第三方cookie的权限。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| accept | boolean | 是 | 设置是否拥有发送和接收第三方cookie的权限。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('putAcceptThirdPartyCookieEnabled')
.onClick(() => {
try {
web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
isThirdPartyCookieAllowed
static isThirdPartyCookieAllowed(): boolean
获取WebCookieManager实例是否拥有发送和接收第三方cookie的权限。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 是否拥有发送和接收第三方cookie的权限，默认为false。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('isThirdPartyCookieAllowed')
.onClick(() => {
let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed();
console.log("result: " + result);
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
existCookie
static existCookie(): boolean
获取是否存在cookie。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 是否拥有发送和接收第三方cookie的权限。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('existCookie')
.onClick(() => {
let result = web_webview.WebCookieManager.existCookie();
console.log("result: " + result);
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
deleteEntireCookie
static deleteEntireCookie(): void
清除所有cookie。
系统能力： SystemCapability.Web.Webview.Core
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('deleteEntireCookie')
.onClick(() => {
web_webview.WebCookieManager.deleteEntireCookie();
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
deleteSessionCookie
static deleteSessionCookie(): void
清除所有会话cookie。
系统能力： SystemCapability.Web.Webview.Core
示例：
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('deleteSessionCookie')
.onClick(() => {
web_webview.WebCookieManager.deleteSessionCookie();
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
WebStorage
通过WebStorage可管理Web SQL数据库接口和HTML5 Web存储接口，每个应用中的所有Web组件共享一个WebStorage。
deleteOrigin
static deleteOrigin(origin : string): void
清除指定源所使用的存储。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| origin | string | 是 | 指定源的字符串索引，来自于getOrigins。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100011 | Invalid origin. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
origin: string = "file:///";
build() {
Column() {
Button('deleteOrigin')
.onClick(() => {
try {
web_webview.WebStorage.deleteOrigin(this.origin);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
getOrigins
static getOrigins(callback: AsyncCallback<Array<WebStorageOrigin>>) : void
以回调方式异步获取当前使用Web SQL数据库的所有源的信息。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | AsyncCallback<Array<WebStorageOrigin>> | 是 | 以数组方式返回源的信息，信息内容参考WebStorageOrigin。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100012 | Invalid web storage origin. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getOrigins')
.onClick(() => {
try {
web_webview.WebStorage.getOrigins((error, origins) => {
if (error) {
console.log('error: ' + JSON.stringify(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);
}
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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
getOrigins
static getOrigins() : Promise<Array<WebStorageOrigin>>
以Promise方式异步获取当前使用Web SQL数据库的所有源的信息。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| Promise<Array<WebStorageOrigin>> | Promise实例，用于获取当前所有源的信息，信息内容参考WebStorageOrigin。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100012 | Invalid web storage origin. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('getOrigins')
.onClick(() => {
try {
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(e => {
console.log('error: ' + JSON.stringify(e));
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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
getOriginQuota
static getOriginQuota(origin : string, callback : AsyncCallback<number>) : void
使用callback回调异步获取指定源的Web SQL数据库的存储配额，配额以字节为单位。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| origin | string | 是 | 指定源的字符串索引 |
| callback | AsyncCallback<number> | 是 | 指定源的存储配额 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100011 | Invalid origin. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
origin: string = "file:///";
build() {
Column() {
Button('getOriginQuota')
.onClick(() => {
try {
web_webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
if (error) {
console.log('error: ' + JSON.stringify(error));
return;
}
console.log('quota: ' + quota);
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
getOriginQuota
static getOriginQuota(origin : string) : Promise<number>
以Promise方式异步获取指定源的Web SQL数据库的存储配额，配额以字节为单位。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| origin | string | 是 | 指定源的字符串索引 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise<number> | Promise实例，用于获取指定源的存储配额。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100011 | Invalid origin. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
origin: string = "file:///";
build() {
Column() {
Button('getOriginQuota')
.onClick(() => {
try {
web_webview.WebStorage.getOriginQuota(this.origin)
.then(quota => {
console.log('quota: ' + quota);
})
.catch(e => {
console.log('error: ' + JSON.stringify(e));
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
getOriginUsage
static getOriginUsage(origin : string, callback : AsyncCallback<number>) : void
以回调方式异步获取指定源的Web SQL数据库的存储量，存储量以字节为单位。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| origin | string | 是 | 指定源的字符串索引 |
| callback | AsyncCallback<number> | 是 | 指定源的存储量。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100011 | Invalid origin. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
origin: string = "file:///";
build() {
Column() {
Button('getOriginUsage')
.onClick(() => {
try {
web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
if (error) {
console.log('error: ' + JSON.stringify(error));
return;
}
console.log('usage: ' + usage);
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
getOriginUsage
static getOriginUsage(origin : string) : Promise<number>
以Promise方式异步获取指定源的Web SQL数据库的存储量，存储量以字节为单位。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| origin | string | 是 | 指定源的字符串索引 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise<number> | Promise实例，用于获取指定源的存储量。 |
错误码：
以下错误码的详细介绍请参见webview错误码。
| 错误码ID | 错误信息 |
|---|---|
| 17100011 | Invalid origin. |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
origin: string = "file:///";
build() {
Column() {
Button('getOriginUsage')
.onClick(() => {
try {
web_webview.WebStorage.getOriginUsage(this.origin)
.then(usage => {
console.log('usage: ' + usage);
})
.catch(e => {
console.log('error: ' + JSON.stringify(e));
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
deleteAllData
static deleteAllData(): void
清除Web SQL数据库当前使用的所有存储。
系统能力： SystemCapability.Web.Webview.Core
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('deleteAllData')
.onClick(() => {
try {
web_webview.WebStorage.deleteAllData();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
WebDataBase
web组件数据库管理对象。
getHttpAuthCredentials
static getHttpAuthCredentials(host: string, realm: string): Array<string>
检索给定主机和域的HTTP身份验证凭据，该方法为同步方法。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| host | string | 是 | HTTP身份验证凭据应用的主机。 |
| realm | string | 是 | HTTP身份验证凭据应用的域。 |
返回值：
| 类型 | 说明 |
|---|---|
| Array<string> | 包含用户名和密码的组数，检索失败返回空数组。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
host: string = "www.spincast.org";
realm: string = "protected example";
username_password: string[];
build() {
Column() {
Button('getHttpAuthCredentials')
.onClick(() => {
try {
this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm);
console.log('num: ' + this.username_password.length);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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
saveHttpAuthCredentials
static saveHttpAuthCredentials(host: string, realm: string, username: string, password: string): void
保存给定主机和域的HTTP身份验证凭据，该方法为同步方法。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| host | string | 是 | HTTP身份验证凭据应用的主机。 |
| realm | string | 是 | HTTP身份验证凭据应用的域。 |
| username | string | 是 | 用户名。 |
| password | string | 是 | 密码。 |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
host: string = "www.spincast.org";
realm: string = "protected example";
build() {
Column() {
Button('saveHttpAuthCredentials')
.onClick(() => {
try {
web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche");
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
existHttpAuthCredentials
static existHttpAuthCredentials(): boolean
判断是否存在任何已保存的HTTP身份验证凭据，该方法为同步方法。存在返回true，不存在返回false。
系统能力： SystemCapability.Web.Webview.Core
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 是否存在任何已保存的HTTP身份验证凭据。存在返回true，不存在返回false |
示例：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('existHttpAuthCredentials')
.onClick(() => {
try {
let result = web_webview.WebDataBase.existHttpAuthCredentials();
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
1