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