1# Web 2 3提供具有网页显示能力的Web组件,[@ohos.web.webview](../apis/js-apis-webview.md)提供web控制能力。 4 5> **说明:** 6> 7> - 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 8> - 示例效果请以真机运行为准,当前IDE预览器不支持。 9 10## 需要权限 11访问在线网页时需添加网络权限:ohos.permission.INTERNET,具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。 12 13## 子组件 14 15无 16 17## 接口 18 19Web(options: { src: ResourceStr, controller: WebviewController | WebController}) 20 21> **说明:** 22> 23> 不支持转场动画。 24> 同一页面的多个web组件,必须绑定不同的WebviewController。 25 26**参数:** 27 28| 参数名 | 参数类型 | 必填 | 参数描述 | 29| ---------- | ---------------------------------------- | ---- | ------- | 30| src | [ResourceStr](ts-types.md) | 是 | 网页资源地址。如果加载应用包外沙箱路径的本地资源文件,请使用file://沙箱文件路径。 | 31| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | 控制器。从API Version 9开始,WebController不再维护,建议使用WebviewController替代。 | 32 33**示例:** 34 35 加载在线网页 36 ```ts 37 // xxx.ets 38 import web_webview from '@ohos.web.webview' 39 40 @Entry 41 @Component 42 struct WebComponent { 43 controller: web_webview.WebviewController = new web_webview.WebviewController() 44 build() { 45 Column() { 46 Web({ src: 'www.example.com', controller: this.controller }) 47 } 48 } 49 } 50 ``` 51 52 加载本地网页 53 ```ts 54 // xxx.ets 55 import web_webview from '@ohos.web.webview' 56 57 @Entry 58 @Component 59 struct WebComponent { 60 controller: web_webview.WebviewController = new web_webview.WebviewController() 61 build() { 62 Column() { 63 Web({ src: $rawfile("index.html"), controller: this.controller }) 64 } 65 } 66 } 67 ``` 68 69 加载沙箱路径下的本地资源文件 70 71 1.通过[globalthis](../../application-models/uiability-data-sync-with-ui.md#uiability和page之间使用globalthis)获取沙箱路径。 72 ```ts 73 // xxx.ets 74 import web_webview from '@ohos.web.webview' 75 let url = 'file://' + globalThis.filesDir + '/index.html' 76 77 @Entry 78 @Component 79 struct WebComponent { 80 controller: web_webview.WebviewController = new web_webview.WebviewController() 81 build() { 82 Column() { 83 // 加载沙箱路径文件。 84 Web({ src: url, controller: this.controller }) 85 } 86 } 87 } 88 ``` 89 90 2.修改EntryAbility.ts。 91 以filesDir为例,获取沙箱路径。若想获取其他路径,请参考[应用开发路径](../../application-models/application-context-stage.md#获取应用开发路径)。 92 ```ts 93 // xxx.ts 94 import UIAbility from '@ohos.app.ability.UIAbility'; 95 import web_webview from '@ohos.web.webview'; 96 97 export default class EntryAbility extends UIAbility { 98 onCreate(want, launchParam) { 99 // 通过在globalThis对象上绑定filesDir,可以实现UIAbility组件与UI之间的数据同步。 100 globalThis.filesDir = this.context.filesDir 101 console.log("Sandbox path is " + globalThis.filesDir) 102 } 103 } 104 ``` 105 106 加载的html文件。 107 ```html 108 <!-- index.html --> 109 <!DOCTYPE html> 110 <html> 111 <body> 112 <p>Hello World</p> 113 </body> 114 </html> 115 ``` 116 117## 属性 118 119通用属性仅支持[width](ts-universal-attributes-size.md#属性)、[height](ts-universal-attributes-size.md#属性)、[padding](ts-universal-attributes-size.md#属性)、[margin](ts-universal-attributes-size.md#属性)、[border](ts-universal-attributes-border.md#属性)。 120 121### domStorageAccess 122 123domStorageAccess(domStorageAccess: boolean) 124 125设置是否开启文档对象模型存储接口(DOM Storage API)权限,默认未开启。 126 127**参数:** 128 129| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 130| ---------------- | ------- | ---- | ----- | ------------------------------------ | 131| domStorageAccess | boolean | 是 | false | 设置是否开启文档对象模型存储接口(DOM Storage API)权限。 | 132 133**示例:** 134 135 ```ts 136 // xxx.ets 137 import web_webview from '@ohos.web.webview' 138 139 @Entry 140 @Component 141 struct WebComponent { 142 controller: web_webview.WebviewController = new web_webview.WebviewController() 143 build() { 144 Column() { 145 Web({ src: 'www.example.com', controller: this.controller }) 146 .domStorageAccess(true) 147 } 148 } 149 } 150 ``` 151 152### fileAccess 153 154fileAccess(fileAccess: boolean) 155 156设置是否开启应用中文件系统的访问,默认启用。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。 157 158**参数:** 159 160| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 161| ---------- | ------- | ---- | ---- | ---------------------- | 162| fileAccess | boolean | 是 | true | 设置是否开启应用中文件系统的访问,默认启用。 | 163 164**示例:** 165 166 ```ts 167 // xxx.ets 168 import web_webview from '@ohos.web.webview' 169 170 @Entry 171 @Component 172 struct WebComponent { 173 controller: web_webview.WebviewController = new web_webview.WebviewController() 174 build() { 175 Column() { 176 Web({ src: 'www.example.com', controller: this.controller }) 177 .fileAccess(true) 178 } 179 } 180 } 181 ``` 182 183### imageAccess 184 185imageAccess(imageAccess: boolean) 186 187设置是否允许自动加载图片资源,默认允许。 188 189**参数:** 190 191| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 192| ----------- | ------- | ---- | ---- | --------------- | 193| imageAccess | boolean | 是 | true | 设置是否允许自动加载图片资源。 | 194 195**示例:** 196 ```ts 197 // xxx.ets 198 import web_webview from '@ohos.web.webview' 199 200 @Entry 201 @Component 202 struct WebComponent { 203 controller: web_webview.WebviewController = new web_webview.WebviewController() 204 build() { 205 Column() { 206 Web({ src: 'www.example.com', controller: this.controller }) 207 .imageAccess(true) 208 } 209 } 210 } 211 ``` 212 213### javaScriptProxy 214 215javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array\<string\>, 216 controller: WebviewController | WebController}) 217 218注入JavaScript对象到window对象中,并在window对象中调用该对象的方法。所有参数不支持更新。 219 220**参数:** 221 222| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 223| ---------- | ---------------------------------------- | ---- | ---- | ------------------------- | 224| object | object | 是 | - | 参与注册的对象。只能声明方法,不能声明属性。 | 225| name | string | 是 | - | 注册对象的名称,与window中调用的对象名一致。 | 226| methodList | Array\<string\> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 | 227| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始,WebController不再维护,建议使用WebviewController替代。 | 228 229**示例:** 230 231 ```ts 232 // xxx.ets 233 import web_webview from '@ohos.web.webview' 234 235 @Entry 236 @Component 237 struct WebComponent { 238 controller: web_webview.WebviewController = new web_webview.WebviewController() 239 testObj = { 240 test: (data1, data2, data3) => { 241 console.log("data1:" + data1) 242 console.log("data2:" + data2) 243 console.log("data3:" + data3) 244 return "AceString" 245 }, 246 toString: () => { 247 console.log('toString' + "interface instead.") 248 } 249 } 250 build() { 251 Column() { 252 Web({ src: 'www.example.com', controller: this.controller }) 253 .javaScriptAccess(true) 254 .javaScriptProxy({ 255 object: this.testObj, 256 name: "objName", 257 methodList: ["test", "toString"], 258 controller: this.controller, 259 }) 260 } 261 } 262 } 263 ``` 264 265### javaScriptAccess 266 267javaScriptAccess(javaScriptAccess: boolean) 268 269设置是否允许执行JavaScript脚本,默认允许执行。 270 271**参数:** 272 273| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 274| ---------------- | ------- | ---- | ---- | ------------------- | 275| javaScriptAccess | boolean | 是 | true | 是否允许执行JavaScript脚本。 | 276 277**示例:** 278 279 ```ts 280 // xxx.ets 281 import web_webview from '@ohos.web.webview' 282 283 @Entry 284 @Component 285 struct WebComponent { 286 controller: web_webview.WebviewController = new web_webview.WebviewController() 287 build() { 288 Column() { 289 Web({ src: 'www.example.com', controller: this.controller }) 290 .javaScriptAccess(true) 291 } 292 } 293 } 294 ``` 295 296### mixedMode 297 298mixedMode(mixedMode: MixedMode) 299 300设置是否允许加载超文本传输协议(HTTP)和超文本传输安全协议(HTTPS)混合内容,默认不允许加载HTTP和HTTPS混合内容。 301 302**参数:** 303 304| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 305| --------- | --------------------------- | ---- | -------------- | --------- | 306| mixedMode | [MixedMode](#mixedmode枚举说明) | 是 | MixedMode.None | 要设置的混合内容。 | 307 308**示例:** 309 310 ```ts 311 // xxx.ets 312 import web_webview from '@ohos.web.webview' 313 314 @Entry 315 @Component 316 struct WebComponent { 317 controller: web_webview.WebviewController = new web_webview.WebviewController() 318 @State mode: MixedMode = MixedMode.All 319 build() { 320 Column() { 321 Web({ src: 'www.example.com', controller: this.controller }) 322 .mixedMode(this.mode) 323 } 324 } 325 } 326 ``` 327 328### onlineImageAccess 329 330onlineImageAccess(onlineImageAccess: boolean) 331 332设置是否允许从网络加载图片资源(通过HTTP和HTTPS访问的资源),默认允许访问。 333 334**参数:** 335 336| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 337| ----------------- | ------- | ---- | ---- | ---------------- | 338| onlineImageAccess | boolean | 是 | true | 设置是否允许从网络加载图片资源。 | 339 340**示例:** 341 342 ```ts 343 // xxx.ets 344 import web_webview from '@ohos.web.webview' 345 346 @Entry 347 @Component 348 struct WebComponent { 349 controller: web_webview.WebviewController = new web_webview.WebviewController() 350 build() { 351 Column() { 352 Web({ src: 'www.example.com', controller: this.controller }) 353 .onlineImageAccess(true) 354 } 355 } 356 } 357 ``` 358 359### zoomAccess 360 361zoomAccess(zoomAccess: boolean) 362 363设置是否支持手势进行缩放,默认允许执行缩放。 364 365**参数:** 366 367| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 368| ---------- | ------- | ---- | ---- | ------------- | 369| zoomAccess | boolean | 是 | true | 设置是否支持手势进行缩放。 | 370 371**示例:** 372 373 ```ts 374 // xxx.ets 375 import web_webview from '@ohos.web.webview' 376 377 @Entry 378 @Component 379 struct WebComponent { 380 controller: web_webview.WebviewController = new web_webview.WebviewController() 381 build() { 382 Column() { 383 Web({ src: 'www.example.com', controller: this.controller }) 384 .zoomAccess(true) 385 } 386 } 387 } 388 ``` 389 390### overviewModeAccess 391 392overviewModeAccess(overviewModeAccess: boolean) 393 394设置是否使用概览模式加载网页,默认使用该方式。 395 396**参数:** 397 398| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 399| ------------------ | ------- | ---- | ---- | --------------- | 400| overviewModeAccess | boolean | 是 | true | 设置是否使用概览模式加载网页。 | 401 402**示例:** 403 404 ```ts 405 // xxx.ets 406 import web_webview from '@ohos.web.webview' 407 408 @Entry 409 @Component 410 struct WebComponent { 411 controller: web_webview.WebviewController = new web_webview.WebviewController() 412 build() { 413 Column() { 414 Web({ src: 'www.example.com', controller: this.controller }) 415 .overviewModeAccess(true) 416 } 417 } 418 } 419 ``` 420 421### databaseAccess 422 423databaseAccess(databaseAccess: boolean) 424 425设置是否开启数据库存储API权限,默认不开启。 426 427**参数:** 428 429| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 430| -------------- | ------- | ---- | ----- | ----------------- | 431| databaseAccess | boolean | 是 | false | 设置是否开启数据库存储API权限。 | 432 433**示例:** 434 435 ```ts 436 // xxx.ets 437 import web_webview from '@ohos.web.webview' 438 439 @Entry 440 @Component 441 struct WebComponent { 442 controller: web_webview.WebviewController = new web_webview.WebviewController() 443 build() { 444 Column() { 445 Web({ src: 'www.example.com', controller: this.controller }) 446 .databaseAccess(true) 447 } 448 } 449 } 450 ``` 451 452### geolocationAccess 453 454geolocationAccess(geolocationAccess: boolean) 455 456设置是否开启获取地理位置权限,默认开启。 457 458**参数:** 459 460| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 461| ----------------- | ------- | ---- | ---- | --------------- | 462| geolocationAccess | boolean | 是 | true | 设置是否开启获取地理位置权限。 | 463 464**示例:** 465 466 ```ts 467 // xxx.ets 468 import web_webview from '@ohos.web.webview' 469 470 @Entry 471 @Component 472 struct WebComponent { 473 controller: web_webview.WebviewController = new web_webview.WebviewController() 474 build() { 475 Column() { 476 Web({ src: 'www.example.com', controller: this.controller }) 477 .geolocationAccess(true) 478 } 479 } 480 } 481 ``` 482 483### mediaPlayGestureAccess 484 485mediaPlayGestureAccess(access: boolean) 486 487设置有声视频播放是否需要用户手动点击,静音视频播放不受该接口管控,默认需要。 488 489**参数:** 490 491| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 492| ------ | ------- | ---- | ---- | ----------------- | 493| access | boolean | 是 | true | 设置有声视频播放是否需要用户手动点击。 | 494 495**示例:** 496 497 ```ts 498 // xxx.ets 499 import web_webview from '@ohos.web.webview' 500 501 @Entry 502 @Component 503 struct WebComponent { 504 controller: web_webview.WebviewController = new web_webview.WebviewController() 505 @State access: boolean = true 506 build() { 507 Column() { 508 Web({ src: 'www.example.com', controller: this.controller }) 509 .mediaPlayGestureAccess(this.access) 510 } 511 } 512 } 513 ``` 514 515### multiWindowAccess<sup>9+</sup> 516 517multiWindowAccess(multiWindow: boolean) 518 519设置是否开启多窗口权限,默认不开启。 520使能多窗口权限时,需要实现onWindowNew事件,示例代码参考[onWindowNew事件](#onwindownew9)。 521 522**参数:** 523 524| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 525| ----------- | ------- | ---- | ----- | ------------ | 526| multiWindow | boolean | 是 | false | 设置是否开启多窗口权限。 | 527 528**示例:** 529 530 ```ts 531 // xxx.ets 532 import web_webview from '@ohos.web.webview' 533 534 @Entry 535 @Component 536 struct WebComponent { 537 controller: web_webview.WebviewController = new web_webview.WebviewController() 538 build() { 539 Column() { 540 Web({ src: 'www.example.com', controller: this.controller }) 541 .multiWindowAccess(false) 542 } 543 } 544 } 545 ``` 546 547### horizontalScrollBarAccess<sup>9+</sup> 548 549horizontalScrollBarAccess(horizontalScrollBar: boolean) 550 551设置是否显示横向滚动条,包括系统默认滚动条和用户自定义滚动条。默认显示。 552 553**参数:** 554 555| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 556| ----------- | ------- | ---- | ----- | ------------ | 557| horizontalScrollBar | boolean | 是 | true | 设置是否显示横向滚动条。 | 558 559**示例:** 560 561 ```ts 562 // xxx.ets 563 import web_webview from '@ohos.web.webview' 564 565 @Entry 566 @Component 567 struct WebComponent { 568 controller: web_webview.WebviewController = new web_webview.WebviewController() 569 build() { 570 Column() { 571 Web({ src: $rawfile('index.html'), controller: this.controller }) 572 .horizontalScrollBarAccess(true) 573 } 574 } 575 } 576 ``` 577 578 加载的html文件。 579 ```html 580 <!--index.html--> 581 <!DOCTYPE html> 582 <html> 583 <head> 584 <title>Demo</title> 585 <style> 586 body { 587 width:3000px; 588 height:3000px; 589 padding-right:170px; 590 padding-left:170px; 591 border:5px solid blueviolet 592 } 593 </style> 594 </head> 595 <body> 596 Scroll Test 597 </body> 598 </html> 599 ``` 600 601### verticalScrollBarAccess<sup>9+</sup> 602 603verticalScrollBarAccess(verticalScrollBar: boolean) 604 605设置是否显示纵向滚动条,包括系统默认滚动条和用户自定义滚动条。默认显示。 606 607**参数:** 608 609| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 610| ----------- | ------- | ---- | ----- | ------------ | 611| verticalScrollBarAccess | boolean | 是 | true | 设置是否显示纵向滚动条。 | 612 613**示例:** 614 615 ```ts 616 // xxx.ets 617 import web_webview from '@ohos.web.webview' 618 619 @Entry 620 @Component 621 struct WebComponent { 622 controller: web_webview.WebviewController = new web_webview.WebviewController() 623 build() { 624 Column() { 625 Web({ src: $rawfile('index.html'), controller: this.controller }) 626 .verticalScrollBarAccess(true) 627 } 628 } 629 } 630 ``` 631 632 加载的html文件。 633 ```html 634 <!--index.html--> 635 <!DOCTYPE html> 636 <html> 637 <head> 638 <title>Demo</title> 639 <style> 640 body { 641 width:3000px; 642 height:3000px; 643 padding-right:170px; 644 padding-left:170px; 645 border:5px solid blueviolet 646 } 647 </style> 648 </head> 649 <body> 650 Scroll Test 651 </body> 652 </html> 653 ``` 654 655### password 656 657password(password: boolean) 658 659设置是否应保存密码。该接口为空接口。 660 661### cacheMode 662 663cacheMode(cacheMode: CacheMode) 664 665设置缓存模式。 666 667**参数:** 668 669| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 670| --------- | --------------------------- | ---- | ----------------- | --------- | 671| cacheMode | [CacheMode](#cachemode枚举说明) | 是 | CacheMode.Default | 要设置的缓存模式。 | 672 673**示例:** 674 675 ```ts 676 // xxx.ets 677 import web_webview from '@ohos.web.webview' 678 679 @Entry 680 @Component 681 struct WebComponent { 682 controller: web_webview.WebviewController = new web_webview.WebviewController() 683 @State mode: CacheMode = CacheMode.None 684 build() { 685 Column() { 686 Web({ src: 'www.example.com', controller: this.controller }) 687 .cacheMode(this.mode) 688 } 689 } 690 } 691 ``` 692 693### textZoomAtio<sup>(deprecated)</sup> 694 695textZoomAtio(textZoomAtio: number) 696 697设置页面的文本缩放百分比,默认为100%。 698 699从API version 9开始不再维护,建议使用[textZoomRatio<sup>9+</sup>](#textzoomratio9)代替。 700 701**参数:** 702 703| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 704| ------------- | ------ | ---- | ---- | --------------- | 705| textZoomAtio | number | 是 | 100 | 要设置的页面的文本缩放百分比。 | 706 707**示例:** 708 709 ```ts 710 // xxx.ets 711 @Entry 712 @Component 713 struct WebComponent { 714 controller: WebController = new WebController() 715 @State atio: number = 150 716 build() { 717 Column() { 718 Web({ src: 'www.example.com', controller: this.controller }) 719 .textZoomAtio(this.atio) 720 } 721 } 722 } 723 ``` 724 725### textZoomRatio<sup>9+</sup> 726 727textZoomRatio(textZoomRatio: number) 728 729设置页面的文本缩放百分比,默认为100%。 730 731**参数:** 732 733| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 734| ------------- | ------ | ---- | ---- | --------------- | 735| textZoomRatio | number | 是 | 100 | 要设置的页面的文本缩放百分比。 | 736 737**示例:** 738 739 ```ts 740 // xxx.ets 741 import web_webview from '@ohos.web.webview' 742 743 @Entry 744 @Component 745 struct WebComponent { 746 controller: web_webview.WebviewController = new web_webview.WebviewController() 747 @State atio: number = 150 748 build() { 749 Column() { 750 Web({ src: 'www.example.com', controller: this.controller }) 751 .textZoomRatio(this.atio) 752 } 753 } 754 } 755 ``` 756 757### initialScale<sup>9+</sup> 758 759initialScale(percent: number) 760 761设置整体页面的缩放百分比,默认为100%。 762 763**参数:** 764 765| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 766| ------- | ------ | ---- | ---- | --------------- | 767| percent | number | 是 | 100 | 要设置的整体页面的缩放百分比。 | 768 769**示例:** 770 771 ```ts 772 // xxx.ets 773 import web_webview from '@ohos.web.webview' 774 775 @Entry 776 @Component 777 struct WebComponent { 778 controller: web_webview.WebviewController = new web_webview.WebviewController() 779 @State percent: number = 100 780 build() { 781 Column() { 782 Web({ src: 'www.example.com', controller: this.controller }) 783 .initialScale(this.percent) 784 } 785 } 786 } 787 ``` 788 789### userAgent 790 791userAgent(userAgent: string) 792 793设置用户代理。 794 795**参数:** 796 797| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 798| --------- | ------ | ---- | ---- | --------- | 799| userAgent | string | 是 | - | 要设置的用户代理。 | 800 801**示例:** 802 803 ```ts 804 // xxx.ets 805 import web_webview from '@ohos.web.webview' 806 807 @Entry 808 @Component 809 struct WebComponent { 810 controller: web_webview.WebviewController = new web_webview.WebviewController() 811 @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36' 812 build() { 813 Column() { 814 Web({ src: 'www.example.com', controller: this.controller }) 815 .userAgent(this.userAgent) 816 } 817 } 818 } 819 ``` 820 821### blockNetwork<sup>9+</sup> 822 823blockNetwork(block: boolean) 824 825设置Web组件是否阻止从网络加载资源。 826 827**参数:** 828 829| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 830| ------ | -------- | ---- | ------ | ----------------------------------- | 831| block | boolean | 是 | false | 设置Web组件是否阻止从网络加载资源。 | 832 833**示例:** 834 835 ```ts 836 // xxx.ets 837 import web_webview from '@ohos.web.webview' 838 @Entry 839 @Component 840 struct WebComponent { 841 controller: web_webview.WebviewController = new web_webview.WebviewController() 842 @State block: boolean = true 843 build() { 844 Column() { 845 Web({ src: 'www.example.com', controller: this.controller }) 846 .blockNetwork(this.block) 847 } 848 } 849 } 850 ``` 851 852### defaultFixedFontSize<sup>9+</sup> 853 854defaultFixedFontSize(size: number) 855 856设置网页的默认等宽字体大小。 857 858**参数:** 859 860| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 861| ------ | -------- | ---- | ------ | ---------------------------- | 862| size | number | 是 | 13 | 设置网页的默认等宽字体大小,单位px。输入值的范围为-2^31到2^31-1,实际渲染时超过72的值按照72进行渲染,低于1的值按照1进行渲染。 | 863 864**示例:** 865 866 ```ts 867 // xxx.ets 868 import web_webview from '@ohos.web.webview' 869 @Entry 870 @Component 871 struct WebComponent { 872 controller: web_webview.WebviewController = new web_webview.WebviewController() 873 @State fontSize: number = 16 874 build() { 875 Column() { 876 Web({ src: 'www.example.com', controller: this.controller }) 877 .defaultFixedFontSize(this.fontSize) 878 } 879 } 880 } 881 ``` 882 883### defaultFontSize<sup>9+</sup> 884 885defaultFontSize(size: number) 886 887设置网页的默认字体大小。 888 889**参数:** 890 891| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 892| ------ | -------- | ---- | ------ | ------------------------ | 893| size | number | 是 | 16 | 设置网页的默认字体大小,单位px。输入值的范围为-2^31到2^31-1,实际渲染时超过72的值按照72进行渲染,低于1的值按照1进行渲染。 | 894 895**示例:** 896 897 ```ts 898 // xxx.ets 899 import web_webview from '@ohos.web.webview' 900 @Entry 901 @Component 902 struct WebComponent { 903 controller: web_webview.WebviewController = new web_webview.WebviewController() 904 @State fontSize: number = 13 905 build() { 906 Column() { 907 Web({ src: 'www.example.com', controller: this.controller }) 908 .defaultFontSize(this.fontSize) 909 } 910 } 911 } 912 ``` 913 914### minFontSize<sup>9+</sup> 915 916minFontSize(size: number) 917 918设置网页字体大小最小值。 919 920**参数:** 921 922| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 923| ------ | -------- | ---- | ------ | ------------------------ | 924| size | number | 是 | 8 | 设置网页字体大小最小值,单位px。输入值的范围为-2^31到2^31-1,实际渲染时超过72的值按照72进行渲染,低于1的值按照1进行渲染。 | 925 926**示例:** 927 928 ```ts 929 // xxx.ets 930 import web_webview from '@ohos.web.webview' 931 @Entry 932 @Component 933 struct WebComponent { 934 controller: web_webview.WebviewController = new web_webview.WebviewController() 935 @State fontSize: number = 13 936 build() { 937 Column() { 938 Web({ src: 'www.example.com', controller: this.controller }) 939 .minFontSize(this.fontSize) 940 } 941 } 942 } 943 ``` 944 945### minLogicalFontSize<sup>9+</sup> 946 947minLogicalFontSize(size: number) 948 949设置网页逻辑字体大小最小值。 950 951**参数:** 952 953| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 954| ------ | -------- | ---- | ------ | ------------------------ | 955| size | number | 是 | 8 | 设置网页逻辑字体大小最小值,单位px。输入值的范围为-2^31到2^31-1,实际渲染时超过72的值按照72进行渲染,低于1的值按照1进行渲染。 | 956 957**示例:** 958 959 ```ts 960 // xxx.ets 961 import web_webview from '@ohos.web.webview' 962 @Entry 963 @Component 964 struct WebComponent { 965 controller: web_webview.WebviewController = new web_webview.WebviewController() 966 @State fontSize: number = 13 967 build() { 968 Column() { 969 Web({ src: 'www.example.com', controller: this.controller }) 970 .minLogicalFontSize(this.fontSize) 971 } 972 } 973 } 974 ``` 975 976 977### webFixedFont<sup>9+</sup> 978 979webFixedFont(family: string) 980 981设置网页的fixed font字体库。 982 983**参数:** 984 985| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 986| ------ | -------- | ---- | --------- | ---------------------------- | 987| family | string | 是 | monospace | 设置网页的fixed font字体库。 | 988 989**示例:** 990 991 ```ts 992 // xxx.ets 993 import web_webview from '@ohos.web.webview' 994 @Entry 995 @Component 996 struct WebComponent { 997 controller: web_webview.WebviewController = new web_webview.WebviewController() 998 @State family: string = "monospace" 999 build() { 1000 Column() { 1001 Web({ src: 'www.example.com', controller: this.controller }) 1002 .webFixedFont(this.family) 1003 } 1004 } 1005 } 1006 ``` 1007 1008### webSansSerifFont<sup>9+</sup> 1009 1010webSansSerifFont(family: string) 1011 1012设置网页的sans serif font字体库。 1013 1014**参数:** 1015 1016| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 1017| ------ | -------- | ---- | ---------- | --------------------------------- | 1018| family | string | 是 | sans-serif | 设置网页的sans serif font字体库。 | 1019 1020**示例:** 1021 1022 ```ts 1023 // xxx.ets 1024 import web_webview from '@ohos.web.webview' 1025 @Entry 1026 @Component 1027 struct WebComponent { 1028 controller: web_webview.WebviewController = new web_webview.WebviewController() 1029 @State family: string = "sans-serif" 1030 build() { 1031 Column() { 1032 Web({ src: 'www.example.com', controller: this.controller }) 1033 .webSansSerifFont(this.family) 1034 } 1035 } 1036 } 1037 ``` 1038 1039### webSerifFont<sup>9+</sup> 1040 1041webSerifFont(family: string) 1042 1043设置网页的serif font字体库。 1044 1045**参数:** 1046 1047| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 1048| ------ | -------- | ---- | ------ | ---------------------------- | 1049| family | string | 是 | serif | 设置网页的serif font字体库。 | 1050 1051**示例:** 1052 1053 ```ts 1054 // xxx.ets 1055 import web_webview from '@ohos.web.webview' 1056 @Entry 1057 @Component 1058 struct WebComponent { 1059 controller: web_webview.WebviewController = new web_webview.WebviewController() 1060 @State family: string = "serif" 1061 build() { 1062 Column() { 1063 Web({ src: 'www.example.com', controller: this.controller }) 1064 .webSerifFont(this.family) 1065 } 1066 } 1067 } 1068 ``` 1069 1070### webStandardFont<sup>9+</sup> 1071 1072webStandardFont(family: string) 1073 1074设置网页的standard font字体库。 1075 1076**参数:** 1077 1078| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 1079| ------ | -------- | ---- | ---------- | ------------------------------- | 1080| family | string | 是 | sans serif | 设置网页的standard font字体库。 | 1081 1082**示例:** 1083 1084 ```ts 1085 // xxx.ets 1086 import web_webview from '@ohos.web.webview' 1087 @Entry 1088 @Component 1089 struct WebComponent { 1090 controller: web_webview.WebviewController = new web_webview.WebviewController() 1091 @State family: string = "sans-serif" 1092 build() { 1093 Column() { 1094 Web({ src: 'www.example.com', controller: this.controller }) 1095 .webStandardFont(this.family) 1096 } 1097 } 1098 } 1099 ``` 1100 1101### webFantasyFont<sup>9+</sup> 1102 1103webFantasyFont(family: string) 1104 1105设置网页的fantasy font字体库。 1106 1107**参数:** 1108 1109| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 1110| ------ | -------- | ---- | ------- | ------------------------------ | 1111| family | string | 是 | fantasy | 设置网页的fantasy font字体库。 | 1112 1113**示例:** 1114 1115 ```ts 1116 // xxx.ets 1117 import web_webview from '@ohos.web.webview' 1118 @Entry 1119 @Component 1120 struct WebComponent { 1121 controller: web_webview.WebviewController = new web_webview.WebviewController() 1122 @State family: string = "fantasy" 1123 build() { 1124 Column() { 1125 Web({ src: 'www.example.com', controller: this.controller }) 1126 .webFantasyFont(this.family) 1127 } 1128 } 1129 } 1130 ``` 1131 1132### webCursiveFont<sup>9+</sup> 1133 1134webCursiveFont(family: string) 1135 1136设置网页的cursive font字体库。 1137 1138**参数:** 1139 1140| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 1141| ------ | -------- | ---- | ------- | ------------------------------ | 1142| family | string | 是 | cursive | 设置网页的cursive font字体库。 | 1143 1144**示例:** 1145 1146 ```ts 1147 // xxx.ets 1148 import web_webview from '@ohos.web.webview' 1149 @Entry 1150 @Component 1151 struct WebComponent { 1152 controller: web_webview.WebviewController = new web_webview.WebviewController() 1153 @State family: string = "cursive" 1154 build() { 1155 Column() { 1156 Web({ src: 'www.example.com', controller: this.controller }) 1157 .webCursiveFont(this.family) 1158 } 1159 } 1160 } 1161 ``` 1162 1163### darkMode<sup>9+</sup> 1164 1165darkMode(mode: WebDarkMode) 1166 1167设置Web深色模式,默认关闭。当深色模式开启时,Web将启用媒体查询prefer-color-scheme中网页所定义的深色样式,若网页未定义深色样式,则保持原状。如需开启强制深色模式,建议配合[forceDarkAccess](#forcedarkaccess9)使用。 1168 1169**参数:** 1170 1171| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 1172| ------ | ----------- | ---- | --------------- | ------------------ | 1173| mode | [WebDarkMode](#webdarkmode9枚举说明) | 是 | WebDarkMode.Off | 设置Web的深色模式为关闭、开启或跟随系统。 | 1174 1175**示例:** 1176 1177 ```ts 1178 // xxx.ets 1179 import web_webview from '@ohos.web.webview' 1180 @Entry 1181 @Component 1182 struct WebComponent { 1183 controller: web_webview.WebviewController = new web_webview.WebviewController() 1184 @State mode: WebDarkMode = WebDarkMode.On 1185 build() { 1186 Column() { 1187 Web({ src: 'www.example.com', controller: this.controller }) 1188 .darkMode(this.mode) 1189 } 1190 } 1191 } 1192 ``` 1193 1194### forceDarkAccess<sup>9+</sup> 1195 1196forceDarkAccess(access: boolean) 1197 1198设置网页是否开启强制深色模式。默认关闭。该属性仅在[darkMode](#darkmode9)开启深色模式时生效。 1199 1200**参数:** 1201 1202| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 1203| ------ | ------- | ---- | ----- | ------------------ | 1204| access | boolean | 是 | false | 设置网页是否开启强制深色模式。 | 1205 1206**示例:** 1207 1208 ```ts 1209 // xxx.ets 1210 import web_webview from '@ohos.web.webview' 1211 @Entry 1212 @Component 1213 struct WebComponent { 1214 controller: web_webview.WebviewController = new web_webview.WebviewController() 1215 @State mode: WebDarkMode = WebDarkMode.On 1216 @State access: boolean = true 1217 build() { 1218 Column() { 1219 Web({ src: 'www.example.com', controller: this.controller }) 1220 .darkMode(this.mode) 1221 .forceDarkAccess(this.access) 1222 } 1223 } 1224 } 1225 ``` 1226 1227### tableData 1228 1229tableData(tableData: boolean) 1230 1231设置是否应保存表单数据。该接口为空接口。 1232 1233### wideViewModeAccess 1234 1235wideViewModeAccess(wideViewModeAccess: boolean) 1236 1237设置web是否支持html中meta标签的viewport属性。该接口为空接口。 1238 1239### pinchSmooth<sup>9+</sup> 1240 1241pinchSmooth(isEnabled: boolean) 1242 1243设置网页是否开启捏合流畅模式,默认不开启。 1244 1245**参数:** 1246 1247| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 1248| --------- | -------- | ---- | ------ | -------------------------- | 1249| isEnabled | boolean | 是 | false | 网页是否开启捏合流畅模式。 | 1250 1251**示例:** 1252 1253 ```ts 1254// xxx.ets 1255import web_webview from '@ohos.web.webview' 1256@Entry 1257@Component 1258struct WebComponent { 1259 controller: web_webview.WebviewController = new web_webview.WebviewController() 1260 build() { 1261 Column() { 1262 Web({ src: 'www.example.com', controller: this.controller }) 1263 .pinchSmooth(true) 1264 } 1265 } 1266} 1267 ``` 1268 1269## 事件 1270 1271不支持通用事件。 1272 1273### onAlert 1274 1275onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) 1276 1277网页触发alert()告警弹窗时触发回调。 1278 1279**参数:** 1280 1281| 参数名 | 参数类型 | 参数描述 | 1282| ------- | --------------------- | --------------- | 1283| url | string | 当前显示弹窗所在网页的URL。 | 1284| message | string | 弹窗中显示的信息。 | 1285| result | [JsResult](#jsresult) | 通知Web组件用户操作行为。 | 1286 1287**返回值:** 1288 1289| 类型 | 说明 | 1290| ------- | ---------------------------------------- | 1291| boolean | 当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时,web组件暂不支持触发默认弹窗。 | 1292 1293**示例:** 1294 1295 ```ts 1296 // xxx.ets 1297 import web_webview from '@ohos.web.webview' 1298 1299 @Entry 1300 @Component 1301 struct WebComponent { 1302 controller: web_webview.WebviewController = new web_webview.WebviewController() 1303 build() { 1304 Column() { 1305 Web({ src: $rawfile("index.html"), controller: this.controller }) 1306 .onAlert((event) => { 1307 console.log("event.url:" + event.url) 1308 console.log("event.message:" + event.message) 1309 AlertDialog.show({ 1310 title: 'onAlert', 1311 message: 'text', 1312 primaryButton: { 1313 value: 'cancel', 1314 action: () => { 1315 event.result.handleCancel() 1316 } 1317 }, 1318 secondaryButton: { 1319 value: 'ok', 1320 action: () => { 1321 event.result.handleConfirm() 1322 } 1323 }, 1324 cancel: () => { 1325 event.result.handleCancel() 1326 } 1327 }) 1328 return true 1329 }) 1330 } 1331 } 1332 } 1333 ``` 1334 1335 加载的html文件。 1336 ```html 1337 <!--index.html--> 1338 <!DOCTYPE html> 1339 <html> 1340 <head> 1341 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 1342 </head> 1343 <body> 1344 <h1>WebView onAlert Demo</h1> 1345 <button onclick="myFunction()">Click here</button> 1346 <script> 1347 function myFunction() { 1348 alert("Hello World"); 1349 } 1350 </script> 1351 </body> 1352 </html> 1353 ``` 1354 1355### onBeforeUnload 1356 1357onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) 1358 1359刷新或关闭场景下,在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点,才会触发此回调。 1360 1361**参数:** 1362 1363| 参数名 | 参数类型 | 参数描述 | 1364| ------- | --------------------- | --------------- | 1365| url | string | 当前显示弹窗所在网页的URL。 | 1366| message | string | 弹窗中显示的信息。 | 1367| result | [JsResult](#jsresult) | 通知Web组件用户操作行为。 | 1368 1369**返回值:** 1370 1371| 类型 | 说明 | 1372| ------- | ---------------------------------------- | 1373| boolean | 当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时,web组件暂不支持触发默认弹窗。 | 1374 1375**示例:** 1376 1377 ```ts 1378 // xxx.ets 1379 import web_webview from '@ohos.web.webview' 1380 1381 @Entry 1382 @Component 1383 struct WebComponent { 1384 controller: web_webview.WebviewController = new web_webview.WebviewController() 1385 1386 build() { 1387 Column() { 1388 Web({ src: $rawfile("index.html"), controller: this.controller }) 1389 .onBeforeUnload((event) => { 1390 console.log("event.url:" + event.url) 1391 console.log("event.message:" + event.message) 1392 AlertDialog.show({ 1393 title: 'onBeforeUnload', 1394 message: 'text', 1395 primaryButton: { 1396 value: 'cancel', 1397 action: () => { 1398 event.result.handleCancel() 1399 } 1400 }, 1401 secondaryButton: { 1402 value: 'ok', 1403 action: () => { 1404 event.result.handleConfirm() 1405 } 1406 }, 1407 cancel: () => { 1408 event.result.handleCancel() 1409 } 1410 }) 1411 return true 1412 }) 1413 } 1414 } 1415 } 1416 ``` 1417 1418 加载的html文件。 1419 ```html 1420 <!--index.html--> 1421 <!DOCTYPE html> 1422 <html> 1423 <head> 1424 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 1425 </head> 1426 <body onbeforeunload="return myFunction()"> 1427 <h1>WebView onBeforeUnload Demo</h1> 1428 <a href="https://www.example.com">Click here</a> 1429 <script> 1430 function myFunction() { 1431 return "onBeforeUnload Event"; 1432 } 1433 </script> 1434 </body> 1435 </html> 1436 ``` 1437 1438### onConfirm 1439 1440onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) 1441 1442网页调用confirm()告警时触发此回调。 1443 1444**参数:** 1445 1446| 参数名 | 参数类型 | 参数描述 | 1447| ------- | --------------------- | --------------- | 1448| url | string | 当前显示弹窗所在网页的URL。 | 1449| message | string | 弹窗中显示的信息。 | 1450| result | [JsResult](#jsresult) | 通知Web组件用户操作行为。 | 1451 1452**返回值:** 1453 1454| 类型 | 说明 | 1455| ------- | ---------------------------------------- | 1456| boolean | 当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时,web组件暂不支持触发默认弹窗。 | 1457 1458**示例:** 1459 1460 ```ts 1461 // xxx.ets 1462 import web_webview from '@ohos.web.webview' 1463 1464 @Entry 1465 @Component 1466 struct WebComponent { 1467 controller: web_webview.WebviewController = new web_webview.WebviewController() 1468 1469 build() { 1470 Column() { 1471 Web({ src: $rawfile("index.html"), controller: this.controller }) 1472 .onConfirm((event) => { 1473 console.log("event.url:" + event.url) 1474 console.log("event.message:" + event.message) 1475 AlertDialog.show({ 1476 title: 'onConfirm', 1477 message: 'text', 1478 primaryButton: { 1479 value: 'cancel', 1480 action: () => { 1481 event.result.handleCancel() 1482 } 1483 }, 1484 secondaryButton: { 1485 value: 'ok', 1486 action: () => { 1487 event.result.handleConfirm() 1488 } 1489 }, 1490 cancel: () => { 1491 event.result.handleCancel() 1492 } 1493 }) 1494 return true 1495 }) 1496 } 1497 } 1498 } 1499 ``` 1500 1501 加载的html文件。 1502 ```html 1503 <!--index.html--> 1504 <!DOCTYPE html> 1505 <html> 1506 <head> 1507 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 1508 </head> 1509 1510 <body> 1511 <h1>WebView onConfirm Demo</h1> 1512 <button onclick="myFunction()">Click here</button> 1513 <p id="demo"></p> 1514 <script> 1515 function myFunction() { 1516 let x; 1517 let r = confirm("click button!"); 1518 if (r == true) { 1519 x = "ok"; 1520 } else { 1521 x = "cancel"; 1522 } 1523 document.getElementById("demo").innerHTML = x; 1524 } 1525 </script> 1526 </body> 1527 </html> 1528 ``` 1529 1530### onPrompt<sup>9+</sup> 1531 1532onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean) 1533 1534**参数:** 1535 1536| 参数名 | 参数类型 | 参数描述 | 1537| ------- | --------------------- | --------------- | 1538| url | string | 当前显示弹窗所在网页的URL。 | 1539| message | string | 弹窗中显示的信息。 | 1540| result | [JsResult](#jsresult) | 通知Web组件用户操作行为。 | 1541 1542**返回值:** 1543 1544| 类型 | 说明 | 1545| ------- | ---------------------------------------- | 1546| boolean | 当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时,web组件暂不支持触发默认弹窗。 | 1547 1548**示例:** 1549 1550 ```ts 1551 // xxx.ets 1552 import web_webview from '@ohos.web.webview' 1553 1554 @Entry 1555 @Component 1556 struct WebComponent { 1557 controller: web_webview.WebviewController = new web_webview.WebviewController() 1558 1559 build() { 1560 Column() { 1561 Web({ src: $rawfile("index.html"), controller: this.controller }) 1562 .onPrompt((event) => { 1563 console.log("url:" + event.url) 1564 console.log("message:" + event.message) 1565 console.log("value:" + event.value) 1566 AlertDialog.show({ 1567 title: 'onPrompt', 1568 message: 'text', 1569 primaryButton: { 1570 value: 'cancel', 1571 action: () => { 1572 event.result.handleCancel() 1573 } 1574 }, 1575 secondaryButton: { 1576 value: 'ok', 1577 action: () => { 1578 event.result.handlePromptConfirm(event.value) 1579 } 1580 }, 1581 cancel: () => { 1582 event.result.handleCancel() 1583 } 1584 }) 1585 return true 1586 }) 1587 } 1588 } 1589 } 1590 ``` 1591 1592 加载的html文件。 1593 ```html 1594 <!--index.html--> 1595 <!DOCTYPE html> 1596 <html> 1597 <head> 1598 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 1599 </head> 1600 1601 <body> 1602 <h1>WebView onPrompt Demo</h1> 1603 <button onclick="myFunction()">Click here</button> 1604 <p id="demo"></p> 1605 <script> 1606 function myFunction() { 1607 let message = prompt("Message info", "Hello World"); 1608 if (message != null && message != "") { 1609 document.getElementById("demo").innerHTML = message; 1610 } 1611 } 1612 </script> 1613 </body> 1614 </html> 1615 ``` 1616 1617### onConsole 1618 1619onConsole(callback: (event?: { message: ConsoleMessage }) => boolean) 1620 1621通知宿主应用JavaScript console消息。 1622 1623**参数:** 1624 1625| 参数名 | 参数类型 | 参数描述 | 1626| ------- | --------------------------------- | --------- | 1627| message | [ConsoleMessage](#consolemessage) | 触发的控制台信息。 | 1628 1629**返回值:** 1630 1631| 类型 | 说明 | 1632| ------- | ----------------------------------- | 1633| boolean | 当返回true时,该条消息将不会再打印至控制台,反之仍会打印至控制台。 | 1634 1635**示例:** 1636 1637 ```ts 1638 // xxx.ets 1639 import web_webview from '@ohos.web.webview' 1640 1641 @Entry 1642 @Component 1643 struct WebComponent { 1644 controller: web_webview.WebviewController = new web_webview.WebviewController() 1645 1646 build() { 1647 Column() { 1648 Web({ src: 'www.example.com', controller: this.controller }) 1649 .onConsole((event) => { 1650 console.log('getMessage:' + event.message.getMessage()) 1651 console.log('getSourceId:' + event.message.getSourceId()) 1652 console.log('getLineNumber:' + event.message.getLineNumber()) 1653 console.log('getMessageLevel:' + event.message.getMessageLevel()) 1654 return false 1655 }) 1656 } 1657 } 1658 } 1659 ``` 1660 1661### onDownloadStart 1662 1663onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) 1664 1665通知主应用开始下载一个文件。 1666 1667**参数:** 1668 1669| 参数名 | 参数类型 | 参数描述 | 1670| ------------------ | ------------- | ----------------------------------- | 1671| url | string | 文件下载的URL。 | 1672| userAgent | string | 用于下载的用户代理。 | 1673| contentDisposition | string | 服务器返回的 Content-Disposition响应头,可能为空。 | 1674| mimetype | string | 服务器返回内容媒体类型(MIME)信息。 | 1675| contentLength | contentLength | 服务器返回文件的长度。 | 1676 1677**示例:** 1678 1679 ```ts 1680 // xxx.ets 1681 import web_webview from '@ohos.web.webview' 1682 1683 @Entry 1684 @Component 1685 struct WebComponent { 1686 controller: web_webview.WebviewController = new web_webview.WebviewController() 1687 1688 build() { 1689 Column() { 1690 Web({ src: 'www.example.com', controller: this.controller }) 1691 .onDownloadStart((event) => { 1692 console.log('url:' + event.url) 1693 console.log('userAgent:' + event.userAgent) 1694 console.log('contentDisposition:' + event.contentDisposition) 1695 console.log('contentLength:' + event.contentLength) 1696 console.log('mimetype:' + event.mimetype) 1697 }) 1698 } 1699 } 1700 } 1701 ``` 1702 1703### onErrorReceive 1704 1705onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void) 1706 1707网页加载遇到错误时触发该回调。出于性能考虑,建议此回调中尽量执行简单逻辑。在无网络的情况下,触发此回调。 1708 1709**参数:** 1710 1711| 参数名 | 参数类型 | 参数描述 | 1712| ------- | ---------------------------------------- | --------------- | 1713| request | [WebResourceRequest](#webresourcerequest) | 网页请求的封装信息。 | 1714| error | [WebResourceError](#webresourceerror) | 网页加载资源错误的封装信息 。 | 1715 1716**示例:** 1717 1718 ```ts 1719 // xxx.ets 1720 import web_webview from '@ohos.web.webview' 1721 1722 @Entry 1723 @Component 1724 struct WebComponent { 1725 controller: web_webview.WebviewController = new web_webview.WebviewController() 1726 1727 build() { 1728 Column() { 1729 Web({ src: 'www.example.com', controller: this.controller }) 1730 .onErrorReceive((event) => { 1731 console.log('getErrorInfo:' + event.error.getErrorInfo()) 1732 console.log('getErrorCode:' + event.error.getErrorCode()) 1733 console.log('url:' + event.request.getRequestUrl()) 1734 console.log('isMainFrame:' + event.request.isMainFrame()) 1735 console.log('isRedirect:' + event.request.isRedirect()) 1736 console.log('isRequestGesture:' + event.request.isRequestGesture()) 1737 console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString()) 1738 let result = event.request.getRequestHeader() 1739 console.log('The request header result size is ' + result.length) 1740 for (let i of result) { 1741 console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue) 1742 } 1743 }) 1744 } 1745 } 1746 } 1747 ``` 1748 1749### onHttpErrorReceive 1750 1751onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void) 1752 1753网页加载资源遇到的HTTP错误(响应码>=400)时触发该回调。 1754 1755**参数:** 1756 1757| 参数名 | 参数类型 | 参数描述 | 1758| ------- | ---------------------------------------- | --------------- | 1759| request | [WebResourceRequest](#webresourcerequest) | 网页请求的封装信息。 | 1760| response | [WebResourceResponse](#webresourceresponse) | 资源响应的封装信息。 | 1761 1762**示例:** 1763 1764 ```ts 1765 // xxx.ets 1766 import web_webview from '@ohos.web.webview' 1767 1768 @Entry 1769 @Component 1770 struct WebComponent { 1771 controller: web_webview.WebviewController = new web_webview.WebviewController() 1772 1773 build() { 1774 Column() { 1775 Web({ src: 'www.example.com', controller: this.controller }) 1776 .onHttpErrorReceive((event) => { 1777 console.log('url:' + event.request.getRequestUrl()) 1778 console.log('isMainFrame:' + event.request.isMainFrame()) 1779 console.log('isRedirect:' + event.request.isRedirect()) 1780 console.log('isRequestGesture:' + event.request.isRequestGesture()) 1781 console.log('getResponseData:' + event.response.getResponseData()) 1782 console.log('getResponseEncoding:' + event.response.getResponseEncoding()) 1783 console.log('getResponseMimeType:' + event.response.getResponseMimeType()) 1784 console.log('getResponseCode:' + event.response.getResponseCode()) 1785 console.log('getReasonMessage:' + event.response.getReasonMessage()) 1786 let result = event.request.getRequestHeader() 1787 console.log('The request header result size is ' + result.length) 1788 for (let i of result) { 1789 console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue) 1790 } 1791 let resph = event.response.getResponseHeader() 1792 console.log('The response header result size is ' + resph.length) 1793 for (let i of resph) { 1794 console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue) 1795 } 1796 }) 1797 } 1798 } 1799 } 1800 ``` 1801 1802### onPageBegin 1803 1804onPageBegin(callback: (event?: { url: string }) => void) 1805 1806 1807网页开始加载时触发该回调,且只在主frame触发,iframe或者frameset的内容加载时不会触发此回调。 1808 1809**参数:** 1810 1811| 参数名 | 参数类型 | 参数描述 | 1812| ---- | ------ | --------- | 1813| url | string | 页面的URL地址。 | 1814 1815**示例:** 1816 1817 ```ts 1818 // xxx.ets 1819 import web_webview from '@ohos.web.webview' 1820 1821 @Entry 1822 @Component 1823 struct WebComponent { 1824 controller: web_webview.WebviewController = new web_webview.WebviewController() 1825 1826 build() { 1827 Column() { 1828 Web({ src: 'www.example.com', controller: this.controller }) 1829 .onPageBegin((event) => { 1830 console.log('url:' + event.url) 1831 }) 1832 } 1833 } 1834 } 1835 ``` 1836 1837### onPageEnd 1838 1839onPageEnd(callback: (event?: { url: string }) => void) 1840 1841 1842网页加载完成时触发该回调,且只在主frame触发。 1843 1844**参数:** 1845 1846| 参数名 | 参数类型 | 参数描述 | 1847| ---- | ------ | --------- | 1848| url | string | 页面的URL地址。 | 1849 1850**示例:** 1851 1852 ```ts 1853 // xxx.ets 1854 import web_webview from '@ohos.web.webview' 1855 1856 @Entry 1857 @Component 1858 struct WebComponent { 1859 controller: web_webview.WebviewController = new web_webview.WebviewController() 1860 1861 build() { 1862 Column() { 1863 Web({ src: 'www.example.com', controller: this.controller }) 1864 .onPageEnd((event) => { 1865 console.log('url:' + event.url) 1866 }) 1867 } 1868 } 1869 } 1870 ``` 1871 1872### onProgressChange 1873 1874onProgressChange(callback: (event?: { newProgress: number }) => void) 1875 1876网页加载进度变化时触发该回调。 1877 1878**参数:** 1879 1880| 参数名 | 参数类型 | 参数描述 | 1881| ----------- | ------ | --------------------- | 1882| newProgress | number | 新的加载进度,取值范围为0到100的整数。 | 1883 1884**示例:** 1885 1886 ```ts 1887 // xxx.ets 1888 import web_webview from '@ohos.web.webview' 1889 1890 @Entry 1891 @Component 1892 struct WebComponent { 1893 controller: web_webview.WebviewController = new web_webview.WebviewController() 1894 1895 build() { 1896 Column() { 1897 Web({ src: 'www.example.com', controller: this.controller }) 1898 .onProgressChange((event) => { 1899 console.log('newProgress:' + event.newProgress) 1900 }) 1901 } 1902 } 1903 } 1904 ``` 1905 1906### onTitleReceive 1907 1908onTitleReceive(callback: (event?: { title: string }) => void) 1909 1910网页document标题更改时触发该回调。 1911 1912**参数:** 1913 1914| 参数名 | 参数类型 | 参数描述 | 1915| ----- | ------ | ------------- | 1916| title | string | document标题内容。 | 1917 1918**示例:** 1919 1920 ```ts 1921 // xxx.ets 1922 import web_webview from '@ohos.web.webview' 1923 1924 @Entry 1925 @Component 1926 struct WebComponent { 1927 controller: web_webview.WebviewController = new web_webview.WebviewController() 1928 1929 build() { 1930 Column() { 1931 Web({ src: 'www.example.com', controller: this.controller }) 1932 .onTitleReceive((event) => { 1933 console.log('title:' + event.title) 1934 }) 1935 } 1936 } 1937 } 1938 ``` 1939 1940### onRefreshAccessedHistory 1941 1942onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) 1943 1944加载网页页面完成时触发该回调,用于应用更新其访问的历史链接。 1945 1946**参数:** 1947 1948| 参数名 | 参数类型 | 参数描述 | 1949| ----------- | ------- | ---------------------------------------- | 1950| url | string | 访问的url。 | 1951| isRefreshed | boolean | true表示该页面是被重新加载的(调用[refresh<sup>9+</sup>](../apis/js-apis-webview.md#refresh)接口),false表示该页面是新加载的。 | 1952 1953**示例:** 1954 1955 ```ts 1956 // xxx.ets 1957 import web_webview from '@ohos.web.webview' 1958 1959 @Entry 1960 @Component 1961 struct WebComponent { 1962 controller: web_webview.WebviewController = new web_webview.WebviewController() 1963 1964 build() { 1965 Column() { 1966 Web({ src: 'www.example.com', controller: this.controller }) 1967 .onRefreshAccessedHistory((event) => { 1968 console.log('url:' + event.url + ' isReload:' + event.isRefreshed) 1969 }) 1970 } 1971 } 1972 } 1973 ``` 1974 1975### onSslErrorReceive<sup>(deprecated)</sup> 1976 1977onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void) 1978 1979通知用户加载资源时发生SSL错误。 1980 1981> **说明:** 1982> 1983> 从API version 8开始支持,从API version 9开始废弃。建议使用[onSslErrorEventReceive<sup>9+</sup>](#onsslerroreventreceive9)替代。 1984 1985### onFileSelectorShow<sup>(deprecated)</sup> 1986 1987onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void) 1988 1989调用此函数以处理具有“文件”输入类型的HTML表单,以响应用户按下的“选择文件”按钮。 1990 1991> **说明:** 1992> 1993> 从API version 8开始支持,从API version 9开始废弃。建议使用[onShowFileSelector<sup>9+</sup>](#onshowfileselector9)替代。 1994 1995### onRenderExited<sup>9+</sup> 1996 1997onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void) 1998 1999应用渲染进程异常退出时触发该回调。 2000 2001**参数:** 2002 2003| 参数名 | 参数类型 | 参数描述 | 2004| ---------------- | ---------------------------------------- | ---------------- | 2005| renderExitReason | [RenderExitReason](#renderexitreason枚举说明) | 渲染进程进程异常退出的具体原因。 | 2006 2007**示例:** 2008 2009 ```ts 2010 // xxx.ets 2011 import web_webview from '@ohos.web.webview' 2012 2013 @Entry 2014 @Component 2015 struct WebComponent { 2016 controller: web_webview.WebviewController = new web_webview.WebviewController() 2017 2018 build() { 2019 Column() { 2020 Web({ src: 'chrome://crash/', controller: this.controller }) 2021 .onRenderExited((event) => { 2022 console.log('reason:' + event.renderExitReason) 2023 }) 2024 } 2025 } 2026 } 2027 ``` 2028 2029### onShowFileSelector<sup>9+</sup> 2030 2031onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean) 2032 2033调用此函数以处理具有“文件”输入类型的HTML表单,以响应用户按下的“选择文件”按钮。 2034 2035**参数:** 2036 2037| 参数名 | 参数类型 | 参数描述 | 2038| ------------ | ---------------------------------------- | ----------------- | 2039| result | [FileSelectorResult](#fileselectorresult9) | 用于通知Web组件文件选择的结果。 | 2040| fileSelector | [FileSelectorParam](#fileselectorparam9) | 文件选择器的相关信息。 | 2041 2042**返回值:** 2043 2044| 类型 | 说明 | 2045| ------- | ---------------------------------------- | 2046| boolean | 当返回值为true时,用户可以调用系统提供的弹窗能力。当回调返回false时,web组件暂不支持触发默认弹窗。 | 2047 2048**示例:** 2049 2050 ```ts 2051 // xxx.ets 2052 import web_webview from '@ohos.web.webview' 2053 2054 @Entry 2055 @Component 2056 struct WebComponent { 2057 controller: web_webview.WebviewController = new web_webview.WebviewController() 2058 2059 build() { 2060 Column() { 2061 Web({ src: 'www.example.com', controller: this.controller }) 2062 .onShowFileSelector((event) => { 2063 AlertDialog.show({ 2064 title: event.fileSelector.getTitle(), 2065 message: 'isCapture:' + event.fileSelector.isCapture() + " mode:" + event.fileSelector.getMode() + 'acceptType:' + event.fileSelector.getAcceptType(), 2066 confirm: { 2067 value: 'upload', 2068 action: () => { 2069 let fileList: Array<string> = [ 2070 '/data/storage/el2/base/test', 2071 ] 2072 event.result.handleFileList(fileList) 2073 } 2074 }, 2075 cancel: () => { 2076 let fileList: Array<string> = [] 2077 event.result.handleFileList(fileList) 2078 } 2079 }) 2080 return true 2081 }) 2082 } 2083 } 2084 } 2085 ``` 2086 2087### onResourceLoad<sup>9+</sup> 2088 2089onResourceLoad(callback: (event: {url: string}) => void) 2090 2091通知Web组件所加载的资源文件url信息。 2092 2093**参数:** 2094 2095| 参数名 | 参数类型 | 参数描述 | 2096| ---- | ------ | -------------- | 2097| url | string | 所加载的资源文件url信息。 | 2098 2099**示例:** 2100 2101 ```ts 2102 // xxx.ets 2103 import web_webview from '@ohos.web.webview' 2104 2105 @Entry 2106 @Component 2107 struct WebComponent { 2108 controller: web_webview.WebviewController = new web_webview.WebviewController() 2109 2110 build() { 2111 Column() { 2112 Web({ src: 'www.example.com', controller: this.controller }) 2113 .onResourceLoad((event) => { 2114 console.log('onResourceLoad: ' + event.url) 2115 }) 2116 } 2117 } 2118 } 2119 ``` 2120 2121### onScaleChange<sup>9+</sup> 2122 2123onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void) 2124 2125当前页面显示比例的变化时触发该回调。 2126 2127**参数:** 2128 2129| 参数名 | 参数类型 | 参数描述 | 2130| -------- | ------ | ------------ | 2131| oldScale | number | 变化前的显示比例百分比。 | 2132| newScale | number | 变化后的显示比例百分比。 | 2133 2134**示例:** 2135 2136 ```ts 2137 // xxx.ets 2138 import web_webview from '@ohos.web.webview' 2139 2140 @Entry 2141 @Component 2142 struct WebComponent { 2143 controller: web_webview.WebviewController = new web_webview.WebviewController() 2144 2145 build() { 2146 Column() { 2147 Web({ src: 'www.example.com', controller: this.controller }) 2148 .onScaleChange((event) => { 2149 console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale) 2150 }) 2151 } 2152 } 2153 } 2154 ``` 2155 2156### onUrlLoadIntercept 2157 2158onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean) 2159 2160当Web组件加载url之前触发该回调,用于判断是否阻止此次访问。默认允许加载。 2161 2162**参数:** 2163 2164| 参数名 | 参数类型 | 参数描述 | 2165| ---- | ---------------------------------------- | --------- | 2166| data | string / [WebResourceRequest](#webresourcerequest) | url的相关信息。 | 2167 2168**返回值:** 2169 2170| 类型 | 说明 | 2171| ------- | ------------------------ | 2172| boolean | 返回true表示阻止此次加载,否则允许此次加载。 | 2173 2174**示例:** 2175 2176 ```ts 2177 // xxx.ets 2178 import web_webview from '@ohos.web.webview' 2179 2180 @Entry 2181 @Component 2182 struct WebComponent { 2183 controller: web_webview.WebviewController = new web_webview.WebviewController() 2184 2185 build() { 2186 Column() { 2187 Web({ src: 'www.example.com', controller: this.controller }) 2188 .onUrlLoadIntercept((event) => { 2189 console.log('onUrlLoadIntercept ' + event.data.toString()) 2190 return true 2191 }) 2192 } 2193 } 2194 } 2195 ``` 2196 2197### onInterceptRequest<sup>9+</sup> 2198 2199onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse) 2200 2201当Web组件加载url之前触发该回调,用于拦截url并返回响应数据。 2202 2203**参数:** 2204 2205| 参数名 | 参数类型 | 参数描述 | 2206| ------- | ---------------------------------------- | ----------- | 2207| request | [WebResourceRequest](#webresourcerequest) | url请求的相关信息。 | 2208 2209**返回值:** 2210 2211| 类型 | 说明 | 2212| ---------------------------------------- | ---------------------------------------- | 2213| [WebResourceResponse](#webresourceresponse) | 返回响应数据则按照响应数据加载,无响应数据则返回null表示按照原来的方式加载。 | 2214 2215**示例:** 2216 2217 ```ts 2218 // xxx.ets 2219 import web_webview from '@ohos.web.webview' 2220 2221 @Entry 2222 @Component 2223 struct WebComponent { 2224 controller: web_webview.WebviewController = new web_webview.WebviewController() 2225 responseweb: WebResourceResponse = new WebResourceResponse() 2226 heads:Header[] = new Array() 2227 @State webdata: string = "<!DOCTYPE html>\n" + 2228 "<html>\n"+ 2229 "<head>\n"+ 2230 "<title>intercept test</title>\n"+ 2231 "</head>\n"+ 2232 "<body>\n"+ 2233 "<h1>intercept test</h1>\n"+ 2234 "</body>\n"+ 2235 "</html>" 2236 build() { 2237 Column() { 2238 Web({ src: 'www.example.com', controller: this.controller }) 2239 .onInterceptRequest((event) => { 2240 console.log('url:' + event.request.getRequestUrl()) 2241 var head1:Header = { 2242 headerKey:"Connection", 2243 headerValue:"keep-alive" 2244 } 2245 var head2:Header = { 2246 headerKey:"Cache-Control", 2247 headerValue:"no-cache" 2248 } 2249 var length = this.heads.push(head1) 2250 length = this.heads.push(head2) 2251 this.responseweb.setResponseHeader(this.heads) 2252 this.responseweb.setResponseData(this.webdata) 2253 this.responseweb.setResponseEncoding('utf-8') 2254 this.responseweb.setResponseMimeType('text/html') 2255 this.responseweb.setResponseCode(200) 2256 this.responseweb.setReasonMessage('OK') 2257 return this.responseweb 2258 }) 2259 } 2260 } 2261 } 2262 ``` 2263 2264### onHttpAuthRequest<sup>9+</sup> 2265 2266onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean) 2267 2268通知收到http auth认证请求。 2269 2270**参数:** 2271 2272| 参数名 | 参数类型 | 参数描述 | 2273| ------- | ------------------------------------ | ---------------- | 2274| handler | [HttpAuthHandler](#httpauthhandler9) | 通知Web组件用户操作行为。 | 2275| host | string | HTTP身份验证凭据应用的主机。 | 2276| realm | string | HTTP身份验证凭据应用的域。 | 2277 2278**返回值:** 2279 2280| 类型 | 说明 | 2281| ------- | --------------------- | 2282| boolean | 返回false表示此次认证失败,否则成功。 | 2283 2284**示例:** 2285 2286 ```ts 2287 // xxx.ets 2288 import web_webview from '@ohos.web.webview' 2289 @Entry 2290 @Component 2291 struct WebComponent { 2292 controller: web_webview.WebviewController = new web_webview.WebviewController() 2293 httpAuth: boolean = false 2294 2295 build() { 2296 Column() { 2297 Web({ src: 'www.example.com', controller: this.controller }) 2298 .onHttpAuthRequest((event) => { 2299 AlertDialog.show({ 2300 title: 'onHttpAuthRequest', 2301 message: 'text', 2302 primaryButton: { 2303 value: 'cancel', 2304 action: () => { 2305 event.handler.cancel() 2306 } 2307 }, 2308 secondaryButton: { 2309 value: 'ok', 2310 action: () => { 2311 this.httpAuth = event.handler.isHttpAuthInfoSaved() 2312 if (this.httpAuth == false) { 2313 web_webview.WebDataBase.saveHttpAuthCredentials( 2314 event.host, 2315 event.realm, 2316 "2222", 2317 "2222" 2318 ) 2319 event.handler.cancel() 2320 } 2321 } 2322 }, 2323 cancel: () => { 2324 event.handler.cancel() 2325 } 2326 }) 2327 return true 2328 }) 2329 } 2330 } 2331 } 2332 ``` 2333### onSslErrorEventReceive<sup>9+</sup> 2334 2335onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslError }) => void) 2336 2337通知用户加载资源时发生SSL错误。 2338 2339**参数:** 2340 2341| 参数名 | 参数类型 | 参数描述 | 2342| ------- | ------------------------------------ | -------------- | 2343| handler | [SslErrorHandler](#sslerrorhandler9) | 通知Web组件用户操作行为。 | 2344| error | [SslError](#sslerror9枚举说明) | 错误码。 | 2345 2346**示例:** 2347 2348 ```ts 2349 // xxx.ets 2350 import web_webview from '@ohos.web.webview' 2351 @Entry 2352 @Component 2353 struct WebComponent { 2354 controller: web_webview.WebviewController = new web_webview.WebviewController() 2355 2356 build() { 2357 Column() { 2358 Web({ src: 'www.example.com', controller: this.controller }) 2359 .onSslErrorEventReceive((event) => { 2360 AlertDialog.show({ 2361 title: 'onSslErrorEventReceive', 2362 message: 'text', 2363 primaryButton: { 2364 value: 'confirm', 2365 action: () => { 2366 event.handler.handleConfirm() 2367 } 2368 }, 2369 secondaryButton: { 2370 value: 'cancel', 2371 action: () => { 2372 event.handler.handleCancel() 2373 } 2374 }, 2375 cancel: () => { 2376 event.handler.handleCancel() 2377 } 2378 }) 2379 return true 2380 }) 2381 } 2382 } 2383 } 2384 ``` 2385 2386### onClientAuthenticationRequest<sup>9+</sup> 2387 2388onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array<string>, issuers : Array<string>}) => void) 2389 2390通知用户收到SSL客户端证书请求事件。 2391 2392**参数:** 2393 2394| 参数名 | 参数类型 | 参数描述 | 2395| -------- | ---------------------------------------- | --------------- | 2396| handler | [ClientAuthenticationHandler](#clientauthenticationhandler9) | 通知Web组件用户操作行为。 | 2397| host | string | 请求证书服务器的主机名。 | 2398| port | number | 请求证书服务器的端口号。 | 2399| keyTypes | Array<string> | 可接受的非对称秘钥类型。 | 2400| issuers | Array<string> | 与私钥匹配的证书可接受颁发者。 | 2401 2402 **示例:** 2403 ```ts 2404 // xxx.ets 2405 import web_webview from '@ohos.web.webview' 2406 @Entry 2407 @Component 2408 struct WebComponent { 2409 controller: web_webview.WebviewController = new web_webview.WebviewController() 2410 2411 build() { 2412 Column() { 2413 Web({ src: 'www.example.com', controller: this.controller }) 2414 .onClientAuthenticationRequest((event) => { 2415 AlertDialog.show({ 2416 title: 'onClientAuthenticationRequest', 2417 message: 'text', 2418 primaryButton: { 2419 value: 'confirm', 2420 action: () => { 2421 event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem") 2422 } 2423 }, 2424 secondaryButton: { 2425 value: 'cancel', 2426 action: () => { 2427 event.handler.cancel() 2428 } 2429 }, 2430 cancel: () => { 2431 event.handler.ignore() 2432 } 2433 }) 2434 return true 2435 }) 2436 } 2437 } 2438 } 2439 ``` 2440 2441### onPermissionRequest<sup>9+</sup> 2442 2443onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void) 2444 2445通知收到获取权限请求。 2446 2447**参数:** 2448 2449| 参数名 | 参数类型 | 参数描述 | 2450| ------- | ---------------------------------------- | -------------- | 2451| request | [PermissionRequest](#permissionrequest9) | 通知Web组件用户操作行为。 | 2452 2453**示例:** 2454 2455 ```ts 2456 // xxx.ets 2457 import web_webview from '@ohos.web.webview' 2458 2459 @Entry 2460 @Component 2461 struct WebComponent { 2462 controller: web_webview.WebviewController = new web_webview.WebviewController() 2463 build() { 2464 Column() { 2465 Web({ src: 'www.example.com', controller: this.controller }) 2466 .onPermissionRequest((event) => { 2467 AlertDialog.show({ 2468 title: 'title', 2469 message: 'text', 2470 primaryButton: { 2471 value: 'deny', 2472 action: () => { 2473 event.request.deny() 2474 } 2475 }, 2476 secondaryButton: { 2477 value: 'onConfirm', 2478 action: () => { 2479 event.request.grant(event.request.getAccessibleResource()) 2480 } 2481 }, 2482 cancel: () => { 2483 event.request.deny() 2484 } 2485 }) 2486 }) 2487 } 2488 } 2489 } 2490 ``` 2491 2492### onContextMenuShow<sup>9+</sup> 2493 2494onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean) 2495 2496长按特定元素(例如图片,链接)或鼠标右键,跳出菜单。 2497 2498**参数:** 2499 2500| 参数名 | 参数类型 | 参数描述 | 2501| ------ | ---------------------------------------- | ----------- | 2502| param | [WebContextMenuParam](#webcontextmenuparam9) | 菜单相关参数。 | 2503| result | [WebContextMenuResult](#webcontextmenuresult9) | 菜单相应事件传入内核。 | 2504 2505**返回值:** 2506 2507| 类型 | 说明 | 2508| ------- | ------------------------ | 2509| boolean | 自定义菜单返回true,默认菜单返回false。 | 2510 2511**示例:** 2512 2513 ```ts 2514 // xxx.ets 2515 import web_webview from '@ohos.web.webview' 2516 2517 @Entry 2518 @Component 2519 struct WebComponent { 2520 controller: web_webview.WebviewController = new web_webview.WebviewController() 2521 build() { 2522 Column() { 2523 Web({ src: 'www.example.com', controller: this.controller }) 2524 .onContextMenuShow((event) => { 2525 console.info("x coord = " + event.param.x()) 2526 console.info("link url = " + event.param.getLinkUrl()) 2527 return true 2528 }) 2529 } 2530 } 2531 } 2532 ``` 2533 2534### onScroll<sup>9+</sup> 2535 2536onScroll(callback: (event: {xOffset: number, yOffset: number}) => void) 2537 2538通知网页滚动条滚动位置。 2539 2540**参数:** 2541 2542| 参数名 | 参数类型 | 参数描述 | 2543| ------- | ------ | ------------ | 2544| xOffset | number | 以网页最左端为基准,水平滚动条滚动所在位置。 | 2545| yOffset | number | 以网页最上端为基准,竖直滚动条滚动所在位置。 | 2546 2547**示例:** 2548 2549 ```ts 2550 // xxx.ets 2551 import web_webview from '@ohos.web.webview' 2552 2553 @Entry 2554 @Component 2555 struct WebComponent { 2556 controller: web_webview.WebviewController = new web_webview.WebviewController() 2557 build() { 2558 Column() { 2559 Web({ src: 'www.example.com', controller: this.controller }) 2560 .onScroll((event) => { 2561 console.info("x = " + event.xOffset) 2562 console.info("y = " + event.yOffset) 2563 }) 2564 } 2565 } 2566 } 2567 ``` 2568 2569### onGeolocationShow 2570 2571onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void) 2572 2573通知用户收到地理位置信息获取请求。 2574 2575**参数:** 2576 2577| 参数名 | 参数类型 | 参数描述 | 2578| ----------- | ------------------------------- | -------------- | 2579| origin | string | 指定源的字符串索引。 | 2580| geolocation | [JsGeolocation](#jsgeolocation) | 通知Web组件用户操作行为。 | 2581 2582**示例:** 2583 2584 ```ts 2585 // xxx.ets 2586 import web_webview from '@ohos.web.webview' 2587 2588 @Entry 2589 @Component 2590 struct WebComponent { 2591 controller: web_webview.WebviewController = new web_webview.WebviewController() 2592 build() { 2593 Column() { 2594 Web({ src:'www.example.com', controller:this.controller }) 2595 .geolocationAccess(true) 2596 .onGeolocationShow((event) => { 2597 AlertDialog.show({ 2598 title: 'title', 2599 message: 'text', 2600 confirm: { 2601 value: 'onConfirm', 2602 action: () => { 2603 event.geolocation.invoke(event.origin, true, true) 2604 } 2605 }, 2606 cancel: () => { 2607 event.geolocation.invoke(event.origin, false, true) 2608 } 2609 }) 2610 }) 2611 } 2612 } 2613 } 2614 ``` 2615 2616### onGeolocationHide 2617 2618onGeolocationHide(callback: () => void) 2619 2620通知用户先前被调用[onGeolocationShow](#ongeolocationshow)时收到地理位置信息获取请求已被取消。 2621 2622**参数:** 2623 2624| 参数名 | 参数类型 | 参数描述 | 2625| -------- | ---------- | -------------------- | 2626| callback | () => void | 地理位置信息获取请求已被取消的回调函数。 | 2627 2628**示例:** 2629 2630 ```ts 2631 // xxx.ets 2632 import web_webview from '@ohos.web.webview' 2633 2634 @Entry 2635 @Component 2636 struct WebComponent { 2637 controller: web_webview.WebviewController = new web_webview.WebviewController() 2638 build() { 2639 Column() { 2640 Web({ src:'www.example.com', controller:this.controller }) 2641 .geolocationAccess(true) 2642 .onGeolocationHide(() => { 2643 console.log("onGeolocationHide...") 2644 }) 2645 } 2646 } 2647 } 2648 ``` 2649 2650### onFullScreenEnter<sup>9+</sup> 2651 2652onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void) 2653 2654通知开发者web组件进入全屏模式。 2655 2656**参数:** 2657 2658| 参数名 | 参数类型 | 参数描述 | 2659| ------- | ---------------------------------------- | -------------- | 2660| handler | [FullScreenExitHandler](#fullscreenexithandler9) | 用于退出全屏模式的函数句柄。 | 2661 2662**示例:** 2663 2664 ```ts 2665 // xxx.ets 2666 import web_webview from '@ohos.web.webview' 2667 2668 @Entry 2669 @Component 2670 struct WebComponent { 2671 controller: web_webview.WebviewController = new web_webview.WebviewController() 2672 handler: FullScreenExitHandler = null 2673 build() { 2674 Column() { 2675 Web({ src:'www.example.com', controller:this.controller }) 2676 .onFullScreenEnter((event) => { 2677 console.log("onFullScreenEnter...") 2678 this.handler = event.handler 2679 }) 2680 } 2681 } 2682 } 2683 ``` 2684 2685### onFullScreenExit<sup>9+</sup> 2686 2687onFullScreenExit(callback: () => void) 2688 2689通知开发者web组件退出全屏模式。 2690 2691**参数:** 2692 2693| 参数名 | 参数类型 | 参数描述 | 2694| -------- | ---------- | ------------- | 2695| callback | () => void | 退出全屏模式时的回调函数。 | 2696 2697**示例:** 2698 2699 ```ts 2700 // xxx.ets 2701 import web_webview from '@ohos.web.webview' 2702 2703 @Entry 2704 @Component 2705 struct WebComponent { 2706 controller: web_webview.WebviewController = new web_webview.WebviewController() 2707 handler: FullScreenExitHandler = null 2708 build() { 2709 Column() { 2710 Web({ src:'www.example.com', controller:this.controller }) 2711 .onFullScreenExit(() => { 2712 console.log("onFullScreenExit...") 2713 this.handler.exitFullScreen() 2714 }) 2715 .onFullScreenEnter((event) => { 2716 this.handler = event.handler 2717 }) 2718 } 2719 } 2720 } 2721 ``` 2722 2723### onWindowNew<sup>9+</sup> 2724 2725onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetUrl: string, handler: ControllerHandler}) => void) 2726 2727使能multiWindowAccess情况下,通知用户新建窗口请求。 2728若不调用event.handler.setWebController接口,会造成render进程阻塞。 2729如果不需要打开新窗口,在调用event.handler.setWebController接口时须设置成null。 2730 2731**参数:** 2732 2733| 参数名 | 参数类型 | 参数描述 | 2734| ------------- | ---------------------------------------- | -------------------------- | 2735| isAlert | boolean | true代表请求创建对话框,false代表新标签页。 | 2736| isUserTrigger | boolean | true代表用户触发,false代表非用户触发。 | 2737| targetUrl | string | 目标url。 | 2738| handler | [ControllerHandler](#controllerhandler9) | 用于设置新建窗口的WebviewController实例。 | 2739 2740**示例:** 2741 2742 ```ts 2743 // xxx.ets 2744 import web_webview from '@ohos.web.webview' 2745 2746 //在同一page页有两个web组件。在WebComponent新开窗口时,会跳转到NewWebViewComp。 2747 @CustomDialog 2748 struct NewWebViewComp { 2749 controller: CustomDialogController 2750 webviewController1: web_webview.WebviewController 2751 build() { 2752 Column() { 2753 Web({ src: "", controller: this.webviewController1 }) 2754 .javaScriptAccess(true) 2755 .multiWindowAccess(false) 2756 .onWindowExit(()=> { 2757 console.info("NewWebViewComp onWindowExit") 2758 this.controller.close() 2759 }) 2760 } 2761 } 2762 } 2763 2764 @Entry 2765 @Component 2766 struct WebComponent { 2767 controller: web_webview.WebviewController = new web_webview.WebviewController() 2768 dialogController: CustomDialogController = null 2769 build() { 2770 Column() { 2771 Web({ src: 'www.example.com', controller: this.controller }) 2772 .javaScriptAccess(true) 2773 //需要使能multiWindowAccess 2774 .multiWindowAccess(true) 2775 .onWindowNew((event) => { 2776 if (this.dialogController) { 2777 this.dialogController.close() 2778 } 2779 let popController:web_webview.WebviewController = new web_webview.WebviewController() 2780 this.dialogController = new CustomDialogController({ 2781 builder: NewWebViewComp({webviewController1: popController}) 2782 }) 2783 this.dialogController.open() 2784 //将新窗口对应WebviewController返回给Web内核。 2785 //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。 2786 //若不调用event.handler.setWebController接口,会造成render进程阻塞。 2787 event.handler.setWebController(popController) 2788 }) 2789 } 2790 } 2791 } 2792 ``` 2793 2794### onWindowExit<sup>9+</sup> 2795 2796onWindowExit(callback: () => void) 2797 2798通知用户窗口关闭请求。 2799 2800**参数:** 2801 2802| 参数名 | 参数类型 | 参数描述 | 2803| -------- | ---------- | ------------ | 2804| callback | () => void | 窗口请求关闭的回调函数。 | 2805 2806**示例:** 2807 2808 ```ts 2809 // xxx.ets 2810 import web_webview from '@ohos.web.webview' 2811 2812 @Entry 2813 @Component 2814 struct WebComponent { 2815 controller: web_webview.WebviewController = new web_webview.WebviewController() 2816 build() { 2817 Column() { 2818 Web({ src:'www.example.com', controller: this.controller }) 2819 .onWindowExit(() => { 2820 console.log("onWindowExit...") 2821 }) 2822 } 2823 } 2824 } 2825 ``` 2826 2827### onSearchResultReceive<sup>9+</sup> 2828 2829onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMatches: number, isDoneCounting: boolean}) => void): WebAttribute 2830 2831回调通知调用方网页页内查找的结果。 2832 2833**参数:** 2834 2835| 参数名 | 参数类型 | 参数描述 | 2836| ------------------ | ------- | ---------------------------------------- | 2837| activeMatchOrdinal | number | 当前匹配的查找项的序号(从0开始)。 | 2838| numberOfMatches | number | 所有匹配到的关键词的个数。 | 2839| isDoneCounting | boolean | 当次页内查找操作是否结束。该方法可能会回调多次,直到isDoneCounting为true为止。 | 2840 2841**示例:** 2842 2843 ```ts 2844 // xxx.ets 2845 import web_webview from '@ohos.web.webview' 2846 2847 @Entry 2848 @Component 2849 struct WebComponent { 2850 controller: web_webview.WebviewController = new web_webview.WebviewController() 2851 2852 build() { 2853 Column() { 2854 Web({ src: 'www.example.com', controller: this.controller }) 2855 .onSearchResultReceive(ret => { 2856 console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal + 2857 "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting) 2858 }) 2859 } 2860 } 2861 } 2862 ``` 2863 2864### onDataResubmitted<sup>9+</sup> 2865 2866onDataResubmitted(callback: (event: {handler: DataResubmissionHandler}) => void) 2867 2868设置网页表单可以重新提交时触发的回调函数。 2869 2870**参数:** 2871 2872| 参数名 | 参数类型 | 参数描述 | 2873| ------- | ---------------------------------------------------- | ---------------------- | 2874| handler | [DataResubmissionHandler](#dataresubmissionhandler9) | 表单数据重新提交句柄。 | 2875 2876**示例:** 2877 2878 ```ts 2879 // xxx.ets 2880 import web_webview from '@ohos.web.webview' 2881 @Entry 2882 @Component 2883 struct WebComponent { 2884 controller: web_webview.WebviewController = new web_webview.WebviewController() 2885 build() { 2886 Column() { 2887 Web({ src:'www.example.com', controller: this.controller }) 2888 .onDataResubmitted((event) => { 2889 console.log('onDataResubmitted') 2890 event.handler.resend(); 2891 }) 2892 } 2893 } 2894 } 2895 ``` 2896 2897### onPageVisible<sup>9+</sup> 2898 2899onPageVisible(callback: (event: {url: string}) => void) 2900 2901设置旧页面不再呈现,新页面即将可见时触发的回调函数。 2902 2903**参数:** 2904 2905| 参数名 | 参数类型 | 参数描述 | 2906| ------ | -------- | ------------------------------------------------- | 2907| url | string | 旧页面不再呈现,新页面即将可见时新页面的url地址。 | 2908 2909**示例:** 2910 2911 ```ts 2912 // xxx.ets 2913 import web_webview from '@ohos.web.webview' 2914 @Entry 2915 @Component 2916 struct WebComponent { 2917 controller: web_webview.WebviewController = new web_webview.WebviewController() 2918 build() { 2919 Column() { 2920 Web({ src:'www.example.com', controller: this.controller }) 2921 .onPageVisible((event) => { 2922 console.log('onPageVisible url:' + event.url) 2923 }) 2924 } 2925 } 2926 } 2927 ``` 2928 2929### onInterceptKeyEvent<sup>9+</sup> 2930 2931onInterceptKeyEvent(callback: (event: KeyEvent) => boolean) 2932 2933设置键盘事件的回调函数,该回调在被Webview使用前触发。 2934 2935**参数:** 2936 2937| 参数名 | 参数类型 | 参数描述 | 2938| ------ | ------------------------------------------------------- | -------------------- | 2939| event | [KeyEvent](ts-universal-events-key.md#keyevent对象说明) | 触发的KeyEvent事件。 | 2940 2941**返回值:** 2942 2943| 类型 | 说明 | 2944| ------- | ------------------------------------------------------------ | 2945| boolean | 回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入Webview内核。 | 2946 2947**示例:** 2948 2949 ```ts 2950 // xxx.ets 2951 import web_webview from '@ohos.web.webview' 2952 @Entry 2953 @Component 2954 struct WebComponent { 2955 controller: web_webview.WebviewController = new web_webview.WebviewController() 2956 build() { 2957 Column() { 2958 Web({ src:'www.example.com', controller: this.controller }) 2959 .onInterceptKeyEvent((event) => { 2960 if (event.keyCode == 2017 || event.keyCode == 2018) { 2961 console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`) 2962 return true; 2963 } 2964 return false; 2965 }) 2966 } 2967 } 2968 } 2969 ``` 2970 2971### onTouchIconUrlReceived<sup>9+</sup> 2972 2973onTouchIconUrlReceived(callback: (event: {url: string, precomposed: boolean}) => void) 2974 2975设置接收到apple-touch-icon url地址时的回调函数。 2976 2977**参数:** 2978 2979| 参数名 | 参数类型 | 参数描述 | 2980| ----------- | -------- | ---------------------------------- | 2981| url | string | 接收到的apple-touch-icon url地址。 | 2982| precomposed | boolean | 对应apple-touch-icon是否为预合成。 | 2983 2984**示例:** 2985 2986 ```ts 2987 // xxx.ets 2988 import web_webview from '@ohos.web.webview' 2989 @Entry 2990 @Component 2991 struct WebComponent { 2992 controller: web_webview.WebviewController = new web_webview.WebviewController() 2993 build() { 2994 Column() { 2995 Web({ src:'www.baidu.com', controller: this.controller }) 2996 .onTouchIconUrlReceived((event) => { 2997 console.log('onTouchIconUrlReceived:' + JSON.stringify(event)) 2998 }) 2999 } 3000 } 3001 } 3002 ``` 3003 3004### onFaviconReceived<sup>9+</sup> 3005 3006onFaviconReceived(callback: (event: {favicon: image.PixelMap}) => void) 3007 3008设置应用为当前页面接收到新的favicon时的回调函数。 3009 3010**参数:** 3011 3012| 参数名 | 参数类型 | 参数描述 | 3013| ------- | ---------------------------------------------- | ----------------------------------- | 3014| favicon | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 接收到的favicon图标的PixelMap对象。 | 3015 3016**示例:** 3017 3018 ```ts 3019 // xxx.ets 3020 import web_webview from '@ohos.web.webview' 3021 import image from "@ohos.multimedia.image" 3022 @Entry 3023 @Component 3024 struct WebComponent { 3025 controller: web_webview.WebviewController = new web_webview.WebviewController() 3026 @State icon: image.PixelMap = undefined; 3027 build() { 3028 Column() { 3029 Web({ src:'www.example.com', controller: this.controller }) 3030 .onFaviconReceived((event) => { 3031 console.log('onFaviconReceived'); 3032 this.icon = event.favicon; 3033 }) 3034 } 3035 } 3036 } 3037 ``` 3038 3039### onRequestSelected 3040 3041onRequestSelected(callback: () => void) 3042 3043当Web组件获得焦点时触发该回调。 3044 3045**示例:** 3046 3047 ```ts 3048 // xxx.ets 3049 import web_webview from '@ohos.web.webview' 3050 3051 @Entry 3052 @Component 3053 struct WebComponent { 3054 controller: web_webview.WebviewController = new web_webview.WebviewController() 3055 3056 build() { 3057 Column() { 3058 Web({ src: 'www.example.com', controller: this.controller }) 3059 .onRequestSelected(() => { 3060 console.log('onRequestSelected') 3061 }) 3062 } 3063 } 3064 } 3065 ``` 3066 3067## ConsoleMessage 3068 3069Web组件获取控制台信息对象。示例代码参考[onConsole事件](#onconsole)。 3070 3071### getLineNumber 3072 3073getLineNumber(): number 3074 3075获取ConsoleMessage的行数。 3076 3077**返回值:** 3078 3079| 类型 | 说明 | 3080| ------ | -------------------- | 3081| number | 返回ConsoleMessage的行数。 | 3082 3083### getMessage 3084 3085getMessage(): string 3086 3087获取ConsoleMessage的日志信息。 3088 3089**返回值:** 3090 3091| 类型 | 说明 | 3092| ------ | ---------------------- | 3093| string | 返回ConsoleMessage的日志信息。 | 3094 3095### getMessageLevel 3096 3097getMessageLevel(): MessageLevel 3098 3099获取ConsoleMessage的信息级别。 3100 3101**返回值:** 3102 3103| 类型 | 说明 | 3104| --------------------------------- | ---------------------- | 3105| [MessageLevel](#messagelevel枚举说明) | 返回ConsoleMessage的信息级别。 | 3106 3107### getSourceId 3108 3109getSourceId(): string 3110 3111获取网页源文件路径和名字。 3112 3113**返回值:** 3114 3115| 类型 | 说明 | 3116| ------ | ------------- | 3117| string | 返回网页源文件路径和名字。 | 3118 3119## JsResult 3120 3121Web组件返回的弹窗确认或弹窗取消功能对象。示例代码参考[onAlert事件](#onalert)。 3122 3123### handleCancel 3124 3125handleCancel(): void 3126 3127通知Web组件用户取消弹窗操作。 3128 3129### handleConfirm 3130 3131handleConfirm(): void 3132 3133通知Web组件用户确认弹窗操作。 3134 3135### handlePromptConfirm<sup>9+</sup> 3136 3137handlePromptConfirm(result: string): void 3138 3139通知Web组件用户确认弹窗操作及对话框内容。 3140 3141**参数:** 3142 3143| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3144| ------ | ------ | ---- | ---- | ----------- | 3145| result | string | 是 | - | 用户输入的对话框内容。 | 3146 3147## FullScreenExitHandler<sup>9+</sup> 3148 3149通知开发者Web组件退出全屏。示例代码参考[onFullScreenEnter事件](#onfullscreenenter9)。 3150 3151### exitFullScreen<sup>9+</sup> 3152 3153exitFullScreen(): void 3154 3155通知开发者Web组件退出全屏。 3156 3157## ControllerHandler<sup>9+</sup> 3158 3159设置用户新建web组件的的WebviewController对象。示例代码参考[onWindowNew事件](#onwindownew9)。 3160 3161### setWebController<sup>9+</sup> 3162 3163setWebController(controller: WebviewController): void 3164 3165设置WebviewController对象,如果不需要打开新窗口请设置为null。 3166 3167**参数:** 3168 3169| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3170| ---------- | ------------- | ---- | ---- | ------------------------- | 3171| controller | [WebviewController](../apis/js-apis-webview.md#webviewcontroller) | 是 | - | 新建web组件的的WebviewController对象,如果不需要打开新窗口请设置为null。 | 3172 3173## WebResourceError 3174 3175web组件资源管理错误信息对象。示例代码参考[onErrorReceive事件](#onerrorreceive)。 3176 3177### getErrorCode 3178 3179getErrorCode(): number 3180 3181获取加载资源的错误码。 3182 3183**返回值:** 3184 3185| 类型 | 说明 | 3186| ------ | ----------- | 3187| number | 返回加载资源的错误码。 | 3188 3189### getErrorInfo 3190 3191getErrorInfo(): string 3192 3193获取加载资源的错误信息。 3194 3195**返回值:** 3196 3197| 类型 | 说明 | 3198| ------ | ------------ | 3199| string | 返回加载资源的错误信息。 | 3200 3201## WebResourceRequest 3202 3203web组件获取资源请求对象。示例代码参考[onErrorReceive事件](#onerrorreceive)。 3204 3205### getRequestHeader 3206 3207getResponseHeader() : Array\<Header\> 3208 3209获取资源请求头信息。 3210 3211**返回值:** 3212 3213| 类型 | 说明 | 3214| -------------------------- | ---------- | 3215| Array\<[Header](#header)\> | 返回资源请求头信息。 | 3216 3217### getRequestUrl 3218 3219getRequestUrl(): string 3220 3221获取资源请求的URL信息。 3222 3223**返回值:** 3224 3225| 类型 | 说明 | 3226| ------ | ------------- | 3227| string | 返回资源请求的URL信息。 | 3228 3229### isMainFrame 3230 3231isMainFrame(): boolean 3232 3233判断资源请求是否为主frame。 3234 3235**返回值:** 3236 3237| 类型 | 说明 | 3238| ------- | ---------------- | 3239| boolean | 返回资源请求是否为主frame。 | 3240 3241### isRedirect 3242 3243isRedirect(): boolean 3244 3245判断资源请求是否被服务端重定向。 3246 3247**返回值:** 3248 3249| 类型 | 说明 | 3250| ------- | ---------------- | 3251| boolean | 返回资源请求是否被服务端重定向。 | 3252 3253### isRequestGesture 3254 3255isRequestGesture(): boolean 3256 3257获取资源请求是否与手势(如点击)相关联。 3258 3259**返回值:** 3260 3261| 类型 | 说明 | 3262| ------- | -------------------- | 3263| boolean | 返回资源请求是否与手势(如点击)相关联。 | 3264 3265### getRequestMethod<sup>9+</sup> 3266 3267getRequestMethod(): string 3268 3269获取请求方法。 3270 3271**返回值:** 3272 3273| 类型 | 说明 | 3274| ------- | -------------------- | 3275| string | 返回请求方法。 | 3276 3277## Header 3278 3279Web组件返回的请求/响应头对象。 3280 3281| 名称 | 类型 | 描述 | 3282| ----------- | ------ | ------------- | 3283| headerKey | string | 请求/响应头的key。 | 3284| headerValue | string | 请求/响应头的value。 | 3285 3286 3287## WebResourceResponse 3288 3289web组件资源响应对象。示例代码参考[onHttpErrorReceive事件](#onhttperrorreceive)。 3290 3291### getReasonMessage 3292 3293getReasonMessage(): string 3294 3295获取资源响应的状态码描述。 3296 3297**返回值:** 3298 3299| 类型 | 说明 | 3300| ------ | ------------- | 3301| string | 返回资源响应的状态码描述。 | 3302 3303### getResponseCode 3304 3305getResponseCode(): number 3306 3307获取资源响应的状态码。 3308 3309**返回值:** 3310 3311| 类型 | 说明 | 3312| ------ | ----------- | 3313| number | 返回资源响应的状态码。 | 3314 3315### getResponseData 3316 3317getResponseData(): string 3318 3319获取资源响应数据。 3320 3321**返回值:** 3322 3323| 类型 | 说明 | 3324| ------ | --------- | 3325| string | 返回资源响应数据。 | 3326 3327### getResponseEncoding 3328 3329getResponseEncoding(): string 3330 3331获取资源响应的编码。 3332 3333**返回值:** 3334 3335| 类型 | 说明 | 3336| ------ | ---------- | 3337| string | 返回资源响应的编码。 | 3338 3339### getResponseHeader 3340 3341getResponseHeader() : Array\<Header\> 3342 3343获取资源响应头。 3344 3345**返回值:** 3346 3347| 类型 | 说明 | 3348| -------------------------- | -------- | 3349| Array\<[Header](#header)\> | 返回资源响应头。 | 3350 3351### getResponseMimeType 3352 3353getResponseMimeType(): string 3354 3355获取资源响应的媒体(MIME)类型。 3356 3357**返回值:** 3358 3359| 类型 | 说明 | 3360| ------ | ------------------ | 3361| string | 返回资源响应的媒体(MIME)类型。 | 3362 3363### setResponseData<sup>9+</sup> 3364 3365setResponseData(data: string | number) 3366 3367设置资源响应数据。 3368 3369**参数:** 3370 3371| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3372| ------ | ---------------- | ---- | ------ | ------------------------------------------------------------ | 3373| data | string \| number | 是 | - | 要设置的资源响应数据。string表示输入类型是字符串,number表示输入类型是文件句柄。 | 3374 3375### setResponseEncoding<sup>9+</sup> 3376 3377setResponseEncoding(encoding: string) 3378 3379设置资源响应的编码。 3380 3381**参数:** 3382 3383| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3384| -------- | ------ | ---- | ---- | ------------ | 3385| encoding | string | 是 | - | 要设置的资源响应的编码。 | 3386 3387### setResponseMimeType<sup>9+</sup> 3388 3389setResponseMimeType(mimeType: string) 3390 3391设置资源响应的媒体(MIME)类型。 3392 3393**参数:** 3394 3395| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3396| -------- | ------ | ---- | ---- | -------------------- | 3397| mimeType | string | 是 | - | 要设置的资源响应的媒体(MIME)类型。 | 3398 3399### setReasonMessage<sup>9+</sup> 3400 3401setReasonMessage(reason: string) 3402 3403设置资源响应的状态码描述。 3404 3405**参数:** 3406 3407| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3408| ------ | ------ | ---- | ---- | --------------- | 3409| reason | string | 是 | - | 要设置的资源响应的状态码描述。 | 3410 3411### setResponseHeader<sup>9+</sup> 3412 3413setResponseHeader(header: Array\<Header\>) 3414 3415设置资源响应头。 3416 3417**参数:** 3418 3419| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3420| ------ | -------------------------- | ---- | ---- | ---------- | 3421| header | Array\<[Header](#header)\> | 是 | - | 要设置的资源响应头。 | 3422 3423### setResponseCode<sup>9+</sup> 3424 3425setResponseCode(code: number) 3426 3427设置资源响应的状态码。 3428 3429**参数:** 3430 3431| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3432| ---- | ------ | ---- | ---- | ------------- | 3433| code | number | 是 | - | 要设置的资源响应的状态码。 | 3434 3435### setResponseIsReady<sup>9+</sup> 3436 3437setResponseIsReady(IsReady: boolean) 3438 3439设置资源响应数据是否已经就绪。 3440 3441**参数:** 3442 3443| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3444| ------- | -------- | ---- | ------ | -------------------------- | 3445| IsReady | boolean | 是 | true | 资源响应数据是否已经就绪。 | 3446 3447## FileSelectorResult<sup>9+</sup> 3448 3449通知Web组件的文件选择结果。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。 3450 3451### handleFileList<sup>9+</sup> 3452 3453handleFileList(fileList: Array\<string\>): void 3454 3455通知Web组件进行文件选择操作。 3456 3457**参数:** 3458 3459| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3460| -------- | --------------- | ---- | ---- | ------------ | 3461| fileList | Array\<string\> | 是 | - | 需要进行操作的文件列表。 | 3462 3463## FileSelectorParam<sup>9+</sup> 3464 3465web组件获取文件对象。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。 3466 3467### getTitle<sup>9+</sup> 3468 3469getTitle(): string 3470 3471获取文件选择器标题。 3472 3473**返回值:** 3474 3475| 类型 | 说明 | 3476| ------ | -------- | 3477| string | 返回文件选择器标题。 | 3478 3479### getMode<sup>9+</sup> 3480 3481getMode(): FileSelectorMode 3482 3483获取文件选择器的模式。 3484 3485**返回值:** 3486 3487| 类型 | 说明 | 3488| ---------------------------------------- | ----------- | 3489| [FileSelectorMode](#fileselectormode枚举说明) | 返回文件选择器的模式。 | 3490 3491### getAcceptType<sup>9+</sup> 3492 3493getAcceptType(): Array\<string\> 3494 3495获取文件过滤类型。 3496 3497**返回值:** 3498 3499| 类型 | 说明 | 3500| --------------- | --------- | 3501| Array\<string\> | 返回文件过滤类型。 | 3502 3503### isCapture<sup>9+</sup> 3504 3505isCapture(): boolean 3506 3507获取是否调用多媒体能力。 3508 3509**返回值:** 3510 3511| 类型 | 说明 | 3512| ------- | ------------ | 3513| boolean | 返回是否调用多媒体能力。 | 3514 3515## HttpAuthHandler<sup>9+</sup> 3516 3517Web组件返回的http auth认证请求确认或取消和使用缓存密码认证功能对象。示例代码参考[onHttpAuthRequest事件](#onhttpauthrequest9)。 3518 3519### cancel<sup>9+</sup> 3520 3521cancel(): void 3522 3523通知Web组件用户取消HTTP认证操作。 3524 3525### confirm<sup>9+</sup> 3526 3527confirm(userName: string, pwd: string): boolean 3528 3529使用用户名和密码进行HTTP认证操作。 3530 3531**参数:** 3532 3533| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3534| -------- | ------ | ---- | ---- | ---------- | 3535| userName | string | 是 | - | HTTP认证用户名。 | 3536| pwd | string | 是 | - | HTTP认证密码。 | 3537 3538**返回值:** 3539 3540| 类型 | 说明 | 3541| ------- | --------------------- | 3542| boolean | 认证成功返回true,失败返回false。 | 3543 3544### isHttpAuthInfoSaved<sup>9+</sup> 3545 3546isHttpAuthInfoSaved(): boolean 3547 3548通知Web组件用户使用服务器缓存的帐号密码认证。 3549 3550**返回值:** 3551 3552| 类型 | 说明 | 3553| ------- | ------------------------- | 3554| boolean | 存在密码认证成功返回true,其他返回false。 | 3555 3556## SslErrorHandler<sup>9+</sup> 3557 3558Web组件返回的SSL错误通知事件用户处理功能对象。示例代码参考[onSslErrorEventReceive事件](#onsslerroreventreceive9)。 3559 3560### handleCancel<sup>9+</sup> 3561 3562handleCancel(): void 3563 3564通知Web组件取消此请求。 3565 3566### handleConfirm<sup>9+</sup> 3567 3568handleConfirm(): void 3569 3570通知Web组件继续使用SSL证书。 3571 3572## ClientAuthenticationHandler<sup>9+</sup> 3573 3574Web组件返回的SSL客户端证书请求事件用户处理功能对象。示例代码参考[onClientAuthenticationRequest事件](#onclientauthenticationrequest9)。 3575 3576### confirm<sup>9+</sup> 3577 3578confirm(priKeyFile : string, certChainFile : string): void 3579 3580通知Web组件使用指定的私钥和客户端证书链。 3581 3582**参数:** 3583 3584| 参数名 | 参数类型 | 必填 | 参数描述 | 3585| ------------- | ------ | ---- | ------------------ | 3586| priKeyFile | string | 是 | 存放私钥的文件,包含路径和文件名。 | 3587| certChainFile | string | 是 | 存放证书链的文件,包含路径和文件名。 | 3588 3589### cancel<sup>9+</sup> 3590 3591cancel(): void 3592 3593通知Web组件取消相同host和port服务器发送的客户端证书请求事件。同时,相同host和port服务器的请求,不重复上报该事件。 3594 3595### ignore<sup>9+</sup> 3596 3597ignore(): void 3598 3599通知Web组件忽略本次请求。 3600 3601## PermissionRequest<sup>9+</sup> 3602 3603Web组件返回授权或拒绝权限功能的对象。示例代码参考[onPermissionRequest事件](#onpermissionrequest9)。 3604 3605### deny<sup>9+</sup> 3606 3607deny(): void 3608 3609拒绝网页所请求的权限。 3610 3611### getOrigin<sup>9+</sup> 3612 3613getOrigin(): string 3614 3615获取网页来源。 3616 3617**返回值:** 3618 3619| 类型 | 说明 | 3620| ------ | ------------ | 3621| string | 当前请求权限网页的来源。 | 3622 3623### getAccessibleResource<sup>9+</sup> 3624 3625getAccessibleResource(): Array\<string\> 3626 3627获取网页所请求的权限资源列表,资源列表类型参考[ProtectedResourceType](#protectedresourcetype9枚举说明)。 3628 3629**返回值:** 3630 3631| 类型 | 说明 | 3632| --------------- | ------------- | 3633| Array\<string\> | 网页所请求的权限资源列表。 | 3634 3635### grant<sup>9+</sup> 3636 3637grant(resources: Array\<string\>): void 3638 3639对网页访问的给定权限进行授权。 3640 3641**参数:** 3642 3643| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3644| --------- | --------------- | ---- | ---- | ------------- | 3645| resources | Array\<string\> | 是 | - | 授予网页请求的权限的资源列表。 | 3646 3647## ContextMenuSourceType<sup>9+</sup>枚举说明 3648| 名称 | 描述 | 3649| -------------------- | ---------- | 3650| None | 其他事件来源。 | 3651| Mouse | 鼠标事件。 | 3652| LongPress | 长按事件。 | 3653 3654## ContextMenuMediaType<sup>9+</sup>枚举说明 3655 3656| 名称 | 描述 | 3657| ------------ | ----------- | 3658| None | 非特殊媒体或其他媒体类型。 | 3659| Image | 图片。 | 3660 3661## ContextMenuInputFieldType<sup>9+</sup>枚举说明 3662 3663| 名称 | 描述 | 3664| ------------ | ----------- | 3665| None | 非输入框。 | 3666| PlainText | 纯文本类型,包括text、search、email等。 | 3667| Password | 密码类型。 | 3668| Number | 数字类型。 | 3669| Telephone | 电话号码类型。 | 3670| Other | 其他类型。 | 3671 3672## ContextMenuEditStateFlags<sup>9+</sup>枚举说明 3673 3674| 名称 | 描述 | 3675| ------------ | ----------- | 3676| NONE | 不可编辑。 | 3677| CAN_CUT | 支持剪切。 | 3678| CAN_COPY | 支持拷贝。 | 3679| CAN_PASTE | 支持粘贴。 | 3680| CAN_SELECT_ALL | 支持全选。 | 3681 3682## WebContextMenuParam<sup>9+</sup> 3683 3684实现长按页面元素或鼠标右键弹出来的菜单信息。示例代码参考[onContextMenuShow事件](#oncontextmenushow9)。 3685 3686### x<sup>9+</sup> 3687 3688x(): number 3689 3690弹出菜单的x坐标。 3691 3692**返回值:** 3693 3694| 类型 | 说明 | 3695| ------ | ------------------ | 3696| number | 显示正常返回非负整数,否则返回-1。 | 3697 3698### y<sup>9+</sup> 3699 3700y(): number 3701 3702弹出菜单的y坐标。 3703 3704**返回值:** 3705 3706| 类型 | 说明 | 3707| ------ | ------------------ | 3708| number | 显示正常返回非负整数,否则返回-1。 | 3709 3710### getLinkUrl<sup>9+</sup> 3711 3712getLinkUrl(): string 3713 3714获取链接地址。 3715 3716**返回值:** 3717 3718| 类型 | 说明 | 3719| ------ | ------------------------- | 3720| string | 如果长按位置是链接,返回经过安全检查的url链接。 | 3721 3722### getUnfilteredLinkUrl<sup>9+</sup> 3723 3724getUnfilteredLinkUrl(): string 3725 3726获取链接地址。 3727 3728**返回值:** 3729 3730| 类型 | 说明 | 3731| ------ | --------------------- | 3732| string | 如果长按位置是链接,返回原始的url链接。 | 3733 3734### getSourceUrl<sup>9+</sup> 3735 3736getSourceUrl(): string 3737 3738获取sourceUrl链接。 3739 3740**返回值:** 3741 3742| 类型 | 说明 | 3743| ------ | ------------------------ | 3744| string | 如果选中的元素有src属性,返回src的url。 | 3745 3746### existsImageContents<sup>9+</sup> 3747 3748existsImageContents(): boolean 3749 3750是否存在图像内容。 3751 3752**返回值:** 3753 3754| 类型 | 说明 | 3755| ------- | ------------------------- | 3756| boolean | 长按位置中有图片返回true,否则返回false。 | 3757 3758### getMediaType<sup>9+</sup> 3759 3760getMediaType(): ContextMenuMediaType 3761 3762获取网页元素媒体类型。 3763 3764**返回值:** 3765 3766| 类型 | 说明 | 3767| ---------------------------------------- | ----------- | 3768| [ContextMenuMediaType](#contextmenumediatype9枚举说明) | 网页元素媒体类型。 | 3769 3770### getSelectionText<sup>9+</sup> 3771 3772getSelectionText(): string 3773 3774获取选中文本。 3775 3776**返回值:** 3777 3778| 类型 | 说明 | 3779| ------- | ------------------------- | 3780| string | 菜单上下文选中文本内容,不存在则返回空。 | 3781 3782### getSourceType<sup>9+</sup> 3783 3784getSourceType(): ContextMenuSourceType 3785 3786获取菜单事件来源。 3787 3788**返回值:** 3789 3790| 类型 | 说明 | 3791| ---------------------------------------- | ----------- | 3792| [ContextMenuSourceType](#contextmenusourcetype9枚举说明) | 菜单事件来源。 | 3793 3794### getInputFieldType<sup>9+</sup> 3795 3796getInputFieldType(): ContextMenuInputFieldType 3797 3798获取网页元素输入框类型。 3799 3800**返回值:** 3801 3802| 类型 | 说明 | 3803| ---------------------------------------- | ----------- | 3804| [ContextMenuInputFieldType](#contextmenuinputfieldtype9枚举说明) | 输入框类型。 | 3805 3806### isEditable<sup>9+</sup> 3807 3808isEditable(): boolean 3809 3810获取网页元素是否可编辑标识。 3811 3812**返回值:** 3813 3814| 类型 | 说明 | 3815| ------- | ------------------------- | 3816| boolean | 网页元素可编辑返回true,不可编辑返回false。 | 3817 3818### getEditStateFlags<sup>9+</sup> 3819 3820getEditStateFlags(): number 3821 3822获取网页元素可编辑标识。 3823 3824**返回值:** 3825 3826| 类型 | 说明 | 3827| ------- | ------------------------- | 3828| number | 网页元素可编辑标识,参照[ContextMenuEditStateFlags](#contextmenueditstateflags9枚举说明)。 | 3829 3830## WebContextMenuResult<sup>9+</sup> 3831 3832实现长按页面元素或鼠标右键弹出来的菜单所执行的响应事件。示例代码参考[onContextMenuShow事件](#oncontextmenushow9)。 3833 3834### closeContextMenu<sup>9+</sup> 3835 3836closeContextMenu(): void 3837 3838不执行WebContextMenuResult其他接口操作时,需要调用此接口关闭菜单。 3839 3840### copyImage<sup>9+</sup> 3841 3842copyImage(): void 3843 3844WebContextMenuParam有图片内容则复制图片。 3845 3846### copy<sup>9+</sup> 3847 3848copy(): void 3849 3850执行与此上下文菜单相关的拷贝操作。 3851 3852### paste<sup>9+</sup> 3853 3854paste(): void 3855 3856执行与此上下文菜单相关的粘贴操作。 3857 3858### cut<sup>9+</sup> 3859 3860cut(): void 3861 3862执行与此上下文菜单相关的剪切操作。 3863 3864### selectAll<sup>9+</sup> 3865 3866selectAll(): void 3867 3868执行与此上下文菜单相关的全选操作。 3869 3870## JsGeolocation 3871 3872Web组件返回授权或拒绝权限功能的对象。示例代码参考[onGeolocationShow事件](#ongeolocationshow)。 3873 3874### invoke 3875 3876invoke(origin: string, allow: boolean, retain: boolean): void 3877 3878设置网页地理位置权限状态。 3879 3880**参数:** 3881 3882| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 3883| ------ | ------- | ---- | ---- | ---------------------------------------- | 3884| origin | string | 是 | - | 指定源的字符串索引。 | 3885| allow | boolean | 是 | - | 设置的地理位置权限状态。 | 3886| retain | boolean | 是 | - | 是否允许将地理位置权限状态保存到系统中。可通过[GeolocationPermissions<sup>9+</sup>](../apis/js-apis-webview.md#geolocationpermissions)接口管理保存到系统的地理位置权限。 | 3887 3888## MessageLevel枚举说明 3889 3890| 名称 | 描述 | 3891| ----- | :---- | 3892| Debug | 调试级别。 | 3893| Error | 错误级别。 | 3894| Info | 消息级别。 | 3895| Log | 日志级别。 | 3896| Warn | 警告级别。 | 3897 3898## RenderExitReason枚举说明 3899 3900onRenderExited接口返回的渲染进程退出的具体原因。 3901 3902| 名称 | 描述 | 3903| -------------------------- | ----------------- | 3904| ProcessAbnormalTermination | 渲染进程异常退出。 | 3905| ProcessWasKilled | 收到SIGKILL,或被手动终止。 | 3906| ProcessCrashed | 渲染进程崩溃退出,如段错误。 | 3907| ProcessOom | 程序内存不足。 | 3908| ProcessExitUnknown | 其他原因。 | 3909 3910## MixedMode枚举说明 3911 3912| 名称 | 描述 | 3913| ---------- | ---------------------------------- | 3914| All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 | 3915| Compatible | 混合内容兼容性模式,部分不安全的内容可能被加载。 | 3916| None | 不允许加载HTTP和HTTPS混合内容。 | 3917 3918## CacheMode枚举说明 3919| 名称 | 描述 | 3920| ------- | ------------------------------------ | 3921| Default | 使用未过期的cache加载资源,如果cache中无该资源则从网络中获取。 | 3922| None | 加载资源使用cache,如果cache中无该资源则从网络中获取。 | 3923| Online | 加载资源不使用cache,全部从网络中获取。 | 3924| Only | 只从cache中加载资源。 | 3925 3926## FileSelectorMode枚举说明 3927| 名称 | 描述 | 3928| -------------------- | ---------- | 3929| FileOpenMode | 打开上传单个文件。 | 3930| FileOpenMultipleMode | 打开上传多个文件。 | 3931| FileOpenFolderMode | 打开上传文件夹模式。 | 3932| FileSaveMode | 文件保存模式。 | 3933 3934 ## HitTestType枚举说明 3935 3936| 名称 | 描述 | 3937| ------------- | ------------------------ | 3938| EditText | 可编辑的区域。 | 3939| Email | 电子邮件地址。 | 3940| HttpAnchor | 超链接,其src为http。 | 3941| HttpAnchorImg | 带有超链接的图片,其中超链接的src为http。 | 3942| Img | HTML::img标签。 | 3943| Map | 地理地址。 | 3944| Phone | 电话号码。 | 3945| Unknown | 未知内容。 | 3946 3947## SslError<sup>9+</sup>枚举说明 3948 3949onSslErrorEventReceive接口返回的SSL错误的具体原因。 3950 3951| 名称 | 描述 | 3952| ------------ | ----------- | 3953| Invalid | 一般错误。 | 3954| HostMismatch | 主机名不匹配。 | 3955| DateInvalid | 证书日期无效。 | 3956| Untrusted | 证书颁发机构不受信任。 | 3957 3958## ProtectedResourceType<sup>9+</sup>枚举说明 3959 3960| 名称 | 描述 | 备注 | 3961| --------- | ------------- | -------------------------- | 3962| MidiSysex | MIDI SYSEX资源。 | 目前仅支持权限事件上报,MIDI设备的使用还未支持。 | 3963 3964## WebDarkMode<sup>9+</sup>枚举说明 3965| 名称 | 描述 | 3966| ------- | ------------------------------------ | 3967| Off | Web深色模式关闭。 | 3968| On | Web深色模式开启。 | 3969| Auto | Web深色模式跟随系统。 | 3970 3971## DataResubmissionHandler<sup>9+</sup> 3972 3973通过DataResubmissionHandler可以重新提交表单数据或取消提交表单数据。 3974 3975### resend<sup>9+</sup> 3976 3977resend(): void 3978 3979重新发送表单数据。 3980 3981**示例:** 3982 3983 ```ts 3984 // xxx.ets 3985 import web_webview from '@ohos.web.webview' 3986 @Entry 3987 @Component 3988 struct WebComponent { 3989 controller: web_webview.WebviewController = new web_webview.WebviewController() 3990 build() { 3991 Column() { 3992 Web({ src:'www.example.com', controller: this.controller }) 3993 .onDataResubmitted((event) => { 3994 console.log('onDataResubmitted') 3995 event.handler.resend(); 3996 }) 3997 } 3998 } 3999 } 4000 ``` 4001 4002### cancel<sup>9+</sup> 4003 4004cancel(): void 4005 4006取消重新发送表单数据。 4007 4008**示例:** 4009 4010 ```ts 4011 // xxx.ets 4012 import web_webview from '@ohos.web.webview' 4013 @Entry 4014 @Component 4015 struct WebComponent { 4016 controller: web_webview.WebviewController = new web_webview.WebviewController() 4017 build() { 4018 Column() { 4019 Web({ src:'www.example.com', controller: this.controller }) 4020 .onDataResubmitted((event) => { 4021 console.log('onDataResubmitted') 4022 event.handler.cancel(); 4023 }) 4024 } 4025 } 4026 } 4027 ``` 4028 4029 ## WebController 4030 4031通过WebController可以控制Web组件各种行为。一个WebController对象只能控制一个Web组件,且必须在Web组件和WebController绑定后,才能调用WebController上的方法。 4032 4033从API version 9开始不再维护,建议使用[WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller)代替。 4034 4035### 创建对象 4036 4037``` 4038webController: WebController = new WebController() 4039``` 4040 4041### getCookieManager<sup>9+</sup> 4042 4043getCookieManager(): WebCookie 4044 4045获取web组件cookie管理对象。 4046 4047**返回值:** 4048 4049| 类型 | 说明 | 4050| --------- | ---------------------------------------- | 4051| WebCookie | web组件cookie管理对象,参考[WebCookie](#webcookiedeprecated)定义。 | 4052 4053**示例:** 4054 4055 ```ts 4056 // xxx.ets 4057 @Entry 4058 @Component 4059 struct WebComponent { 4060 controller: WebController = new WebController() 4061 4062 build() { 4063 Column() { 4064 Button('getCookieManager') 4065 .onClick(() => { 4066 let cookieManager = this.controller.getCookieManager() 4067 }) 4068 Web({ src: 'www.example.com', controller: this.controller }) 4069 } 4070 } 4071 } 4072 ``` 4073 4074### requestFocus<sup>(deprecated)</sup> 4075 4076requestFocus() 4077 4078使当前web页面获取焦点。 4079 4080从API version 9开始不再维护,建议使用[requestFocus<sup>9+</sup>](../apis/js-apis-webview.md#requestfocus)代替。 4081 4082**示例:** 4083 4084 ```ts 4085 // xxx.ets 4086 @Entry 4087 @Component 4088 struct WebComponent { 4089 controller: WebController = new WebController() 4090 4091 build() { 4092 Column() { 4093 Button('requestFocus') 4094 .onClick(() => { 4095 this.controller.requestFocus() 4096 }) 4097 Web({ src: 'www.example.com', controller: this.controller }) 4098 } 4099 } 4100 } 4101 ``` 4102 4103### accessBackward<sup>(deprecated)</sup> 4104 4105accessBackward(): boolean 4106 4107当前页面是否可后退,即当前页面是否有返回历史记录。 4108 4109从API version 9开始不再维护,建议使用[accessBackward<sup>9+</sup>](../apis/js-apis-webview.md#accessbackward)代替。 4110 4111**返回值:** 4112 4113| 类型 | 说明 | 4114| ------- | --------------------- | 4115| boolean | 可以后退返回true,否则返回false。 | 4116 4117**示例:** 4118 4119 ```ts 4120 // xxx.ets 4121 @Entry 4122 @Component 4123 struct WebComponent { 4124 controller: WebController = new WebController() 4125 4126 build() { 4127 Column() { 4128 Button('accessBackward') 4129 .onClick(() => { 4130 let result = this.controller.accessBackward() 4131 console.log('result:' + result) 4132 }) 4133 Web({ src: 'www.example.com', controller: this.controller }) 4134 } 4135 } 4136 } 4137 ``` 4138 4139### accessForward<sup>(deprecated)</sup> 4140 4141accessForward(): boolean 4142 4143当前页面是否可前进,即当前页面是否有前进历史记录。 4144 4145从API version 9开始不再维护,建议使用[accessForward<sup>9+</sup>](../apis/js-apis-webview.md#accessforward)代替。 4146 4147**返回值:** 4148 4149| 类型 | 说明 | 4150| ------- | --------------------- | 4151| boolean | 可以前进返回true,否则返回false。 | 4152 4153**示例:** 4154 4155 ```ts 4156 // xxx.ets 4157 @Entry 4158 @Component 4159 struct WebComponent { 4160 controller: WebController = new WebController() 4161 4162 build() { 4163 Column() { 4164 Button('accessForward') 4165 .onClick(() => { 4166 let result = this.controller.accessForward() 4167 console.log('result:' + result) 4168 }) 4169 Web({ src: 'www.example.com', controller: this.controller }) 4170 } 4171 } 4172 } 4173 ``` 4174 4175### accessStep<sup>(deprecated)</sup> 4176 4177accessStep(step: number): boolean 4178 4179当前页面是否可前进或者后退给定的step步。 4180 4181从API version 9开始不再维护,建议使用[accessStep<sup>9+</sup>](../apis/js-apis-webview.md#accessstep)代替。 4182 4183**参数:** 4184 4185| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 4186| ---- | ------ | ---- | ---- | --------------------- | 4187| step | number | 是 | - | 要跳转的步数,正数代表前进,负数代表后退。 | 4188 4189**返回值:** 4190 4191| 类型 | 说明 | 4192| ------- | --------- | 4193| boolean | 页面是否前进或后退 | 4194 4195**示例:** 4196 4197 ```ts 4198 // xxx.ets 4199 @Entry 4200 @Component 4201 struct WebComponent { 4202 controller: WebController = new WebController() 4203 @State steps: number = 2 4204 4205 build() { 4206 Column() { 4207 Button('accessStep') 4208 .onClick(() => { 4209 let result = this.controller.accessStep(this.steps) 4210 console.log('result:' + result) 4211 }) 4212 Web({ src: 'www.example.com', controller: this.controller }) 4213 } 4214 } 4215 } 4216 ``` 4217 4218### backward<sup>(deprecated)</sup> 4219 4220backward(): void 4221 4222按照历史栈,后退一个页面。一般结合accessBackward一起使用。 4223 4224从API version 9开始不再维护,建议使用[backward<sup>9+</sup>](../apis/js-apis-webview.md#backward)代替。 4225 4226**示例:** 4227 4228 ```ts 4229 // xxx.ets 4230 @Entry 4231 @Component 4232 struct WebComponent { 4233 controller: WebController = new WebController() 4234 4235 build() { 4236 Column() { 4237 Button('backward') 4238 .onClick(() => { 4239 this.controller.backward() 4240 }) 4241 Web({ src: 'www.example.com', controller: this.controller }) 4242 } 4243 } 4244 } 4245 ``` 4246 4247### forward<sup>(deprecated)</sup> 4248 4249forward(): void 4250 4251按照历史栈,前进一个页面。一般结合accessForward一起使用。 4252 4253从API version 9开始不再维护,建议使用[forward<sup>9+</sup>](../apis/js-apis-webview.md#forward)代替。 4254 4255**示例:** 4256 4257 ```ts 4258 // xxx.ets 4259 @Entry 4260 @Component 4261 struct WebComponent { 4262 controller: WebController = new WebController() 4263 4264 build() { 4265 Column() { 4266 Button('forward') 4267 .onClick(() => { 4268 this.controller.forward() 4269 }) 4270 Web({ src: 'www.example.com', controller: this.controller }) 4271 } 4272 } 4273 } 4274 ``` 4275 4276### deleteJavaScriptRegister<sup>(deprecated)</sup> 4277 4278deleteJavaScriptRegister(name: string) 4279 4280删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。删除后立即生效,无须调用[refresh](#refreshdeprecated)接口。 4281 4282从API version 9开始不再维护,建议使用[deleteJavaScriptRegister<sup>9+</sup>](../apis/js-apis-webview.md#deletejavascriptregister)代替。 4283 4284**参数:** 4285 4286| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 4287| ---- | ------ | ---- | ---- | ---------------------------------------- | 4288| name | string | 是 | - | 注册对象的名称,可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。 | 4289 4290**示例:** 4291 4292 ```ts 4293 // xxx.ets 4294 @Entry 4295 @Component 4296 struct WebComponent { 4297 controller: WebController = new WebController() 4298 @State name: string = 'Object' 4299 4300 build() { 4301 Column() { 4302 Button('deleteJavaScriptRegister') 4303 .onClick(() => { 4304 this.controller.deleteJavaScriptRegister(this.name) 4305 }) 4306 Web({ src: 'www.example.com', controller: this.controller }) 4307 } 4308 } 4309 } 4310 ``` 4311 4312### getHitTest<sup>(deprecated)</sup> 4313 4314getHitTest(): HitTestType 4315 4316获取当前被点击区域的元素类型。 4317 4318从API version 9开始不再维护,建议使用[getHitTest<sup>9+</sup>](../apis/js-apis-webview.md#gethittest)代替。 4319 4320**返回值:** 4321 4322| 类型 | 说明 | 4323| ------------------------------- | ----------- | 4324| [HitTestType](#hittesttype枚举说明) | 被点击区域的元素类型。 | 4325 4326**示例:** 4327 4328 ```ts 4329 // xxx.ets 4330 @Entry 4331 @Component 4332 struct WebComponent { 4333 controller: WebController = new WebController() 4334 4335 build() { 4336 Column() { 4337 Button('getHitTest') 4338 .onClick(() => { 4339 let hitType = this.controller.getHitTest() 4340 console.log("hitType: " + hitType) 4341 }) 4342 Web({ src: 'www.example.com', controller: this.controller }) 4343 } 4344 } 4345 } 4346 ``` 4347 4348### loadData<sup>(deprecated)</sup> 4349 4350loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }) 4351 4352baseUrl为空时,通过”data“协议加载指定的一段字符串。 4353 4354当baseUrl为”data“协议时,编码后的data字符串将被Web组件作为”data"协议加载。 4355 4356当baseUrl为“http/https"协议时,编码后的data字符串将被Web组件以类似loadUrl的方式以非编码字符串处理。 4357 4358从API version 9开始不再维护,建议使用[loadData<sup>9+</sup>](../apis/js-apis-webview.md#loaddata)代替。 4359 4360**参数:** 4361 4362| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 4363| ---------- | ------ | ---- | ---- | ---------------------------------------- | 4364| data | string | 是 | - | 按照”Base64“或者”URL"编码后的一段字符串。 | 4365| mimeType | string | 是 | - | 媒体类型(MIME)。 | 4366| encoding | string | 是 | - | 编码类型,具体为“Base64"或者”URL编码。 | 4367| baseUrl | string | 否 | - | 指定的一个URL路径(“http”/“https”/"data"协议),并由Web组件赋值给window.origin。 | 4368| historyUrl | string | 否 | - | 历史记录URL。非空时,可被历史记录管理,实现前后后退功能。当baseUrl为空时,此属性无效。 | 4369 4370**示例:** 4371 4372 ```ts 4373 // xxx.ets 4374 @Entry 4375 @Component 4376 struct WebComponent { 4377 controller: WebController = new WebController() 4378 4379 build() { 4380 Column() { 4381 Button('loadData') 4382 .onClick(() => { 4383 this.controller.loadData({ 4384 data: "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>", 4385 mimeType: "text/html", 4386 encoding: "UTF-8" 4387 }) 4388 }) 4389 Web({ src: 'www.example.com', controller: this.controller }) 4390 } 4391 } 4392 } 4393 ``` 4394 4395### loadUrl<sup>(deprecated)</sup> 4396 4397loadUrl(options: { url: string | Resource, headers?: Array\<Header\> }) 4398 4399使用指定的http头加载指定的URL。 4400 4401通过loadUrl注入的对象只在当前document有效,即通过loadUrl导航到新的页面会无效。 4402 4403而通过registerJavaScriptProxy注入的对象,在loadUrl导航到新的页面也会有效。 4404 4405从API version 9开始不再维护,建议使用[loadUrl<sup>9+</sup>](../apis/js-apis-webview.md#loadurl)代替。 4406 4407**参数:** 4408 4409| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 4410| ------- | -------------------------- | ---- | ---- | -------------- | 4411| url | string | 是 | - | 需要加载的 URL。 | 4412| headers | Array\<[Header](#header)\> | 否 | [] | URL的附加HTTP请求头。 | 4413 4414**示例:** 4415 4416 ```ts 4417 // xxx.ets 4418 @Entry 4419 @Component 4420 struct WebComponent { 4421 controller: WebController = new WebController() 4422 4423 build() { 4424 Column() { 4425 Button('loadUrl') 4426 .onClick(() => { 4427 this.controller.loadUrl({ url: 'www.example.com' }) 4428 }) 4429 Web({ src: 'www.example.com', controller: this.controller }) 4430 } 4431 } 4432 } 4433 ``` 4434 4435### onActive<sup>(deprecated)</sup> 4436 4437onActive(): void 4438 4439调用此接口通知Web组件进入前台激活状态。 4440 4441从API version 9开始不再维护,建议使用[onActive<sup>9+</sup>](../apis/js-apis-webview.md#onactive)代替。 4442 4443**示例:** 4444 4445 ```ts 4446 // xxx.ets 4447 @Entry 4448 @Component 4449 struct WebComponent { 4450 controller: WebController = new WebController() 4451 4452 build() { 4453 Column() { 4454 Button('onActive') 4455 .onClick(() => { 4456 this.controller.onActive() 4457 }) 4458 Web({ src: 'www.example.com', controller: this.controller }) 4459 } 4460 } 4461 } 4462 ``` 4463 4464### onInactive<sup>(deprecated)</sup> 4465 4466onInactive(): void 4467 4468调用此接口通知Web组件进入未激活状态。 4469 4470从API version 9开始不再维护,建议使用[onInactive<sup>9+</sup>](../apis/js-apis-webview.md#oninactive)代替。 4471 4472**示例:** 4473 4474 ```ts 4475 // xxx.ets 4476 @Entry 4477 @Component 4478 struct WebComponent { 4479 controller: WebController = new WebController() 4480 4481 build() { 4482 Column() { 4483 Button('onInactive') 4484 .onClick(() => { 4485 this.controller.onInactive() 4486 }) 4487 Web({ src: 'www.example.com', controller: this.controller }) 4488 } 4489 } 4490 } 4491 ``` 4492 4493### zoom<sup>(deprecated)</sup> 4494zoom(factor: number): void 4495 4496调整当前网页的缩放比例。 4497 4498从API version 9开始不再维护,建议使用[zoom<sup>9+</sup>](../apis/js-apis-webview.md#zoom)代替。 4499 4500**参数:** 4501 4502| 参数名 | 参数类型 | 必填 | 参数描述 | 4503| ------ | ------ | ---- | ------------------------------ | 4504| factor | number | 是 | 基于当前网页所需调整的相对缩放比例,正值为放大,负值为缩小。 | 4505 4506**示例:** 4507 4508 ```ts 4509 // xxx.ets 4510 @Entry 4511 @Component 4512 struct WebComponent { 4513 controller: WebController = new WebController() 4514 @State factor: number = 1 4515 4516 build() { 4517 Column() { 4518 Button('zoom') 4519 .onClick(() => { 4520 this.controller.zoom(this.factor) 4521 }) 4522 Web({ src: 'www.example.com', controller: this.controller }) 4523 } 4524 } 4525 } 4526 ``` 4527 4528### refresh<sup>(deprecated)</sup> 4529 4530refresh() 4531 4532调用此接口通知Web组件刷新网页。 4533 4534从API version 9开始不再维护,建议使用[refresh<sup>9+</sup>](../apis/js-apis-webview.md#refresh)代替。 4535 4536**示例:** 4537 4538 ```ts 4539 // xxx.ets 4540 @Entry 4541 @Component 4542 struct WebComponent { 4543 controller: WebController = new WebController() 4544 4545 build() { 4546 Column() { 4547 Button('refresh') 4548 .onClick(() => { 4549 this.controller.refresh() 4550 }) 4551 Web({ src: 'www.example.com', controller: this.controller }) 4552 } 4553 } 4554 } 4555 ``` 4556 4557### registerJavaScriptProxy<sup>(deprecated)</sup> 4558 4559registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\<string\> }) 4560 4561注入JavaScript对象到window对象中,并在window对象中调用该对象的方法。注册后,须调用[refresh](#refreshdeprecated)接口生效。 4562 4563从API version 9开始不再维护,建议使用[registerJavaScriptProxy<sup>9+</sup>](../apis/js-apis-webview.md#registerjavascriptproxy)代替。 4564 4565**参数:** 4566 4567| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 4568| ---------- | --------------- | ---- | ---- | ---------------------------------------- | 4569| object | object | 是 | - | 参与注册的应用侧JavaScript对象。只能声明方法,不能声明属性 。其中方法的参数和返回类型只能为string,number,boolean | 4570| name | string | 是 | - | 注册对象的名称,与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。 | 4571| methodList | Array\<string\> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 | 4572 4573**示例:** 4574 4575 ```ts 4576 // xxx.ets 4577 @Entry 4578 @Component 4579 struct Index { 4580 controller: WebController = new WebController() 4581 testObj = { 4582 test: (data) => { 4583 return "ArkUI Web Component" 4584 }, 4585 toString: () => { 4586 console.log('Web Component toString') 4587 } 4588 } 4589 build() { 4590 Column() { 4591 Row() { 4592 Button('Register JavaScript To Window').onClick(() => { 4593 this.controller.registerJavaScriptProxy({ 4594 object: this.testObj, 4595 name: "objName", 4596 methodList: ["test", "toString"], 4597 }) 4598 }) 4599 } 4600 Web({ src: $rawfile('index.html'), controller: this.controller }) 4601 .javaScriptAccess(true) 4602 } 4603 } 4604 } 4605 ``` 4606 4607 加载的html文件。 4608 ```html 4609 <!-- index.html --> 4610 <!DOCTYPE html> 4611 <html> 4612 <meta charset="utf-8"> 4613 <body> 4614 Hello world! 4615 </body> 4616 <script type="text/javascript"> 4617 function htmlTest() { 4618 str = objName.test("test function") 4619 console.log('objName.test result:'+ str) 4620 } 4621 </script> 4622 </html> 4623 4624 ``` 4625 4626### runJavaScript<sup>(deprecated)</sup> 4627 4628runJavaScript(options: { script: string, callback?: (result: string) => void }) 4629 4630异步执行JavaScript脚本,并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后,比如onPageEnd中调用。 4631 4632从API version 9开始不再维护,建议使用[runJavaScript<sup>9+</sup>](../apis/js-apis-webview.md#runjavascript)代替。 4633 4634**参数:** 4635 4636| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 4637| -------- | ------------------------ | ---- | ---- | ---------------------------------------- | 4638| script | string | 是 | - | JavaScript脚本。 | 4639| callback | (result: string) => void | 否 | - | 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时,返回null。 | 4640 4641**示例:** 4642 4643 ```ts 4644 // xxx.ets 4645 @Entry 4646 @Component 4647 struct WebComponent { 4648 controller: WebController = new WebController() 4649 @State webResult: string = '' 4650 build() { 4651 Column() { 4652 Text(this.webResult).fontSize(20) 4653 Web({ src: $rawfile('index.html'), controller: this.controller }) 4654 .javaScriptAccess(true) 4655 .onPageEnd(e => { 4656 this.controller.runJavaScript({ 4657 script: 'test()', 4658 callback: (result: string)=> { 4659 this.webResult = result 4660 console.info(`The test() return value is: ${result}`) 4661 }}) 4662 console.info('url: ', e.url) 4663 }) 4664 } 4665 } 4666 } 4667 ``` 4668 4669 加载的html文件。 4670 ```html 4671 <!-- index.html --> 4672 <!DOCTYPE html> 4673 <html> 4674 <meta charset="utf-8"> 4675 <body> 4676 Hello world! 4677 </body> 4678 <script type="text/javascript"> 4679 function test() { 4680 console.log('Ark WebComponent') 4681 return "This value is from index.html" 4682 } 4683 </script> 4684 </html> 4685 ``` 4686 4687### stop<sup>(deprecated)</sup> 4688 4689stop() 4690 4691停止页面加载。 4692 4693从API version 9开始不再维护,建议使用[stop<sup>9+</sup>](../apis/js-apis-webview.md#stop)代替。 4694 4695**示例:** 4696 4697 ```ts 4698 // xxx.ets 4699 @Entry 4700 @Component 4701 struct WebComponent { 4702 controller: WebController = new WebController() 4703 4704 build() { 4705 Column() { 4706 Button('stop') 4707 .onClick(() => { 4708 this.controller.stop() 4709 }) 4710 Web({ src: 'www.example.com', controller: this.controller }) 4711 } 4712 } 4713 } 4714 ``` 4715 4716### clearHistory<sup>(deprecated)</sup> 4717 4718clearHistory(): void 4719 4720删除所有前进后退记录。 4721 4722从API version 9开始不再维护,建议使用[clearHistory<sup>9+</sup>](../apis/js-apis-webview.md#clearhistory)代替。 4723 4724**示例:** 4725 4726 ```ts 4727 // xxx.ets 4728 @Entry 4729 @Component 4730 struct WebComponent { 4731 controller: WebController = new WebController() 4732 4733 build() { 4734 Column() { 4735 Button('clearHistory') 4736 .onClick(() => { 4737 this.controller.clearHistory() 4738 }) 4739 Web({ src: 'www.example.com', controller: this.controller }) 4740 } 4741 } 4742 } 4743 ``` 4744 4745## WebCookie<sup>(deprecated)</sup> 4746 4747通过WebCookie可以控制Web组件中的cookie的各种行为,其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象,进行后续的cookie管理操作。 4748 4749### setCookie<sup>(deprecated)</sup> 4750 4751setCookie(): boolean 4752 4753设置cookie,该方法为同步方法。设置成功返回true,否则返回false。 4754 4755从API version 9开始不再维护,建议使用[setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie)代替。 4756 4757**返回值:** 4758 4759| 类型 | 说明 | 4760| ------- | ------------- | 4761| boolean | 设置cookie是否成功。 | 4762 4763### saveCookie<sup>(deprecated)</sup> 4764 4765saveCookie(): boolean 4766 4767将当前存在内存中的cookie同步到磁盘中,该方法为同步方法。 4768 4769从API version 9开始不再维护,建议使用[saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync)代替。 4770 4771**返回值:** 4772 4773| 类型 | 说明 | 4774| ------- | -------------------- | 4775| boolean | 同步内存cookie到磁盘操作是否成功。 |