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