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