1# Web 2 3提供具有网页显示能力的Web组件，[@ohos.web.webview](js-apis-webview.md)提供web控制能力。 4 5> **说明：** 6> 7> - 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> - 示例效果请以真机运行为准，当前DevEco Studio预览器不支持。 9 10## 需要权限 11 12访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考[声明权限](../../security/AccessToken/declare-permissions.md)。 13 14## 子组件 15 16无 17 18## 接口 19 20Web(value: WebOptions) 21 22> **说明：** 23> 24> 不支持转场动画。 25> 26> 同一页面的多个Web组件，必须绑定不同的WebviewController。 27 28**系统能力：** SystemCapability.Web.Webview.Core 29 30**参数：** 31 32| 参数名 | 类型 | 必填 | 说明 | 33| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 34| value | [WebOptions](#weboptions) | 是 | 定义Web选项。 | 35 36**示例：** 37 38加载在线网页。 39 40 ```ts 41 // xxx.ets 42 import { webview } from '@kit.ArkWeb'; 43 44 @Entry 45 @Component 46 struct WebComponent { 47 controller: webview.WebviewController = new webview.WebviewController(); 48 49 build() { 50 Column() { 51 Web({ src: 'www.example.com', controller: this.controller }) 52 } 53 } 54 } 55 ``` 56 57隐私模式Webview加载在线网页。 58 59 ```ts 60 // xxx.ets 61 import { webview } from '@kit.ArkWeb'; 62 63 @Entry 64 @Component 65 struct WebComponent { 66 controller: webview.WebviewController = new webview.WebviewController(); 67 68 build() { 69 Column() { 70 Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true }) 71 } 72 } 73 } 74 ``` 75 76Web组件同步渲染模式。 77 78 ```ts 79 // xxx.ets 80 import { webview } from '@kit.ArkWeb'; 81 82 @Entry 83 @Component 84 struct WebComponent { 85 controller: webview.WebviewController = new webview.WebviewController(); 86 87 build() { 88 Column() { 89 Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER }) 90 } 91 } 92 } 93 ``` 94 95Web组件指定共享渲染进程。 96 97 ```ts 98 // xxx.ets 99 import { webview } from '@kit.ArkWeb'; 100 101 @Entry 102 @Component 103 struct WebComponent { 104 controller: webview.WebviewController = new webview.WebviewController(); 105 106 build() { 107 Column() { 108 Web({ src: 'www.example.com', controller: this.controller, sharedRenderProcessToken: "111" }) 109 Web({ src: 'www.w3.org', controller: this.controller, sharedRenderProcessToken: "111" }) 110 } 111 } 112 } 113 ``` 114 115加载本地网页。 116 117通过$rawfile方式加载。 118 ```ts 119 // xxx.ets 120 import { webview } from '@kit.ArkWeb'; 121 122 @Entry 123 @Component 124 struct WebComponent { 125 controller: webview.WebviewController = new webview.WebviewController(); 126 127 build() { 128 Column() { 129 // 通过$rawfile加载本地资源文件。 130 Web({ src: $rawfile("index.html"), controller: this.controller }) 131 } 132 } 133 } 134 ``` 135 136通过resources协议加载，适用Webview加载带有"#"路由的链接。 137 ```ts 138 // xxx.ets 139 import { webview } from '@kit.ArkWeb'; 140 141 @Entry 142 @Component 143 struct WebComponent { 144 controller: webview.WebviewController = new webview.WebviewController(); 145 146 build() { 147 Column() { 148 // 通过resource协议加载本地资源文件。 149 Web({ src: "resource://rawfile/index.html", controller: this.controller }) 150 } 151 } 152 } 153 ``` 154 155加载沙箱路径下的本地资源文件，需要开启应用中文件系统的访问[fileAccess](#fileaccess)权限。 156 1571. 通过构造的单例对象GlobalContext获取沙箱路径。 158 159 ```ts 160 // GlobalContext.ets 161 export class GlobalContext { 162 private constructor() {} 163 private static instance: GlobalContext; 164 private _objects = new Map<string, Object>(); 165 166 public static getContext(): GlobalContext { 167 if (!GlobalContext.instance) { 168 GlobalContext.instance = new GlobalContext(); 169 } 170 return GlobalContext.instance; 171 } 172 173 getObject(value: string): Object | undefined { 174 return this._objects.get(value); 175 } 176 177 setObject(key: string, objectClass: Object): void { 178 this._objects.set(key, objectClass); 179 } 180 } 181 ``` 182 183 ```ts 184 // xxx.ets 185 import { webview } from '@kit.ArkWeb'; 186 import { GlobalContext } from '../GlobalContext'; 187 188 let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'; 189 190 @Entry 191 @Component 192 struct WebComponent { 193 controller: webview.WebviewController = new webview.WebviewController(); 194 195 build() { 196 Column() { 197 // 加载沙箱路径文件。 198 Web({ src: url, controller: this.controller }) 199 .fileAccess(true) 200 } 201 } 202 } 203 ``` 204 2052. 修改EntryAbility.ets。 206 207 以filesDir为例，获取沙箱路径。若想获取其他路径，请参考[应用文件路径](../../application-models/application-context-stage.md#获取应用文件路径)。 208 209 ```ts 210 // xxx.ets 211 import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 212 import { webview } from '@kit.ArkWeb'; 213 import { GlobalContext } from '../GlobalContext'; 214 215 export default class EntryAbility extends UIAbility { 216 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { 217 // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。 218 GlobalContext.getContext().setObject("filesDir", this.context.filesDir); 219 console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir")); 220 } 221 } 222 ``` 223 224 加载的html文件。 225 226 ```html 227 <!-- index.html --> 228 <!DOCTYPE html> 229 <html> 230 <body> 231 <p>Hello World</p> 232 </body> 233 </html> 234 ``` 235 236## WebOptions 237 238通过[接口](#接口)定义Web选项。 239 240**系统能力：** SystemCapability.Web.Webview.Core 241 242| 名称 | 类型 | 必填 | 说明 | 243| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 244| src | string \| [Resource](../apis-arkui/arkui-ts/ts-types.md#resource) | 是 | 网页资源地址。如果访问本地资源文件，请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件(文件支持html和txt类型)，请使用file://沙箱文件路径。<br>src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过[loadUrl()](js-apis-webview.md#loadurl)重新加载。 | 245| controller | [WebController](#webcontroller) \| [WebviewController<sup>9+</sup>](#webviewcontroller9) | 是 | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 | 246| renderMode<sup>12+</sup> | [RenderMode](#rendermode12枚举说明)| 否 | 表示当前Web组件的渲染方式，RenderMode.ASYNC_RENDER表示Web组件自渲染，RenderMode.SYNC_RENDER表示支持Web组件统一渲染能力，默认值RenderMode.ASYNC_RENDER, 该模式不支持动态调整。 | 247| incognitoMode<sup>11+</sup> | boolean | 否 | 表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview, false表示创建正常模式的webview。<br> 默认值：false | 248| sharedRenderProcessToken<sup>12+</sup> | string | 否 | 表示当前Web组件指定共享渲染进程的token, 多渲染进程模式下，相同token的Web组件会优先尝试复用与token相绑定的渲染进程。token与渲染进程的绑定发生在渲染进程的初始化阶段。当渲染进程没有关联的Web组件时，其与token绑定关系将被移除。<br> 默认值： "" | 249 250## WebviewController<sup>9+</sup> 251 252type WebviewController = WebviewController 253 254提供Web控制器的方法。 255 256**系统能力：** SystemCapability.Web.Webview.Core 257 258| 类型 | 说明 | 259| ------ | ---------- | 260| [WebviewController](js-apis-webview.md#webviewcontroller) | 通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法（静态方法除外）。 | 261 262## 属性 263 264通用属性仅支持[aspectRatio](../apis-arkui/arkui-ts/ts-universal-attributes-layout-constraints.md#aspectratio)、[backdropBlur](../apis-arkui/arkui-ts/ts-universal-attributes-background.md#backdropblur)、[backgroundColor](../apis-arkui/arkui-ts/ts-universal-attributes-background.md#backgroundcolor)、[bindContentCover](../apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md#bindcontentcover)、[bindContextMenu](../apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindcontextmenu8)、[bindMenu ](../apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindmenu)、[bindSheet](../apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet)、[borderColor](../apis-arkui/arkui-ts/ts-universal-attributes-border.md#bordercolor)、[borderRadius](../apis-arkui/arkui-ts/ts-universal-attributes-border.md#borderradius)、[borderStyle](../apis-arkui/arkui-ts/ts-universal-attributes-border.md#borderstyle)、[borderWidth](../apis-arkui/arkui-ts/ts-universal-attributes-border.md#borderwidth)、[clip](../apis-arkui/arkui-ts/ts-universal-attributes-sharp-clipping.md#clip)、[constraintSize](../apis-arkui/arkui-ts/ts-universal-attributes-size.md#constraintsize)、[defaultFocus](../apis-arkui/arkui-ts/ts-universal-attributes-focus.md#defaultfocus9)、[focusable](../apis-arkui/arkui-ts/ts-universal-attributes-focus.md#focusable)、[tabIndex](../apis-arkui/arkui-ts/ts-universal-attributes-focus.md#tabindex9)、[groupDefaultFocus](../apis-arkui/arkui-ts/ts-universal-attributes-focus.md#groupdefaultfocus9)、[displayPriority](../apis-arkui/arkui-ts/ts-universal-attributes-layout-constraints.md#displaypriority)、[enabled](../apis-arkui/arkui-ts/ts-universal-attributes-enable.md#enabled)、[flexBasis](../apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md#flexbasis)、[flexShrink](../apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md#flexshrink)、[layoutWeight](../apis-arkui/arkui-ts/ts-universal-attributes-size.md#layoutweight)、[id](../apis-arkui/arkui-ts/ts-universal-attributes-component-id.md)、[gridOffset](../apis-arkui/arkui-ts/ts-universal-attributes-grid.md)、[gridSpan](../apis-arkui/arkui-ts/ts-universal-attributes-grid.md)、[useSizeType](../apis-arkui/arkui-ts/ts-universal-attributes-grid.md)、[height](../apis-arkui/arkui-ts/ts-universal-attributes-size.md#height)、[touchable](../apis-arkui/arkui-ts/ts-universal-attributes-click.md)、[margin](../apis-arkui/arkui-ts/ts-universal-attributes-size.md#margin)、[markAnchor](../apis-arkui/arkui-ts/ts-universal-attributes-location.md#markanchor)、[offset](../apis-arkui/arkui-ts/ts-universal-attributes-location.md#offset)、[width](../apis-arkui/arkui-ts/ts-universal-attributes-size.md#width)、[zIndex](../apis-arkui/arkui-ts/ts-universal-attributes-z-order.md#zindex)、[visibility](../apis-arkui/arkui-ts/ts-universal-attributes-visibility.md#visibility)、[scale](../apis-arkui/arkui-ts/ts-universal-attributes-transformation.md#scale)、[translate](../apis-arkui/arkui-ts/ts-universal-attributes-transformation.md#translate)、[responseRegion](../apis-arkui/arkui-ts/ts-universal-attributes-touch-target.md#responseregion)、[size](../apis-arkui/arkui-ts/ts-universal-attributes-size.md#size)、[opacity](../apis-arkui/arkui-ts/ts-universal-attributes-opacity.md#opacity)、[shadow](../apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#shadow)、[sharedTransition](../apis-arkui/arkui-ts/ts-transition-animation-shared-elements.md)、[transition](../apis-arkui/arkui-ts/ts-transition-animation-component.md)。 265 266### domStorageAccess 267 268domStorageAccess(domStorageAccess: boolean) 269 270设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 271 272**系统能力：** SystemCapability.Web.Webview.Core 273 274**参数：** 275 276| 参数名 | 类型 | 必填 | 说明 | 277| ---------------- | ------- | ---- | ------------------------------------ | 278| domStorageAccess | boolean | 是 | 设置是否开启文档对象模型存储接口（DOM Storage API）权限。默认值：false。 | 279 280**示例：** 281 282 ```ts 283 // xxx.ets 284 import { webview } from '@kit.ArkWeb'; 285 286 @Entry 287 @Component 288 struct WebComponent { 289 controller: webview.WebviewController = new webview.WebviewController(); 290 291 build() { 292 Column() { 293 Web({ src: 'www.example.com', controller: this.controller }) 294 .domStorageAccess(true) 295 } 296 } 297 } 298 ``` 299 300### fileAccess 301 302fileAccess(fileAccess: boolean) 303 304设置是否开启应用中文件系统的访问。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。 305 306从API version 12开始，fileAccess默认不启用。同时，当fileAccess为false的时候，仅只读资源目录/data/storage/el1/bundle/entry/resources/resfile里面的file协议资源依然可以访问，不受fileAccess管控。 307 308**系统能力：** SystemCapability.Web.Webview.Core 309 310**参数：** 311 312| 参数名 | 类型 | 必填 | 说明 | 313| ---------- | ------- | ---- | ---------------------- | 314| fileAccess | boolean | 是 | API version 11及以前：默认为true，启动应用中文件系统的访问。API version 12及以后：默认为false，不启用应用中文件系统的访问。 | 315 316**示例：** 317 318 ```ts 319 // xxx.ets 320 import { webview } from '@kit.ArkWeb'; 321 322 @Entry 323 @Component 324 struct WebComponent { 325 controller: webview.WebviewController = new webview.WebviewController(); 326 327 build() { 328 Column() { 329 Web({ src: 'www.example.com', controller: this.controller }) 330 .fileAccess(true) 331 } 332 } 333 } 334 ``` 335 336### imageAccess 337 338imageAccess(imageAccess: boolean) 339 340设置是否允许自动加载图片资源，默认允许。 341 342**系统能力：** SystemCapability.Web.Webview.Core 343 344**参数：** 345 346| 参数名 | 类型 | 必填 | 说明 | 347| ----------- | ------- | ---- | --------------- | 348| imageAccess | boolean | 是 | 设置是否允许自动加载图片资源。默认值：true。 | 349 350**示例：** 351 ```ts 352 // xxx.ets 353 import { webview } from '@kit.ArkWeb'; 354 355 @Entry 356 @Component 357 struct WebComponent { 358 controller: webview.WebviewController = new webview.WebviewController(); 359 360 build() { 361 Column() { 362 Web({ src: 'www.example.com', controller: this.controller }) 363 .imageAccess(true) 364 } 365 } 366 } 367 ``` 368 369### javaScriptProxy 370 371javaScriptProxy(javaScriptProxy: JavaScriptProxy) 372 373注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。注册对象时，同步与异步方法列表请至少选择一项不为空，可同时注册两类方法。同一方法在同步与异步列表中重复注册，将默认异步调用。此接口只支持注册一个对象，若需要注册多个对象请使用[registerJavaScriptProxy<sup>9+</sup>](js-apis-webview.md#registerjavascriptproxy)。 374 375**系统能力：** SystemCapability.Web.Webview.Core 376 377**参数：** 378 379| 参数名 | 类型 | 必填 | 说明 | 380| ---------- | ---------------------------------------- | ---- |---------------------------------------- | 381| javaScriptProxy | [JavaScriptProxy](#javascriptproxy12) | 是 | 参与注册的对象。只能声明方法，不能声明属性。 | 382 383**示例：** 384 385 ```ts 386 // xxx.ets 387 import { webview } from '@kit.ArkWeb'; 388 389 class TestObj { 390 constructor() { 391 } 392 393 test(data1: string, data2: string, data3: string): string { 394 console.log("data1:" + data1); 395 console.log("data2:" + data2); 396 console.log("data3:" + data3); 397 return "AceString"; 398 } 399 400 asyncTest(data: string): void { 401 console.log("async data:" + data); 402 } 403 404 toString(): void { 405 console.log('toString' + "interface instead."); 406 } 407 } 408 409 @Entry 410 @Component 411 struct WebComponent { 412 controller: webview.WebviewController = new webview.WebviewController(); 413 testObj = new TestObj(); 414 build() { 415 Column() { 416 Button('deleteJavaScriptRegister') 417 .onClick(() => { 418 try { 419 this.controller.deleteJavaScriptRegister("objName"); 420 } catch (error) { 421 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 422 } 423 }) 424 Web({ src: 'www.example.com', controller: this.controller }) 425 .javaScriptAccess(true) 426 .javaScriptProxy({ 427 object: this.testObj, 428 name: "objName", 429 methodList: ["test", "toString"], 430 asyncMethodList: ["asyncTest"], 431 controller: this.controller, 432 }) 433 } 434 } 435 } 436 ``` 437 438### javaScriptAccess 439 440javaScriptAccess(javaScriptAccess: boolean) 441 442设置是否允许执行JavaScript脚本，默认允许执行。 443 444**系统能力：** SystemCapability.Web.Webview.Core 445 446**参数：** 447 448| 参数名 | 类型 | 必填 | 说明 | 449| ---------------- | ------- | ---- | ------------------- | 450| javaScriptAccess | boolean | 是 | 是否允许执行JavaScript脚本。默认值：true。 | 451 452**示例：** 453 454 ```ts 455 // xxx.ets 456 import { webview } from '@kit.ArkWeb'; 457 458 @Entry 459 @Component 460 struct WebComponent { 461 controller: webview.WebviewController = new webview.WebviewController(); 462 build() { 463 Column() { 464 Web({ src: 'www.example.com', controller: this.controller }) 465 .javaScriptAccess(true) 466 } 467 } 468 } 469 ``` 470 471### overScrollMode<sup>11+</sup> 472 473overScrollMode(mode: OverScrollMode) 474 475设置Web过滚动模式，默认关闭。当过滚动模式开启时，当用户在Web根页面上滑动到边缘时，Web会通过弹性动画弹回界面，根页面上的内部页面不会触发回弹。 476 477**系统能力：** SystemCapability.Web.Webview.Core 478 479**参数：** 480 481| 参数名 | 类型 | 必填 | 说明 | 482| ---- | --------------------------------------- | ---- | ------------------ | 483| mode | [OverScrollMode](#overscrollmode11枚举说明) | 是 | 设置Web的过滚动模式为关闭或开启。默认值：OverScrollMode.NEVER。 | 484 485**示例：** 486 487 ```ts 488 // xxx.ets 489 import { webview } from '@kit.ArkWeb'; 490 491 @Entry 492 @Component 493 struct WebComponent { 494 controller: webview.WebviewController = new webview.WebviewController(); 495 @State mode: OverScrollMode = OverScrollMode.ALWAYS; 496 build() { 497 Column() { 498 Web({ src: 'www.example.com', controller: this.controller }) 499 .overScrollMode(this.mode) 500 } 501 } 502 } 503 ``` 504 505### mixedMode 506 507mixedMode(mixedMode: MixedMode) 508 509设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 510 511**系统能力：** SystemCapability.Web.Webview.Core 512 513**参数：** 514 515| 参数名 | 类型 | 必填 | 说明 | 516| --------- | --------------------------- | ---- | --------- | 517| mixedMode | [MixedMode](#mixedmode枚举说明) | 是 | 要设置的混合内容。默认值：MixedMode.None。 | 518 519**示例：** 520 521 ```ts 522 // xxx.ets 523 import { webview } from '@kit.ArkWeb'; 524 525 @Entry 526 @Component 527 struct WebComponent { 528 controller: webview.WebviewController = new webview.WebviewController(); 529 @State mode: MixedMode = MixedMode.All; 530 build() { 531 Column() { 532 Web({ src: 'www.example.com', controller: this.controller }) 533 .mixedMode(this.mode) 534 } 535 } 536 } 537 ``` 538 539### onlineImageAccess 540 541onlineImageAccess(onlineImageAccess: boolean) 542 543设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 544 545**系统能力：** SystemCapability.Web.Webview.Core 546 547**参数：** 548 549| 参数名 | 类型 | 必填 | 说明 | 550| ----------------- | ------- | ---- | ---------------- | 551| onlineImageAccess | boolean | 是 | 设置是否允许从网络加载图片资源。默认值：true。 | 552 553**示例：** 554 555 ```ts 556 // xxx.ets 557 import { webview } from '@kit.ArkWeb'; 558 559 @Entry 560 @Component 561 struct WebComponent { 562 controller: webview.WebviewController = new webview.WebviewController(); 563 564 build() { 565 Column() { 566 Web({ src: 'www.example.com', controller: this.controller }) 567 .onlineImageAccess(true) 568 } 569 } 570 } 571 ``` 572 573### zoomAccess 574 575zoomAccess(zoomAccess: boolean) 576 577设置是否支持手势进行缩放，默认允许执行缩放。 578 579**系统能力：** SystemCapability.Web.Webview.Core 580 581**参数：** 582 583| 参数名 | 类型 | 必填 | 说明 | 584| ---------- | ------- | ---- | ------------- | 585| zoomAccess | boolean | 是 | 设置是否支持手势进行缩放。默认值：true。 | 586 587**示例：** 588 589 ```ts 590 // xxx.ets 591 import { webview } from '@kit.ArkWeb'; 592 593 @Entry 594 @Component 595 struct WebComponent { 596 controller: webview.WebviewController = new webview.WebviewController(); 597 598 build() { 599 Column() { 600 Web({ src: 'www.example.com', controller: this.controller }) 601 .zoomAccess(true) 602 } 603 } 604 } 605 ``` 606 607### overviewModeAccess 608 609overviewModeAccess(overviewModeAccess: boolean) 610 611设置是否使用概览模式加载网页，默认使用该方式。当前仅支持移动设备。 612 613**系统能力：** SystemCapability.Web.Webview.Core 614 615**参数：** 616 617| 参数名 | 类型 | 必填 | 说明 | 618| ------------------ | ------- | ---- | --------------- | 619| overviewModeAccess | boolean | 是 | 设置是否使用概览模式加载网页。默认值：true。 | 620 621**示例：** 622 623 ```ts 624 // xxx.ets 625 import { webview } from '@kit.ArkWeb'; 626 627 @Entry 628 @Component 629 struct WebComponent { 630 controller: webview.WebviewController = new webview.WebviewController(); 631 632 build() { 633 Column() { 634 Web({ src: 'www.example.com', controller: this.controller }) 635 .overviewModeAccess(true) 636 } 637 } 638 } 639 ``` 640 641### databaseAccess 642 643databaseAccess(databaseAccess: boolean) 644 645设置是否开启数据库存储API权限，默认不开启。 646 647**系统能力：** SystemCapability.Web.Webview.Core 648 649**参数：** 650 651| 参数名 | 类型 | 必填 | 说明 | 652| -------------- | ------- | ---- | ----------------- | 653| databaseAccess | boolean | 是 | 设置是否开启数据库存储API权限。默认值：false。 | 654 655**示例：** 656 657 ```ts 658 // xxx.ets 659 import { webview } from '@kit.ArkWeb'; 660 661 @Entry 662 @Component 663 struct WebComponent { 664 controller: webview.WebviewController = new webview.WebviewController(); 665 666 build() { 667 Column() { 668 Web({ src: 'www.example.com', controller: this.controller }) 669 .databaseAccess(true) 670 } 671 } 672 } 673 ``` 674 675### geolocationAccess 676 677geolocationAccess(geolocationAccess: boolean) 678 679设置是否开启获取地理位置权限，默认开启。具体使用方式参考[管理位置权限](../../web/web-geolocation-permission.md)。 680 681**系统能力：** SystemCapability.Web.Webview.Core 682 683**参数：** 684 685| 参数名 | 类型 | 必填 | 说明 | 686| ----------------- | ------- | ---- | --------------- | 687| geolocationAccess | boolean | 是 | 设置是否开启获取地理位置权限。默认值：true。 | 688 689**示例：** 690 691 ```ts 692 // xxx.ets 693 import { webview } from '@kit.ArkWeb'; 694 695 @Entry 696 @Component 697 struct WebComponent { 698 controller: webview.WebviewController = new webview.WebviewController(); 699 700 build() { 701 Column() { 702 Web({ src: 'www.example.com', controller: this.controller }) 703 .geolocationAccess(true) 704 } 705 } 706 } 707 ``` 708 709### mediaPlayGestureAccess<sup>9+</sup> 710 711mediaPlayGestureAccess(access: boolean) 712 713设置有声视频播放是否需要用户手动点击，静音视频播放不受该接口管控，默认需要。 714 715**系统能力：** SystemCapability.Web.Webview.Core 716 717**参数：** 718 719| 参数名 | 类型 | 必填 | 说明 | 720| ------ | ------- | ---- | ------------------- | 721| access | boolean | 是 | 设置有声视频播放是否需要用户手动点击。默认值：true。 | 722 723**示例：** 724 725 ```ts 726 // xxx.ets 727 import { webview } from '@kit.ArkWeb'; 728 729 @Entry 730 @Component 731 struct WebComponent { 732 controller: webview.WebviewController = new webview.WebviewController(); 733 @State access: boolean = true; 734 735 build() { 736 Column() { 737 Web({ src: 'www.example.com', controller: this.controller }) 738 .mediaPlayGestureAccess(this.access) 739 } 740 } 741 } 742 ``` 743 744### multiWindowAccess<sup>9+</sup> 745 746multiWindowAccess(multiWindow: boolean) 747 748设置是否开启多窗口权限，默认不开启。 749使能多窗口权限时，需要实现onWindowNew事件，示例代码参考[onWindowNew事件](#onwindownew9)。 750 751**系统能力：** SystemCapability.Web.Webview.Core 752 753**参数：** 754 755| 参数名 | 类型 | 必填 | 说明 | 756| ----------- | ------- | ---- | ------------ | 757| multiWindow | boolean | 是 | 设置是否开启多窗口权限。默认值：false。 | 758 759**示例：** 760 761 ```ts 762 // xxx.ets 763 import { webview } from '@kit.ArkWeb'; 764 765 @Entry 766 @Component 767 struct WebComponent { 768 controller: webview.WebviewController = new webview.WebviewController(); 769 770 build() { 771 Column() { 772 Web({ src: 'www.example.com', controller: this.controller }) 773 .multiWindowAccess(false) 774 } 775 } 776 } 777 ``` 778 779### horizontalScrollBarAccess<sup>9+</sup> 780 781horizontalScrollBarAccess(horizontalScrollBar: boolean) 782 783设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。 784 785> **说明：** 786> 787> - 通过@State变量控制横向滚动条的隐藏/显示后，需要调用controller.refresh()生效。 788> - 通过@State变量频繁动态改变时，建议切换开关变量和Web组件一一对应。 789 790**系统能力：** SystemCapability.Web.Webview.Core 791 792**参数：** 793 794| 参数名 | 类型 | 必填 | 说明 | 795| ------------------- | ------- | ---- | ------------ | 796| horizontalScrollBar | boolean | 是 | 设置是否显示横向滚动条。默认值：true。 | 797 798**示例：** 799 800 ```ts 801 // xxx.ets 802 import { webview } from '@kit.ArkWeb'; 803 import { BusinessError } from '@kit.BasicServicesKit'; 804 805 @Entry 806 @Component 807 struct WebComponent { 808 controller: webview.WebviewController = new webview.WebviewController(); 809 @State isShow: boolean = true; 810 @State btnMsg: string ="隐藏滚动条"; 811 812 build() { 813 Column() { 814 // 通过@State变量改变横向滚动条的隐藏/显示后，需调用this.controller.refresh()后生效 815 Button('refresh') 816 .onClick(() => { 817 if(this.isShow){ 818 this.isShow = false; 819 this.btnMsg="显示滚动条"; 820 }else{ 821 this.isShow = true; 822 this.btnMsg="隐藏滚动条"; 823 } 824 try { 825 this.controller.refresh(); 826 } catch (error) { 827 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 828 } 829 }).height("10%").width("40%") 830 Web({ src: $rawfile('index.html'), controller: this.controller }).height("90%") 831 .horizontalScrollBarAccess(this.isShow) 832 } 833 } 834 } 835 ``` 836 837 加载的html文件。 838 ```html 839 <!--index.html--> 840 <!DOCTYPE html> 841 <html> 842 <head> 843 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0"> 844 <title>Demo</title> 845 <style> 846 body { 847 width:3000px; 848 height:6000px; 849 padding-right:170px; 850 padding-left:170px; 851 border:5px solid blueviolet 852 } 853 </style> 854 </head> 855 <body> 856 Scroll Test 857 </body> 858 </html> 859 ``` 860 861### verticalScrollBarAccess<sup>9+</sup> 862 863verticalScrollBarAccess(verticalScrollBar: boolean) 864 865设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。 866 867> **说明：** 868> 869> - 通过@State变量控制纵向滚动条的隐藏/显示后，需要调用controller.refresh()生效。 870> - 通过@State变量频繁动态改变时，建议切换开关变量和Web组件一一对应。 871 872**系统能力：** SystemCapability.Web.Webview.Core 873 874**参数：** 875 876| 参数名 | 类型 | 必填 | 说明 | 877| ----------------- | ------- | ---- | ------------ | 878| verticalScrollBar | boolean | 是 | 设置是否显示纵向滚动条。默认值：true。 | 879 880**示例：** 881 882 ```ts 883 // xxx.ets 884 import { webview } from '@kit.ArkWeb'; 885 import { BusinessError } from '@kit.BasicServicesKit'; 886 887 @Entry 888 @Component 889 struct WebComponent { 890 controller: webview.WebviewController = new webview.WebviewController(); 891 @State isShow: boolean = true; 892 @State btnMsg: string ="隐藏滚动条"; 893 894 build() { 895 Column() { 896 // 通过@State变量改变横向滚动条的隐藏/显示后，需调用this.controller.refresh()后生效 897 Button(this.btnMsg) 898 .onClick(() => { 899 if(this.isShow){ 900 this.isShow = false; 901 this.btnMsg="显示滚动条"; 902 }else{ 903 this.isShow = true; 904 this.btnMsg="隐藏滚动条"; 905 } 906 try { 907 this.controller.refresh(); 908 } catch (error) { 909 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 910 } 911 }).height("10%").width("40%") 912 Web({ src: $rawfile('index.html'), controller: this.controller }).height("90%") 913 .verticalScrollBarAccess(this.isShow) 914 } 915 } 916 } 917 ``` 918 919 加载的html文件。 920 ```html 921 <!--index.html--> 922 <!DOCTYPE html> 923 <html> 924 <head> 925 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0"> 926 <title>Demo</title> 927 <style> 928 body { 929 width:3000px; 930 height:6000px; 931 padding-right:170px; 932 padding-left:170px; 933 border:5px solid blueviolet 934 } 935 </style> 936 </head> 937 <body> 938 Scroll Test 939 </body> 940 </html> 941 ``` 942 943### password<sup>(deprecated)</sup> 944 945password(password: boolean) 946 947设置是否应保存密码。该接口为空接口。 948 949> **说明：** 950> 951> 从API version 10开始废弃，并且不再提供新的接口作为替代。 952 953**系统能力：** SystemCapability.Web.Webview.Core 954 955### cacheMode 956 957cacheMode(cacheMode: CacheMode) 958 959设置缓存模式。 960 961**系统能力：** SystemCapability.Web.Webview.Core 962 963**参数：** 964 965| 参数名 | 类型 | 必填 | 说明 | 966| --------- | --------------------------- | ---- | --------- | 967| cacheMode | [CacheMode](#cachemode枚举说明) | 是 | 要设置的缓存模式。默认值：CacheMode.Default。 | 968 969**示例：** 970 971 ```ts 972 // xxx.ets 973 import { webview } from '@kit.ArkWeb'; 974 975 @Entry 976 @Component 977 struct WebComponent { 978 controller: webview.WebviewController = new webview.WebviewController(); 979 @State mode: CacheMode = CacheMode.None; 980 981 build() { 982 Column() { 983 Web({ src: 'www.example.com', controller: this.controller }) 984 .cacheMode(this.mode) 985 } 986 } 987 } 988 ``` 989 990### copyOptions<sup>11+</sup> 991 992copyOptions(value: CopyOptions) 993 994设置剪贴板复制范围选项。 995 996**系统能力：** SystemCapability.Web.Webview.Core 997 998**参数：** 999 1000| 参数名 | 类型 | 必填 | 说明 | 1001| --------- | --------------------------- | ---- | --------- | 1002| value | [CopyOptions](../apis-arkui/arkui-ts/ts-appendix-enums.md#copyoptions9) | 是 | 要设置的剪贴板复制范围选项。默认值：CopyOptions.LocalDevice。 | 1003 1004**示例：** 1005 1006 ```ts 1007import { webview } from '@kit.ArkWeb'; 1008 1009@Entry 1010@Component 1011struct WebComponent { 1012 controller: webview.WebviewController = new webview.WebviewController(); 1013 1014 build() { 1015 Column() { 1016 Web({ src: 'www.example.com', controller: this.controller }) 1017 .copyOptions(CopyOptions.None) 1018 } 1019 } 1020} 1021 ``` 1022 1023### textZoomAtio<sup>(deprecated)</sup> 1024 1025textZoomAtio(textZoomAtio: number) 1026 1027设置页面的文本缩放百分比，默认为100。 1028 1029**系统能力：** SystemCapability.Web.Webview.Core 1030 1031从API version 9开始不再维护，建议使用[textZoomRatio<sup>9+</sup>](#textzoomratio9)代替。 1032 1033**参数：** 1034 1035| 参数名 | 类型 | 必填 | 说明 | 1036| ------------ | ------ | ---- | -------------------------------- | 1037| textZoomAtio | number | 是 | 要设置的页面的文本缩放百分比。取值为整数，范围为(0, +∞)。默认值：100。 | 1038 1039**示例：** 1040 1041 ```ts 1042 // xxx.ets 1043 @Entry 1044 @Component 1045 struct WebComponent { 1046 controller: WebController = new WebController() 1047 @State ratio: number = 150 1048 build() { 1049 Column() { 1050 Web({ src: 'www.example.com', controller: this.controller }) 1051 .textZoomAtio(this.ratio) 1052 } 1053 } 1054 } 1055 ``` 1056 1057### textZoomRatio<sup>9+</sup> 1058 1059textZoomRatio(textZoomRatio: number) 1060 1061设置页面的文本缩放百分比，默认为100。 1062 1063**系统能力：** SystemCapability.Web.Webview.Core 1064 1065**参数：** 1066 1067| 参数名 | 类型 | 必填 | 说明 | 1068| ------------- | ------ | ---- | -------------------------------- | 1069| textZoomRatio | number | 是 | 要设置的页面的文本缩放百分比。取值为整数，范围为(0, +∞)。默认值：100。 | 1070 1071**示例：** 1072 1073 ```ts 1074 // xxx.ets 1075 import { webview } from '@kit.ArkWeb'; 1076 1077 @Entry 1078 @Component 1079 struct WebComponent { 1080 controller: webview.WebviewController = new webview.WebviewController(); 1081 @State ratio: number = 150; 1082 1083 build() { 1084 Column() { 1085 Web({ src: 'www.example.com', controller: this.controller }) 1086 .textZoomRatio(this.ratio) 1087 } 1088 } 1089 } 1090 ``` 1091 1092### initialScale<sup>9+</sup> 1093 1094initialScale(percent: number) 1095 1096设置整体页面的缩放百分比，默认为100。 1097 1098**系统能力：** SystemCapability.Web.Webview.Core 1099 1100**参数：** 1101 1102| 参数名 | 类型 | 必填 | 说明 | 1103| ------- | ------ | ---- | ----------------------------- | 1104| percent | number | 是 | 要设置的整体页面的缩放百分比。默认值：100。 | 1105 1106**示例：** 1107 1108 ```ts 1109 // xxx.ets 1110 import { webview } from '@kit.ArkWeb'; 1111 1112 @Entry 1113 @Component 1114 struct WebComponent { 1115 controller: webview.WebviewController = new webview.WebviewController(); 1116 @State percent: number = 100; 1117 1118 build() { 1119 Column() { 1120 Web({ src: 'www.example.com', controller: this.controller }) 1121 .initialScale(this.percent) 1122 } 1123 } 1124 } 1125 ``` 1126 1127### userAgent<sup>(deprecated)</sup> 1128 1129userAgent(userAgent: string) 1130 1131设置用户代理。 1132 1133> **说明：** 1134> 1135> 从API version 8开始支持，从API version 10开始废弃。建议使用[setCustomUserAgent](js-apis-webview.md#setcustomuseragent10)<sup>10+</sup>替代。 1136 1137**系统能力：** SystemCapability.Web.Webview.Core 1138 1139**参数：** 1140 1141| 参数名 | 类型 | 必填 | 说明 | 1142| --------- | ------ | ---- | --------- | 1143| userAgent | string | 是 | 要设置的用户代理。 | 1144 1145**示例：** 1146 1147 ```ts 1148 // xxx.ets 1149 import { webview } from '@kit.ArkWeb'; 1150 1151 @Entry 1152 @Component 1153 struct WebComponent { 1154 controller: webview.WebviewController = new webview.WebviewController(); 1155 @State userAgent:string = 'Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile DemoApp'; 1156 1157 build() { 1158 Column() { 1159 Web({ src: 'www.example.com', controller: this.controller }) 1160 .userAgent(this.userAgent) 1161 } 1162 } 1163 } 1164 ``` 1165 1166### blockNetwork<sup>9+</sup> 1167 1168blockNetwork(block: boolean) 1169 1170设置Web组件是否阻止从网络加载资源。 1171 1172**系统能力：** SystemCapability.Web.Webview.Core 1173 1174**参数：** 1175 1176| 参数名 | 类型 | 必填 | 说明 | 1177| ----- | ------- | ---- | ------------------- | 1178| block | boolean | 是 | 设置Web组件是否阻止从网络加载资源。默认值：false。 | 1179 1180**示例：** 1181 1182 ```ts 1183 // xxx.ets 1184 import { webview } from '@kit.ArkWeb'; 1185 1186 @Entry 1187 @Component 1188 struct WebComponent { 1189 controller: webview.WebviewController = new webview.WebviewController(); 1190 @State block: boolean = true; 1191 1192 build() { 1193 Column() { 1194 Web({ src: 'www.example.com', controller: this.controller }) 1195 .blockNetwork(this.block) 1196 } 1197 } 1198 } 1199 ``` 1200 1201### defaultFixedFontSize<sup>9+</sup> 1202 1203defaultFixedFontSize(size: number) 1204 1205设置网页的默认等宽字体大小。 1206 1207**系统能力：** SystemCapability.Web.Webview.Core 1208 1209**参数：** 1210 1211| 参数名 | 类型 | 必填 | 说明 | 1212| ---- | ------ | ---- | ---------------------------------------- | 1213| size | number | 是 | 设置网页的默认等宽字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。默认值：13。 | 1214 1215**示例：** 1216 1217 ```ts 1218 // xxx.ets 1219 import { webview } from '@kit.ArkWeb'; 1220 1221 @Entry 1222 @Component 1223 struct WebComponent { 1224 controller: webview.WebviewController = new webview.WebviewController(); 1225 @State fontSize: number = 16; 1226 1227 build() { 1228 Column() { 1229 Web({ src: 'www.example.com', controller: this.controller }) 1230 .defaultFixedFontSize(this.fontSize) 1231 } 1232 } 1233 } 1234 ``` 1235 1236### defaultFontSize<sup>9+</sup> 1237 1238defaultFontSize(size: number) 1239 1240设置网页的默认字体大小。 1241 1242**系统能力：** SystemCapability.Web.Webview.Core 1243 1244**参数：** 1245 1246| 参数名 | 类型 | 必填 | 说明 | 1247| ---- | ------ | ---- | ---------------------------------------- | 1248| size | number | 是 | 设置网页的默认字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。默认值：16。 | 1249 1250**示例：** 1251 1252 ```ts 1253 // xxx.ets 1254 import { webview } from '@kit.ArkWeb'; 1255 1256 @Entry 1257 @Component 1258 struct WebComponent { 1259 controller: webview.WebviewController = new webview.WebviewController(); 1260 @State fontSize: number = 13; 1261 1262 build() { 1263 Column() { 1264 Web({ src: 'www.example.com', controller: this.controller }) 1265 .defaultFontSize(this.fontSize) 1266 } 1267 } 1268 } 1269 ``` 1270 1271### minFontSize<sup>9+</sup> 1272 1273minFontSize(size: number) 1274 1275设置网页字体大小最小值。 1276 1277**系统能力：** SystemCapability.Web.Webview.Core 1278 1279**参数：** 1280 1281| 参数名 | 类型 | 必填 | 说明 | 1282| ---- | ------ | ---- | ---------------------------------------- | 1283| size | number | 是 | 设置网页字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。默认值：8。 | 1284 1285**示例：** 1286 1287 ```ts 1288 // xxx.ets 1289 import { webview } from '@kit.ArkWeb'; 1290 1291 @Entry 1292 @Component 1293 struct WebComponent { 1294 controller: webview.WebviewController = new webview.WebviewController(); 1295 @State fontSize: number = 13; 1296 1297 build() { 1298 Column() { 1299 Web({ src: 'www.example.com', controller: this.controller }) 1300 .minFontSize(this.fontSize) 1301 } 1302 } 1303 } 1304 ``` 1305 1306### minLogicalFontSize<sup>9+</sup> 1307 1308minLogicalFontSize(size: number) 1309 1310设置网页逻辑字体大小最小值。 1311 1312**系统能力：** SystemCapability.Web.Webview.Core 1313 1314**参数：** 1315 1316| 参数名 | 类型 | 必填 | 说明 | 1317| ---- | ------ | ---- | ---------------------------------------- | 1318| size | number | 是 | 设置网页逻辑字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。默认值：8。 | 1319 1320**示例：** 1321 1322 ```ts 1323 // xxx.ets 1324 import { webview } from '@kit.ArkWeb'; 1325 1326 @Entry 1327 @Component 1328 struct WebComponent { 1329 controller: webview.WebviewController = new webview.WebviewController(); 1330 @State fontSize: number = 13; 1331 1332 build() { 1333 Column() { 1334 Web({ src: 'www.example.com', controller: this.controller }) 1335 .minLogicalFontSize(this.fontSize) 1336 } 1337 } 1338 } 1339 ``` 1340 1341### webFixedFont<sup>9+</sup> 1342 1343webFixedFont(family: string) 1344 1345设置网页的fixed font字体库。 1346 1347**系统能力：** SystemCapability.Web.Webview.Core 1348 1349**参数：** 1350 1351| 参数名 | 类型 | 必填 | 说明 | 1352| ------ | ------ | ---- | ------------------- | 1353| family | string | 是 | 设置网页的fixed font字体库。默认值：monospace。 | 1354 1355**示例：** 1356 1357 ```ts 1358 // xxx.ets 1359 import { webview } from '@kit.ArkWeb'; 1360 1361 @Entry 1362 @Component 1363 struct WebComponent { 1364 controller: webview.WebviewController = new webview.WebviewController(); 1365 @State family: string = "monospace"; 1366 1367 build() { 1368 Column() { 1369 Web({ src: 'www.example.com', controller: this.controller }) 1370 .webFixedFont(this.family) 1371 } 1372 } 1373 } 1374 ``` 1375 1376### webSansSerifFont<sup>9+</sup> 1377 1378webSansSerifFont(family: string) 1379 1380设置网页的sans serif font字体库。 1381 1382**系统能力：** SystemCapability.Web.Webview.Core 1383 1384**参数：** 1385 1386| 参数名 | 类型 | 必填 | 说明 | 1387| ------ | ------ | ---- | ------------------------ | 1388| family | string | 是 | 设置网页的sans serif font字体库。默认值：sans-serif。 | 1389 1390**示例：** 1391 1392 ```ts 1393 // xxx.ets 1394 import { webview } from '@kit.ArkWeb'; 1395 1396 @Entry 1397 @Component 1398 struct WebComponent { 1399 controller: webview.WebviewController = new webview.WebviewController(); 1400 @State family: string = "sans-serif"; 1401 1402 build() { 1403 Column() { 1404 Web({ src: 'www.example.com', controller: this.controller }) 1405 .webSansSerifFont(this.family) 1406 } 1407 } 1408 } 1409 ``` 1410 1411### webSerifFont<sup>9+</sup> 1412 1413webSerifFont(family: string) 1414 1415设置网页的serif font字体库。 1416 1417**系统能力：** SystemCapability.Web.Webview.Core 1418 1419**参数：** 1420 1421| 参数名 | 类型 | 必填 | 说明 | 1422| ------ | ------ | ---- | ------------------- | 1423| family | string | 是 | 设置网页的serif font字体库。默认值：serif。 | 1424 1425**示例：** 1426 1427 ```ts 1428 // xxx.ets 1429 import { webview } from '@kit.ArkWeb'; 1430 1431 @Entry 1432 @Component 1433 struct WebComponent { 1434 controller: webview.WebviewController = new webview.WebviewController(); 1435 @State family: string = "serif"; 1436 1437 build() { 1438 Column() { 1439 Web({ src: 'www.example.com', controller: this.controller }) 1440 .webSerifFont(this.family) 1441 } 1442 } 1443 } 1444 ``` 1445 1446### webStandardFont<sup>9+</sup> 1447 1448webStandardFont(family: string) 1449 1450设置网页的standard font字体库。 1451 1452**系统能力：** SystemCapability.Web.Webview.Core 1453 1454**参数：** 1455 1456| 参数名 | 类型 | 必填 | 说明 | 1457| ------ | ------ | ---- | ---------------------- | 1458| family | string | 是 | 设置网页的standard font字体库。默认值：sans serif。 | 1459 1460**示例：** 1461 1462 ```ts 1463 // xxx.ets 1464 import { webview } from '@kit.ArkWeb'; 1465 1466 @Entry 1467 @Component 1468 struct WebComponent { 1469 controller: webview.WebviewController = new webview.WebviewController(); 1470 @State family: string = "sans-serif"; 1471 1472 build() { 1473 Column() { 1474 Web({ src: 'www.example.com', controller: this.controller }) 1475 .webStandardFont(this.family) 1476 } 1477 } 1478 } 1479 ``` 1480 1481### webFantasyFont<sup>9+</sup> 1482 1483webFantasyFont(family: string) 1484 1485设置网页的fantasy font字体库。 1486 1487**系统能力：** SystemCapability.Web.Webview.Core 1488 1489**参数：** 1490 1491| 参数名 | 类型 | 必填 | 说明 | 1492| ------ | ------ | ---- | --------------------- | 1493| family | string | 是 | 设置网页的fantasy font字体库。默认值：fantasy。 | 1494 1495**示例：** 1496 1497 ```ts 1498 // xxx.ets 1499 import { webview } from '@kit.ArkWeb'; 1500 @Entry 1501 @Component 1502 struct WebComponent { 1503 controller: webview.WebviewController = new webview.WebviewController(); 1504 @State family: string = "fantasy"; 1505 1506 build() { 1507 Column() { 1508 Web({ src: 'www.example.com', controller: this.controller }) 1509 .webFantasyFont(this.family) 1510 } 1511 } 1512 } 1513 ``` 1514 1515### webCursiveFont<sup>9+</sup> 1516 1517webCursiveFont(family: string) 1518 1519设置网页的cursive font字体库。 1520 1521**系统能力：** SystemCapability.Web.Webview.Core 1522 1523**参数：** 1524 1525| 参数名 | 类型 | 必填 | 说明 | 1526| ------ | ------ | ---- | --------------------- | 1527| family | string | 是 | 设置网页的cursive font字体库。默认值：cursive。 | 1528 1529**示例：** 1530 1531 ```ts 1532 // xxx.ets 1533 import { webview } from '@kit.ArkWeb'; 1534 1535 @Entry 1536 @Component 1537 struct WebComponent { 1538 controller: webview.WebviewController = new webview.WebviewController(); 1539 @State family: string = "cursive"; 1540 1541 build() { 1542 Column() { 1543 Web({ src: 'www.example.com', controller: this.controller }) 1544 .webCursiveFont(this.family) 1545 } 1546 } 1547 } 1548 ``` 1549 1550### darkMode<sup>9+</sup> 1551 1552darkMode(mode: WebDarkMode) 1553 1554设置Web深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合[forceDarkAccess](#forcedarkaccess9)使用。 1555 1556**系统能力：** SystemCapability.Web.Webview.Core 1557 1558**参数：** 1559 1560| 参数名 | 类型 | 必填 | 说明 | 1561| ---- | -------------------------------- | ---- | ---------------------- | 1562| mode | [WebDarkMode](#webdarkmode9枚举说明) | 是 | 设置Web的深色模式为关闭、开启或跟随系统。默认值：WebDarkMode.Off。 | 1563 1564**示例：** 1565 1566 ```ts 1567 // xxx.ets 1568 import { webview } from '@kit.ArkWeb'; 1569 1570 @Entry 1571 @Component 1572 struct WebComponent { 1573 controller: webview.WebviewController = new webview.WebviewController(); 1574 @State mode: WebDarkMode = WebDarkMode.On; 1575 1576 build() { 1577 Column() { 1578 Web({ src: 'www.example.com', controller: this.controller }) 1579 .darkMode(this.mode) 1580 } 1581 } 1582 } 1583 ``` 1584 1585### forceDarkAccess<sup>9+</sup> 1586 1587forceDarkAccess(access: boolean) 1588 1589设置网页是否开启强制深色模式。默认关闭。该属性仅在[darkMode](#darkmode9)开启深色模式时生效。 1590 1591**系统能力：** SystemCapability.Web.Webview.Core 1592 1593**参数：** 1594 1595| 参数名 | 类型 | 必填 | 说明 | 1596| ------ | ------- | ---- | --------------- | 1597| access | boolean | 是 | 设置网页是否开启强制深色模式。默认值：false。 | 1598 1599**示例：** 1600 1601 ```ts 1602 // xxx.ets 1603 import { webview } from '@kit.ArkWeb'; 1604 1605 @Entry 1606 @Component 1607 struct WebComponent { 1608 controller: webview.WebviewController = new webview.WebviewController(); 1609 @State mode: WebDarkMode = WebDarkMode.On; 1610 @State access: boolean = true; 1611 1612 build() { 1613 Column() { 1614 Web({ src: 'www.example.com', controller: this.controller }) 1615 .darkMode(this.mode) 1616 .forceDarkAccess(this.access) 1617 } 1618 } 1619 } 1620 ``` 1621 1622### tableData<sup>(deprecated)</sup> 1623 1624tableData(tableData: boolean) 1625 1626设置是否应保存表单数据。该接口为空接口。 1627 1628> **说明：** 1629> 1630> 从API version 10开始废弃，并且不再提供新的接口作为替代。 1631 1632**系统能力：** SystemCapability.Web.Webview.Core 1633 1634### wideViewModeAccess<sup>(deprecated)</sup> 1635 1636wideViewModeAccess(wideViewModeAccess: boolean) 1637 1638设置web是否支持html中meta标签的viewport属性。该接口为空接口。 1639 1640> **说明：** 1641> 1642> 从API version 10开始废弃，并且不再提供新的接口作为替代。 1643 1644**系统能力：** SystemCapability.Web.Webview.Core 1645 1646### pinchSmooth<sup>9+</sup> 1647 1648pinchSmooth(isEnabled: boolean) 1649 1650设置网页是否开启捏合流畅模式，默认不开启。 1651 1652**系统能力：** SystemCapability.Web.Webview.Core 1653 1654**参数：** 1655 1656| 参数名 | 类型 | 必填 | 说明 | 1657| --------- | ------- | ---- | ------------- | 1658| isEnabled | boolean | 是 | 网页是否开启捏合流畅模式。默认值：false。 | 1659 1660**示例：** 1661 1662 ```ts 1663 // xxx.ets 1664 import { webview } from '@kit.ArkWeb'; 1665 1666 @Entry 1667 @Component 1668 struct WebComponent { 1669 controller: webview.WebviewController = new webview.WebviewController(); 1670 1671 build() { 1672 Column() { 1673 Web({ src: 'www.example.com', controller: this.controller }) 1674 .pinchSmooth(true) 1675 } 1676 } 1677 } 1678 ``` 1679 1680### allowWindowOpenMethod<sup>10+</sup> 1681 1682allowWindowOpenMethod(flag: boolean) 1683 1684设置网页是否可以通过JavaScript自动打开新窗口。 1685 1686该属性为true时，可通过JavaScript自动打开新窗口。该属性为false时，用户行为仍可通过JavaScript自动打开新窗口，但非用户行为不能通过JavaScript自动打开新窗口。此处的用户行为是指，在用户对Web组件进行点击等操作后，同时在5秒内请求打开新窗口（window.open）的行为。 1687 1688该属性仅在[javaScriptAccess](#javascriptaccess)开启时生效。 1689 1690该属性在[multiWindowAccess](#multiwindowaccess9)开启时打开新窗口，关闭时打开本地窗口。 1691 1692该属性的默认值与系统属性persist.web.allowWindowOpenMethod.enabled 保持一致，如果未设置系统属性则默认值为false。 1693 1694检查系统配置项persist.web.allowWindowOpenMethod.enabled 是否开启。 1695 1696通过`hdc shell param get persist.web.allowWindowOpenMethod.enabled` 查看，若配置项为0或不存在， 1697可通过命令`hdc shell param set persist.web.allowWindowOpenMethod.enabled 1` 开启配置。 1698 1699**系统能力：** SystemCapability.Web.Webview.Core 1700 1701**参数：** 1702 1703| 参数名 | 类型 | 必填 | 说明 | 1704| ---- | ------- | ---- | ------------------------- | 1705| flag | boolean | 是 | 网页是否可以通过JavaScript自动打开窗口。默认值与系统参数关联，当系统参数persist.web.allowWindowOpenMethod.enabled为true时，默认值为true, 否则为false。 | 1706 1707**示例：** 1708 1709 ```ts 1710 // xxx.ets 1711 import { webview } from '@kit.ArkWeb'; 1712 1713 // 在同一page页有两个Web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。 1714 @CustomDialog 1715 struct NewWebViewComp { 1716 controller?: CustomDialogController; 1717 webviewController1: webview.WebviewController = new webview.WebviewController(); 1718 1719 build() { 1720 Column() { 1721 Web({ src: "", controller: this.webviewController1 }) 1722 .javaScriptAccess(true) 1723 .multiWindowAccess(false) 1724 .onWindowExit(() => { 1725 console.info("NewWebViewComp onWindowExit"); 1726 if (this.controller) { 1727 this.controller.close(); 1728 } 1729 }) 1730 } 1731 } 1732 } 1733 1734 @Entry 1735 @Component 1736 struct WebComponent { 1737 controller: webview.WebviewController = new webview.WebviewController(); 1738 dialogController: CustomDialogController | null = null; 1739 1740 build() { 1741 Column() { 1742 Web({ src: 'www.example.com', controller: this.controller }) 1743 .javaScriptAccess(true) 1744 // 需要使能multiWindowAccess 1745 .multiWindowAccess(true) 1746 .allowWindowOpenMethod(true) 1747 .onWindowNew((event) => { 1748 if (this.dialogController) { 1749 this.dialogController.close(); 1750 } 1751 let popController: webview.WebviewController = new webview.WebviewController(); 1752 this.dialogController = new CustomDialogController({ 1753 builder: NewWebViewComp({ webviewController1: popController }) 1754 }) 1755 this.dialogController.open(); 1756 // 将新窗口对应WebviewController返回给Web内核。 1757 // 若不调用event.handler.setWebController接口，会造成render进程阻塞。 1758 // 如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。 1759 event.handler.setWebController(popController); 1760 }) 1761 } 1762 } 1763 } 1764 ``` 1765 1766### mediaOptions<sup>10+</sup> 1767 1768mediaOptions(options: WebMediaOptions) 1769 1770设置Web媒体播放的策略，其中包括：Web中的音频在重新获焦后能够自动续播的有效期、应用内多个Web实例的音频是否独占。 1771 1772> **说明：** 1773> 1774> - 同一Web实例中的多个音频均视为同一音频。 1775> - 该媒体播放策略将同时管控有声视频。 1776> - 属性参数更新后需重新播放音频方可生效。 1777> - 建议为所有Web组件设置相同的audioExclusive值。 1778> - 音视频互相打断在应用内和应用间生效，续播只在应用间生效。 1779 1780**系统能力：** SystemCapability.Web.Webview.Core 1781 1782**参数：** 1783 1784| 参数名 | 类型 | 必填 | 说明 | 1785| ------- | ------------------------------------- | ---- | ---------------------------------------- | 1786| options | [WebMediaOptions](#webmediaoptions10) | 是 | 设置Web的媒体策略。其中，resumeInterval的默认值为0表示不自动续播。默认值：{resumeInterval: 0, audioExclusive: true}。 | 1787 1788**示例：** 1789 1790 ```ts 1791 // xxx.ets 1792 import { webview } from '@kit.ArkWeb'; 1793 1794 @Entry 1795 @Component 1796 struct WebComponent { 1797 controller: webview.WebviewController = new webview.WebviewController(); 1798 @State options: WebMediaOptions = {resumeInterval: 10, audioExclusive: true}; 1799 1800 build() { 1801 Column() { 1802 Web({ src: 'www.example.com', controller: this.controller }) 1803 .mediaOptions(this.options) 1804 } 1805 } 1806 } 1807 ``` 1808 1809### javaScriptOnDocumentStart<sup>11+</sup> 1810 1811javaScriptOnDocumentStart(scripts: Array\<ScriptItem>) 1812 1813将JavaScript脚本注入到Web组件中，当指定页面或者文档开始加载时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1814 1815> **说明：** 1816> 1817> - 该脚本将在页面的任何JavaScript代码之前运行，并且DOM树此时可能尚未加载、渲染完毕。 1818> - 该脚本按照字典序执行，非数组本身顺序。 1819> - 不建议与[runJavaScriptOnDocumentStart](#runjavascriptondocumentstart15)同时使用。 1820 1821**系统能力：** SystemCapability.Web.Webview.Core 1822 1823**参数：** 1824 1825| 参数名 | 类型 | 必填 | 说明 | 1826| ------- | ----------------------------------- | ---- | ------------------ | 1827| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 1828 1829**ets示例：** 1830 1831 ```ts 1832 // xxx.ets 1833 import { webview } from '@kit.ArkWeb'; 1834 1835 @Entry 1836 @Component 1837 struct Index { 1838 controller: webview.WebviewController = new webview.WebviewController(); 1839 private localStorage: string = 1840 "if (typeof(Storage) !== 'undefined') {" + 1841 " localStorage.setItem('color', 'Red');" + 1842 "}"; 1843 @State scripts: Array<ScriptItem> = [ 1844 { script: this.localStorage, scriptRules: ["*"] } 1845 ]; 1846 1847 build() { 1848 Column({ space: 20 }) { 1849 Web({ src: $rawfile('index.html'), controller: this.controller }) 1850 .javaScriptAccess(true) 1851 .domStorageAccess(true) 1852 .backgroundColor(Color.Grey) 1853 .javaScriptOnDocumentStart(this.scripts) 1854 .width('100%') 1855 .height('100%') 1856 } 1857 } 1858 } 1859 ``` 1860**HTML示例：** 1861 1862```html 1863<!-- index.html --> 1864<!DOCTYPE html> 1865<html> 1866 <head> 1867 <meta charset="utf-8"> 1868 </head> 1869 <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 1870 Hello world! 1871 <div id="result"></div> 1872 </body> 1873 <script type="text/javascript"> 1874 function bodyOnLoadLocalStorage() { 1875 if (typeof(Storage) !== 'undefined') { 1876 document.getElementById('result').innerHTML = localStorage.getItem('color'); 1877 } else { 1878 document.getElementById('result').innerHTML = 'Your browser does not support localStorage.'; 1879 } 1880 } 1881 </script> 1882</html> 1883``` 1884 1885### javaScriptOnDocumentEnd<sup>11+</sup> 1886 1887javaScriptOnDocumentEnd(scripts: Array\<ScriptItem>) 1888 1889将JavaScript脚本注入到Web组件中，当指定页面或者文档加载完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1890 1891> **说明：** 1892> 1893> - 该脚本将在页面的任何JavaScript代码之后运行，并且DOM树此时已经加载、渲染完毕。 1894> - 该脚本按照字典序执行，非数组本身顺序。 1895> - 不建议与[runJavaScriptOnDocumentEnd](#runjavascriptondocumentend15)同时使用。 1896 1897**系统能力：** SystemCapability.Web.Webview.Core 1898 1899**参数：** 1900 1901| 参数名 | 类型 | 必填 | 说明 | 1902| ------- | ----------------------------------- | ---- | ------------------ | 1903| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 1904 1905**示例：** 1906 1907 ```ts 1908// xxx.ets 1909import { webview } from '@kit.ArkWeb'; 1910 1911@Entry 1912@Component 1913struct Index { 1914 controller: webview.WebviewController = new webview.WebviewController(); 1915 private jsStr: string = 1916 "window.document.getElementById(\"result\").innerHTML = 'this is msg from javaScriptOnDocumentEnd'"; 1917 @State scripts: Array<ScriptItem> = [ 1918 { script: this.jsStr, scriptRules: ["*"] } 1919 ]; 1920 1921 build() { 1922 Column({ space: 20 }) { 1923 Web({ src: $rawfile('index.html'), controller: this.controller }) 1924 .javaScriptAccess(true) 1925 .domStorageAccess(true) 1926 .backgroundColor(Color.Grey) 1927 .javaScriptOnDocumentEnd(this.scripts) 1928 .width('100%') 1929 .height('100%') 1930 } 1931 } 1932} 1933 ``` 1934 1935```html 1936<!DOCTYPE html> 1937<html> 1938<head> 1939 <meta charset="utf-8"> 1940</head> 1941<body style="font-size: 30px;"> 1942Hello world! 1943<div id="result">test msg</div> 1944</body> 1945</html> 1946``` 1947 1948### runJavaScriptOnDocumentStart<sup>15+</sup> 1949 1950runJavaScriptOnDocumentStart(scripts: Array\<ScriptItem>) 1951 1952将JavaScript脚本注入到Web组件中，当指定页面或者文档开始加载时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1953 1954> **说明：** 1955> 1956> - 该脚本将在页面的任何JavaScript代码之前运行，并且DOM树此时可能尚未加载、渲染完毕。 1957> - 该脚本按照数组本身顺序执行。 1958> - 不建议与[javaScriptOnDocumentStart](#javascriptondocumentstart11)同时使用。 1959 1960**系统能力：** SystemCapability.Web.Webview.Core 1961 1962**参数：** 1963 1964| 参数名 | 类型 | 必填 | 说明 | 1965| ------- | ----------------------------------- | ---- | ------------------ | 1966| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 1967 1968**ets示例：** 1969 1970 ```ts 1971 // xxx.ets 1972 import { webview } from '@kit.ArkWeb'; 1973 1974 @Entry 1975 @Component 1976 struct Index { 1977 controller: webview.WebviewController = new webview.WebviewController(); 1978 private localStorage: string = 1979 "if (typeof(Storage) !== 'undefined') {" + 1980 " localStorage.setItem('color', 'Red');" + 1981 "}"; 1982 @State scripts: Array<ScriptItem> = [ 1983 { script: this.localStorage, scriptRules: ["*"] } 1984 ]; 1985 1986 build() { 1987 Column({ space: 20 }) { 1988 Web({ src: $rawfile('index.html'), controller: this.controller }) 1989 .javaScriptAccess(true) 1990 .domStorageAccess(true) 1991 .backgroundColor(Color.Grey) 1992 .runJavaScriptOnDocumentStart(this.scripts) 1993 .width('100%') 1994 .height('100%') 1995 } 1996 } 1997 } 1998 ``` 1999**HTML示例：** 2000 2001```html 2002<!-- index.html --> 2003<!DOCTYPE html> 2004<html> 2005 <head> 2006 <meta charset="utf-8"> 2007 </head> 2008 <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 2009 Hello world! 2010 <div id="result"></div> 2011 </body> 2012 <script type="text/javascript"> 2013 function bodyOnLoadLocalStorage() { 2014 if (typeof(Storage) !== 'undefined') { 2015 document.getElementById('result').innerHTML = localStorage.getItem('color'); 2016 } else { 2017 document.getElementById('result').innerHTML = 'Your browser does not support localStorage.'; 2018 } 2019 } 2020 </script> 2021</html> 2022``` 2023 2024### runJavaScriptOnDocumentEnd<sup>15+</sup> 2025 2026runJavaScriptOnDocumentEnd(scripts: Array\<ScriptItem>) 2027 2028将JavaScript脚本注入到Web组件中，当指定页面或者文档加载完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 2029 2030> **说明：** 2031> 2032> - 该脚本将在页面的任何JavaScript代码之后运行，并且DOM树此时已经加载、渲染完毕。 2033> - 该脚本按照数组本身顺序执行。 2034> - 不建议与[javaScriptOnDocumentEnd](#javascriptondocumentend11)同时使用。 2035 2036**系统能力：** SystemCapability.Web.Webview.Core 2037 2038**参数：** 2039 2040| 参数名 | 类型 | 必填 | 说明 | 2041| ------- | ----------------------------------- | ---- | ------------------ | 2042| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 2043 2044**示例：** 2045 2046 ```ts 2047// xxx.ets 2048import { webview } from '@kit.ArkWeb'; 2049 2050@Entry 2051@Component 2052struct Index { 2053 controller: webview.WebviewController = new webview.WebviewController(); 2054 private jsStr: string = 2055 "window.document.getElementById(\"result\").innerHTML = 'this is msg from runJavaScriptOnDocumentEnd'"; 2056 @State scripts: Array<ScriptItem> = [ 2057 { script: this.jsStr, scriptRules: ["*"] } 2058 ]; 2059 2060 build() { 2061 Column({ space: 20 }) { 2062 Web({ src: $rawfile('index.html'), controller: this.controller }) 2063 .javaScriptAccess(true) 2064 .domStorageAccess(true) 2065 .backgroundColor(Color.Grey) 2066 .runJavaScriptOnDocumentEnd(this.scripts) 2067 .width('100%') 2068 .height('100%') 2069 } 2070 } 2071} 2072 ``` 2073 2074```html 2075<!DOCTYPE html> 2076<html> 2077<head> 2078 <meta charset="utf-8"> 2079</head> 2080<body style="font-size: 30px;"> 2081Hello world! 2082<div id="result">test msg</div> 2083</body> 2084</html> 2085``` 2086 2087### runJavaScriptOnHeadEnd<sup>15+</sup> 2088 2089runJavaScriptOnHeadEnd(scripts: Array\<ScriptItem>) 2090 2091将JavaScript脚本注入到Web组件中，当页面DOM树head标签解析完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 2092 2093> **说明：** 2094> 2095> - 该脚本按照数组本身顺序执行。 2096 2097**系统能力：** SystemCapability.Web.Webview.Core 2098 2099**参数：** 2100 2101| 参数名 | 类型 | 必填 | 说明 | 2102| ------- | ----------------------------------- | ---- | ------------------ | 2103| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 2104 2105**示例：** 2106 2107 ```ts 2108// xxx.ets 2109import { webview } from '@kit.ArkWeb'; 2110 2111@Entry 2112@Component 2113struct Index { 2114 controller: webview.WebviewController = new webview.WebviewController(); 2115 private jsStr: string = 2116 "window.document.getElementById(\"result\").innerHTML = 'this is msg from runJavaScriptOnHeadEnd'"; 2117 @State scripts: Array<ScriptItem> = [ 2118 { script: this.jsStr, scriptRules: ["*"] } 2119 ]; 2120 2121 build() { 2122 Column({ space: 20 }) { 2123 Web({ src: $rawfile('index.html'), controller: this.controller }) 2124 .javaScriptAccess(true) 2125 .domStorageAccess(true) 2126 .backgroundColor(Color.Grey) 2127 .runJavaScriptOnHeadEnd(this.scripts) 2128 .width('100%') 2129 .height('100%') 2130 } 2131 } 2132} 2133 ``` 2134 2135```html 2136<!DOCTYPE html> 2137<html> 2138<head> 2139 <meta charset="utf-8"> 2140</head> 2141<body style="font-size: 30px;"> 2142Hello world! 2143<div id="result">test msg</div> 2144</body> 2145</html> 2146``` 2147 2148### layoutMode<sup>11+</sup> 2149 2150layoutMode(mode: WebLayoutMode) 2151 2152设置Web布局模式。 2153 2154> **说明：** 2155> 2156> 目前只支持两种Web布局模式，分别为Web布局跟随系统（WebLayoutMode.NONE）和Web组件高度基于前端页面高度的自适应网页布局（WebLayoutMode.FIT_CONTENT）。 2157> 2158> Web组件高度基于前端页面自适应布局有如下限制： 2159> - 如果Web组件宽或长度超过7680px，请在Web组件创建的时候指定RenderMode.SYNC_RENDER模式，否则会整个白屏。 2160> - Web组件创建后不支持动态切换layoutMode模式 2161> - Web组件宽高规格：指定RenderMode.SYNC_RENDER模式时，分别不超过50万px；指定RenderMode.ASYNC_RENDER模式时，分别不超过7680px。 2162> - 频繁更改页面宽高会触发Web组件重新布局，影响体验。 2163> - 不支持瀑布流网页（下拉到底部加载更多）。 2164> - 仅支持高度自适应，不支持宽度自适应。 2165> - 由于高度自适应网页高度，您无法通过修改组件高度属性来修改组件高度。 2166 2167**系统能力：** SystemCapability.Web.Webview.Core 2168 2169**参数：** 2170 2171| 参数名 | 类型 | 必填 | 说明 | 2172| ---- | ------------------------------------- | ---- | --------------------- | 2173| mode | [WebLayoutMode](#weblayoutmode11枚举说明) | 是 | 设置web布局模式，跟随系统或自适应布局。默认值：WebLayoutMode.NONE。 | 2174 2175**示例：** 2176 2177 1、指明layoutMode为WebLayoutMode.FIT_CONTENT模式，为避免默认渲染模式下(RenderMode.ASYNC_RENDER)视口高度超过7680px导致页面渲染出错，需要显式指明渲染模式(RenderMode.SYNC_RENDER)。 2178 ```ts 2179 // xxx.ets 2180 import { webview } from '@kit.ArkWeb'; 2181 2182 @Entry 2183 @Component 2184 struct WebComponent { 2185 controller: webview.WebviewController = new webview.WebviewController(); 2186 mode: WebLayoutMode = WebLayoutMode.FIT_CONTENT; 2187 2188 build() { 2189 Column() { 2190 Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER }) 2191 .layoutMode(this.mode) 2192 } 2193 } 2194 } 2195 ``` 2196 2197 2、指明layoutMode为WebLayoutMode.FIT_CONTENT模式，为避免嵌套滚动场景下，Web滚动到边缘时会优先触发过滚动的过界回弹效果影响用户体验，建议指定overScrollMode为OverScrollMode.NEVER。 2198 ```ts 2199 // xxx.ets 2200 import { webview } from '@kit.ArkWeb'; 2201 2202 @Entry 2203 @Component 2204 struct WebComponent { 2205 controller: webview.WebviewController = new webview.WebviewController(); 2206 layoutMode: WebLayoutMode = WebLayoutMode.FIT_CONTENT; 2207 @State overScrollMode: OverScrollMode = OverScrollMode.NEVER; 2208 2209 build() { 2210 Column() { 2211 Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER }) 2212 .layoutMode(this.layoutMode) 2213 .overScrollMode(this.overScrollMode) 2214 } 2215 } 2216 } 2217 ``` 2218 2219### nestedScroll<sup>11+</sup> 2220 2221nestedScroll(value: NestedScrollOptions | NestedScrollOptionsExt) 2222 2223调用以设置嵌套滚动选项。 2224 2225> **说明：** 2226> 2227> - 可以设置上下左右四个方向，或者设置向前、向后两个方向的嵌套滚动模式，实现与父组件的滚动联动。 2228> - value为NestedScrollOptionsExt（上下左右四个方向）类型时，scrollUp、scrollDown、scrollLeft、scrollRight默认滚动选项为[NestedScrollMode.SELF_FIRST](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10)。 2229> - value为NestedScrollOptions（向前、向后两个方向）类型时，scrollForward、scrollBackward默认滚动选项为NestedScrollMode.SELF_FIRST。 2230> - 支持嵌套滚动的容器：[Grid](../apis-arkui/arkui-ts/ts-container-grid.md)、[List](../apis-arkui/arkui-ts/ts-container-list.md)、[Scroll](../apis-arkui/arkui-ts/ts-container-scroll.md)、[Swiper](../apis-arkui/arkui-ts/ts-container-swiper.md)、[Tabs](../apis-arkui/arkui-ts/ts-container-tabs.md)、[WaterFlow](../apis-arkui/arkui-ts/ts-container-waterflow.md)、[Refresh](../apis-arkui/arkui-ts/ts-container-refresh.md)、[bindSheet](../apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet)。 2231> - 支持嵌套滚动的输入事件：使用手势、鼠标、触控板。 2232> - 嵌套滚动场景下，由于Web滚动到边缘时会优先触发过滚动的过界回弹效果，建议设置overScrollMode为OverScrollMode.NEVER，避免影响此场景的用户体验。 2233 2234**系统能力：** SystemCapability.Web.Webview.Core 2235 2236**参数：** 2237 2238| 参数名 | 类型 | 必填 | 说明 | 2239| ----- | ---------------------------------------- | ---- | ---------------- | 2240| value | [NestedScrollOptions](../apis-arkui/arkui-ts/ts-container-scrollable-common.md#nestedscrolloptions10对象说明) \| [NestedScrollOptionsExt](#nestedscrolloptionsext14对象说明)<sup>14+</sup> | 是 | 可滚动组件滚动时的嵌套滚动选项。 | 2241 2242**示例：** 2243 2244 ```ts 2245 // xxx.ets 2246 import { webview } from '@kit.ArkWeb'; 2247 @Entry 2248 @Component 2249 struct WebComponent { 2250 controller: webview.WebviewController = new webview.WebviewController(); 2251 2252 build() { 2253 Column() { 2254 Web({ src: 'www.example.com', controller: this.controller }) 2255 .nestedScroll({ 2256 scrollForward: NestedScrollMode.SELF_FIRST, 2257 scrollBackward: NestedScrollMode.SELF_FIRST, 2258 }) 2259 } 2260 } 2261 } 2262 ``` 2263 ```ts 2264 // xxx.ets 2265 import { webview } from '@kit.ArkWeb'; 2266 @Entry 2267 @Component 2268 struct WebComponent { 2269 controller: webview.WebviewController = new webview.WebviewController() 2270 build() { 2271 Scroll(){ 2272 Column() { 2273 Text("嵌套Web") 2274 .height("25%") 2275 .width("100%") 2276 .fontSize(30) 2277 .backgroundColor(Color.Yellow) 2278 Web({ src: $rawfile('index.html'), 2279 controller: this.controller }) 2280 .nestedScroll({ 2281 scrollUp: NestedScrollMode.SELF_FIRST, 2282 scrollDown: NestedScrollMode.PARENT_FIRST, 2283 scrollLeft: NestedScrollMode.SELF_FIRST, 2284 scrollRight: NestedScrollMode.SELF_FIRST, 2285 }) 2286 } 2287 } 2288 } 2289 } 2290 ``` 2291 加载的html文件。 2292 ```html 2293 <!-- index.html --> 2294 <!DOCTYPE html> 2295 <html> 2296 <head> 2297 <style> 2298 .blue { 2299 background-color: lightblue; 2300 } 2301 .green { 2302 background-color: lightgreen; 2303 } 2304 .blue, .green { 2305 width: 100%; 2306 font-size:70px; 2307 height:1000px; 2308 } 2309 </style> 2310 </head> 2311 <body> 2312 <div class="blue" align="center" >滚动1</div> 2313 <div class="green" align="center">滚动2</div> 2314 <div class="blue" align="center">滚动3</div> 2315 <div class="green" align="center">滚动4</div> 2316 <div class="blue" align="center">滚动5</div> 2317 <div class="green" align="center">滚动6</div> 2318 <div class="blue" align="center">滚动7</div> 2319 </body> 2320 </html> 2321 ``` 2322 2323### enableNativeEmbedMode<sup>11+</sup> 2324 2325enableNativeEmbedMode(mode: boolean) 2326 2327设置是否开启同层渲染功能，默认不开启。 2328 2329**系统能力：** SystemCapability.Web.Webview.Core 2330 2331**参数：** 2332 2333| 参数名 | 类型 | 必填 | 说明 | 2334| ----- | ---------------------------------------- | ---- | ---------------- | 2335| mode | boolean | 是 | 是否开启同层渲染功能。默认值：false。 | 2336 2337**示例：** 2338 2339 ```ts 2340 // xxx.ets 2341 import { webview } from '@kit.ArkWeb'; 2342 @Entry 2343 @Component 2344 struct WebComponent { 2345 controller: webview.WebviewController = new webview.WebviewController(); 2346 2347 build() { 2348 Column() { 2349 Web({ src: 'www.example.com', controller: this.controller }) 2350 .enableNativeEmbedMode(true) 2351 } 2352 } 2353 } 2354 ``` 2355### forceDisplayScrollBar<sup>14+</sup> 2356 2357forceDisplayScrollBar(enabled: boolean) 2358 2359 2360设置滚动条是否常驻。默认不常驻，在常驻状态下，当页面大小超过一页时，滚动条出现且不消失。 2361 2362全量展开模式下不支持滚动条常驻，即layoutMode为WebLayoutMode.FIT_CONTENT模式时，参数enabled为false。 2363 2364**系统能力：** SystemCapability.Web.Webview.Core 2365 2366**参数：** 2367 2368| 参数名 | 类型 | 必填 | 说明 | 2369| ------- | -------- | ---- | ------------------ | 2370| enabled | boolean | 是 | 滚动条是否常驻。默认值：false。 | 2371 2372 2373**示例：** 2374 2375 ```ts 2376 // xxx.ets 2377 import { webview } from '@kit.ArkWeb'; 2378 2379 @Entry 2380 @Component 2381 struct WebComponent { 2382 controller: webview.WebviewController = new webview.WebviewController(); 2383 2384 build() { 2385 Column() { 2386 Web({ src: $rawfile('index.html'), controller: this.controller }) 2387 .forceDisplayScrollBar(true) 2388 } 2389 } 2390 } 2391 ``` 2392 2393 加载的html文件。 2394 ```html 2395 <!--index.html--> 2396 <!DOCTYPE html> 2397 <html> 2398 <head> 2399 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2400 <title>Demo</title> 2401 <style> 2402 body { 2403 width:2560px; 2404 height:2560px; 2405 padding-right:170px; 2406 padding-left:170px; 2407 border:5px solid blueviolet 2408 } 2409 </style> 2410 </head> 2411 <body> 2412 Scroll Test 2413 </body> 2414 </html> 2415 ``` 2416### registerNativeEmbedRule<sup>12+</sup> 2417 2418registerNativeEmbedRule(tag: string, type: string) 2419 2420注册使用同层渲染的HTML标签名和类型。标签名仅支持使用object和embed。标签类型只能使用ASCII可显示字符。 2421 2422若指定类型与w3c定义的object或embed标准类型重合，ArkWeb内核将其识别为非同层标签。 2423 2424本接口同样受enableNativeEmbedMode接口控制，在未使能同层渲染时本接口无效。在不使用本接口的情况下，ArkWeb内核默认将"native/"前缀类型的embed标签识别为同层标签。 2425 2426**系统能力：** SystemCapability.Web.Webview.Core 2427 2428**参数：** 2429 2430| 参数名 | 类型 | 必填 | 说明 | 2431|------|--------| ---- |------------------| 2432| tag | string | 是 | 标签名。 | 2433| type | string | 是 | 标签类型,内核使用前缀匹配此参数。 | 2434 2435**示例：** 2436 2437 ```ts 2438 // xxx.ets 2439 import { webview } from '@kit.ArkWeb'; 2440 2441 @Entry 2442 @Component 2443 struct WebComponent { 2444 controller: webview.WebviewController = new webview.WebviewController(); 2445 2446 build() { 2447 Column() { 2448 Web({ src: 'www.example.com', controller: this.controller }) 2449 .enableNativeEmbedMode(true) 2450 .registerNativeEmbedRule("object", "application/view") 2451 } 2452 } 2453 } 2454 ``` 2455### defaultTextEncodingFormat<sup>12+</sup> 2456 2457defaultTextEncodingFormat(textEncodingFormat: string) 2458 2459设置网页的默认字符编码。 2460 2461**系统能力：** SystemCapability.Web.Webview.Core 2462 2463**参数：** 2464 2465| 参数名 | 类型 | 必填 | 说明 | 2466| ---- | ------ | ---- | ---------------------------------------- | 2467| textEncodingFormat | string | 是 | 默认字符编码。默认值："UTF-8"。 | 2468 2469 **示例：** 2470 2471 ```ts 2472 // xxx.ets 2473 import { webview } from '@kit.ArkWeb'; 2474 2475 @Entry 2476 @Component 2477 struct WebComponent { 2478 controller: webview.WebviewController = new webview.WebviewController(); 2479 2480 build() { 2481 Column() { 2482 Web({ src: $rawfile('index.html'), controller: this.controller }) 2483 // 设置高 2484 .height(500) 2485 .defaultTextEncodingFormat("UTF-8") 2486 .javaScriptAccess(true) 2487 } 2488 } 2489 } 2490 ``` 2491 2492```html 2493 2494<!doctype html> 2495<html> 2496<head> 2497 <meta name="viewport" content="width=device-width" /> 2498 <title>My test html5 page</title> 2499</head> 2500<body> 2501 hello world, 你好世界! 2502</body> 2503</html> 2504``` 2505### metaViewport<sup>12+</sup> 2506 2507metaViewport(enabled: boolean) 2508 2509设置meta标签的viewport属性是否可用。 2510 2511> **说明：** 2512> 2513> - 设置false不支持meta标签viewport属性，将不解析viewport属性，进行默认布局。 2514> - 设置true支持meta标签viewport属性，将解析viewport属性，并根据viewport属性布局。 2515> - 如果设置为异常值将无效。 2516> - 如果设备为2in1，不支持viewport属性。设置为true或者false均不会解析viewport属性，进行默认布局。 2517> - 如果设备为Tablet，设置为true或false均会解析meta标签viewport-fit属性。当viewport-fit=cover时，可通过CSS属性获取安全区域大小。 2518> - 当前通过UserAgent中是否含有"Mobile"字段来判断是否开启前端HTML页面中meta标签的viewport属性。当UserAgent中不含有"Mobile"字段时，meta标签中viewport属性默认关闭，此时可通过显性设置metaViewport属性为true来覆盖关闭状态。 2519 2520**系统能力：** SystemCapability.Web.Webview.Core 2521 2522**参数：** 2523 2524| 参数名 | 类型 | 必填 | 说明 | 2525| ------ | -------- | ---- | -------------------------------- | 2526| enabled | boolean | 是 | 是否支持meta标签的viewport属性。默认值：true。 | 2527 2528**示例：** 2529 2530 ```ts 2531// xxx.ets 2532import { webview } from '@kit.ArkWeb'; 2533 2534@Entry 2535@Component 2536struct WebComponent { 2537 controller: webview.WebviewController = new webview.WebviewController(); 2538 2539 build() { 2540 Column() { 2541 Web({ src: $rawfile('index.html'), controller: this.controller }) 2542 .metaViewport(true) 2543 } 2544 } 2545} 2546 ``` 2547 2548```html 2549<!doctype html> 2550<html> 2551<head> 2552 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2553</head> 2554<body> 2555 <p>hello world, 你好世界!</p> 2556</body> 2557</html> 2558``` 2559 2560### textAutosizing<sup>12+</sup> 2561 2562textAutosizing(textAutosizing: boolean) 2563 2564设置使能文本自动调整大小。 2565 2566**系统能力：** SystemCapability.Web.Webview.Core 2567 2568**参数：** 2569 2570| 参数名 | 类型 | 必填 | 说明 | 2571| ---- | ------ | ---- | ---------------------------------------- | 2572| textAutosizing | boolean | 是 | 文本自动调整大小。默认值：true。 | 2573 2574 **示例：** 2575 2576 ```ts 2577 // xxx.ets 2578 import { webview } from '@kit.ArkWeb'; 2579 2580 @Entry 2581 @Component 2582 struct WebComponent { 2583 controller: webview.WebviewController = new webview.WebviewController(); 2584 2585 build() { 2586 Column() { 2587 Web({ src: 'www.example.com', controller: this.controller }) 2588 .textAutosizing(false) 2589 } 2590 } 2591 } 2592 ``` 2593### enableNativeMediaPlayer<sup>12+</sup> 2594 2595enableNativeMediaPlayer(config: NativeMediaPlayerConfig) 2596 2597开启[应用接管网页媒体播放功能](../../web/app-takeovers-web-media.md)。 2598 2599**系统能力：** SystemCapability.Web.Webview.Core 2600 2601**参数：** 2602 2603| 参数名 | 类型 | 必填 | 说明 | 2604| ---- | ------ | ---- | ---------------------| 2605| config | [NativeMediaPlayerConfig](#nativemediaplayerconfig12) | 是 | enable: 是否开启该功能。<br/> shouldOverlay: 该功能开启后， 应用接管网页视频的播放器画面是否覆盖网页内容。默认值：{enable: false, shouldOverlay: false}。| 2606 2607 **示例：** 2608 2609 ```ts 2610 // xxx.ets 2611 import { webview } from '@kit.ArkWeb'; 2612 2613 @Entry 2614 @Component 2615 struct WebComponent { 2616 controller: webview.WebviewController = new webview.WebviewController(); 2617 2618 build() { 2619 Column() { 2620 Web({ src: 'www.example.com', controller: this.controller }) 2621 .enableNativeMediaPlayer({enable: true, shouldOverlay: false}) 2622 } 2623 } 2624 } 2625 ``` 2626 2627### selectionMenuOptions<sup>12+</sup> 2628 2629selectionMenuOptions(expandedMenuOptions: Array\<ExpandedMenuItemOptions>) 2630 2631Web组件自定义菜单扩展项接口，允许用户设置扩展项的文本内容、图标、回调方法。 2632 2633该接口只支持选中纯文本，当选中内容包含图片及其他非文本内容时，action信息中会显示乱码。 2634 2635**系统能力：** SystemCapability.Web.Webview.Core 2636 2637**参数：** 2638 2639| 参数名 | 类型 | 必填 | 说明 | 2640| ------------------- | ---------------------------------------------------------- | ---- | ------------- | 2641| expandedMenuOptions | Array<[ExpandedMenuItemOptions](#expandedmenuitemoptions12)> | 是 | 扩展菜单选项。<br/>菜单项数量，及菜单的content大小、startIcon图标尺寸，与ArkUI [Menu](../apis-arkui/arkui-ts/ts-basic-components-menu.md)组件保持一致。| 2642 2643**示例：** 2644 2645 ```ts 2646 // xxx.ets 2647 import { webview } from '@kit.ArkWeb'; 2648 2649 @Entry 2650 @Component 2651 struct WebComponent { 2652 controller: webview.WebviewController = new webview.WebviewController(); 2653 @State menuOptionArray: Array<ExpandedMenuItemOptions> = [ 2654 {content: 'Apple', startIcon: $r('app.media.icon'), action: (selectedText) => { 2655 console.info('select info ' + selectedText.toString()); 2656 }}, 2657 {content: '香蕉', startIcon: $r('app.media.icon'), action: (selectedText) => { 2658 console.info('select info ' + selectedText.toString()); 2659 }} 2660 ]; 2661 2662 build() { 2663 Column() { 2664 Web({ src: $rawfile("index.html"), controller: this.controller }) 2665 .selectionMenuOptions(this.menuOptionArray) 2666 } 2667 } 2668 } 2669 ``` 2670 2671 加载的html文件。 2672 ```html 2673 <!--index.html--> 2674 <!DOCTYPE html> 2675 <html> 2676 <head> 2677 <title>测试网页</title> 2678 </head> 2679 <body> 2680 <h1>selectionMenuOptions Demo</h1> 2681 <span>selection menu options</span> 2682 </body> 2683 </html> 2684 ``` 2685 2686### onAdsBlocked<sup>12+</sup> 2687 2688onAdsBlocked(callback: OnAdsBlockedCallback) 2689 2690一个页面发生广告过滤后，通过此回调接口通知过滤的详细信息。由于页面可能随时发生变化并不断产生网络请求，为了减少通知频次、降低对页面加载过程的影响，仅在页面加载完成时进行首次通知，此后发生的过滤将间隔1秒钟上报，无广告过滤则无通知。 2691 2692**系统能力：** SystemCapability.Web.Webview.Core 2693 2694**参数：** 2695 2696| 参数名 | 类型 | 必填 | 说明 | 2697| ------ | ------ | ---- | --------------------- | 2698| callback | [OnAdsBlockedCallback](#onadsblockedcallback12) | 是 | onAdsBlocked的回调。 | 2699 2700**示例：** 2701 2702 ```ts 2703 // xxx.ets 2704 import { webview } from '@kit.ArkWeb'; 2705 2706 @Entry 2707 @Component 2708 struct WebComponent { 2709 @State totalAdsBlockCounts: number = 0; 2710 controller: webview.WebviewController = new webview.WebviewController(); 2711 2712 build() { 2713 Column() { 2714 Web({ src: 'https://www.example.com', controller: this.controller }) 2715 .onAdsBlocked((details: AdsBlockedDetails) => { 2716 if (details) { 2717 console.log(' Blocked ' + details.adsBlocked.length + ' in ' + details.url); 2718 let adList: Array<string> = Array.from(new Set(details.adsBlocked)); 2719 this.totalAdsBlockCounts += adList.length; 2720 console.log('Total blocked counts :' + this.totalAdsBlockCounts); 2721 } 2722 }) 2723 } 2724 } 2725 } 2726 ``` 2727 2728### keyboardAvoidMode<sup>12+</sup> 2729 2730keyboardAvoidMode(mode: WebKeyboardAvoidMode) 2731 2732Web组件自定义软件键盘避让模式。 2733 2734当UIContext设置的键盘避让模式为[KeyboardAvoidMode.RESIZE](../apis-arkui/js-apis-arkui-UIContext.md#keyboardavoidmode11)模式时，该接口功能不生效。 2735 2736**系统能力：** SystemCapability.Web.Webview.Core 2737 2738**参数：** 2739 2740| 参数名 | 类型 | 必填 | 说明 | 2741| ------------------- | ------------------------------ | ------ | ------------- | 2742| mode | [WebKeyboardAvoidMode](#webkeyboardavoidmode12) | 是 | Web软键盘避让模式。<br>默认是WebKeyboardAvoidMode.RESIZE_CONTENT避让行为。<br>嵌套滚动场景下不推荐使用web软键盘避让，包括RESIZE_VISUAL与RESIZE_CONTENT。| 2743 2744**示例：** 2745 2746 ```ts 2747 // xxx.ets 2748 import { webview } from '@kit.ArkWeb'; 2749 2750 @Entry 2751 @Component 2752 struct WebComponent { 2753 controller: webview.WebviewController = new webview.WebviewController(); 2754 @State avoidMode: WebKeyboardAvoidMode = WebKeyboardAvoidMode.RESIZE_VISUAL; 2755 2756 build() { 2757 Column() { 2758 Web({ src: $rawfile("index.html"), controller: this.controller }) 2759 .keyboardAvoidMode(this.avoidMode) 2760 } 2761 } 2762 } 2763 ``` 2764 2765 加载的html文件。 2766 ```html 2767 <!--index.html--> 2768 <!DOCTYPE html> 2769 <html> 2770 <head> 2771 <title>测试网页</title> 2772 </head> 2773 <body> 2774 <input type="text" placeholder="Text"> 2775 </body> 2776 </html> 2777 ``` 2778 2779### editMenuOptions<sup>12+</sup> 2780 2781editMenuOptions(editMenu: EditMenuOptions) 2782 2783Web组件自定义文本选择菜单。 2784 2785用户可以通过该属性设置自定义的文本菜单。 2786 2787在[onCreateMenu](../apis-arkui/arkui-ts/ts-text-common.md#oncreatemenu)中，可以修改、增加、删除菜单选项，如果希望不显示文本菜单，需要返回空数组。 2788 2789在[onMenuItemClick](../apis-arkui/arkui-ts/ts-text-common.md#onmenuitemclick)中，可以自定义菜单选项的回调函数。该函数在菜单选项被点击后触发，并根据返回值决定是否执行系统默认的回调。返回true不执行系统回调，返回false继续执行系统回调。 2790 2791本接口在与[selectionMenuOptions](#selectionmenuoptions12)同时使用时，会使selectionMenuOptions不生效。 2792 2793**系统能力：** SystemCapability.Web.Webview.Core 2794 2795**参数：** 2796 2797| 参数名 | 类型 | 必填 | 说明 | 2798| ------------------- | ------------------------------ | ------ | ------------- | 2799| editMenu | [EditMenuOptions](../apis-arkui/arkui-ts/ts-text-common.md#editmenuoptions) | 是 | Web自定义文本菜单选项。<br>菜单项数量，及菜单的content大小、icon图标尺寸，与ArkUI [Menu](../apis-arkui/arkui-ts/ts-basic-components-menu.md)组件保持一致。<br>菜单中系统自带的id枚举值（[TextMenuItemId](../apis-arkui/arkui-ts/ts-text-common.md#textmenuitemid12)）在Web中仅支持CUT、COPY、PASTE、SELECT_ALL四项。<br>onMenuItemClick函数中textRange参数在web中无意义，传入值为-1。| 2800 2801**示例** 2802 2803```ts 2804// xxx.ets 2805import { webview } from '@kit.ArkWeb'; 2806 2807@Entry 2808@Component 2809struct WebComponent { 2810 controller: webview.WebviewController = new webview.WebviewController(); 2811 2812 onCreateMenu(menuItems: Array<TextMenuItem>): Array<TextMenuItem> { 2813 let items = menuItems.filter((menuItem) => { 2814 // 过滤用户需要的系统按键 2815 return ( 2816 menuItem.id.equals(TextMenuItemId.CUT) || 2817 menuItem.id.equals(TextMenuItemId.COPY) || 2818 menuItem.id.equals((TextMenuItemId.PASTE)) 2819 ) 2820 }); 2821 let customItem1: TextMenuItem = { 2822 content: 'customItem1', 2823 id: TextMenuItemId.of('customItem1'), 2824 icon: $r('app.media.icon') 2825 }; 2826 let customItem2: TextMenuItem = { 2827 content: $r('app.string.customItem2'), 2828 id: TextMenuItemId.of('customItem2'), 2829 icon: $r('app.media.icon') 2830 }; 2831 items.push(customItem1);// 在选项列表后添加新选项 2832 items.unshift(customItem2);// 在选项列表前添加选项 2833 2834 return items; 2835 } 2836 2837 onMenuItemClick(menuItem: TextMenuItem, textRange: TextRange): boolean { 2838 if (menuItem.id.equals(TextMenuItemId.CUT)) { 2839 // 用户自定义行为 2840 console.log("拦截 id：CUT") 2841 return true; // 返回true不执行系统回调 2842 } else if (menuItem.id.equals(TextMenuItemId.COPY)) { 2843 // 用户自定义行为 2844 console.log("不拦截 id：COPY") 2845 return false; // 返回false执行系统回调 2846 } else if (menuItem.id.equals(TextMenuItemId.of('customItem1'))) { 2847 // 用户自定义行为 2848 console.log("拦截 id：customItem1") 2849 return true;// 用户自定义菜单选项返回true时点击后不关闭菜单，返回false时关闭菜单 2850 } else if (menuItem.id.equals((TextMenuItemId.of($r('app.string.customItem2'))))){ 2851 // 用户自定义行为 2852 console.log("拦截 id：app.string.customItem2") 2853 return true; 2854 } 2855 return false;// 返回默认值false 2856 } 2857 2858 @State EditMenuOptions: EditMenuOptions = { onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick } 2859 2860 build() { 2861 Column() { 2862 Web({ src: $rawfile("index.html"), controller: this.controller }) 2863 .editMenuOptions(this.EditMenuOptions) 2864 } 2865 } 2866} 2867``` 2868 2869 加载的html文件。 2870```html 2871<!--index.html--> 2872<!DOCTYPE html> 2873<html> 2874 <head> 2875 <title>测试网页</title> 2876 </head> 2877 <body> 2878 <h1>editMenuOptions Demo</h1> 2879 <span>edit menu options</span> 2880 </body> 2881</html> 2882``` 2883 2884### enableHapticFeedback<sup>13+</sup> 2885 2886enableHapticFeedback(enabled: boolean) 2887 2888设置Web组件长按文本选择是否开启振动，默认开启。 需配置"ohos.permission.VIBRATE"。 2889 2890**系统能力：** SystemCapability.Web.Webview.Core 2891 2892**参数：** 2893 2894| 参数名 | 类型 | 必填 | 说明 | 2895| --------- | --------- | ------ | ------------- | 2896| enabled | boolean | 是 | 是否开启振动。默认值：true。 | 2897 2898**示例：** 2899 2900```ts 2901// xxx.ets 2902import { webview } from '@kit.ArkWeb'; 2903 2904@Entry 2905@Component 2906struct WebComponent { 2907 controller: webview.WebviewController = new webview.WebviewController(); 2908 2909 build() { 2910 Column() { 2911 Web({ src: $rawfile("index.html"), controller: this.controller }) 2912 .enableHapticFeedback(true) 2913 } 2914 } 2915} 2916``` 2917 2918 加载的html文件。 2919```html 2920<!--index.html--> 2921<!DOCTYPE html> 2922<html> 2923 <head> 2924 <title>测试网页</title> 2925 </head> 2926 <body> 2927 <h1>enableHapticFeedback Demo</h1> 2928 <span>enable haptic feedback</span> 2929 </body> 2930</html> 2931``` 2932 2933### bindSelectionMenu<sup>13+</sup> 2934 2935bindSelectionMenu(elementType: WebElementType, content: CustomBuilder, responseType: WebResponseType, options?: SelectionMenuOptionsExt) 2936 2937设置自定义选择菜单。 2938 2939**系统能力：** SystemCapability.Web.Webview.Core 2940 2941**参数：** 2942 2943| 参数名 | 类型 | 必填 | 说明 | 2944| ------------ | ------------------------------- | ---- | ----------------------------------- | 2945| elementType | [WebElementType](#webelementtype13枚举说明) | 是 | 菜单的类型。 | 2946| content | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | 是 | 菜单的内容。 | 2947| responseType | [WebResponseType](#webresponsetype13枚举说明) | 是 | 菜单的响应类型。 | 2948| options | [SelectionMenuOptionsExt](#selectionmenuoptionsext13) | 否 | 菜单的选项。| 2949 2950**示例：** 2951 2952```ts 2953// xxx.ets 2954import { webview } from '@kit.ArkWeb'; 2955 2956interface PreviewBuilderParam { 2957 previewImage: Resource | string | undefined; 2958 width: number; 2959 height: number; 2960} 2961 2962@Builder function PreviewBuilderGlobal($$: PreviewBuilderParam) { 2963 Column() { 2964 Image($$.previewImage) 2965 .objectFit(ImageFit.Fill) 2966 .autoResize(true) 2967 }.width($$.width).height($$.height) 2968} 2969 2970@Entry 2971@Component 2972struct WebComponent { 2973 controller: webview.WebviewController = new webview.WebviewController(); 2974 2975 private result: WebContextMenuResult | undefined = undefined; 2976 @State previewImage: Resource | string | undefined = undefined; 2977 @State previewWidth: number = 0; 2978 @State previewHeight: number = 0; 2979 2980 @Builder 2981 MenuBuilder() { 2982 Menu() { 2983 MenuItem({ content: '复制', }) 2984 .onClick(() => { 2985 this.result?.copy(); 2986 this.result?.closeContextMenu(); 2987 }) 2988 MenuItem({ content: '全选', }) 2989 .onClick(() => { 2990 this.result?.selectAll(); 2991 this.result?.closeContextMenu(); 2992 }) 2993 } 2994 } 2995 build() { 2996 Column() { 2997 Web({ src: $rawfile("index.html"), controller: this.controller }) 2998 .bindSelectionMenu(WebElementType.IMAGE, this.MenuBuilder, WebResponseType.LONG_PRESS, 2999 { 3000 onAppear: () => {}, 3001 onDisappear: () => { 3002 this.result?.closeContextMenu(); 3003 }, 3004 preview: PreviewBuilderGlobal({ 3005 previewImage: this.previewImage, 3006 width: this.previewWidth, 3007 height: this.previewHeight 3008 }), 3009 menuType: MenuType.PREVIEW_MENU 3010 }) 3011 .onContextMenuShow((event) => { 3012 if (event) { 3013 this.result = event.result; 3014 if (event.param.getLinkUrl()) { 3015 return false; 3016 } 3017 this.previewWidth = px2vp(event.param.getPreviewWidth()); 3018 this.previewHeight = px2vp(event.param.getPreviewHeight()); 3019 if (event.param.getSourceUrl().indexOf("resource://rawfile/") == 0) { 3020 this.previewImage = $rawfile(event.param.getSourceUrl().substr(19)); 3021 } else { 3022 this.previewImage = event.param.getSourceUrl(); 3023 } 3024 return true; 3025 } 3026 return false; 3027 }) 3028 } 3029 } 3030} 3031``` 3032 3033 加载的html文件。 3034```html 3035<!--index.html--> 3036<!DOCTYPE html> 3037<html> 3038 <head> 3039 <title>测试网页</title> 3040 </head> 3041 <body> 3042 <h1>bindSelectionMenu Demo</h1> 3043 <img src="./img.png" > 3044 </body> 3045</html> 3046``` 3047 3048### blurOnKeyboardHideMode<sup>14+</sup> 3049 3050blurOnKeyboardHideMode(mode: BlurOnKeyboardHideMode) 3051 3052设置当软键盘收起时Web元素失焦模式。枚举类型的默认值为SILENT，当用户手动收起软键盘时焦点仍在文本框。可更改为BLUR，当用户手动收起软键盘时，焦点会从文本框转移到Web的body上，文本框失焦。 3053 3054**系统能力：** SystemCapability.Web.Webview.Core 3055 3056**参数：** 3057 3058| 参数名 | 类型 | 必填 | 说明 | 3059| ---- | --------------------------------------- | ---- | ------------------ | 3060| mode | [BlurOnKeyboardHideMode](#bluronkeyboardhidemode14枚举说明) | 是 | 设置设置当软键盘收起时Web元素失焦关闭或开启。默认值：BlurOnKeyboardHideMode.SILENT。 | 3061 3062**示例：** 3063 3064 ```ts 3065 // xxx.ets 3066 import { webview } from '@kit.ArkWeb'; 3067 3068 @Entry 3069 @Component 3070 struct WebComponent { 3071 controller: webview.WebviewController = new webview.WebviewController(); 3072 @State blurMode: BlurOnKeyboardHideMode = BlurOnKeyboardHideMode.BLUR; 3073 build() { 3074 Column() { 3075 Web({ src: $rawfile("index.html"), controller: this.controller }) 3076 .blurOnKeyboardHideMode(this.blurMode) 3077 } 3078 } 3079 } 3080 ``` 3081 3082 加载的html文件。 3083```html 3084<!--index.html--> 3085<!DOCTYPE html> 3086<html> 3087 <head> 3088 <title>测试网页</title> 3089 </head> 3090 <body> 3091 <h1>blurOnKeyboardHideMode Demo</h1> 3092 <input type="text" id="input_a"> 3093 <script> 3094 const inputElement = document.getElementById('input_a'); 3095 inputElement.addEventListener('blur', function() { 3096 console.log('Input has lost focus'); 3097 }); 3098 </script> 3099 </body> 3100</html> 3101``` 3102 3103### optimizeParserBudget<sup>15+</sup> 3104 3105optimizeParserBudget(optimizeParserBudget: boolean) 3106 3107设置是否开启分段解析HTML优化，默认不开启。 3108 3109ArkWeb内核在解析HTML文档结构时采取分段解析策略，旨在避免过多占用主线程资源，并使网页具有渐进式加载能力。ArkWeb内核默认使用解析时间作为分段点，当单次解析时间超过阈值时，会中断解析，随后进行布局和渲染操作。 3110 3111开启优化后，ArkWeb内核将不仅检查解析时间是否超出限制，还会额外判断解析的Token（HTML文档的最小解析单位，例如<div>、attr="xxx"等）数量是否超过内核规定的阈值，并下调此阈值。当页面的FCP(First Contentful Paint 首次内容绘制）触发时会恢复成默认的中断判断逻辑。这将使得网页在FCP到来之前的解析操作更频繁，从而提高首帧内容被提前解析完成并进入渲染阶段的可能性，同时有效缩减首帧渲染的工作量，最终实现FCP时间提前。 3112 3113由于页面的FCP触发时会恢复成默认分段解析逻辑，因此分段解析HTML优化仅对每个Web组件加载的首个页面生效。 3114 3115**系统能力：** SystemCapability.Web.Webview.Core 3116 3117**参数：** 3118 3119| 参数名 | 类型 | 必填 | 说明 | 3120| ---------- | ------- | ---- | ---------------------- | 3121| optimizeParserBudget | boolean | 是 | 设置为true时将使用解析个数代替解析时间作为HTML分段解析的分段点，并减少每段解析的个数上限。设置为false时则使用解析时间作为HTML分段解析的分段点。默认值：false。 | 3122 3123 3124**示例：** 3125 3126 ```ts 3127 // xxx.ets 3128 import { webview } from '@kit.ArkWeb'; 3129 3130 @Entry 3131 @Component 3132 struct WebComponent { 3133 controller: webview.WebviewController = new webview.WebviewController() 3134 build() { 3135 Column() { 3136 Web({ src: 'www.example.com', controller: this.controller }) 3137 .optimizeParserBudget(true) 3138 } 3139 } 3140 } 3141 ``` 3142 3143## 事件 3144 3145通用事件仅支持[onAppear](../apis-arkui/arkui-ts/ts-universal-events-show-hide.md#onappear)、[onDisAppear](../apis-arkui/arkui-ts/ts-universal-events-show-hide.md#ondisappear)、[onBlur](../apis-arkui/arkui-ts/ts-universal-focus-event.md#onblur)、[onFocus](../apis-arkui/arkui-ts/ts-universal-focus-event.md#onfocus)、[onDragEnd](../apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#ondragend)、[onDragEnter](../apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#ondragenter)、[onDragStart](../apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#ondragstart)、[onDragMove](../apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#ondragmove)、[onDragLeave](../apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#ondragleave)、[onDrop](../apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#ondrop)、[onHover](../apis-arkui/arkui-ts/ts-universal-mouse-key.md#onhover)、[onMouse](../apis-arkui/arkui-ts/ts-universal-mouse-key.md#onmouse)、[onKeyEvent](../apis-arkui/arkui-ts/ts-universal-events-key.md#onkeyevent)、[onTouch](../apis-arkui/arkui-ts/ts-universal-events-touch.md#ontouch)、[onVisibleAreaChange](../apis-arkui/arkui-ts/ts-universal-component-visible-area-change-event.md#onvisibleareachange)。 3146 3147### onAlert 3148 3149onAlert(callback: Callback\<OnAlertEvent, boolean\>) 3150 3151网页触发alert()告警弹窗时触发回调。 3152 3153**系统能力：** SystemCapability.Web.Webview.Core 3154 3155**参数：** 3156 3157| 参数名 | 类型 | 必填 | 说明 | 3158| ------- | --------------------- | ---- | --------------- | 3159| callback | Callback\<[OnAlertEvent](#onalertevent12), boolean\> | 是 | 网页触发alert()告警弹窗时触发<br>返回值boolean。当回调返回true时，应用可以调用自定义弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 | 3160 3161**示例：** 3162 3163 ```ts 3164 // xxx.ets 3165 import { webview } from '@kit.ArkWeb'; 3166 3167 @Entry 3168 @Component 3169 struct WebComponent { 3170 controller: webview.WebviewController = new webview.WebviewController(); 3171 3172 build() { 3173 Column() { 3174 Web({ src: $rawfile("index.html"), controller: this.controller }) 3175 .onAlert((event) => { 3176 if (event) { 3177 console.log("event.url:" + event.url); 3178 console.log("event.message:" + event.message); 3179 AlertDialog.show({ 3180 title: 'onAlert', 3181 message: 'text', 3182 primaryButton: { 3183 value: 'cancel', 3184 action: () => { 3185 event.result.handleCancel(); 3186 } 3187 }, 3188 secondaryButton: { 3189 value: 'ok', 3190 action: () => { 3191 event.result.handleConfirm(); 3192 } 3193 }, 3194 cancel: () => { 3195 event.result.handleCancel(); 3196 } 3197 }) 3198 } 3199 return true; 3200 }) 3201 } 3202 } 3203 } 3204 ``` 3205 3206 加载的html文件。 3207 ```html 3208 <!--index.html--> 3209 <!DOCTYPE html> 3210 <html> 3211 <head> 3212 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 3213 </head> 3214 <body> 3215 <h1>WebView onAlert Demo</h1> 3216 <button onclick="myFunction()">Click here</button> 3217 <script> 3218 function myFunction() { 3219 alert("Hello World"); 3220 } 3221 </script> 3222 </body> 3223 </html> 3224 ``` 3225 3226### onBeforeUnload 3227 3228onBeforeUnload(callback: Callback\<OnBeforeUnloadEvent, boolean\>) 3229 3230刷新或关闭场景下，在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点，才会触发此回调。 3231 3232**系统能力：** SystemCapability.Web.Webview.Core 3233 3234**参数：** 3235 3236| 参数名 | 类型 | 必填 | 说明 | 3237| ------- | --------------------- | ---- | --------------- | 3238| callback | Callback\<[OnBeforeUnloadEvent](#onbeforeunloadevent12), boolean\> | 是 | 刷新或关闭场景下，在即将离开当前页面时触发。<br>返回值boolean。当回调返回true时，应用可以调用自定义弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 | 3239 3240**示例：** 3241 3242 ```ts 3243 // xxx.ets 3244 import { webview } from '@kit.ArkWeb'; 3245 3246 @Entry 3247 @Component 3248 struct WebComponent { 3249 controller: webview.WebviewController = new webview.WebviewController(); 3250 3251 build() { 3252 Column() { 3253 Web({ src: $rawfile("index.html"), controller: this.controller }) 3254 .onBeforeUnload((event) => { 3255 if (event) { 3256 console.log("event.url:" + event.url); 3257 console.log("event.message:" + event.message); 3258 AlertDialog.show({ 3259 title: 'onBeforeUnload', 3260 message: 'text', 3261 primaryButton: { 3262 value: 'cancel', 3263 action: () => { 3264 event.result.handleCancel(); 3265 } 3266 }, 3267 secondaryButton: { 3268 value: 'ok', 3269 action: () => { 3270 event.result.handleConfirm(); 3271 } 3272 }, 3273 cancel: () => { 3274 event.result.handleCancel(); 3275 } 3276 }) 3277 } 3278 return true; 3279 }) 3280 } 3281 } 3282 } 3283 ``` 3284 3285 加载的html文件。 3286 ```html 3287 <!--index.html--> 3288 <!DOCTYPE html> 3289 <html> 3290 <head> 3291 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 3292 </head> 3293 <body onbeforeunload="return myFunction()"> 3294 <h1>WebView onBeforeUnload Demo</h1> 3295 <a href="https://www.example.com">Click here</a> 3296 <script> 3297 function myFunction() { 3298 return "onBeforeUnload Event"; 3299 } 3300 </script> 3301 </body> 3302 </html> 3303 ``` 3304 3305### onConfirm 3306 3307onConfirm(callback: Callback\<OnConfirmEvent, boolean\>) 3308 3309网页调用confirm()告警时触发此回调。 3310 3311**系统能力：** SystemCapability.Web.Webview.Core 3312 3313**参数：** 3314 3315| 参数名 | 类型 | 必填 | 说明 | 3316| ------- | --------------------- | ---- | --------------- | 3317| callback | Callback\<[OnConfirmEvent](#onconfirmevent12), boolean\> | 是 | 网页调用confirm()告警时触发<br>返回值boolean。当回调返回true时，应用可以调用自定义弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 | 3318 3319**示例：** 3320 3321 ```ts 3322 // xxx.ets 3323 import { webview } from '@kit.ArkWeb'; 3324 3325 @Entry 3326 @Component 3327 struct WebComponent { 3328 controller: webview.WebviewController = new webview.WebviewController(); 3329 3330 build() { 3331 Column() { 3332 Web({ src: $rawfile("index.html"), controller: this.controller }) 3333 .onConfirm((event) => { 3334 if (event) { 3335 console.log("event.url:" + event.url); 3336 console.log("event.message:" + event.message); 3337 AlertDialog.show({ 3338 title: 'onConfirm', 3339 message: 'text', 3340 primaryButton: { 3341 value: 'cancel', 3342 action: () => { 3343 event.result.handleCancel(); 3344 } 3345 }, 3346 secondaryButton: { 3347 value: 'ok', 3348 action: () => { 3349 event.result.handleConfirm(); 3350 } 3351 }, 3352 cancel: () => { 3353 event.result.handleCancel(); 3354 } 3355 }) 3356 } 3357 return true; 3358 }) 3359 } 3360 } 3361 } 3362 ``` 3363 3364 加载的html文件。 3365 ```html 3366 <!--index.html--> 3367 <!DOCTYPE html> 3368 <html> 3369 <head> 3370 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 3371 </head> 3372 3373 <body> 3374 <h1>WebView onConfirm Demo</h1> 3375 <button onclick="myFunction()">Click here</button> 3376 <p id="demo"></p> 3377 <script> 3378 function myFunction() { 3379 let x; 3380 let r = confirm("click button!"); 3381 if (r == true) { 3382 x = "ok"; 3383 } else { 3384 x = "cancel"; 3385 } 3386 document.getElementById("demo").innerHTML = x; 3387 } 3388 </script> 3389 </body> 3390 </html> 3391 ``` 3392 3393### onPrompt<sup>9+</sup> 3394 3395onPrompt(callback: Callback\<OnPromptEvent, boolean\>) 3396 3397网页调用prompt()告警时触发此回调。 3398 3399**系统能力：** SystemCapability.Web.Webview.Core 3400 3401**参数：** 3402 3403| 参数名 | 类型 | 必填 | 说明 | 3404| ------- | --------------------- | ---- | --------------- | 3405| callback | Callback\<[OnPromptEvent](#onpromptevent12), boolean\> | 是 | 网页调用prompt()告警时触发。<br>返回值boolean。当回调返回true时，应用可以调用自定义弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 | 3406 3407**示例：** 3408 3409 ```ts 3410 // xxx.ets 3411 import { webview } from '@kit.ArkWeb'; 3412 3413 @Entry 3414 @Component 3415 struct WebComponent { 3416 controller: webview.WebviewController = new webview.WebviewController(); 3417 3418 build() { 3419 Column() { 3420 Web({ src: $rawfile("index.html"), controller: this.controller }) 3421 .onPrompt((event) => { 3422 if (event) { 3423 console.log("url:" + event.url); 3424 console.log("message:" + event.message); 3425 console.log("value:" + event.value); 3426 AlertDialog.show({ 3427 title: 'onPrompt', 3428 message: 'text', 3429 primaryButton: { 3430 value: 'cancel', 3431 action: () => { 3432 event.result.handleCancel(); 3433 } 3434 }, 3435 secondaryButton: { 3436 value: 'ok', 3437 action: () => { 3438 event.result.handlePromptConfirm(event.value); 3439 } 3440 }, 3441 cancel: () => { 3442 event.result.handleCancel(); 3443 } 3444 }) 3445 } 3446 return true; 3447 }) 3448 } 3449 } 3450 } 3451 ``` 3452 3453 加载的html文件。 3454 ```html 3455 <!--index.html--> 3456 <!DOCTYPE html> 3457 <html> 3458 <head> 3459 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 3460 </head> 3461 3462 <body> 3463 <h1>WebView onPrompt Demo</h1> 3464 <button onclick="myFunction()">Click here</button> 3465 <p id="demo"></p> 3466 <script> 3467 function myFunction() { 3468 let message = prompt("Message info", "Hello World"); 3469 if (message != null && message != "") { 3470 document.getElementById("demo").innerHTML = message; 3471 } 3472 } 3473 </script> 3474 </body> 3475 </html> 3476 ``` 3477 3478### onConsole 3479 3480onConsole(callback: Callback\<OnConsoleEvent, boolean\>) 3481 3482通知宿主应用JavaScript console消息。 3483 3484**系统能力：** SystemCapability.Web.Webview.Core 3485 3486**参数：** 3487 3488| 参数名 | 类型 | 必填 | 说明 | 3489| ------- | --------------------------------- | ---- | --------- | 3490| callback | Callback\<[OnConsoleEvent](#onconsoleevent12), boolean\> | 是 | 网页收到JavaScript控制台消息时触发。<br>返回值boolean。当返回true时，该条消息将不会再打印至控制台，反之仍会打印至控制台。 | 3491 3492**示例：** 3493 3494 ```ts 3495 // xxx.ets 3496 import { webview } from '@kit.ArkWeb'; 3497 3498 @Entry 3499 @Component 3500 struct WebComponent { 3501 controller: webview.WebviewController = new webview.WebviewController(); 3502 3503 build() { 3504 Column() { 3505 Button('onconsole message') 3506 .onClick(() => { 3507 this.controller.runJavaScript('myFunction()'); 3508 }) 3509 Web({ src: $rawfile('index.html'), controller: this.controller }) 3510 .onConsole((event) => { 3511 if (event) { 3512 console.log('getMessage:' + event.message.getMessage()); 3513 console.log('getSourceId:' + event.message.getSourceId()); 3514 console.log('getLineNumber:' + event.message.getLineNumber()); 3515 console.log('getMessageLevel:' + event.message.getMessageLevel()); 3516 } 3517 return false; 3518 }) 3519 } 3520 } 3521 } 3522 ``` 3523 3524 加载的html文件。 3525 ```html 3526 <!-- index.html --> 3527 <!DOCTYPE html> 3528 <html> 3529 <body> 3530 <script> 3531 function myFunction() { 3532 console.log("onconsole printf"); 3533 } 3534 </script> 3535 </body> 3536 </html> 3537 ``` 3538 3539### onDownloadStart 3540 3541onDownloadStart(callback: Callback\<OnDownloadStartEvent\>) 3542 3543通知主应用开始下载一个文件。 3544 3545**系统能力：** SystemCapability.Web.Webview.Core 3546 3547**参数：** 3548 3549| 参数名 | 类型 | 必填 | 说明 | 3550| ------------------ | ------ | ---- | ----------------------------------- | 3551| callback | Callback\<[OnDownloadStartEvent](#ondownloadstartevent12)\> | 是 | 开始下载时触发。 | 3552 3553**示例：** 3554 3555 ```ts 3556 // xxx.ets 3557 import { webview } from '@kit.ArkWeb'; 3558 3559 @Entry 3560 @Component 3561 struct WebComponent { 3562 controller: webview.WebviewController = new webview.WebviewController(); 3563 3564 build() { 3565 Column() { 3566 Web({ src: 'www.example.com', controller: this.controller }) 3567 .onDownloadStart((event) => { 3568 if (event) { 3569 console.log('url:' + event.url) 3570 console.log('userAgent:' + event.userAgent) 3571 console.log('contentDisposition:' + event.contentDisposition) 3572 console.log('contentLength:' + event.contentLength) 3573 console.log('mimetype:' + event.mimetype) 3574 } 3575 }) 3576 } 3577 } 3578 } 3579 ``` 3580 3581### onErrorReceive 3582 3583onErrorReceive(callback: Callback\<OnErrorReceiveEvent\>) 3584 3585网页加载遇到错误时触发该回调。主资源与子资源出错都会回调该接口，可以通过request.isMainFrame来判断是否是主资源报错。出于性能考虑，建议此回调中尽量执行简单逻辑。在无网络的情况下，触发此回调。 3586 3587**系统能力：** SystemCapability.Web.Webview.Core 3588 3589**参数：** 3590 3591| 参数名 | 类型 | 必填 | 说明 | 3592| ------- | ---------------------------------------- | ---- | --------------- | 3593| callback | Callback\<[OnErrorReceiveEvent](#onerrorreceiveevent12)\> | 是 | 网页收到 Web 资源加载错误时触发。 | 3594 3595**示例：** 3596 3597 ```ts 3598 // xxx.ets 3599 import { webview } from '@kit.ArkWeb'; 3600 3601 @Entry 3602 @Component 3603 struct WebComponent { 3604 controller: webview.WebviewController = new webview.WebviewController(); 3605 3606 build() { 3607 Column() { 3608 Web({ src: 'www.example.com', controller: this.controller }) 3609 .onErrorReceive((event) => { 3610 if (event) { 3611 console.log('getErrorInfo:' + event.error.getErrorInfo()); 3612 console.log('getErrorCode:' + event.error.getErrorCode()); 3613 console.log('url:' + event.request.getRequestUrl()); 3614 console.log('isMainFrame:' + event.request.isMainFrame()); 3615 console.log('isRedirect:' + event.request.isRedirect()); 3616 console.log('isRequestGesture:' + event.request.isRequestGesture()); 3617 console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString()); 3618 let result = event.request.getRequestHeader(); 3619 console.log('The request header result size is ' + result.length); 3620 for (let i of result) { 3621 console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue); 3622 } 3623 } 3624 }) 3625 } 3626 } 3627 } 3628 ``` 3629 3630### onHttpErrorReceive 3631 3632onHttpErrorReceive(callback: Callback\<OnHttpErrorReceiveEvent\>) 3633 3634网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。 3635 3636**系统能力：** SystemCapability.Web.Webview.Core 3637 3638**参数：** 3639 3640| 参数名 | 类型 | 必填 | 说明 | 3641| -------- | ---------------------------------------- | ---- | ---------- | 3642| callback | Callback\<[OnHttpErrorReceiveEvent](#onhttperrorreceiveevent12)\> | 是 | 网页收到加载资源加载HTTP错误时触发。 | 3643 3644**示例：** 3645 3646 ```ts 3647 // xxx.ets 3648 import { webview } from '@kit.ArkWeb'; 3649 3650 @Entry 3651 @Component 3652 struct WebComponent { 3653 controller: webview.WebviewController = new webview.WebviewController(); 3654 3655 build() { 3656 Column() { 3657 Web({ src: 'www.example.com', controller: this.controller }) 3658 .onHttpErrorReceive((event) => { 3659 if (event) { 3660 console.log('url:' + event.request.getRequestUrl()); 3661 console.log('isMainFrame:' + event.request.isMainFrame()); 3662 console.log('isRedirect:' + event.request.isRedirect()); 3663 console.log('isRequestGesture:' + event.request.isRequestGesture()); 3664 console.log('getResponseData:' + event.response.getResponseData()); 3665 console.log('getResponseEncoding:' + event.response.getResponseEncoding()); 3666 console.log('getResponseMimeType:' + event.response.getResponseMimeType()); 3667 console.log('getResponseCode:' + event.response.getResponseCode()); 3668 console.log('getReasonMessage:' + event.response.getReasonMessage()); 3669 let result = event.request.getRequestHeader(); 3670 console.log('The request header result size is ' + result.length); 3671 for (let i of result) { 3672 console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); 3673 } 3674 let resph = event.response.getResponseHeader(); 3675 console.log('The response header result size is ' + resph.length); 3676 for (let i of resph) { 3677 console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); 3678 } 3679 } 3680 }) 3681 } 3682 } 3683 } 3684 ``` 3685 3686### onPageBegin 3687 3688onPageBegin(callback: Callback\<OnPageBeginEvent\>) 3689 3690网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。 3691 3692**系统能力：** SystemCapability.Web.Webview.Core 3693 3694**参数：** 3695 3696| 参数名 | 类型 | 必填 | 说明 | 3697| ---- | ------ | ---- | --------- | 3698| callback | Callback\<[OnPageBeginEvent](#onpagebeginevent12)\> | 是 | 网页加载开始时触发。 | 3699 3700**示例：** 3701 3702 ```ts 3703 // xxx.ets 3704 import { webview } from '@kit.ArkWeb'; 3705 3706 @Entry 3707 @Component 3708 struct WebComponent { 3709 controller: webview.WebviewController = new webview.WebviewController(); 3710 3711 build() { 3712 Column() { 3713 Web({ src: 'www.example.com', controller: this.controller }) 3714 .onPageBegin((event) => { 3715 if (event) { 3716 console.log('url:' + event.url); 3717 } 3718 }) 3719 } 3720 } 3721 } 3722 ``` 3723 3724### onPageEnd 3725 3726onPageEnd(callback: Callback\<OnPageEndEvent\>) 3727 3728网页加载完成时触发该回调，且只在主frame触发。 3729 3730**系统能力：** SystemCapability.Web.Webview.Core 3731 3732**参数：** 3733 3734| 参数名 | 类型 | 必填 | 说明 | 3735| ---- | ------ | ---- | --------- | 3736| callback | Callback\<[OnPageEndEvent](#onpageendevent12)\> | 是 | 网页加载结束时触发。 | 3737 3738**示例：** 3739 3740 ```ts 3741 // xxx.ets 3742 import { webview } from '@kit.ArkWeb'; 3743 3744 @Entry 3745 @Component 3746 struct WebComponent { 3747 controller: webview.WebviewController = new webview.WebviewController(); 3748 3749 build() { 3750 Column() { 3751 Web({ src: 'www.example.com', controller: this.controller }) 3752 .onPageEnd((event) => { 3753 if (event) { 3754 console.log('url:' + event.url); 3755 } 3756 }) 3757 } 3758 } 3759 } 3760 ``` 3761 3762### onProgressChange 3763 3764onProgressChange(callback: Callback\<OnProgressChangeEvent\>) 3765 3766网页加载进度变化时触发该回调。 3767 3768**系统能力：** SystemCapability.Web.Webview.Core 3769 3770**参数：** 3771 3772| 参数名 | 类型 | 必填 | 说明 | 3773| ----------- | ------ | ---- | --------------------- | 3774| callback | Callback\<[OnProgressChangeEvent](#onprogresschangeevent12)\> | 是 | 页面加载进度时触发的功能。 | 3775 3776**示例：** 3777 3778 ```ts 3779 // xxx.ets 3780 import { webview } from '@kit.ArkWeb'; 3781 @Entry 3782 @Component 3783 struct WebComponent { 3784 controller: webview.WebviewController = new webview.WebviewController(); 3785 3786 build() { 3787 Column() { 3788 Web({ src: 'www.example.com', controller: this.controller }) 3789 .onProgressChange((event) => { 3790 if (event) { 3791 console.log('newProgress:' + event.newProgress); 3792 } 3793 }) 3794 } 3795 } 3796 } 3797 ``` 3798 3799### onTitleReceive 3800 3801onTitleReceive(callback: Callback\<OnTitleReceiveEvent\>) 3802 3803网页document标题更改时触发该回调，当H5未设置<title\>元素时会返回对应的URL。 3804 3805**系统能力：** SystemCapability.Web.Webview.Core 3806 3807**参数：** 3808 3809| 参数名 | 类型 | 必填 | 说明 | 3810| ----- | ------ | ---- | ------------- | 3811| callback | Callback\<[OnTitleReceiveEvent](#ontitlereceiveevent12)\> | 是 | 定义主应用程序文档标题更改时触发。 | 3812 3813**示例：** 3814 3815 ```ts 3816 // xxx.ets 3817 import { webview } from '@kit.ArkWeb'; 3818 3819 @Entry 3820 @Component 3821 struct WebComponent { 3822 controller: webview.WebviewController = new webview.WebviewController(); 3823 3824 build() { 3825 Column() { 3826 Web({ src: 'www.example.com', controller: this.controller }) 3827 .onTitleReceive((event) => { 3828 if (event) { 3829 console.log('title:' + event.title); 3830 } 3831 }) 3832 } 3833 } 3834 } 3835 ``` 3836 3837### onRefreshAccessedHistory 3838 3839onRefreshAccessedHistory(callback: Callback\<OnRefreshAccessedHistoryEvent\>) 3840 3841加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。 3842 3843**系统能力：** SystemCapability.Web.Webview.Core 3844 3845**参数：** 3846 3847| 参数名 | 类型 | 必填 | 说明 | 3848| ----------- | ------- | ---- | ---------------------------------------- | 3849| callback | Callback\<[OnRefreshAccessedHistoryEvent](#onrefreshaccessedhistoryevent12)\> | 是 | 在网页刷新访问历史记录时触发。 | 3850 3851**示例：** 3852 3853 ```ts 3854 // xxx.ets 3855 import { webview } from '@kit.ArkWeb'; 3856 3857 @Entry 3858 @Component 3859 struct WebComponent { 3860 controller: webview.WebviewController = new webview.WebviewController(); 3861 3862 build() { 3863 Column() { 3864 Web({ src: 'www.example.com', controller: this.controller }) 3865 .onRefreshAccessedHistory((event) => { 3866 if (event) { 3867 console.log('url:' + event.url + ' isReload:' + event.isRefreshed); 3868 } 3869 }) 3870 } 3871 } 3872 } 3873 ``` 3874 3875### onSslErrorReceive<sup>(deprecated)</sup> 3876 3877onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void) 3878 3879通知用户加载资源时发生SSL错误。 3880 3881> **说明：** 3882> 3883> 从API version 8开始支持，从API version 9开始废弃。建议使用[onSslErrorEventReceive<sup>9+</sup>](#onsslerroreventreceive9)替代。 3884 3885**系统能力：** SystemCapability.Web.Webview.Core 3886 3887### onFileSelectorShow<sup>(deprecated)</sup> 3888 3889onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void) 3890 3891调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。 3892 3893> **说明：** 3894> 3895> 从API version 8开始支持，从API version 9开始废弃。建议使用[onShowFileSelector<sup>9+</sup>](#onshowfileselector9)替代。 3896 3897**系统能力：** SystemCapability.Web.Webview.Core 3898 3899### onRenderExited<sup>9+</sup> 3900 3901onRenderExited(callback: Callback\<OnRenderExitedEvent\>) 3902 3903应用渲染进程异常退出时触发该回调。 3904 3905多个Web组件可能共享单个渲染进程，每个受影响的Web组件都会触发该回调。 3906 3907应用处理该回调时，可以调用绑定的webviewController相关接口来恢复页面。例如[refresh](js-apis-webview.md#refresh)、[loadUrl](js-apis-webview.md#loadurl)等。 3908 3909组件生命周期回调详情可参考[Web组件的生命周期](../../web/web-event-sequence.md)。 3910 3911**系统能力：** SystemCapability.Web.Webview.Core 3912 3913**参数：** 3914 3915| 参数名 | 类型 | 必填 | 说明 | 3916| ---------------- | ---------------------------------------- | ---- | ---------------- | 3917| callback | Callback\<[OnRenderExitedEvent](#onrenderexitedevent12)\> | 是 | 渲染过程退出时触发。 | 3918 3919**示例：** 3920 3921 ```ts 3922 // xxx.ets 3923 import { webview } from '@kit.ArkWeb'; 3924 3925 @Entry 3926 @Component 3927 struct WebComponent { 3928 controller: webview.WebviewController = new webview.WebviewController(); 3929 3930 build() { 3931 Column() { 3932 Web({ src: 'chrome://crash/', controller: this.controller }) 3933 .onRenderExited((event) => { 3934 if (event) { 3935 console.log('reason:' + event.renderExitReason); 3936 } 3937 }) 3938 } 3939 } 3940 } 3941 ``` 3942### onRenderProcessNotResponding<sup>12+</sup> 3943 3944onRenderProcessNotResponding(callback: OnRenderProcessNotRespondingCallback) 3945 3946渲染进程无响应时触发该回调函数。如果Web组件无法处理输入事件，或者无法在合理的时间范围内导航到新的URL，则认为网页进程无响应，并将触发该回调。 3947 3948只要网页进程一直无响应，此回调仍可能会持续触发，直到网页进程再次响应，此时[onRenderProcessResponding](#onrenderprocessresponding12)将会触发。 3949 3950应用可以通过WebviewController接口[terminateRenderProcess](js-apis-webview.md#terminaterenderprocess12)来终止关联的渲染进程，这可能会影响同一渲染进程的其他Web组件。 3951 3952**系统能力：** SystemCapability.Web.Webview.Core 3953 3954**参数：** 3955 3956| 参数名 | 类型 | 必填 | 说明 | 3957| -------- | ------------------------------------------------------------ | ---- | -------------------------------------- | 3958| callback | [OnRenderProcessNotRespondingCallback](#onrenderprocessnotrespondingcallback12) | 是 | 渲染进程无响应时触发的回调。 | 3959 3960**示例：** 3961 3962 ```ts 3963 // xxx.ets 3964 import { webview } from '@kit.ArkWeb'; 3965 3966 @Entry 3967 @Component 3968 struct WebComponent { 3969 controller: webview.WebviewController = new webview.WebviewController(); 3970 3971 build() { 3972 Column() { 3973 Web({ src: 'www.example.com', controller: this.controller }) 3974 .onRenderProcessNotResponding((data) => { 3975 console.log("onRenderProcessNotResponding: [jsStack]= " + data.jsStack + 3976 ", [process]=" + data.pid + ", [reason]=" + data.reason); 3977 }) 3978 } 3979 } 3980 } 3981 ``` 3982 3983### onRenderProcessResponding<sup>12+</sup> 3984 3985onRenderProcessResponding(callback: OnRenderProcessRespondingCallback) 3986 3987渲染进程由无响应状态变回正常运行状态时触发该回调函数,该回调表明该网页并非真正卡死。 3988 3989**系统能力：** SystemCapability.Web.Webview.Core 3990 3991**参数：** 3992 3993| 参数名 | 类型 | 必填 | 说明 | 3994| -------- | ------------------------------------------------------------ | ---- | -------------------------------------- | 3995| callback | [OnRenderProcessRespondingCallback](#onrenderprocessrespondingcallback12) | 是 | 渲染进程由无响应状态变回正常运行状态时触发的回调。 | 3996 3997**示例：** 3998 3999 ```ts 4000 // xxx.ets 4001 import { webview } from '@kit.ArkWeb'; 4002 4003 @Entry 4004 @Component 4005 struct WebComponent { 4006 controller: webview.WebviewController = new webview.WebviewController(); 4007 4008 build() { 4009 Column() { 4010 Web({ src: 'www.example.com', controller: this.controller }) 4011 .onRenderProcessResponding(() => { 4012 console.log("onRenderProcessResponding again"); 4013 }) 4014 } 4015 } 4016 } 4017 ``` 4018 4019### onShowFileSelector<sup>9+</sup> 4020 4021onShowFileSelector(callback: Callback\<OnShowFileSelectorEvent, boolean\>) 4022 4023调用此函数以处理具有“文件”输入类型的HTML表单。如果不调用此函数或返回false，Web组件会提供默认的“选择文件”处理界面。如果返回true，应用可以自定义“选择文件”的响应行为。 4024 4025**系统能力：** SystemCapability.Web.Webview.Core 4026 4027**参数：** 4028 4029| 参数名 | 类型 | 必填 | 说明 | 4030| ------------ | ---------------------------------------- | ---- | ----------------- | 4031| callback | Callback\<[OnShowFileSelectorEvent](#onshowfileselectorevent12), boolean\> | 是 | 用于通知Web组件文件选择的结果。<br>返回值boolean。当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，函数中绘制的自定义弹窗无效。 | 4032 4033**示例：** 4034 40351. 拉起文件选择器。 4036 4037 ```ts 4038 // xxx.ets 4039 import { webview } from '@kit.ArkWeb'; 4040 import { picker } from '@kit.CoreFileKit'; 4041 import { BusinessError } from '@kit.BasicServicesKit'; 4042 4043 @Entry 4044 @Component 4045 struct WebComponent { 4046 controller: webview.WebviewController = new webview.WebviewController() 4047 4048 build() { 4049 Column() { 4050 Web({ src: $rawfile('index.html'), controller: this.controller }) 4051 .onShowFileSelector((event) => { 4052 console.log('MyFileUploader onShowFileSelector invoked') 4053 const documentSelectOptions = new picker.DocumentSelectOptions(); 4054 let uri: string | null = null; 4055 const documentViewPicker = new picker.DocumentViewPicker(); 4056 documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => { 4057 uri = documentSelectResult[0]; 4058 console.info('documentViewPicker.select to file succeed and uri is:' + uri); 4059 if (event) { 4060 event.result.handleFileList([uri]); 4061 } 4062 }).catch((err: BusinessError) => { 4063 console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`); 4064 }) 4065 return true; 4066 }) 4067 } 4068 } 4069 } 4070 ``` 4071 40722. 拉起图库选择器。 4073 4074 ```ts 4075 // xxx.ets 4076 import { webview } from '@kit.ArkWeb'; 4077 import { picker } from '@kit.CoreFileKit'; 4078 import { photoAccessHelper } from '@kit.MediaLibraryKit'; 4079 4080 @Entry 4081 @Component 4082 export struct WebComponent { 4083 controller: webview.WebviewController = new webview.WebviewController() 4084 4085 async selectFile(result: FileSelectorResult): Promise<void> { 4086 let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions(); 4087 let photoPicker = new photoAccessHelper.PhotoViewPicker(); 4088 // 过滤选择媒体文件类型为IMAGE 4089 photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; 4090 // 设置最大选择数量 4091 photoSelectOptions.maxSelectNumber = 5; 4092 let chooseFile: picker.PhotoSelectResult = await photoPicker.select(photoSelectOptions); 4093 // 获取选择的文件列表 4094 result.handleFileList(chooseFile.photoUris); 4095 } 4096 4097 build() { 4098 Column() { 4099 Web({ src: $rawfile('index.html'), controller: this.controller }) 4100 .onShowFileSelector((event) => { 4101 if (event) { 4102 this.selectFile(event.result); 4103 } 4104 return true; 4105 }) 4106 } 4107 } 4108 } 4109 ``` 4110 4111 加载的html文件。 4112 ```html 4113 <!DOCTYPE html> 4114 <html> 4115 <head> 4116 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 4117 </head> 4118 <body> 4119 <form id="upload-form" enctype="multipart/form-data"> 4120 <input type="file" id="upload" name="upload"/> 4121 </form> 4122 </body> 4123 </html> 4124 ``` 4125 4126### onResourceLoad<sup>9+</sup> 4127 4128onResourceLoad(callback: Callback\<OnResourceLoadEvent\>) 4129 4130通知Web组件所加载的资源文件url信息。 4131 4132**系统能力：** SystemCapability.Web.Webview.Core 4133 4134**参数：** 4135 4136| 参数名 | 类型 | 必填 | 说明 | 4137| ------ | ------ | ---- | --------------------- | 4138| callback | Callback\<[OnResourceLoadEvent](#onresourceloadevent12)\> | 是 | 加载url时触发。 | 4139 4140**示例：** 4141 4142 ```ts 4143 // xxx.ets 4144 import { webview } from '@kit.ArkWeb'; 4145 4146 @Entry 4147 @Component 4148 struct WebComponent { 4149 controller: webview.WebviewController = new webview.WebviewController(); 4150 4151 build() { 4152 Column() { 4153 Web({ src: 'www.example.com', controller: this.controller }) 4154 .onResourceLoad((event) => { 4155 console.log('onResourceLoad: ' + event.url); 4156 }) 4157 } 4158 } 4159 } 4160 ``` 4161 4162### onScaleChange<sup>9+</sup> 4163 4164onScaleChange(callback: Callback\<OnScaleChangeEvent\>) 4165 4166当前页面显示比例的变化时触发该回调。 4167 4168**系统能力：** SystemCapability.Web.Webview.Core 4169 4170**参数：** 4171 4172| 参数名 | 类型 | 必填 | 说明 | 4173| ------ | ------ | ---- | --------------------- | 4174| callback | Callback\<[OnScaleChangeEvent](#onscalechangeevent12)\> | 是 | 当前页面显示比例的变化时触发。 | 4175 4176**示例：** 4177 4178 ```ts 4179 // xxx.ets 4180 import { webview } from '@kit.ArkWeb'; 4181 4182 @Entry 4183 @Component 4184 struct WebComponent { 4185 controller: webview.WebviewController = new webview.WebviewController(); 4186 4187 build() { 4188 Column() { 4189 Web({ src: 'www.example.com', controller: this.controller }) 4190 .onScaleChange((event) => { 4191 console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale); 4192 }) 4193 } 4194 } 4195 } 4196 ``` 4197 4198### onUrlLoadIntercept<sup>(deprecated)</sup> 4199 4200onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean) 4201 4202当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 4203从API version 10开始不再维护，建议使用[onLoadIntercept<sup>10+</sup>](#onloadintercept10)代替。 4204 4205**系统能力：** SystemCapability.Web.Webview.Core 4206 4207**参数：** 4208 4209| 参数名 | 类型 | 必填 | 说明 | 4210| ------ | ------ | ---- | --------------------- | 4211| callback | (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean | 是 | url的相关信息。返回值：boolean，true表示阻止此次加载，否则允许此次加载。 | 4212 4213**示例：** 4214 4215 ```ts 4216 // xxx.ets 4217 import { webview } from '@kit.ArkWeb'; 4218 4219 @Entry 4220 @Component 4221 struct WebComponent { 4222 controller: webview.WebviewController = new webview.WebviewController(); 4223 4224 build() { 4225 Column() { 4226 Web({ src: 'www.example.com', controller: this.controller }) 4227 .onUrlLoadIntercept((event) => { 4228 if (event) { 4229 console.log('onUrlLoadIntercept ' + event.data.toString()); 4230 } 4231 return true 4232 }) 4233 } 4234 } 4235 } 4236 ``` 4237 4238### onInterceptRequest<sup>9+</sup> 4239 4240onInterceptRequest(callback: Callback<OnInterceptRequestEvent, WebResourceResponse>) 4241 4242当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。 4243 4244**系统能力：** SystemCapability.Web.Webview.Core 4245 4246**参数：** 4247 4248| 参数名 | 类型 | 必填 | 说明 | 4249| ------ | ------ | ---- | --------------------- | 4250| callback | Callback\<[OnInterceptRequestEvent](#oninterceptrequestevent12)\> | 是 | 当Web组件加载url之前触发。<br>返回值[WebResourceResponse](#webresourceresponse)。返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载。 | 4251 4252**示例：** 4253 4254 ```ts 4255 // xxx.ets 4256 import { webview } from '@kit.ArkWeb'; 4257 4258 @Entry 4259 @Component 4260 struct WebComponent { 4261 controller: webview.WebviewController = new webview.WebviewController(); 4262 responseWeb: WebResourceResponse = new WebResourceResponse(); 4263 heads: Header[] = new Array(); 4264 webData: string = "<!DOCTYPE html>\n" + 4265 "<html>\n" + 4266 "<head>\n" + 4267 "<title>intercept test</title>\n" + 4268 "</head>\n" + 4269 "<body>\n" + 4270 "<h1>intercept test</h1>\n" + 4271 "</body>\n" + 4272 "</html>"; 4273 4274 build() { 4275 Column() { 4276 Web({ src: 'www.example.com', controller: this.controller }) 4277 .onInterceptRequest((event) => { 4278 if (event) { 4279 console.log('url:' + event.request.getRequestUrl()); 4280 } 4281 let head1: Header = { 4282 headerKey: "Connection", 4283 headerValue: "keep-alive" 4284 } 4285 let head2: Header = { 4286 headerKey: "Cache-Control", 4287 headerValue: "no-cache" 4288 } 4289 // 将新元素追加到数组的末尾，并返回数组的新长度。 4290 let length = this.heads.push(head1); 4291 length = this.heads.push(head2); 4292 console.log('The response header result length is :' + length); 4293 const promise: Promise<String> = new Promise((resolve: Function, reject: Function) => { 4294 this.responseWeb.setResponseHeader(this.heads); 4295 this.responseWeb.setResponseData(this.webData); 4296 this.responseWeb.setResponseEncoding('utf-8'); 4297 this.responseWeb.setResponseMimeType('text/html'); 4298 this.responseWeb.setResponseCode(200); 4299 this.responseWeb.setReasonMessage('OK'); 4300 resolve("success"); 4301 }) 4302 promise.then(() => { 4303 console.log("prepare response ready"); 4304 this.responseWeb.setResponseIsReady(true); 4305 }) 4306 this.responseWeb.setResponseIsReady(false); 4307 return this.responseWeb; 4308 }) 4309 } 4310 } 4311 } 4312 ``` 4313 4314### onHttpAuthRequest<sup>9+</sup> 4315 4316onHttpAuthRequest(callback: Callback\<OnHttpAuthRequestEvent, boolean\>) 4317 4318通知收到http auth认证请求。 4319 4320**系统能力：** SystemCapability.Web.Webview.Core 4321 4322**参数：** 4323 4324| 参数名 | 类型 | 必填 | 说明 | 4325| ------ | ------ | ---- | --------------------- | 4326| callback | Callback\<[OnHttpAuthRequestEvent](#onhttpauthrequestevent12), boolean\> | 是 | 当浏览器需要用户的凭据时触发。<br>返回值boolean。返回false表示此次认证失败，否则成功。 | 4327 4328**示例：** 4329 4330 ```ts 4331 // xxx.ets 4332 import { webview } from '@kit.ArkWeb'; 4333 4334 @Entry 4335 @Component 4336 struct WebComponent { 4337 controller: webview.WebviewController = new webview.WebviewController(); 4338 httpAuth: boolean = false; 4339 4340 build() { 4341 Column() { 4342 Web({ src: 'www.example.com', controller: this.controller }) 4343 .onHttpAuthRequest((event) => { 4344 if (event) { 4345 AlertDialog.show({ 4346 title: 'onHttpAuthRequest', 4347 message: 'text', 4348 primaryButton: { 4349 value: 'cancel', 4350 action: () => { 4351 event.handler.cancel(); 4352 } 4353 }, 4354 secondaryButton: { 4355 value: 'ok', 4356 action: () => { 4357 this.httpAuth = event.handler.isHttpAuthInfoSaved(); 4358 if (this.httpAuth == false) { 4359 webview.WebDataBase.saveHttpAuthCredentials( 4360 event.host, 4361 event.realm, 4362 "2222", 4363 "2222" 4364 ) 4365 event.handler.cancel(); 4366 } 4367 } 4368 }, 4369 cancel: () => { 4370 event.handler.cancel(); 4371 } 4372 }) 4373 } 4374 return true; 4375 }) 4376 } 4377 } 4378 } 4379 ``` 4380### onSslErrorEventReceive<sup>9+</sup> 4381 4382onSslErrorEventReceive(callback: Callback\<OnSslErrorEventReceiveEvent\>) 4383 4384通知用户加载资源时发生SSL错误，只支持主资源。 4385如果需要支持子资源，请使用[OnSslErrorEvent](#onsslerrorevent12)接口。 4386 4387**系统能力：** SystemCapability.Web.Webview.Core 4388 4389**参数：** 4390 4391| 参数名 | 类型 | 必填 | 说明 | 4392| ------ | ------ | ---- | --------------------- | 4393| callback | Callback\<[OnSslErrorEventReceiveEvent](#onsslerroreventreceiveevent12)\> | 是 | 当网页收到SSL错误时触发。 | 4394 4395**示例：** 4396 4397 ```ts 4398 // xxx.ets 4399 import { webview } from '@kit.ArkWeb'; 4400 import { cert } from '@kit.DeviceCertificateKit'; 4401 4402 function LogCertInfo(certChainData : Array<Uint8Array> | undefined) { 4403 if (!(certChainData instanceof Array)) { 4404 console.log('failed, cert chain data type is not array'); 4405 return; 4406 } 4407 4408 for (let i = 0; i < certChainData.length; i++) { 4409 let encodeBlobData: cert.EncodingBlob = { 4410 data: certChainData[i], 4411 encodingFormat: cert.EncodingFormat.FORMAT_DER 4412 } 4413 cert.createX509Cert(encodeBlobData, (error, x509Cert) => { 4414 if (error) { 4415 console.error('Index : ' + i + ',createX509Cert failed, errCode: ' + error.code + ', errMsg: ' + error.message); 4416 } else { 4417 console.log('createX509Cert success'); 4418 console.log(ParseX509CertInfo(x509Cert)); 4419 } 4420 }); 4421 } 4422 return; 4423 } 4424 4425 function Uint8ArrayToString(dataArray: Uint8Array) { 4426 let dataString = ''; 4427 for (let i = 0; i < dataArray.length; i++) { 4428 dataString += String.fromCharCode(dataArray[i]); 4429 } 4430 return dataString; 4431 } 4432 4433 function ParseX509CertInfo(x509Cert: cert.X509Cert) { 4434 let res: string = 'getCertificate success, ' 4435 + 'issuer name = ' 4436 + Uint8ArrayToString(x509Cert.getIssuerName().data) + ', subject name = ' 4437 + Uint8ArrayToString(x509Cert.getSubjectName().data) + ', valid start = ' 4438 + x509Cert.getNotBeforeTime() 4439 + ', valid end = ' + x509Cert.getNotAfterTime(); 4440 return res; 4441 } 4442 4443 @Entry 4444 @Component 4445 struct WebComponent { 4446 controller: webview.WebviewController = new webview.WebviewController(); 4447 4448 build() { 4449 Column() { 4450 Web({ src: 'www.example.com', controller: this.controller }) 4451 .onSslErrorEventReceive((event) => { 4452 LogCertInfo(event.certChainData); 4453 AlertDialog.show({ 4454 title: 'onSslErrorEventReceive', 4455 message: 'text', 4456 primaryButton: { 4457 value: 'confirm', 4458 action: () => { 4459 event.handler.handleConfirm(); 4460 } 4461 }, 4462 secondaryButton: { 4463 value: 'cancel', 4464 action: () => { 4465 event.handler.handleCancel(); 4466 } 4467 }, 4468 cancel: () => { 4469 event.handler.handleCancel(); 4470 } 4471 }) 4472 }) 4473 } 4474 } 4475 } 4476 ``` 4477 4478### onSslErrorEvent<sup>12+</sup> 4479 4480onSslErrorEvent(callback: OnSslErrorEventCallback) 4481 4482通知用户加载资源（主资源+子资源）时发生SSL错误，如果只想处理主资源的SSL错误，请用isMainFrame字段进行区分。 4483 4484**系统能力：** SystemCapability.Web.Webview.Core 4485 4486**参数：** 4487 4488| 参数名 | 类型 | 必填 | 说明 | 4489| ------ | ------ | ---- | --------------------- | 4490| callback | [OnSslErrorEventCallback](#onsslerroreventcallback12) | 是 | 通知用户加载资源时发生SSL错误。 | 4491 4492**示例：** 4493 4494 ```ts 4495 // xxx.ets 4496 import { webview } from '@kit.ArkWeb'; 4497 4498 @Entry 4499 @Component 4500 struct WebComponent { 4501 controller: webview.WebviewController = new webview.WebviewController(); 4502 4503 build() { 4504 Column() { 4505 Web({ src: 'www.example.com', controller: this.controller }) 4506 .onSslErrorEvent((event: SslErrorEvent) => { 4507 console.log("onSslErrorEvent url: " + event.url); 4508 console.log("onSslErrorEvent error: " + event.error); 4509 console.log("onSslErrorEvent originalUrl: " + event.originalUrl); 4510 console.log("onSslErrorEvent referrer: " + event.referrer); 4511 console.log("onSslErrorEvent isFatalError: " + event.isFatalError); 4512 console.log("onSslErrorEvent isMainFrame: " + event.isMainFrame); 4513 AlertDialog.show({ 4514 title: 'onSslErrorEvent', 4515 message: 'text', 4516 primaryButton: { 4517 value: 'confirm', 4518 action: () => { 4519 event.handler.handleConfirm(); 4520 } 4521 }, 4522 secondaryButton: { 4523 value: 'cancel', 4524 action: () => { 4525 event.handler.handleCancel(); 4526 } 4527 }, 4528 cancel: () => { 4529 event.handler.handleCancel(); 4530 } 4531 }) 4532 }) 4533 } 4534 } 4535 } 4536 ``` 4537 4538### onClientAuthenticationRequest<sup>9+</sup> 4539 4540onClientAuthenticationRequest(callback: Callback\<OnClientAuthenticationEvent\>) 4541 4542通知用户收到SSL客户端证书请求事件。 4543 4544**系统能力：** SystemCapability.Web.Webview.Core 4545 4546**参数：** 4547 4548| 参数名 | 类型 | 必填 | 说明 | 4549| ------ | ------ | ---- | --------------------- | 4550| callback | Callback\<[OnClientAuthenticationEvent](#onclientauthenticationevent12)\> | 是 | 当需要用户提供的SSL客户端证书时触发的回调。 | 4551 4552 **示例：** 4553 4554 未对接证书管理的双向认证。 4555 4556 ```ts 4557 // xxx.ets API9 4558 import { webview } from '@kit.ArkWeb'; 4559 4560 @Entry 4561 @Component 4562 struct WebComponent { 4563 controller: webview.WebviewController = new webview.WebviewController(); 4564 4565 build() { 4566 Column() { 4567 Web({ src: 'www.example.com', controller: this.controller }) 4568 .onClientAuthenticationRequest((event) => { 4569 AlertDialog.show({ 4570 title: 'onClientAuthenticationRequest', 4571 message: 'text', 4572 primaryButton: { 4573 value: 'confirm', 4574 action: () => { 4575 event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem"); 4576 } 4577 }, 4578 secondaryButton: { 4579 value: 'cancel', 4580 action: () => { 4581 event.handler.cancel(); 4582 } 4583 }, 4584 cancel: () => { 4585 event.handler.ignore(); 4586 } 4587 }) 4588 }) 4589 } 4590 } 4591 } 4592 ``` 4593 4594 对接证书管理的双向认证。 4595 4596 1. 构造单例对象GlobalContext。 4597 4598 ```ts 4599 // GlobalContext.ets 4600 export class GlobalContext { 4601 private constructor() {} 4602 private static instance: GlobalContext; 4603 private _objects = new Map<string, Object>(); 4604 4605 public static getContext(): GlobalContext { 4606 if (!GlobalContext.instance) { 4607 GlobalContext.instance = new GlobalContext(); 4608 } 4609 return GlobalContext.instance; 4610 } 4611 4612 getObject(value: string): Object | undefined { 4613 return this._objects.get(value); 4614 } 4615 4616 setObject(key: string, objectClass: Object): void { 4617 this._objects.set(key, objectClass); 4618 } 4619 } 4620 ``` 4621 4622 4623 2. 实现双向认证。 4624 4625 ```ts 4626 // xxx.ets API10 4627 import { webview } from '@kit.ArkWeb'; 4628 import { common, Want, bundleManager } from '@kit.AbilityKit'; 4629 import { BusinessError } from '@kit.BasicServicesKit'; 4630 import { GlobalContext } from '../GlobalContext'; 4631 4632 let uri = ""; 4633 4634 export default class CertManagerService { 4635 private static sInstance: CertManagerService; 4636 private authUri = ""; 4637 private appUid = ""; 4638 4639 public static getInstance(): CertManagerService { 4640 if (CertManagerService.sInstance == null) { 4641 CertManagerService.sInstance = new CertManagerService(); 4642 } 4643 return CertManagerService.sInstance; 4644 } 4645 4646 async grantAppPm(callback: (message: string) => void) { 4647 let message = ''; 4648 let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION; 4649 // 注：com.example.myapplication需要写实际应用名称 4650 try { 4651 bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => { 4652 console.info('getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data)); 4653 this.appUid = data.appInfo.uid.toString(); 4654 }).catch((err: BusinessError) => { 4655 console.error('getBundleInfoForSelf failed. Cause: %{public}s', err.message); 4656 }); 4657 } catch (err) { 4658 let message = (err as BusinessError).message; 4659 console.error('getBundleInfoForSelf failed: %{public}s', message); 4660 } 4661 4662 // 注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context) 4663 let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContext 4664 await abilityContext.startAbilityForResult( 4665 { 4666 bundleName: "com.ohos.certmanager", 4667 abilityName: "MainAbility", 4668 uri: "requestAuthorize", 4669 parameters: { 4670 appUid: this.appUid, // 传入申请应用的appUid 4671 } 4672 } as Want) 4673 .then((data: common.AbilityResult) => { 4674 if (!data.resultCode && data.want) { 4675 if (data.want.parameters) { 4676 this.authUri = data.want.parameters.authUri as string; // 授权成功后获取返回的authUri 4677 } 4678 } 4679 }) 4680 message += "after grantAppPm authUri: " + this.authUri; 4681 uri = this.authUri; 4682 callback(message) 4683 } 4684 } 4685 4686 @Entry 4687 @Component 4688 struct WebComponent { 4689 controller: webview.WebviewController = new webview.WebviewController(); 4690 @State message: string = 'Hello World' // message主要是调试观察使用 4691 certManager = CertManagerService.getInstance(); 4692 4693 build() { 4694 Row() { 4695 Column() { 4696 Row() { 4697 // 第一步：需要先进行授权，获取到uri 4698 Button('GrantApp') 4699 .onClick(() => { 4700 this.certManager.grantAppPm((data) => { 4701 this.message = data; 4702 }); 4703 }) 4704 // 第二步：授权后，双向认证会通过onClientAuthenticationRequest回调将uri传给web进行认证 4705 Button("ClientCertAuth") 4706 .onClick(() => { 4707 this.controller.loadUrl('https://www.example2.com'); // 支持双向认证的服务器网站 4708 }) 4709 } 4710 4711 Web({ src: 'https://www.example1.com', controller: this.controller }) 4712 .fileAccess(true) 4713 .javaScriptAccess(true) 4714 .domStorageAccess(true) 4715 .onlineImageAccess(true) 4716 4717 .onClientAuthenticationRequest((event) => { 4718 AlertDialog.show({ 4719 title: 'ClientAuth', 4720 message: 'Text', 4721 confirm: { 4722 value: 'Confirm', 4723 action: () => { 4724 event.handler.confirm(uri); 4725 } 4726 }, 4727 cancel: () => { 4728 event.handler.cancel(); 4729 } 4730 }) 4731 }) 4732 } 4733 } 4734 .width('100%') 4735 .height('100%') 4736 } 4737 } 4738 ``` 4739 4740### onPermissionRequest<sup>9+</sup> 4741 4742onPermissionRequest(callback: Callback\<OnPermissionRequestEvent\>) 4743 4744通知收到获取权限请求，需配置"ohos.permission.CAMERA"、"ohos.permission.MICROPHONE"权限。 4745 4746**系统能力：** SystemCapability.Web.Webview.Core 4747 4748**参数：** 4749 4750| 参数名 | 类型 | 必填 | 说明 | 4751| ------ | ------ | ---- | --------------------- | 4752| callback | Callback\<[OnPermissionRequestEvent](#onpermissionrequestevent12)\> | 是 | 通知收到获取权限请求触发。 | 4753 4754**示例：** 4755 4756 ```ts 4757 // xxx.ets 4758 import { webview } from '@kit.ArkWeb'; 4759 import { BusinessError } from '@kit.BasicServicesKit'; 4760 import { abilityAccessCtrl } from '@kit.AbilityKit'; 4761 4762 @Entry 4763 @Component 4764 struct WebComponent { 4765 controller: webview.WebviewController = new webview.WebviewController(); 4766 4767 aboutToAppear() { 4768 // 配置Web开启调试模式 4769 webview.WebviewController.setWebDebuggingAccess(true); 4770 let atManager = abilityAccessCtrl.createAtManager(); 4771 atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE']) 4772 .then((data) => { 4773 console.info('data:' + JSON.stringify(data)); 4774 console.info('data permissions:' + data.permissions); 4775 console.info('data authResults:' + data.authResults); 4776 }).catch((error: BusinessError) => { 4777 console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`); 4778 }) 4779 } 4780 4781 build() { 4782 Column() { 4783 Web({ src: $rawfile('index.html'), controller: this.controller }) 4784 .onPermissionRequest((event) => { 4785 if (event) { 4786 AlertDialog.show({ 4787 title: 'title', 4788 message: 'text', 4789 primaryButton: { 4790 value: 'deny', 4791 action: () => { 4792 event.request.deny(); 4793 } 4794 }, 4795 secondaryButton: { 4796 value: 'onConfirm', 4797 action: () => { 4798 event.request.grant(event.request.getAccessibleResource()); 4799 } 4800 }, 4801 cancel: () => { 4802 event.request.deny(); 4803 } 4804 }) 4805 } 4806 }) 4807 } 4808 } 4809 } 4810 ``` 4811 4812 加载的html文件。 4813 ```html 4814 <!-- index.html --> 4815 <!DOCTYPE html> 4816 <html> 4817 <head> 4818 <meta charset="UTF-8"> 4819 </head> 4820 <body> 4821 <video id="video" width="500px" height="500px" autoplay="autoplay"></video> 4822 <canvas id="canvas" width="500px" height="500px"></canvas> 4823 <br> 4824 <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/> 4825 <script> 4826 function getMedia() 4827 { 4828 let constraints = { 4829 video: {width: 500, height: 500}, 4830 audio: true 4831 }; 4832 // 获取video摄像头区域 4833 let video = document.getElementById("video"); 4834 // 返回的Promise对象 4835 let promise = navigator.mediaDevices.getUserMedia(constraints); 4836 // then()异步，调用MediaStream对象作为参数 4837 promise.then(function (MediaStream) { 4838 video.srcObject = MediaStream; 4839 video.play(); 4840 }); 4841 } 4842 </script> 4843 </body> 4844 </html> 4845 ``` 4846 4847### onContextMenuShow<sup>9+</sup> 4848 4849onContextMenuShow(callback: Callback\<OnContextMenuShowEvent, boolean\>) 4850 4851长按特定元素（例如图片，链接）或鼠标右键，跳出菜单。 4852 4853**系统能力：** SystemCapability.Web.Webview.Core 4854 4855**参数：** 4856 4857| 参数名 | 类型 | 必填 | 说明 | 4858| ------ | ------ | ---- | --------------------- | 4859| callback | Callback\<[OnContextMenuShowEvent](#oncontextmenushowevent12), boolean\> | 是 | 调用时触发的回调，以允许自定义显示上下文菜单。<br>返回值boolean。自定义菜单返回true，触发的自定义菜单无效返回false。 | 4860 4861**示例：** 4862 4863 ```ts 4864 // xxx.ets 4865 import { webview } from '@kit.ArkWeb'; 4866 import { pasteboard } from '@kit.BasicServicesKit'; 4867 4868 const TAG = 'ContextMenu'; 4869 4870 @Entry 4871 @Component 4872 struct WebComponent { 4873 controller: webview.WebviewController = new webview.WebviewController(); 4874 private result: WebContextMenuResult | undefined = undefined; 4875 @State linkUrl: string = ''; 4876 @State offsetX: number = 0; 4877 @State offsetY: number = 0; 4878 @State showMenu: boolean = false; 4879 4880 @Builder 4881 // 构建自定义菜单及触发功能接口 4882 MenuBuilder() { 4883 // 以垂直列表形式显示的菜单。 4884 Menu() { 4885 // 展示菜单Menu中具体的item菜单项。 4886 MenuItem({ 4887 content: '复制图片', 4888 }) 4889 .width(100) 4890 .height(50) 4891 .onClick(() => { 4892 this.result?.copyImage(); 4893 this.showMenu = false; 4894 }) 4895 MenuItem({ 4896 content: '剪切', 4897 }) 4898 .width(100) 4899 .height(50) 4900 .onClick(() => { 4901 this.result?.cut(); 4902 this.showMenu = false; 4903 }) 4904 MenuItem({ 4905 content: '复制', 4906 }) 4907 .width(100) 4908 .height(50) 4909 .onClick(() => { 4910 this.result?.copy(); 4911 this.showMenu = false; 4912 }) 4913 MenuItem({ 4914 content: '粘贴', 4915 }) 4916 .width(100) 4917 .height(50) 4918 .onClick(() => { 4919 this.result?.paste(); 4920 this.showMenu = false; 4921 }) 4922 MenuItem({ 4923 content: '复制链接', 4924 }) 4925 .width(100) 4926 .height(50) 4927 .onClick(() => { 4928 let pasteData = pasteboard.createData('text/plain', this.linkUrl); 4929 pasteboard.getSystemPasteboard().setData(pasteData, (error) => { 4930 if (error) { 4931 return; 4932 } 4933 }) 4934 this.showMenu = false; 4935 }) 4936 MenuItem({ 4937 content: '全选', 4938 }) 4939 .width(100) 4940 .height(50) 4941 .onClick(() => { 4942 this.result?.selectAll(); 4943 this.showMenu = false; 4944 }) 4945 } 4946 .width(150) 4947 .height(300) 4948 } 4949 4950 build() { 4951 Column() { 4952 Web({ src: $rawfile("index.html"), controller: this.controller }) 4953 // 触发自定义弹窗 4954 .onContextMenuShow((event) => { 4955 if (event) { 4956 this.result = event.result 4957 console.info("x coord = " + event.param.x()); 4958 console.info("link url = " + event.param.getLinkUrl()); 4959 this.linkUrl = event.param.getLinkUrl(); 4960 } 4961 console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`); 4962 this.showMenu = true; 4963 this.offsetX = 0; 4964 this.offsetY = Math.max(px2vp(event?.param.y() ?? 0) - 0, 0); 4965 return true; 4966 }) 4967 .bindPopup(this.showMenu, 4968 { 4969 builder: this.MenuBuilder(), 4970 enableArrow: false, 4971 placement: Placement.LeftTop, 4972 offset: { x: this.offsetX, y: this.offsetY }, 4973 mask: false, 4974 onStateChange: (e) => { 4975 if (!e.isVisible) { 4976 this.showMenu = false; 4977 this.result!.closeContextMenu(); 4978 } 4979 } 4980 }) 4981 } 4982 } 4983 } 4984 ``` 4985 4986 加载的html文件。 4987 ```html 4988 <!-- index.html --> 4989 <!DOCTYPE html> 4990 <html lang="en"> 4991 <body> 4992 <h1>onContextMenuShow</h1> 4993 <a href="http://www.example.com" style="font-size:27px">链接www.example.com</a> 4994 // rawfile下放任意一张图片命名为example.png 4995 <div><img src="example.png"></div> 4996 <p>选中文字鼠标右键弹出菜单</p> 4997 </body> 4998 </html> 4999 ``` 5000 5001### onContextMenuHide<sup>11+</sup> 5002 5003onContextMenuHide(callback: OnContextMenuHideCallback) 5004 5005长按特定元素（例如图片，链接）或鼠标右键，隐藏菜单。 5006 5007**系统能力：** SystemCapability.Web.Webview.Core 5008 5009**参数：** 5010 5011| 参数名 | 类型 | 必填 | 说明 | 5012| ------ | ------ | ---- | --------------------- | 5013| callback | [OnContextMenuHideCallback](#oncontextmenuhidecallback11) | 是 | 菜单相关参数。 | 5014 5015**示例：** 5016 5017 ```ts 5018 // xxx.ets 5019 import { webview } from '@kit.ArkWeb'; 5020 5021 @Entry 5022 @Component 5023 struct WebComponent { 5024 controller: webview.WebviewController = new webview.WebviewController(); 5025 5026 build() { 5027 Column() { 5028 Web({ src: 'www.example.com', controller: this.controller }) 5029 .onContextMenuHide(() => { 5030 console.log("onContextMenuHide callback"); 5031 }) 5032 } 5033 } 5034 } 5035 ``` 5036 5037### onScroll<sup>9+</sup> 5038 5039onScroll(callback: Callback\<OnScrollEvent\>) 5040 5041通知网页滚动条滚动位置。 5042 5043**系统能力：** SystemCapability.Web.Webview.Core 5044 5045**参数：** 5046 5047| 参数名 | 类型 | 必填 | 说明 | 5048| ------ | ------ | ---- | --------------------- | 5049| callback | Callback\<[OnScrollEvent](#onscrollevent12)\> | 是 | 当滚动条滑动到指定位置时触发。 | 5050 5051**示例：** 5052 5053 ```ts 5054 // xxx.ets 5055 import { webview } from '@kit.ArkWeb'; 5056 5057 @Entry 5058 @Component 5059 struct WebComponent { 5060 controller: webview.WebviewController = new webview.WebviewController(); 5061 5062 build() { 5063 Column() { 5064 Web({ src: 'www.example.com', controller: this.controller }) 5065 .onScroll((event) => { 5066 console.info("x = " + event.xOffset); 5067 console.info("y = " + event.yOffset); 5068 }) 5069 } 5070 } 5071 } 5072 ``` 5073 5074### onGeolocationShow 5075 5076onGeolocationShow(callback: Callback\<OnGeolocationShowEvent\>) 5077 5078通知用户收到地理位置信息获取请求。 5079 5080**系统能力：** SystemCapability.Web.Webview.Core 5081 5082**参数：** 5083 5084| 参数名 | 类型 | 必填 | 说明 | 5085| ------ | ------ | ---- | --------------------- | 5086| callback | Callback\<[OnGeolocationShowEvent](#ongeolocationshowevent12)\> | 是 | 请求显示地理位置权限时触发。 | 5087 5088**示例：** 5089 5090 ```ts 5091 // xxx.ets 5092 import { webview } from '@kit.ArkWeb'; 5093 5094 @Entry 5095 @Component 5096 struct WebComponent { 5097 controller: webview.WebviewController = new webview.WebviewController(); 5098 5099 build() { 5100 Column() { 5101 Web({ src: $rawfile('index.html'), controller: this.controller }) 5102 .geolocationAccess(true) 5103 .onGeolocationShow((event) => { 5104 if (event) { 5105 AlertDialog.show({ 5106 title: 'title', 5107 message: 'text', 5108 confirm: { 5109 value: 'onConfirm', 5110 action: () => { 5111 event.geolocation.invoke(event.origin, true, true); 5112 } 5113 }, 5114 cancel: () => { 5115 event.geolocation.invoke(event.origin, false, true); 5116 } 5117 }) 5118 } 5119 }) 5120 } 5121 } 5122 } 5123 ``` 5124 5125 加载的html文件。 5126 ```html 5127 <!DOCTYPE html> 5128 <html> 5129 <body> 5130 <p id="locationInfo">位置信息</p> 5131 <button onclick="getLocation()">获取位置</button> 5132 <script> 5133 var locationInfo=document.getElementById("locationInfo"); 5134 function getLocation(){ 5135 if (navigator.geolocation) { 5136 <!-- 前端页面访问设备地理位置 --> 5137 navigator.geolocation.getCurrentPosition(showPosition); 5138 } 5139 } 5140 function showPosition(position){ 5141 locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 5142 } 5143 </script> 5144 </body> 5145 </html> 5146 ``` 5147 5148### onGeolocationHide 5149 5150onGeolocationHide(callback: () => void) 5151 5152通知用户先前被调用[onGeolocationShow](#ongeolocationshow)时收到地理位置信息获取请求已被取消。 5153 5154**系统能力：** SystemCapability.Web.Webview.Core 5155 5156**参数：** 5157 5158| 参数名 | 类型 | 必填 | 说明 | 5159| ------ | ------ | ---- | --------------------- | 5160| callback | () => void | 是 | 地理位置信息获取请求已被取消的回调函数。 | 5161 5162**示例：** 5163 5164 ```ts 5165 // xxx.ets 5166 import { webview } from '@kit.ArkWeb'; 5167 5168 @Entry 5169 @Component 5170 struct WebComponent { 5171 controller: webview.WebviewController = new webview.WebviewController(); 5172 5173 build() { 5174 Column() { 5175 Web({ src: 'www.example.com', controller: this.controller }) 5176 .geolocationAccess(true) 5177 .onGeolocationHide(() => { 5178 console.log("onGeolocationHide..."); 5179 }) 5180 } 5181 } 5182 } 5183 ``` 5184 5185### onFullScreenEnter<sup>9+</sup> 5186 5187onFullScreenEnter(callback: OnFullScreenEnterCallback) 5188 5189通知开发者Web组件进入全屏模式。 5190 5191**系统能力：** SystemCapability.Web.Webview.Core 5192 5193**参数：** 5194 5195| 参数名 | 类型 | 必填 | 说明 | 5196| ------ | ------ | ---- | --------------------- | 5197| callback | [OnFullScreenEnterCallback](#onfullscreenentercallback12) | 是 | Web组件进入全屏时的回调信息。 | 5198 5199**示例：** 5200 5201 ```ts 5202 // xxx.ets 5203 import { webview } from '@kit.ArkWeb'; 5204 5205 @Entry 5206 @Component 5207 struct WebComponent { 5208 controller: webview.WebviewController = new webview.WebviewController(); 5209 handler: FullScreenExitHandler | null = null; 5210 5211 build() { 5212 Column() { 5213 Web({ src: 'www.example.com', controller: this.controller }) 5214 .onFullScreenEnter((event) => { 5215 console.log("onFullScreenEnter videoWidth: " + event.videoWidth + 5216 ", videoHeight: " + event.videoHeight); 5217 // 应用可以通过 this.handler.exitFullScreen() 主动退出全屏。 5218 this.handler = event.handler; 5219 }) 5220 } 5221 } 5222 } 5223 ``` 5224 5225### onFullScreenExit<sup>9+</sup> 5226 5227onFullScreenExit(callback: () => void) 5228 5229通知开发者Web组件退出全屏模式。 5230 5231**系统能力：** SystemCapability.Web.Webview.Core 5232 5233**参数：** 5234 5235| 参数名 | 类型 | 必填 | 说明 | 5236| ------ | ------ | ---- | --------------------- | 5237| callback | () => void | 是 | 退出全屏模式时的回调函数。 | 5238 5239**示例：** 5240 5241 ```ts 5242 // xxx.ets 5243 import { webview } from '@kit.ArkWeb'; 5244 5245 @Entry 5246 @Component 5247 struct WebComponent { 5248 controller: webview.WebviewController = new webview.WebviewController(); 5249 handler: FullScreenExitHandler | null = null; 5250 5251 build() { 5252 Column() { 5253 Web({ src: 'www.example.com', controller: this.controller }) 5254 .onFullScreenExit(() => { 5255 console.log("onFullScreenExit...") 5256 if (this.handler) { 5257 this.handler.exitFullScreen(); 5258 } 5259 }) 5260 .onFullScreenEnter((event) => { 5261 this.handler = event.handler; 5262 }) 5263 } 5264 } 5265 } 5266 ``` 5267 5268### onWindowNew<sup>9+</sup> 5269 5270onWindowNew(callback: Callback\<OnWindowNewEvent\>) 5271 5272使能multiWindowAccess情况下，通知用户新建窗口请求。 5273若不调用event.handler.setWebController接口，会造成render进程阻塞。 5274如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。 5275 5276应用应谨慎的显示新窗口：不要简单的覆盖在原web组件上，防止误导用户正在查看哪个网站，如果应用显示主页的URL，请确保也以相似的方式显示新窗口的URL。否则请考虑完全禁止创建新窗口。 5277 5278注意：没有可靠的方式判断哪个页面请求了新窗口，该请求可能来自第三方iframe 5279 5280**系统能力：** SystemCapability.Web.Webview.Core 5281 5282**参数：** 5283 5284| 参数名 | 类型 | 必填 | 说明 | 5285| ------ | ------ | ---- | --------------------- | 5286| callback | Callback\<[OnWindowNewEvent](#onwindownewevent12)\> | 是 | 网页要求用户创建窗口时触发的回调。 | 5287 5288**示例：** 5289 5290 ```ts 5291 // xxx.ets 5292 import { webview } from '@kit.ArkWeb'; 5293 5294 // 在同一page页有两个Web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。 5295 @CustomDialog 5296 struct NewWebViewComp { 5297 controller?: CustomDialogController; 5298 webviewController1: webview.WebviewController = new webview.WebviewController(); 5299 5300 build() { 5301 Column() { 5302 Web({ src: "", controller: this.webviewController1 }) 5303 .javaScriptAccess(true) 5304 .multiWindowAccess(false) 5305 .onWindowExit(() => { 5306 console.info("NewWebViewComp onWindowExit"); 5307 if (this.controller) { 5308 this.controller.close(); 5309 } 5310 }) 5311 } 5312 } 5313 } 5314 5315 @Entry 5316 @Component 5317 struct WebComponent { 5318 controller: webview.WebviewController = new webview.WebviewController(); 5319 dialogController: CustomDialogController | null = null; 5320 5321 build() { 5322 Column() { 5323 Web({ src: 'www.example.com', controller: this.controller }) 5324 .javaScriptAccess(true) 5325 // 需要使能multiWindowAccess 5326 .multiWindowAccess(true) 5327 .allowWindowOpenMethod(true) 5328 .onWindowNew((event) => { 5329 if (this.dialogController) { 5330 this.dialogController.close(); 5331 } 5332 let popController: webview.WebviewController = new webview.WebviewController(); 5333 this.dialogController = new CustomDialogController({ 5334 builder: NewWebViewComp({ webviewController1: popController }) 5335 }) 5336 this.dialogController.open(); 5337 // 将新窗口对应WebviewController返回给Web内核。 5338 // 若不调用event.handler.setWebController接口，会造成render进程阻塞。 5339 // 如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。 5340 event.handler.setWebController(popController); 5341 }) 5342 } 5343 } 5344 } 5345 ``` 5346 5347### onWindowExit<sup>9+</sup> 5348 5349onWindowExit(callback: () => void) 5350 5351通知用户窗口关闭请求。和[onWindowNew](#onwindownew9)一样，从安全角度讲，应用应该确保用户可以知道他们交互的页面已关闭。 5352 5353**系统能力：** SystemCapability.Web.Webview.Core 5354 5355**参数：** 5356 5357| 参数名 | 类型 | 必填 | 说明 | 5358| ------ | ------ | ---- | --------------------- | 5359| callback | () => void | 是 | 窗口请求关闭的回调函数。 | 5360 5361**示例：** 5362 5363 ```ts 5364 // xxx.ets 5365 import { webview } from '@kit.ArkWeb'; 5366 5367 @Entry 5368 @Component 5369 struct WebComponent { 5370 controller: webview.WebviewController = new webview.WebviewController(); 5371 5372 build() { 5373 Column() { 5374 Web({ src: 'www.example.com', controller: this.controller }) 5375 .onWindowExit(() => { 5376 console.log("onWindowExit..."); 5377 }) 5378 } 5379 } 5380 } 5381 ``` 5382 5383### onSearchResultReceive<sup>9+</sup> 5384 5385onSearchResultReceive(callback: Callback\<OnSearchResultReceiveEvent\>) 5386 5387回调通知调用方网页页内查找的结果。 5388 5389**系统能力：** SystemCapability.Web.Webview.Core 5390 5391**参数：** 5392 5393| 参数名 | 类型 | 必填 | 说明 | 5394| ------ | ------ | ---- | --------------------- | 5395| callback | Callback\<[OnSearchResultReceiveEvent](#onsearchresultreceiveevent12)\> | 是 | 通知调用方网页页内查找的结果。 | 5396 5397**示例：** 5398 5399 ```ts 5400 // xxx.ets 5401 import { webview } from '@kit.ArkWeb'; 5402 5403 @Entry 5404 @Component 5405 struct WebComponent { 5406 controller: webview.WebviewController = new webview.WebviewController(); 5407 5408 build() { 5409 Column() { 5410 Web({ src: 'www.example.com', controller: this.controller }) 5411 .onSearchResultReceive(ret => { 5412 if (ret) { 5413 console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal + 5414 "[total]" + ret.numberOfMatches + "[isDone]" + ret.isDoneCounting); 5415 } 5416 }) 5417 } 5418 } 5419 } 5420 ``` 5421 5422### onDataResubmitted<sup>9+</sup> 5423 5424onDataResubmitted(callback: Callback\<OnDataResubmittedEvent\>) 5425 5426设置网页表单可以重新提交时触发的回调函数。 5427 5428**系统能力：** SystemCapability.Web.Webview.Core 5429 5430**参数：** 5431 5432| 参数名 | 类型 | 必填 | 说明 | 5433| ------ | ------ | ---- | --------------------- | 5434| callback | Callback\<[OnDataResubmittedEvent](#ondataresubmittedevent12)\> | 是 | 网页表单可以重新提交时触发。 | 5435 5436**示例：** 5437 5438 ```ts 5439 // xxx.ets 5440 import { webview } from '@kit.ArkWeb'; 5441 import { BusinessError } from '@kit.BasicServicesKit'; 5442 5443 @Entry 5444 @Component 5445 struct WebComponent { 5446 controller: webview.WebviewController = new webview.WebviewController(); 5447 5448 build() { 5449 Column() { 5450 // 在网页中点击提交之后，点击refresh按钮可以重新提交时的触发函数。 5451 Button('refresh') 5452 .onClick(() => { 5453 try { 5454 this.controller.refresh(); 5455 } catch (error) { 5456 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 5457 } 5458 }) 5459 Web({ src: $rawfile('index.html'), controller: this.controller }) 5460 .onDataResubmitted((event) => { 5461 console.log('onDataResubmitted'); 5462 event.handler.resend(); 5463 }) 5464 } 5465 } 5466 } 5467 ``` 5468 5469 加载的html文件。 5470 ```html 5471 <!-- index.html --> 5472 <!DOCTYPE html> 5473 <html> 5474 <head> 5475 <meta charset="utf-8"> 5476 </head> 5477 <body> 5478 <form action="http://httpbin.org/post" method="post"> 5479 <input type="text" name="username"> 5480 <input type="submit" name="提交"> 5481 </form> 5482 </body> 5483 </html> 5484 ``` 5485 5486### onPageVisible<sup>9+</sup> 5487 5488onPageVisible(callback: Callback\<OnPageVisibleEvent\>) 5489 5490设置旧页面不再呈现，新页面即将可见时触发的回调函数。 5491 5492**系统能力：** SystemCapability.Web.Webview.Core 5493 5494**参数：** 5495 5496| 参数名 | 类型 | 必填 | 说明 | 5497| ------ | ------ | ---- | --------------------- | 5498| callback | Callback\<[OnPageVisibleEvent](#onpagevisibleevent12)\> | 是 | 旧页面不再呈现，新页面即将可见时触发的回调函数。 | 5499 5500**示例：** 5501 5502 ```ts 5503 // xxx.ets 5504 import { webview } from '@kit.ArkWeb'; 5505 5506 @Entry 5507 @Component 5508 struct WebComponent { 5509 controller: webview.WebviewController = new webview.WebviewController(); 5510 5511 build() { 5512 Column() { 5513 Web({ src: 'www.example.com', controller: this.controller }) 5514 .onPageVisible((event) => { 5515 console.log('onPageVisible url:' + event.url); 5516 }) 5517 } 5518 } 5519 } 5520 ``` 5521 5522### onInterceptKeyEvent<sup>9+</sup> 5523 5524onInterceptKeyEvent(callback: (event: KeyEvent) => boolean) 5525 5526设置键盘事件的回调函数，该回调在被Webview使用前触发。 5527 5528**系统能力：** SystemCapability.Web.Webview.Core 5529 5530**参数：** 5531 5532| 参数名 | 类型 | 必填 | 说明 | 5533| ------ | ------ | ---- | --------------------- | 5534| callback | (event:[KeyEvent](../apis-arkui/arkui-ts/ts-universal-events-key.md#keyevent对象说明)) => boolean | 是 | 触发的KeyEvent事件。返回值：回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入Webview内核。 | 5535 5536**示例：** 5537 5538 ```ts 5539 // xxx.ets 5540 import { webview } from '@kit.ArkWeb'; 5541 5542 @Entry 5543 @Component 5544 struct WebComponent { 5545 controller: webview.WebviewController = new webview.WebviewController(); 5546 5547 build() { 5548 Column() { 5549 Web({ src: 'www.example.com', controller: this.controller }) 5550 .onInterceptKeyEvent((event) => { 5551 if (event.keyCode == 2017 || event.keyCode == 2018) { 5552 console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`); 5553 return true; 5554 } 5555 return false; 5556 }) 5557 } 5558 } 5559 } 5560 ``` 5561 5562### onTouchIconUrlReceived<sup>9+</sup> 5563 5564onTouchIconUrlReceived(callback: Callback\<OnTouchIconUrlReceivedEvent\>) 5565 5566设置接收到apple-touch-icon url地址时的回调函数。 5567 5568**系统能力：** SystemCapability.Web.Webview.Core 5569 5570**参数：** 5571 5572| 参数名 | 类型 | 必填 | 说明 | 5573| ------ | ------ | ---- | --------------------- | 5574| callback | Callback\<[OnTouchIconUrlReceivedEvent](#ontouchiconurlreceivedevent12)\> | 是 | 接收到的apple-touch-icon url地址时触发。 | 5575 5576**示例：** 5577 5578 ```ts 5579 // xxx.ets 5580 import { webview } from '@kit.ArkWeb'; 5581 5582 @Entry 5583 @Component 5584 struct WebComponent { 5585 controller: webview.WebviewController = new webview.WebviewController(); 5586 5587 build() { 5588 Column() { 5589 Web({ src: 'www.baidu.com', controller: this.controller }) 5590 .onTouchIconUrlReceived((event) => { 5591 console.log('onTouchIconUrlReceived:' + JSON.stringify(event)); 5592 }) 5593 } 5594 } 5595 } 5596 ``` 5597 5598### onFaviconReceived<sup>9+</sup> 5599 5600onFaviconReceived(callback: Callback\<OnFaviconReceivedEvent\>) 5601 5602设置应用为当前页面接收到新的favicon时的回调函数。 5603 5604**系统能力：** SystemCapability.Web.Webview.Core 5605 5606**参数：** 5607 5608| 参数名 | 类型 | 必填 | 说明 | 5609| ------ | ------ | ---- | --------------------- | 5610| callback | Callback\<[OnFaviconReceivedEvent](#onfaviconreceivedevent12)\> | 是 | 当前页面接收到新的favicon时触发。 | 5611 5612**示例：** 5613 5614 ```ts 5615 // xxx.ets 5616 import { webview } from '@kit.ArkWeb'; 5617 import { image } from '@kit.ImageKit'; 5618 5619 @Entry 5620 @Component 5621 struct WebComponent { 5622 controller: webview.WebviewController = new webview.WebviewController(); 5623 @State icon: image.PixelMap | undefined = undefined; 5624 5625 build() { 5626 Column() { 5627 Web({ src: 'www.example.com', controller: this.controller }) 5628 .onFaviconReceived((event) => { 5629 console.log('onFaviconReceived'); 5630 this.icon = event.favicon; 5631 }) 5632 } 5633 } 5634 } 5635 ``` 5636 5637### onAudioStateChanged<sup>10+</sup> 5638 5639onAudioStateChanged(callback: Callback\<OnAudioStateChangedEvent\>) 5640 5641设置网页上的音频播放状态发生改变时的回调函数。 5642 5643**系统能力：** SystemCapability.Web.Webview.Core 5644 5645**参数：** 5646 5647| 参数名 | 类型 | 必填 | 说明 | 5648| ------ | ------ | ---- | --------------------- | 5649| callback | Callback\<[OnAudioStateChangedEvent](#onaudiostatechangedevent12)\> | 是 | 网页上的音频播放状态发生改变时触发。 | 5650 5651**示例：** 5652 5653 ```ts 5654 // xxx.ets 5655 import { webview } from '@kit.ArkWeb'; 5656 5657 @Entry 5658 @Component 5659 struct WebComponent { 5660 controller: webview.WebviewController = new webview.WebviewController(); 5661 @State playing: boolean = false; 5662 5663 build() { 5664 Column() { 5665 Web({ src: 'www.example.com', controller: this.controller }) 5666 .onAudioStateChanged(event => { 5667 this.playing = event.playing; 5668 console.debug('onAudioStateChanged playing: ' + this.playing); 5669 }) 5670 } 5671 } 5672 } 5673 ``` 5674 5675### onFirstContentfulPaint<sup>10+</sup> 5676 5677 onFirstContentfulPaint(callback: Callback\<OnFirstContentfulPaintEvent\>) 5678 5679设置网页首次内容绘制回调函数。 5680 5681**系统能力：** SystemCapability.Web.Webview.Core 5682 5683**参数：** 5684 5685| 参数名 | 类型 | 必填 | 说明 | 5686| ------ | ------ | ---- | --------------------- | 5687| callback | Callback\<[OnFirstContentfulPaintEvent](#onfirstcontentfulpaintevent12)\> | 是 | 网页首次内容绘制回调函数。 | 5688 5689**示例：** 5690 5691 ```ts 5692 // xxx.ets 5693 import { webview } from '@kit.ArkWeb'; 5694 5695 @Entry 5696 @Component 5697 struct WebComponent { 5698 controller: webview.WebviewController = new webview.WebviewController(); 5699 5700 build() { 5701 Column() { 5702 Web({ src: 'www.example.com', controller: this.controller }) 5703 .onFirstContentfulPaint(event => { 5704 if (event) { 5705 console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + 5706 event.navigationStartTick + ", [firstContentfulPaintMs]:" + 5707 event.firstContentfulPaintMs); 5708 } 5709 }) 5710 } 5711 } 5712 } 5713 ``` 5714 5715### onFirstMeaningfulPaint<sup>12+</sup> 5716 5717onFirstMeaningfulPaint(callback: [OnFirstMeaningfulPaintCallback](#onfirstmeaningfulpaintcallback12)) 5718 5719设置网页绘制页面主要内容回调函数。 5720 5721**系统能力：** SystemCapability.Web.Webview.Core 5722 5723**参数：** 5724 5725| 参数名 | 类型 | 必填 | 说明 | 5726| ------ | ------ | ---- | --------------------- | 5727| callback | [OnFirstMeaningfulPaintCallback](#onfirstmeaningfulpaintcallback12) | 是 | 网页绘制页面主要内容度量信息的回调。 | 5728 5729**示例：** 5730 5731 ```ts 5732 // xxx.ets 5733 import { webview } from '@kit.ArkWeb'; 5734 5735 @Entry 5736 @Component 5737 struct WebComponent { 5738 controller: webview.WebviewController = new webview.WebviewController(); 5739 5740 build() { 5741 Column() { 5742 Web({ src: 'www.example.com', controller: this.controller }) 5743 .onFirstMeaningfulPaint((details) => { 5744 console.log("onFirstMeaningfulPaint: [navigationStartTime]= " + details.navigationStartTime + 5745 ", [firstMeaningfulPaintTime]=" + details.firstMeaningfulPaintTime); 5746 }) 5747 } 5748 } 5749 } 5750 ``` 5751 5752### onLargestContentfulPaint<sup>12+</sup> 5753 5754onLargestContentfulPaint(callback: [OnLargestContentfulPaintCallback](#onlargestcontentfulpaintcallback12)) 5755 5756设置网页绘制页面最大内容回调函数。 5757 5758**系统能力：** SystemCapability.Web.Webview.Core 5759 5760**参数：** 5761 5762| 参数名 | 类型 | 必填 | 说明 | 5763| ------ | ------ | ---- | --------------------- | 5764| callback | [OnLargestContentfulPaintCallback](#onlargestcontentfulpaintcallback12) | 是 | 网页绘制页面最大内容度量信息的回调。 | 5765 5766**示例：** 5767 5768 ```ts 5769 // xxx.ets 5770 import { webview } from '@kit.ArkWeb'; 5771 5772 @Entry 5773 @Component 5774 struct WebComponent { 5775 controller: webview.WebviewController = new webview.WebviewController(); 5776 5777 build() { 5778 Column() { 5779 Web({ src: 'www.example.com', controller: this.controller }) 5780 .onLargestContentfulPaint((details) => { 5781 console.log("onLargestContentfulPaint: [navigationStartTime]= " + details.navigationStartTime + 5782 ", [largestImagePaintTime]=" + details.largestImagePaintTime + 5783 ", [largestTextPaintTime]=" + details.largestTextPaintTime + 5784 ", [largestImageLoadStartTime]=" + details.largestImageLoadStartTime + 5785 ", [largestImageLoadEndTime]=" + details.largestImageLoadEndTime + 5786 ", [imageBPP]=" + details.imageBPP); 5787 }) 5788 } 5789 } 5790 } 5791 ``` 5792 5793### onLoadIntercept<sup>10+</sup> 5794 5795onLoadIntercept(callback: Callback\<OnLoadInterceptEvent, boolean\>) 5796 5797当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 5798 5799**系统能力：** SystemCapability.Web.Webview.Core 5800 5801**参数：** 5802 5803| 参数名 | 类型 | 必填 | 说明 | 5804| ------ | ------ | ---- | --------------------- | 5805| callback | Callback\<[OnLoadInterceptEvent](#onloadinterceptevent12), boolean\> | 是 | 截获资源加载时触发的回调。<br>返回值boolean。返回true表示阻止此次加载，否则允许此次加载。 | 5806 5807**示例：** 5808 5809 ```ts 5810 // xxx.ets 5811 import { webview } from '@kit.ArkWeb'; 5812 5813 @Entry 5814 @Component 5815 struct WebComponent { 5816 controller: webview.WebviewController = new webview.WebviewController(); 5817 5818 build() { 5819 Column() { 5820 Web({ src: 'www.example.com', controller: this.controller }) 5821 .onLoadIntercept((event) => { 5822 console.log('url:' + event.data.getRequestUrl()); 5823 console.log('isMainFrame:' + event.data.isMainFrame()); 5824 console.log('isRedirect:' + event.data.isRedirect()); 5825 console.log('isRequestGesture:' + event.data.isRequestGesture()); 5826 return true; 5827 }) 5828 } 5829 } 5830 } 5831 ``` 5832 5833### onRequestSelected 5834 5835onRequestSelected(callback: () => void) 5836 5837当Web组件获得焦点时触发该回调。 5838 5839**系统能力：** SystemCapability.Web.Webview.Core 5840 5841**示例：** 5842 5843 ```ts 5844 // xxx.ets 5845 import { webview } from '@kit.ArkWeb'; 5846 5847 @Entry 5848 @Component 5849 struct WebComponent { 5850 controller: webview.WebviewController = new webview.WebviewController(); 5851 5852 build() { 5853 Column() { 5854 Web({ src: 'www.example.com', controller: this.controller }) 5855 .onRequestSelected(() => { 5856 console.log('onRequestSelected'); 5857 }) 5858 } 5859 } 5860 } 5861 ``` 5862### onScreenCaptureRequest<sup>10+</sup> 5863 5864onScreenCaptureRequest(callback: Callback\<OnScreenCaptureRequestEvent\>) 5865 5866通知收到屏幕捕获请求。 5867 5868**系统能力：** SystemCapability.Web.Webview.Core 5869 5870**参数：** 5871 5872| 参数名 | 类型 | 必填 | 说明 | 5873| ------ | ------ | ---- | --------------------- | 5874| callback | Callback\<[OnScreenCaptureRequestEvent](#onscreencapturerequestevent12)\> | 是 | 通知收到屏幕捕获请求。 | 5875 5876**示例：** 5877 5878 ```ts 5879 // xxx.ets 5880 import { webview } from '@kit.ArkWeb'; 5881 5882 @Entry 5883 @Component 5884 struct WebComponent { 5885 controller: webview.WebviewController = new webview.WebviewController(); 5886 5887 build() { 5888 Column() { 5889 Web({ src: 'www.example.com', controller: this.controller }) 5890 .onScreenCaptureRequest((event) => { 5891 if (event) { 5892 AlertDialog.show({ 5893 title: 'title: ' + event.handler.getOrigin(), 5894 message: 'text', 5895 primaryButton: { 5896 value: 'deny', 5897 action: () => { 5898 event.handler.deny(); 5899 } 5900 }, 5901 secondaryButton: { 5902 value: 'onConfirm', 5903 action: () => { 5904 event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN }); 5905 } 5906 }, 5907 cancel: () => { 5908 event.handler.deny(); 5909 } 5910 }) 5911 } 5912 }) 5913 } 5914 } 5915 } 5916 ``` 5917 5918### onOverScroll<sup>10+</sup> 5919 5920onOverScroll(callback: Callback\<OnOverScrollEvent\>) 5921 5922该接口在网页过度滚动时触发，用于通知网页过度滚动的偏移量。 5923 5924**系统能力：** SystemCapability.Web.Webview.Core 5925 5926**参数：** 5927 5928| 参数名 | 类型 | 必填 | 说明 | 5929| ------ | ------ | ---- | --------------------- | 5930| callback | Callback\<[OnOverScrollEvent](#onoverscrollevent12)\> | 是 | 网页过度滚动时触发。 | 5931 5932**示例：** 5933 5934 ```ts 5935 // xxx.ets 5936 import { webview } from '@kit.ArkWeb'; 5937 5938 @Entry 5939 @Component 5940 struct WebComponent { 5941 controller: webview.WebviewController = new webview.WebviewController(); 5942 5943 build() { 5944 Column() { 5945 Web({ src: 'www.example.com', controller: this.controller }) 5946 .onOverScroll((event) => { 5947 console.info("x = " + event.xOffset); 5948 console.info("y = " + event.yOffset); 5949 }) 5950 } 5951 } 5952 } 5953 ``` 5954 5955### onControllerAttached<sup>10+</sup> 5956 5957onControllerAttached(callback: () => void) 5958 5959当Controller成功绑定到Web组件时触发该回调，并且该Controller必须为WebviewController，且禁止在该事件回调前调用Web组件相关的接口，否则会抛出js-error异常。 5960因该回调调用时网页还未加载，无法在回调中使用有关操作网页的接口，例如[zoomIn](js-apis-webview.md#zoomin)、[zoomOut](js-apis-webview.md#zoomout)等，可以使用[loadUrl](js-apis-webview.md#loadurl)、[getWebId](js-apis-webview.md#getwebid)等操作网页不相关的接口。 5961 5962组件生命周期详情可参考[Web组件的生命周期](../../web/web-event-sequence.md)。 5963 5964**系统能力：** SystemCapability.Web.Webview.Core 5965 5966**示例：** 5967 5968在该回调中使用loadUrl加载网页 5969 ```ts 5970 // xxx.ets 5971 import { webview } from '@kit.ArkWeb'; 5972 5973 @Entry 5974 @Component 5975 struct WebComponent { 5976 controller: webview.WebviewController = new webview.WebviewController(); 5977 5978 build() { 5979 Column() { 5980 Web({ src: '', controller: this.controller }) 5981 .onControllerAttached(() => { 5982 this.controller.loadUrl($rawfile("index.html")); 5983 }) 5984 } 5985 } 5986 } 5987 ``` 5988 5989在该回调中使用getWebId 5990 ```ts 5991 // xxx.ets 5992 import { webview } from '@kit.ArkWeb'; 5993 import { BusinessError } from '@kit.BasicServicesKit'; 5994 5995 @Entry 5996 @Component 5997 struct WebComponent { 5998 controller: webview.WebviewController = new webview.WebviewController(); 5999 6000 build() { 6001 Column() { 6002 Web({ src: $rawfile("index.html"), controller: this.controller }) 6003 .onControllerAttached(() => { 6004 try { 6005 let id = this.controller.getWebId(); 6006 console.log("id: " + id); 6007 } catch (error) { 6008 let code = (error as BusinessError).code; 6009 let message = (error as BusinessError).message; 6010 console.error(`ErrorCode: ${code}, Message: ${message}`); 6011 } 6012 }) 6013 } 6014 } 6015 } 6016 ``` 6017 加载的html文件。 6018 ```html 6019 <!-- index.html --> 6020 <!DOCTYPE html> 6021 <html> 6022 <body> 6023 <p>Hello World</p> 6024 </body> 6025 </html> 6026 ``` 6027 6028### onNavigationEntryCommitted<sup>11+</sup> 6029 6030onNavigationEntryCommitted(callback: [OnNavigationEntryCommittedCallback](#onnavigationentrycommittedcallback11)) 6031 6032当网页跳转提交时触发该回调。 6033 6034**系统能力：** SystemCapability.Web.Webview.Core 6035 6036**参数：** 6037 6038| 参数名 | 类型 | 必填 | 说明 | 6039| ------ | ------ | ---- | --------------------- | 6040| callback | [OnNavigationEntryCommittedCallback](#onnavigationentrycommittedcallback11) | 是 | 网页跳转提交时触发的回调。 | 6041 6042**示例：** 6043 6044 ```ts 6045 // xxx.ets 6046 import { webview } from '@kit.ArkWeb'; 6047 6048 @Entry 6049 @Component 6050 struct WebComponent { 6051 controller: webview.WebviewController = new webview.WebviewController(); 6052 6053 build() { 6054 Column() { 6055 Web({ src: 'www.example.com', controller: this.controller }) 6056 .onNavigationEntryCommitted((details) => { 6057 console.log("onNavigationEntryCommitted: [isMainFrame]= " + details.isMainFrame + 6058 ", [isSameDocument]=" + details.isSameDocument + 6059 ", [didReplaceEntry]=" + details.didReplaceEntry + 6060 ", [navigationType]=" + details.navigationType + 6061 ", [url]=" + details.url); 6062 }) 6063 } 6064 } 6065 } 6066 ``` 6067 6068### onSafeBrowsingCheckResult<sup>11+</sup> 6069 6070onSafeBrowsingCheckResult(callback: OnSafeBrowsingCheckResultCallback) 6071 6072收到网站安全风险检查结果时触发的回调。 6073 6074**系统能力：** SystemCapability.Web.Webview.Core 6075 6076**参数：** 6077 6078| 参数名 | 类型 | 必填 | 说明 | 6079| ------ | ------ | ---- | --------------------- | 6080| callback | [OnSafeBrowsingCheckResultCallback](#onsafebrowsingcheckresultcallback11) | 是 | 收到网站安全风险检查结果时触发的回调。| 6081 6082**示例：** 6083 6084 ```ts 6085 // xxx.ets 6086 import { webview } from '@kit.ArkWeb'; 6087 6088 export enum ThreatType { 6089 UNKNOWN = -1, 6090 THREAT_ILLEGAL = 0, 6091 THREAT_FRAUD = 1, 6092 THREAT_RISK = 2, 6093 THREAT_WARNING = 3, 6094 } 6095 6096 export class OnSafeBrowsingCheckResultCallback { 6097 threatType: ThreatType = ThreatType.UNKNOWN; 6098 } 6099 6100 @Entry 6101 @Component 6102 struct WebComponent { 6103 controller: webview.WebviewController = new webview.WebviewController(); 6104 6105 build() { 6106 Column() { 6107 Web({ src: 'www.example.com', controller: this.controller }) 6108 .onSafeBrowsingCheckResult((callback) => { 6109 let jsonData = JSON.stringify(callback); 6110 let json: OnSafeBrowsingCheckResultCallback = JSON.parse(jsonData); 6111 console.log("onSafeBrowsingCheckResult: [threatType]= " + json.threatType); 6112 }) 6113 } 6114 } 6115 } 6116 ``` 6117 6118### onNativeEmbedLifecycleChange<sup>11+</sup> 6119 6120onNativeEmbedLifecycleChange(callback: (event: NativeEmbedDataInfo) => void) 6121 6122当同层标签生命周期变化时触发该回调。 6123 6124**系统能力：** SystemCapability.Web.Webview.Core 6125 6126**参数：** 6127 6128| 参数名 | 类型 | 必填 | 说明 | 6129| ------ | ------ | ---- | --------------------- | 6130| callback | (event: [NativeEmbedDataInfo](#nativeembeddatainfo11)) => void | 是 | 同层标签生命周期变化时触发该回调。 | 6131 6132**示例：** 6133 6134```ts 6135// EntryAbility.ets 6136 6137import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 6138import { hilog } from '@kit.PerformanceAnalysisKit'; 6139import { window } from '@kit.ArkUI'; 6140import { webview } from '@kit.ArkWeb'; 6141 6142export default class EntryAbility extends UIAbility { 6143 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 6144 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 6145 // API12新增：开启同层渲染BFCache开关 6146 let features = new webview.BackForwardCacheSupportedFeatures(); 6147 features.nativeEmbed = true; 6148 features.mediaTakeOver = true; 6149 webview.WebviewController.enableBackForwardCache(features); 6150 webview.WebviewController.initializeWebEngine(); 6151 } 6152 6153 onDestroy(): void { 6154 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 6155 } 6156 6157 onWindowStageCreate(windowStage: window.WindowStage): void { 6158 // Main window is created, set main page for this ability 6159 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 6160 6161 windowStage.loadContent('pages/Index', (err) => { 6162 if (err.code) { 6163 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 6164 return; 6165 } 6166 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 6167 }); 6168 } 6169 6170 onWindowStageDestroy(): void { 6171 // Main window is destroyed, release UI related resources 6172 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 6173 } 6174 6175 onForeground(): void { 6176 // Ability has brought to foreground 6177 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 6178 } 6179 6180 onBackground(): void { 6181 // Ability has back to background 6182 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 6183 } 6184} 6185``` 6186 6187 ```ts 6188 // xxx.ets 6189 import { webview } from '@kit.ArkWeb'; 6190 import { BusinessError } from '@kit.BasicServicesKit'; 6191 6192 @Entry 6193 @Component 6194 struct WebComponent { 6195 @State embedStatus: string = ''; 6196 controller: webview.WebviewController = new webview.WebviewController(); 6197 6198 build() { 6199 Column() { 6200 // 默认行为：点击按钮跳转页面，关闭index页面，使同层标签销毁。 6201 // API12新增：使能同层渲染所在的页面支持BFCache后，点击按钮跳转页面，关闭index页面，使同层标签进入BFCache。 6202 Button('Destroy') 6203 .onClick(() => { 6204 try { 6205 this.controller.loadUrl("www.example.com"); 6206 } catch (error) { 6207 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 6208 } 6209 }) 6210 6211 // API12新增：使能同层渲染所在的页面支持BFCache后，点击按钮返回页面，使同层标签离开BFCache。 6212 Button('backward') 6213 .onClick(() => { 6214 try { 6215 this.controller.backward(); 6216 } catch (error) { 6217 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 6218 } 6219 }) 6220 6221 // API12新增：使能同层渲染所在的页面支持BFCache后，点击按钮前进页面，使同层标签进入BFCache。 6222 Button('forward') 6223 .onClick(() => { 6224 try { 6225 this.controller.forward(); 6226 } catch (error) { 6227 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 6228 } 6229 }) 6230 6231 6232 // API12新增同层标签进入离开BFCache状态：非http与https协议加载的网页，Web内核不支持进入BFCache; 6233 // 因此如果要测试ENTER_BFCACHE/LEAVE_BFCACHE状态，需要将index.html放到Web服务器上，使用http或者https协议加载，如： 6234 // Web({ src: "http://xxxx/index.html", controller: this.controller }) 6235 Web({ src: $rawfile("index.html"), controller: this.controller }) 6236 .enableNativeEmbedMode(true) 6237 .onNativeEmbedLifecycleChange((event) => { 6238 // 当加载页面中有同层标签会触发Create。 6239 if (event.status == NativeEmbedStatus.CREATE) { 6240 this.embedStatus = 'Create'; 6241 } 6242 // 当页面中同层标签移动或者缩放时会触发Update。 6243 if (event.status == NativeEmbedStatus.UPDATE) { 6244 this.embedStatus = 'Update'; 6245 } 6246 // 退出页面时会触发Destroy。 6247 if (event.status == NativeEmbedStatus.DESTROY) { 6248 this.embedStatus = 'Destroy'; 6249 } 6250 // 同层标签所在的页面进入BFCache时，会触发Enter BFCache。 6251 if (event.status == NativeEmbedStatus.ENTER_BFCACHE) { 6252 this.embedStatus = 'Enter BFCache'; 6253 } 6254 // 同层标签所在的页面离开BFCache时，会触发Leave BFCache。 6255 if (event.status == NativeEmbedStatus.LEAVE_BFCACHE) { 6256 this.embedStatus = 'Leave BFCache'; 6257 } 6258 console.log("status = " + this.embedStatus); 6259 console.log("surfaceId = " + event.surfaceId); 6260 console.log("embedId = " + event.embedId); 6261 if (event.info) { 6262 console.log("id = " + event.info.id); 6263 console.log("type = " + event.info.type); 6264 console.log("src = " + event.info.src); 6265 console.log("width = " + event.info.width); 6266 console.log("height = " + event.info.height); 6267 console.log("url = " + event.info.url); 6268 } 6269 }) 6270 } 6271 } 6272 } 6273 ``` 6274 6275 加载的html文件 6276 ``` 6277 <!-- index.html --> 6278 <!Document> 6279 <html> 6280 <head> 6281 <title>同层渲染测试html</title> 6282 <meta name="viewport"> 6283 </head> 6284 <body> 6285 <div> 6286 <div id="bodyId"> 6287 <embed id="nativeButton" type = "native/button" width="800" height="800" src="test? params1=1?" style = "background-color:red"/> 6288 </div> 6289 </div> 6290 </body> 6291 </html> 6292 ``` 6293 6294### onNativeEmbedGestureEvent<sup>11+</sup> 6295 6296onNativeEmbedGestureEvent(callback: (event: NativeEmbedTouchInfo) => void) 6297 6298当手指触摸到同层标签时触发该回调。 6299 6300**系统能力：** SystemCapability.Web.Webview.Core 6301 6302**参数：** 6303 6304| 参数名 | 类型 | 必填 | 说明 | 6305| ------ | ------ | ---- | --------------------- | 6306| callback | (event: [NativeEmbedTouchInfo](#nativeembedtouchinfo11)) => void | 是 | 手指触摸到同层标签时触发该回调。 | 6307 6308**示例：** 6309 6310 ```ts 6311 // xxx.ets 6312 import { webview } from '@kit.ArkWeb'; 6313 import { NodeController, BuilderNode, NodeRenderType, FrameNode, UIContext } from "@kit.ArkUI"; 6314 6315 declare class Params { 6316 text: string; 6317 width: number; 6318 height: number; 6319 } 6320 6321 declare class NodeControllerParams { 6322 surfaceId: string; 6323 renderType: NodeRenderType; 6324 width: number; 6325 height: number; 6326 } 6327 6328 class MyNodeController extends NodeController { 6329 private rootNode: BuilderNode<[Params]> | undefined | null; 6330 private surfaceId_: string = ""; 6331 private renderType_: NodeRenderType = NodeRenderType.RENDER_TYPE_DISPLAY; 6332 private width_: number = 0; 6333 private height_: number = 0; 6334 6335 setRenderOption(params: NodeControllerParams) { 6336 this.surfaceId_ = params.surfaceId; 6337 this.renderType_ = params.renderType; 6338 this.width_ = params.width; 6339 this.height_ = params.height; 6340 } 6341 6342 makeNode(uiContext: UIContext): FrameNode | null { 6343 this.rootNode = new BuilderNode(uiContext, { surfaceId: this.surfaceId_, type: this.renderType_ }); 6344 this.rootNode.build(wrapBuilder(ButtonBuilder), { text: "myButton", width: this.width_, height: this.height_ }); 6345 return this.rootNode.getFrameNode(); 6346 } 6347 6348 postEvent(event: TouchEvent | undefined): boolean { 6349 return this.rootNode?.postTouchEvent(event) as boolean; 6350 } 6351 } 6352 6353 @Component 6354 struct ButtonComponent { 6355 @Prop params: Params; 6356 @State bkColor: Color = Color.Red; 6357 6358 build() { 6359 Column() { 6360 Button(this.params.text) 6361 .height(50) 6362 .width(200) 6363 .border({ width: 2, color: Color.Red }) 6364 .backgroundColor(this.bkColor) 6365 6366 } 6367 .width(this.params.width) 6368 .height(this.params.height) 6369 } 6370 } 6371 6372 @Builder 6373 function ButtonBuilder(params: Params) { 6374 ButtonComponent({ params: params }) 6375 .backgroundColor(Color.Green) 6376 } 6377 6378 @Entry 6379 @Component 6380 struct WebComponent { 6381 @State eventType: string = ''; 6382 controller: webview.WebviewController = new webview.WebviewController(); 6383 private nodeController: MyNodeController = new MyNodeController(); 6384 6385 build() { 6386 Column() { 6387 Stack() { 6388 NodeContainer(this.nodeController) 6389 Web({ src: $rawfile("index.html"), controller: this.controller }) 6390 .enableNativeEmbedMode(true) 6391 .onNativeEmbedLifecycleChange((embed) => { 6392 if (embed.status == NativeEmbedStatus.CREATE) { 6393 this.nodeController.setRenderOption({ 6394 surfaceId: embed.surfaceId as string, 6395 renderType: NodeRenderType.RENDER_TYPE_TEXTURE, 6396 width: px2vp(embed.info?.width), 6397 height: px2vp(embed.info?.height) 6398 }); 6399 this.nodeController.rebuild(); 6400 } 6401 }) 6402 .onNativeEmbedGestureEvent((event) => { 6403 if (event && event.touchEvent) { 6404 if (event.touchEvent.type == TouchType.Down) { 6405 this.eventType = 'Down' 6406 } 6407 if (event.touchEvent.type == TouchType.Up) { 6408 this.eventType = 'Up' 6409 } 6410 if (event.touchEvent.type == TouchType.Move) { 6411 this.eventType = 'Move' 6412 } 6413 if (event.touchEvent.type == TouchType.Cancel) { 6414 this.eventType = 'Cancel' 6415 } 6416 let ret = this.nodeController.postEvent(event.touchEvent) 6417 if (event.result) { 6418 event.result.setGestureEventResult(ret, true); 6419 } 6420 console.log("embedId = " + event.embedId); 6421 console.log("touchType = " + this.eventType); 6422 console.log("x = " + event.touchEvent.touches[0].x); 6423 console.log("y = " + event.touchEvent.touches[0].y); 6424 console.log("Component globalPos:(" + event.touchEvent.target.area.globalPosition.x + "," + event.touchEvent.target.area.globalPosition.y + ")"); 6425 console.log("width = " + event.touchEvent.target.area.width); 6426 console.log("height = " + event.touchEvent.target.area.height); 6427 } 6428 }) 6429 } 6430 } 6431 } 6432 } 6433 ``` 6434加载的html文件 6435 ``` 6436 <!-- index.html --> 6437 <!Document> 6438<html> 6439<head> 6440 <title>同层渲染测试html</title> 6441 <meta name="viewport"> 6442</head> 6443<body> 6444<div> 6445 <div id="bodyId"> 6446 <embed id="nativeButton" type = "native/button" width="800" height="800" src="test?params1=1?" style = "background-color:red"/> 6447 </div> 6448</div> 6449</body> 6450</html> 6451 ``` 6452 6453### onIntelligentTrackingPreventionResult<sup>12+</sup> 6454 6455onIntelligentTrackingPreventionResult(callback: OnIntelligentTrackingPreventionCallback) 6456 6457智能防跟踪功能使能时，当追踪者cookie被拦截时触发该回调。 6458 6459**系统能力：** SystemCapability.Web.Webview.Core 6460 6461**参数：** 6462 6463| 参数名 | 类型 | 必填 | 说明 | 6464| ------ | ------ | ---- | --------------------- | 6465| callback | [OnIntelligentTrackingPreventionCallback](#onintelligenttrackingpreventioncallback12) | 是 | 智能防跟踪功能使能时，当追踪者cookie被拦截时触发的回调。 | 6466 6467**示例：** 6468 6469 ```ts 6470 // xxx.ets 6471 import { webview } from '@kit.ArkWeb'; 6472 import { BusinessError } from '@kit.BasicServicesKit'; 6473 6474 @Entry 6475 @Component 6476 struct WebComponent { 6477 controller: webview.WebviewController = new webview.WebviewController(); 6478 6479 build() { 6480 Column() { 6481 // 需要打开智能防跟踪功能，才会触发onIntelligentTrackingPreventionResult回调 6482 Button('enableIntelligentTrackingPrevention') 6483 .onClick(() => { 6484 try { 6485 this.controller.enableIntelligentTrackingPrevention(true); 6486 } catch (error) { 6487 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 6488 } 6489 }) 6490 Web({ src: 'www.example.com', controller: this.controller }) 6491 .onIntelligentTrackingPreventionResult((details) => { 6492 console.log("onIntelligentTrackingPreventionResult: [websiteHost]= " + details.host + 6493 ", [trackerHost]=" + details.trackerHost); 6494 }) 6495 } 6496 } 6497 } 6498 ``` 6499 6500### onOverrideUrlLoading<sup>12+</sup> 6501 6502onOverrideUrlLoading(callback: OnOverrideUrlLoadingCallback) 6503 6504当URL将要加载到当前Web中时，让宿主应用程序有机会获得控制权，回调函数返回true将导致当前Web中止加载URL，而返回false则会导致Web继续照常加载URL。 6505 6506POST请求不会触发该回调。 6507 6508iframe加载HTTP(s)协议或about:blank时不会触发该回调，加载非HTTP(s)协议的跳转可以触发。调用loadUrl(String)主动触发的跳转不会触发该回调。 6509 6510不要使用相同的URL调用loadUrl(String)方法，然后返回true。这样做会不必要地取消当前的加载并重新使用相同的URL开始新的加载。继续加载给定URL的正确方式是直接返回false，而不是调用loadUrl(String)。 6511 6512**系统能力：** SystemCapability.Web.Webview.Core 6513 6514**参数：** 6515 6516| 参数名 | 类型 | 必填 | 说明 | 6517| ------ | ------ | ---- | --------------------- | 6518| callback | [OnOverrideUrlLoadingCallback](#onoverrideurlloadingcallback12) | 是 | onOverrideUrlLoading的回调。 | 6519 6520**示例：** 6521 6522 ```ts 6523 // xxx.ets 6524 import { webview } from '@kit.ArkWeb'; 6525 6526 @Entry 6527 @Component 6528 struct WebComponent { 6529 controller: webview.WebviewController = new webview.WebviewController(); 6530 6531 build() { 6532 Column() { 6533 Web({ src: $rawfile("index.html"), controller: this.controller }) 6534 .onOverrideUrlLoading((webResourceRequest: WebResourceRequest) => { 6535 if (webResourceRequest && webResourceRequest.getRequestUrl() == "about:blank") { 6536 return true; 6537 } 6538 return false; 6539 }) 6540 } 6541 } 6542 } 6543 ``` 6544 6545 加载的html文件。 6546 ```html 6547 <!--index.html--> 6548 <!DOCTYPE html> 6549 <html> 6550 <head> 6551 <title>测试网页</title> 6552 </head> 6553 <body> 6554 <h1>onOverrideUrlLoading Demo</h1> 6555 <a href="about:blank">Click here</a>// 访问about:blank。 6556 </body> 6557 </html> 6558 ``` 6559 6560### onViewportFitChanged<sup>12+</sup> 6561 6562onViewportFitChanged(callback: OnViewportFitChangedCallback) 6563 6564网页meta中viewport-fit配置项更改时触发该回调，应用可在此回调中自适应布局视口。 6565 6566**系统能力：** SystemCapability.Web.Webview.Core 6567 6568**参数：** 6569 6570| 参数名 | 类型 | 必填 | 说明 | 6571| ------ | ------ | ---- | --------------------- | 6572| callback | [OnViewportFitChangedCallback](#onviewportfitchangedcallback12) | 是 | 网页meta中viewport-fit配置项更改时触发的回调。 | 6573 6574**示例：** 6575 6576 ```ts 6577 // xxx.ets 6578 import { webview } from '@kit.ArkWeb'; 6579 6580 @Entry 6581 @Component 6582 struct WebComponent { 6583 controller: webview.WebviewController = new webview.WebviewController(); 6584 6585 build() { 6586 Column() { 6587 Web({ src: $rawfile('index.html'), controller: this.controller }) 6588 .onViewportFitChanged((data) => { 6589 let jsonData = JSON.stringify(data); 6590 let viewportFit: ViewportFit = JSON.parse(jsonData).viewportFit; 6591 if (viewportFit === ViewportFit.COVER) { 6592 // index.html网页支持沉浸式布局，可调用expandSafeArea调整web控件布局视口覆盖避让区域(状态栏或导航条)。 6593 } else if (viewportFit === ViewportFit.CONTAINS) { 6594 // index.html网页不支持沉浸式布局，可调用expandSafeArea调整web控件布局视口为安全区域。 6595 } else { 6596 // 默认值，可不作处理 6597 } 6598 }) 6599 } 6600 } 6601 } 6602 ``` 6603 6604 加载的html文件。 6605 ```html 6606 <!-- index.html --> 6607 <!DOCTYPE html> 6608 <html> 6609 <head> 6610 <meta name="viewport" content="width=device-width,viewport-fit=cover"> 6611 </head> 6612 <body> 6613 <div style="position: absolute; bottom: 0; margin-bottom: env(safe-area-inset-bottom)"></div> 6614 </body> 6615 </html> 6616 ``` 6617 6618### onInterceptKeyboardAttach<sup>12+</sup> 6619 6620onInterceptKeyboardAttach(callback: WebKeyboardCallback) 6621 6622网页中可编辑元素（如input标签）拉起软键盘之前会回调该接口，应用可以使用该接口拦截系统软键盘的弹出，配置应用定制的软键盘（应用根据该接口可以决定使用系统默认软键盘/定制enter键的系统软键盘/全部由应用自定义的软键盘）。 6623 6624**系统能力：** SystemCapability.Web.Webview.Core 6625 6626**参数：** 6627 6628| 参数名 | 类型 | 必填 | 说明 | 6629| ------ | ------ | ---- | --------------------- | 6630| callback | [WebKeyboardCallback](#webkeyboardcallback12) | 是 | 拦截网页拉起软键盘回调。 | 6631 6632**示例：** 6633 6634 ```ts 6635 // xxx.ets 6636 import { webview } from '@kit.ArkWeb'; 6637 import { inputMethodEngine } from '@kit.IMEKit'; 6638 6639 @Entry 6640 @Component 6641 struct WebComponent { 6642 controller: webview.WebviewController = new webview.WebviewController(); 6643 webKeyboardController: WebKeyboardController = new WebKeyboardController() 6644 inputAttributeMap: Map<string, number> = new Map([ 6645 ['UNSPECIFIED', inputMethodEngine.ENTER_KEY_TYPE_UNSPECIFIED], 6646 ['GO', inputMethodEngine.ENTER_KEY_TYPE_GO], 6647 ['SEARCH', inputMethodEngine.ENTER_KEY_TYPE_SEARCH], 6648 ['SEND', inputMethodEngine.ENTER_KEY_TYPE_SEND], 6649 ['NEXT', inputMethodEngine.ENTER_KEY_TYPE_NEXT], 6650 ['DONE', inputMethodEngine.ENTER_KEY_TYPE_DONE], 6651 ['PREVIOUS', inputMethodEngine.ENTER_KEY_TYPE_PREVIOUS] 6652 ]) 6653 6654 /** 6655 * 自定义键盘组件Builder 6656 */ 6657 @Builder 6658 customKeyboardBuilder() { 6659 // 这里实现自定义键盘组件，对接WebKeyboardController实现输入、删除、关闭等操作。 6660 Row() { 6661 Text("完成") 6662 .fontSize(20) 6663 .fontColor(Color.Blue) 6664 .onClick(() => { 6665 this.webKeyboardController.close(); 6666 }) 6667 // 插入字符。 6668 Button("insertText").onClick(() => { 6669 this.webKeyboardController.insertText('insert '); 6670 }).margin({ 6671 bottom: 200, 6672 }) 6673 // 从后往前删除length参数指定长度的字符。 6674 Button("deleteForward").onClick(() => { 6675 this.webKeyboardController.deleteForward(1); 6676 }).margin({ 6677 bottom: 200, 6678 }) 6679 // 从前往后删除length参数指定长度的字符。 6680 Button("deleteBackward").onClick(() => { 6681 this.webKeyboardController.deleteBackward(1); 6682 }).margin({ 6683 left: -220, 6684 }) 6685 // 插入功能按键。 6686 Button("sendFunctionKey").onClick(() => { 6687 this.webKeyboardController.sendFunctionKey(6); 6688 }) 6689 } 6690 } 6691 6692 build() { 6693 Column() { 6694 Web({ src: $rawfile('index.html'), controller: this.controller }) 6695 .onInterceptKeyboardAttach((KeyboardCallbackInfo) => { 6696 // option初始化，默认使用系统默认键盘 6697 let option: WebKeyboardOptions = { 6698 useSystemKeyboard: true, 6699 }; 6700 if (!KeyboardCallbackInfo) { 6701 return option; 6702 } 6703 6704 // 保存WebKeyboardController，使用自定义键盘时候，需要使用该handler控制输入、删除、软键盘关闭等行为 6705 this.webKeyboardController = KeyboardCallbackInfo.controller 6706 let attributes: Record<string, string> = KeyboardCallbackInfo.attributes 6707 // 遍历attributes 6708 let attributeKeys = Object.keys(attributes) 6709 for (let i = 0; i < attributeKeys.length; i++) { 6710 console.log('WebCustomKeyboard key = ' + attributeKeys[i] + ', value = ' + attributes[attributeKeys[i]]) 6711 } 6712 6713 if (attributes) { 6714 if (attributes['data-keyboard'] == 'customKeyboard') { 6715 // 根据html可编辑元素的属性，判断使用不同的软键盘，例如这里如果属性包含有data-keyboard，且值为customKeyboard，则使用自定义键盘 6716 console.log('WebCustomKeyboard use custom keyboard') 6717 option.useSystemKeyboard = false; 6718 // 设置自定义键盘builder 6719 option.customKeyboard = () => { 6720 this.customKeyboardBuilder() 6721 } 6722 return option; 6723 } 6724 6725 if (attributes['keyboard-return'] != undefined) { 6726 // 根据html可编辑元素的属性，判断使用不同的软键盘，例如这里如果属性包含有keyboard-return，使用系统键盘，并且指定系统软键盘enterKey类型 6727 option.useSystemKeyboard = true; 6728 let enterKeyType: number | undefined = this.inputAttributeMap.get(attributes['keyboard-return']) 6729 if (enterKeyType != undefined) { 6730 option.enterKeyType = enterKeyType 6731 } 6732 return option; 6733 } 6734 } 6735 6736 return option; 6737 }) 6738 } 6739 } 6740 } 6741 ``` 6742 6743 加载的html文件。 6744 ```html 6745 <!-- index.html --> 6746 <!DOCTYPE html> 6747 <html> 6748 6749 <head> 6750 <meta charset="utf-8"> 6751 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"> 6752 </head> 6753 6754 <body> 6755 6756 <p style="font-size:12px">input标签，原有默认行为：</p> 6757 <input type="text" style="width: 300px; height: 20px"><br> 6758 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6759 6760 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key UNSPECIFIED：</p> 6761 <input type="text" keyboard-return="UNSPECIFIED" style="width: 300px; height: 20px"><br> 6762 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6763 6764 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key GO：</p> 6765 <input type="text" keyboard-return="GO" style="width: 300px; height: 20px"><br> 6766 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6767 6768 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key SEARCH：</p> 6769 <input type="text" keyboard-return="SEARCH" style="width: 300px; height: 20px"><br> 6770 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6771 6772 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key SEND：</p> 6773 <input type="text" keyboard-return="SEND" style="width: 300px; height: 20px"><br> 6774 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6775 6776 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key NEXT：</p> 6777 <input type="text" keyboard-return="NEXT" style="width: 300px; height: 20px"><br> 6778 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6779 6780 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key DONE：</p> 6781 <input type="text" keyboard-return="DONE" style="width: 300px; height: 20px"><br> 6782 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6783 6784 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key PREVIOUS：</p> 6785 <input type="text" keyboard-return="PREVIOUS" style="width: 300px; height: 20px"><br> 6786 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6787 6788 <p style="font-size:12px">input标签，应用自定义键盘：</p> 6789 <input type="text" data-keyboard="customKeyboard" style="width: 300px; height: 20px"><br> 6790 6791 </body> 6792 6793 </html> 6794 ``` 6795 6796### onNativeEmbedVisibilityChange<sup>12+</sup> 6797 6798onNativeEmbedVisibilityChange(callback: OnNativeEmbedVisibilityChangeCallback) 6799 6800网页中同层标签（如Embed标签或Object标签）在视口内的可见性发生变化时会触发该回调。同层标签默认不可见，如果首次进入页面可见则会上报，不可见则不会上报，当同层标签大小由非0值变为0 *0时，不会上报不可见，由0 *0变为非0值时会上报可见。同层标签全部不可见才算不可见，部分可见或全部可见算作可见。 6801 6802**系统能力：** SystemCapability.Web.Webview.Core 6803 6804**参数：** 6805 6806| 参数名 | 类型 | 必填 | 说明 | 6807| ------ | ------ | ---- | --------------------- | 6808| callback | [OnNativeEmbedVisibilityChangeCallback](#onnativeembedvisibilitychangecallback12) | 是 | 同层标签可见性变化时触发该回调。 | 6809 6810**示例：** 6811 6812 ```ts 6813 // xxx.ets 6814 import { webview } from '@kit.ArkWeb'; 6815 import { NodeController, BuilderNode, NodeRenderType, FrameNode, UIContext } from "@kit.ArkUI"; 6816 6817 declare class Params { 6818 text: string; 6819 width: number; 6820 height: number; 6821 } 6822 6823 declare class NodeControllerParams { 6824 surfaceId: string; 6825 renderType: NodeRenderType; 6826 width: number; 6827 height: number; 6828 } 6829 6830 class MyNodeController extends NodeController { 6831 private rootNode: BuilderNode<[Params]> | undefined | null; 6832 private surfaceId_: string = ""; 6833 private renderType_: NodeRenderType = NodeRenderType.RENDER_TYPE_DISPLAY; 6834 private width_: number = 0; 6835 private height_: number = 0; 6836 6837 setRenderOption(params: NodeControllerParams) { 6838 this.surfaceId_ = params.surfaceId; 6839 this.renderType_ = params.renderType; 6840 this.width_ = params.width; 6841 this.height_ = params.height; 6842 } 6843 6844 makeNode(uiContext: UIContext): FrameNode | null { 6845 this.rootNode = new BuilderNode(uiContext, { surfaceId: this.surfaceId_, type: this.renderType_ }); 6846 this.rootNode.build(wrapBuilder(ButtonBuilder), { text: "myButton", width: this.width_, height: this.height_ }); 6847 return this.rootNode.getFrameNode(); 6848 } 6849 6850 postEvent(event: TouchEvent | undefined): boolean { 6851 return this.rootNode?.postTouchEvent(event) as boolean; 6852 } 6853 } 6854 6855 @Component 6856 struct ButtonComponent { 6857 @Prop params: Params; 6858 @State bkColor: Color = Color.Red; 6859 6860 build() { 6861 Column() { 6862 Button(this.params.text) 6863 .height(50) 6864 .width(200) 6865 .border({ width: 2, color: Color.Red }) 6866 .backgroundColor(this.bkColor) 6867 6868 } 6869 .width(this.params.width) 6870 .height(this.params.height) 6871 } 6872 } 6873 6874 @Builder 6875 function ButtonBuilder(params: Params) { 6876 ButtonComponent({ params: params }) 6877 .backgroundColor(Color.Green) 6878 } 6879 6880 @Entry 6881 @Component 6882 struct WebComponent { 6883 @State embedVisibility: string = ''; 6884 controller: webview.WebviewController = new webview.WebviewController(); 6885 private nodeController: MyNodeController = new MyNodeController(); 6886 6887 build() { 6888 Column() { 6889 Stack() { 6890 NodeContainer(this.nodeController) 6891 Web({ src: $rawfile("index.html"), controller: this.controller }) 6892 .enableNativeEmbedMode(true) 6893 .onNativeEmbedLifecycleChange((embed) => { 6894 if (embed.status == NativeEmbedStatus.CREATE) { 6895 this.nodeController.setRenderOption({ 6896 surfaceId: embed.surfaceId as string, 6897 renderType: NodeRenderType.RENDER_TYPE_TEXTURE, 6898 width: px2vp(embed.info?.width), 6899 height: px2vp(embed.info?.height) 6900 }); 6901 this.nodeController.rebuild(); 6902 } 6903 }) 6904 .onNativeEmbedVisibilityChange((embed) => { 6905 if (embed.visibility) { 6906 this.embedVisibility = 'Visible'; 6907 } else { 6908 this.embedVisibility = 'Hidden'; 6909 } 6910 console.log("embedId = " + embed.embedId); 6911 console.log("visibility = " + embed.visibility); 6912 }) 6913 } 6914 } 6915 } 6916 } 6917 ``` 6918 6919 加载的html文件 6920 ```html 6921 <!-- index.html --> 6922 <!DOCTYPE html> 6923 <html> 6924 <head> 6925 <title>同层渲染测试html</title> 6926 <meta name="viewport"> 6927 </head> 6928 <body> 6929 <div> 6930 <div id="bodyId"> 6931 <embed id="nativeButton" type = "native/button" width="800" height="800" src="test?params1=1?" style = "background-color:red"/> 6932 </div> 6933 </div> 6934 </body> 6935 </html> 6936 ``` 6937 6938## WebKeyboardCallback<sup>12+</sup> 6939 6940type WebKeyboardCallback = (keyboardCallbackInfo: WebKeyboardCallbackInfo) => WebKeyboardOptions 6941 6942拦截网页可编辑元素拉起软键盘的回调，一般在点击网页input标签时触发。 6943 6944**系统能力：** SystemCapability.Web.Webview.Core 6945 6946**参数：** 6947 6948| 参数名 | 类型 | 必填 | 说明 | 6949| ------------- | ------ | ---- | ------------------ | 6950| keyboardCallbackInfo | [WebKeyboardCallbackInfo](#webkeyboardcallbackinfo12) | 是 | 拦截网页拉起软键盘回调通知的入参，其中包括[WebKeyboardController](#webkeyboardcontroller12)、可编辑元素的属性。 | 6951 6952**返回值：** 6953 6954| 类型 | 说明 | 6955| ------------------ | ------------------------------------------------------------ | 6956| [WebKeyboardOptions](#webkeyboardoptions12) | 回调函数通过返回[WebKeyboardOptions](#webkeyboardoptions12)来决定ArkWeb内核拉起不同类型的软键盘。 | 6957 6958## WebKeyboardCallbackInfo<sup>12+</sup> 6959 6960拦截网页可编辑元素拉起软键盘的回调入参，其中包括[WebKeyboardController](#webkeyboardcontroller12)、可编辑元素的属性。 6961 6962**系统能力：** SystemCapability.Web.Webview.Core 6963 6964| 名称 | 类型 | 必填 | 说明 | 6965| -------------- | ------- | ---- | ---------------------------------------- | 6966| controller | [WebKeyboardController](#webkeyboardcontroller12) | 是 | 提供控制自定义键盘的输入、删除、关闭等操作。 | 6967| attributes | Record<string, string> | 是 | 触发本次软键盘弹出的网页元素属性。 6968 6969## WebKeyboardOptions<sup>12+</sup> 6970 6971拦截网页可编辑元素拉起软键盘的回调返回值，可以指定使用的键盘类型，并返回给web内核，以控制拉起不同类型的软键盘； 6972 6973**系统能力：** SystemCapability.Web.Webview.Core 6974 6975| 名称 | 类型 | 必填 | 说明 | 6976| -------------- | ------- | ---- | ---------------------------------------- | 6977| useSystemKeyboard | boolean | 是 | 是否使用系统默认软键盘。 | 6978| enterKeyType | number | 否 | 指定系统软键盘enter键的类型，取值范围见输入框架的定义[EnterKeyType](../apis-ime-kit/js-apis-inputmethod.md#enterkeytype10)，该参数为可选参数，当useSystemKeyboard为true，并且设置了有效的enterKeyType时候，才有效。| 6979| customKeyboard | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | 否 | 指定自定义键盘组件builder，可选参数，当useSystemKeyboard为false时，需要设置该参数，然后Web组件会拉起该自定义键盘。 6980 6981## WebKeyboardController<sup>12+</sup> 6982 6983控制自定义键盘的输入、删除、关闭等操作。示例代码参考[onInterceptKeyboardAttach](#oninterceptkeyboardattach12)。 6984 6985### constructor<sup>12+</sup> 6986 6987constructor() 6988 6989WebKeyboardController的构造函数。 6990 6991**系统能力：** SystemCapability.Web.Webview.Core 6992 6993### insertText<sup>12+</sup> 6994 6995insertText(text: string): void 6996 6997插入字符。 6998 6999**系统能力：** SystemCapability.Web.Webview.Core 7000 7001**参数：** 7002 7003| 参数名 | 类型 | 必填 | 说明 | 7004| ------ | -------- | ---- | --------------------- | 7005| text | string | 是 | 向Web输入框插入字符。 | 7006 7007### deleteForward<sup>12+</sup> 7008 7009deleteForward(length: number): void 7010 7011从后往前删除length参数指定长度的字符。 7012 7013**系统能力：** SystemCapability.Web.Webview.Core 7014 7015**参数：** 7016 7017| 参数名 | 类型 | 必填 | 说明 | 7018| ------ | -------- | ---- | ------------------------ | 7019| length | number | 是 | 从后往前删除字符的长度。 | 7020 7021### deleteBackward12+</sup> 7022 7023deleteBackward(length: number): void 7024 7025从前往后删除length参数指定长度的字符。 7026 7027**系统能力：** SystemCapability.Web.Webview.Core 7028 7029**参数：** 7030 7031| 参数名 | 类型 | 必填 | 说明 | 7032| ------ | -------- | ---- | ------------------------ | 7033| length | number | 是 | 从前往后删除字符的长度。 | 7034 7035### sendFunctionKey<sup>12+</sup> 7036 7037sendFunctionKey(key: number): void 7038 7039插入功能按键，目前仅支持enter键类型，取值见[EnterKeyType](../apis-ime-kit/js-apis-inputmethod.md#enterkeytype10)。 7040 7041**系统能力：** SystemCapability.Web.Webview.Core 7042 7043**参数：** 7044 7045| 参数名 | 类型 | 必填 | 说明 | 7046| ------ | -------- | ---- | ------------------------------------------ | 7047| key | number | 是 | 向Web输入框传递功能键，目前仅支持enter键。 | 7048 7049### close<sup>12+</sup> 7050 7051close(): void 7052 7053关闭自定义键盘。 7054 7055**系统能力：** SystemCapability.Web.Webview.Core 7056 7057## ConsoleMessage 7058 7059Web组件获取控制台信息对象。示例代码参考[onConsole事件](#onconsole)。 7060 7061### constructor 7062 7063constructor(message: string, sourceId: string, lineNumber: number, messageLevel: MessageLevel) 7064 7065ConsoleMessage的构造函数。 7066 7067> **说明：** 7068> 7069> 从API version 8开始支持，从API version 9开始废弃。建议使用[constructor](#constructor9)代替。 7070 7071**系统能力：** SystemCapability.Web.Webview.Core 7072 7073### constructor<sup>9+</sup> 7074 7075constructor() 7076 7077ConsoleMessage的构造函数。 7078 7079**系统能力：** SystemCapability.Web.Webview.Core 7080 7081### getLineNumber 7082 7083getLineNumber(): number 7084 7085获取ConsoleMessage的行数。 7086 7087**系统能力：** SystemCapability.Web.Webview.Core 7088 7089**返回值：** 7090 7091| 类型 | 说明 | 7092| ------ | -------------------- | 7093| number | 返回ConsoleMessage的行数。 | 7094 7095### getMessage 7096 7097getMessage(): string 7098 7099获取ConsoleMessage的日志信息。 7100 7101**系统能力：** SystemCapability.Web.Webview.Core 7102 7103**返回值：** 7104 7105| 类型 | 说明 | 7106| ------ | ---------------------- | 7107| string | 返回ConsoleMessage的日志信息。 | 7108 7109### getMessageLevel 7110 7111getMessageLevel(): MessageLevel 7112 7113获取ConsoleMessage的信息级别。 7114 7115**系统能力：** SystemCapability.Web.Webview.Core 7116 7117**返回值：** 7118 7119| 类型 | 说明 | 7120| --------------------------------- | ---------------------- | 7121| [MessageLevel](#messagelevel枚举说明) | 返回ConsoleMessage的信息级别。 | 7122 7123### getSourceId 7124 7125getSourceId(): string 7126 7127获取网页源文件路径和名字。 7128 7129**系统能力：** SystemCapability.Web.Webview.Core 7130 7131**返回值：** 7132 7133| 类型 | 说明 | 7134| ------ | ------------- | 7135| string | 返回网页源文件路径和名字。 | 7136 7137## JsResult 7138 7139Web组件返回的弹窗确认或弹窗取消功能对象。示例代码参考[onAlert事件](#onalert)。 7140 7141### constructor 7142 7143constructor() 7144 7145JsResult的构造函数。 7146 7147**系统能力：** SystemCapability.Web.Webview.Core 7148 7149### handleCancel 7150 7151handleCancel(): void 7152 7153通知Web组件用户取消弹窗操作。 7154 7155**系统能力：** SystemCapability.Web.Webview.Core 7156 7157### handleConfirm 7158 7159handleConfirm(): void 7160 7161通知Web组件用户确认弹窗操作。 7162 7163**系统能力：** SystemCapability.Web.Webview.Core 7164 7165### handlePromptConfirm<sup>9+</sup> 7166 7167handlePromptConfirm(result: string): void 7168 7169通知Web组件用户确认弹窗操作及对话框内容。 7170 7171**系统能力：** SystemCapability.Web.Webview.Core 7172 7173**参数：** 7174 7175| 参数名 | 类型 | 必填 | 说明 | 7176| ------ | ------ | ---- | ----------- | 7177| result | string | 是 | 用户输入的对话框内容。 | 7178 7179## FullScreenExitHandler<sup>9+</sup> 7180 7181通知开发者Web组件退出全屏。示例代码参考[onFullScreenEnter事件](#onfullscreenenter9)。 7182 7183### constructor<sup>9+</sup> 7184 7185constructor() 7186 7187FullScreenExitHandler的构造函数。 7188 7189**系统能力：** SystemCapability.Web.Webview.Core 7190 7191### exitFullScreen<sup>9+</sup> 7192 7193exitFullScreen(): void 7194 7195通知开发者Web组件退出全屏。 7196 7197**系统能力：** SystemCapability.Web.Webview.Core 7198 7199## ControllerHandler<sup>9+</sup> 7200 7201设置用户新建Web组件的WebviewController对象。示例代码参考[onWindowNew事件](#onwindownew9)。 7202 7203**系统能力：** SystemCapability.Web.Webview.Core 7204 7205### constructor<sup>9+</sup> 7206 7207constructor() 7208 7209ControllerHandler的构造函数。 7210 7211**系统能力：** SystemCapability.Web.Webview.Core 7212 7213### setWebController<sup>9+</sup> 7214 7215setWebController(controller: WebviewController): void 7216 7217设置WebviewController对象，如果不需要打开新窗口请设置为null。 7218 7219**系统能力：** SystemCapability.Web.Webview.Core 7220 7221**参数：** 7222 7223| 参数名 | 类型 | 必填 | 说明 | 7224| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 7225| controller | [WebviewController](js-apis-webview.md#webviewcontroller) | 是 | 新建Web组件的WebviewController对象，如果不需要打开新窗口请设置为null。 | 7226 7227## WebResourceError 7228 7229Web组件资源管理错误信息对象。示例代码参考[onErrorReceive事件](#onerrorreceive)。 7230 7231### constructor 7232 7233constructor() 7234 7235WebResourceError的构造函数。 7236 7237**系统能力：** SystemCapability.Web.Webview.Core 7238 7239### getErrorCode 7240 7241getErrorCode(): number 7242 7243获取加载资源的错误码。 7244 7245**系统能力：** SystemCapability.Web.Webview.Core 7246 7247**返回值：** 7248 7249| 类型 | 说明 | 7250| ------ | ----------- | 7251| number | 返回加载资源的错误码。错误码的含义可以参考[WebNetErrorList](js-apis-netErrorList.md) | 7252 7253### getErrorInfo 7254 7255getErrorInfo(): string 7256 7257获取加载资源的错误信息。 7258 7259**系统能力：** SystemCapability.Web.Webview.Core 7260 7261**返回值：** 7262 7263| 类型 | 说明 | 7264| ------ | ------------ | 7265| string | 返回加载资源的错误信息。 | 7266 7267## WebResourceRequest 7268 7269Web组件获取资源请求对象。示例代码参考[onErrorReceive事件](#onerrorreceive)。 7270 7271### constructor 7272 7273constructor() 7274 7275WebResourceRequest的构造函数。 7276 7277**系统能力：** SystemCapability.Web.Webview.Core 7278 7279### getRequestHeader 7280 7281getRequestHeader(): Array\<Header\> 7282 7283获取资源请求头信息。 7284 7285**系统能力：** SystemCapability.Web.Webview.Core 7286 7287**返回值：** 7288 7289| 类型 | 说明 | 7290| -------------------------- | ---------- | 7291| Array\<[Header](#header)\> | 返回资源请求头信息。 | 7292 7293### getRequestUrl 7294 7295getRequestUrl(): string 7296 7297获取资源请求的URL信息。 7298 7299**系统能力：** SystemCapability.Web.Webview.Core 7300 7301**返回值：** 7302 7303| 类型 | 说明 | 7304| ------ | ------------- | 7305| string | 返回资源请求的URL信息。 | 7306 7307### isMainFrame 7308 7309isMainFrame(): boolean 7310 7311判断资源请求是否为主frame。 7312 7313**系统能力：** SystemCapability.Web.Webview.Core 7314 7315**返回值：** 7316 7317| 类型 | 说明 | 7318| ------- | ---------------- | 7319| boolean | 返回资源请求是否为主frame。 | 7320 7321### isRedirect 7322 7323isRedirect(): boolean 7324 7325判断资源请求是否被服务端重定向。 7326 7327**系统能力：** SystemCapability.Web.Webview.Core 7328 7329**返回值：** 7330 7331| 类型 | 说明 | 7332| ------- | ---------------- | 7333| boolean | 返回资源请求是否被服务端重定向。 | 7334 7335### isRequestGesture 7336 7337isRequestGesture(): boolean 7338 7339获取资源请求是否与手势（如点击）相关联。 7340 7341**系统能力：** SystemCapability.Web.Webview.Core 7342 7343**返回值：** 7344 7345| 类型 | 说明 | 7346| ------- | -------------------- | 7347| boolean | 返回资源请求是否与手势（如点击）相关联。 | 7348 7349### getRequestMethod<sup>9+</sup> 7350 7351getRequestMethod(): string 7352 7353获取请求方法。 7354 7355**系统能力：** SystemCapability.Web.Webview.Core 7356 7357**返回值：** 7358 7359| 类型 | 说明 | 7360| ------ | ------- | 7361| string | 返回请求方法。 | 7362 7363## Header 7364 7365Web组件返回的请求/响应头对象。 7366 7367**系统能力：** SystemCapability.Web.Webview.Core 7368 7369| 名称 | 类型 | 必填 | 说明 | 7370| ----------- | ------ | ---- | ------------- | 7371| headerKey | string | 是 | 请求/响应头的key。 | 7372| headerValue | string | 是 | 请求/响应头的value。 | 7373 7374## WebResourceResponse 7375 7376Web组件资源响应对象。示例代码参考[onHttpErrorReceive事件](#onhttperrorreceive)。 7377 7378### constructor 7379 7380constructor() 7381 7382WebResourceResponse的构造函数。 7383 7384**系统能力：** SystemCapability.Web.Webview.Core 7385 7386### getReasonMessage 7387 7388getReasonMessage(): string 7389 7390获取资源响应的状态码描述。 7391 7392**系统能力：** SystemCapability.Web.Webview.Core 7393 7394**返回值：** 7395 7396| 类型 | 说明 | 7397| ------ | ------------- | 7398| string | 返回资源响应的状态码描述。 | 7399 7400### getResponseCode 7401 7402getResponseCode(): number 7403 7404获取资源响应的状态码。 7405 7406**系统能力：** SystemCapability.Web.Webview.Core 7407 7408**返回值：** 7409 7410| 类型 | 说明 | 7411| ------ | ----------- | 7412| number | 返回资源响应的状态码。 | 7413 7414### getResponseData 7415 7416getResponseData(): string 7417 7418获取资源响应数据。 7419 7420**系统能力：** SystemCapability.Web.Webview.Core 7421 7422**返回值：** 7423 7424| 类型 | 说明 | 7425| ------ | --------- | 7426| string | 返回资源响应数据。 | 7427 7428### getResponseEncoding 7429 7430getResponseEncoding(): string 7431 7432获取资源响应的编码。 7433 7434**系统能力：** SystemCapability.Web.Webview.Core 7435 7436**返回值：** 7437 7438| 类型 | 说明 | 7439| ------ | ---------- | 7440| string | 返回资源响应的编码。 | 7441 7442### getResponseHeader 7443 7444getResponseHeader() : Array\<Header\> 7445 7446获取资源响应头。 7447 7448**系统能力：** SystemCapability.Web.Webview.Core 7449 7450**返回值：** 7451 7452| 类型 | 说明 | 7453| -------------------------- | -------- | 7454| Array\<[Header](#header)\> | 返回资源响应头。 | 7455 7456### getResponseMimeType 7457 7458getResponseMimeType(): string 7459 7460获取资源响应的媒体（MIME）类型。 7461 7462**系统能力：** SystemCapability.Web.Webview.Core 7463 7464**返回值：** 7465 7466| 类型 | 说明 | 7467| ------ | ------------------ | 7468| string | 返回资源响应的媒体（MIME）类型。 | 7469 7470### getResponseDataEx<sup>13+</sup> 7471 7472getResponseDataEx(): string | number | ArrayBuffer | Resource | undefined 7473 7474获取资源响应数据，支持多种数据类型。 7475 7476**系统能力：** SystemCapability.Web.Webview.Core 7477 7478**返回值：** 7479 7480|类型|说明| 7481|---|---| 7482|string|返回HTML格式的字符串。| 7483|number|返回文件句柄。| 7484|ArrayBuffer|返回二进制数据。| 7485|[Resource](../apis-arkui/arkui-ts/ts-types.md)|返回`$rawfile`资源。| 7486|undefined|如果没有可用数据，返回`undefined`。| 7487 7488### getResponseIsReady<sup>13+</sup> 7489 7490getResponseIsReady(): boolean 7491 7492获取响应数据是否已准备就绪。 7493 7494**系统能力：** SystemCapability.Web.Webview.Core 7495 7496**返回值：** 7497 7498|类型|说明| 7499|---|---| 7500|boolean|`true`表示响应数据已准备好，`false`表示未准备好。| 7501 7502### setResponseData<sup>9+</sup> 7503 7504setResponseData(data: string \| number \| Resource \| ArrayBuffer): void 7505 7506设置资源响应数据。 7507 7508**系统能力：** SystemCapability.Web.Webview.Core 7509 7510**参数：** 7511 7512| 参数名 | 类型 | 必填 | 说明 | 7513| ---- | ---------------------------------------- | ---- | ---------------------------------------- | 7514| data | string \| number \| [Resource](../apis-arkui/arkui-ts/ts-types.md)<sup>10+</sup> \| ArrayBuffer<sup>11+</sup> | 是 | 要设置的资源响应数据。string表示HTML格式的字符串。number表示文件句柄, 此句柄由系统的Web组件负责关闭。 Resource表示应用rawfile目录下文件资源。 ArrayBuffer表示资源的原始二进制数据。 | 7515 7516### setResponseEncoding<sup>9+</sup> 7517 7518setResponseEncoding(encoding: string): void 7519 7520设置资源响应的编码。 7521 7522**系统能力：** SystemCapability.Web.Webview.Core 7523 7524**参数：** 7525 7526| 参数名 | 类型 | 必填 | 说明 | 7527| -------- | ------ | ---- | ------------ | 7528| encoding | string | 是 | 要设置的资源响应的编码。 | 7529 7530### setResponseMimeType<sup>9+</sup> 7531 7532setResponseMimeType(mimeType: string): void 7533 7534设置资源响应的媒体（MIME）类型。 7535 7536**系统能力：** SystemCapability.Web.Webview.Core 7537 7538**参数：** 7539 7540| 参数名 | 类型 | 必填 | 说明 | 7541| -------- | ------ | ---- | -------------------- | 7542| mimeType | string | 是 | 要设置的资源响应的媒体（MIME）类型。 | 7543 7544### setReasonMessage<sup>9+</sup> 7545 7546setReasonMessage(reason: string): void 7547 7548设置资源响应的状态码描述。 7549 7550**系统能力：** SystemCapability.Web.Webview.Core 7551 7552**参数：** 7553 7554| 参数名 | 类型 | 必填 | 说明 | 7555| ------ | ------ | ---- | --------------- | 7556| reason | string | 是 | 要设置的资源响应的状态码描述。 | 7557 7558### setResponseHeader<sup>9+</sup> 7559 7560setResponseHeader(header: Array\<Header\>): void 7561 7562设置资源响应头。 7563 7564**系统能力：** SystemCapability.Web.Webview.Core 7565 7566**参数：** 7567 7568| 参数名 | 类型 | 必填 | 说明 | 7569| ------ | -------------------------- | ---- | ---------- | 7570| header | Array\<[Header](#header)\> | 是 | 要设置的资源响应头。 | 7571 7572### setResponseCode<sup>9+</sup> 7573 7574setResponseCode(code: number): void 7575 7576设置资源响应的状态码。 7577 7578**系统能力：** SystemCapability.Web.Webview.Core 7579 7580**参数：** 7581 7582| 参数名 | 类型 | 必填 | 说明 | 7583| ---- | ------ | ---- | ------------- | 7584| code | number | 是 | 要设置的资源响应的状态码。如果该资源以错误结束，请参考[@ohos.web.netErrorList](js-apis-netErrorList.md)设置相应错误码，避免设置错误码为 ERR_IO_PENDING，设置为该错误码可能会导致XMLHttpRequest同步请求阻塞。 | 7585 7586### setResponseIsReady<sup>9+</sup> 7587 7588setResponseIsReady(IsReady: boolean): void 7589 7590设置资源响应数据是否已经就绪。 7591 7592**系统能力：** SystemCapability.Web.Webview.Core 7593 7594**参数：** 7595 7596| 参数名 | 类型 | 必填 | 说明 | 7597| ------- | ------- | ---- | ------------- | 7598| IsReady | boolean | 是 | 资源响应数据是否已经就绪。默认值：true。 | 7599 7600## FileSelectorResult<sup>9+</sup> 7601 7602通知Web组件的文件选择结果。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。 7603 7604### constructor<sup>9+</sup> 7605 7606constructor() 7607 7608FileSelectorResult的构造函数。 7609 7610**系统能力：** SystemCapability.Web.Webview.Core 7611 7612### handleFileList<sup>9+</sup> 7613 7614handleFileList(fileList: Array\<string\>): void 7615 7616通知Web组件进行文件选择操作。 7617 7618**系统能力：** SystemCapability.Web.Webview.Core 7619 7620**参数：** 7621 7622| 参数名 | 类型 | 必填 | 说明 | 7623| -------- | --------------- | ---- | ------------ | 7624| fileList | Array\<string\> | 是 | 需要进行操作的文件列表。 | 7625 7626## FileSelectorParam<sup>9+</sup> 7627 7628Web组件获取文件对象。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。 7629 7630### constructor<sup>9+</sup> 7631 7632constructor() 7633 7634FileSelectorParam的构造函数。 7635 7636**系统能力：** SystemCapability.Web.Webview.Core 7637 7638### getTitle<sup>9+</sup> 7639 7640getTitle(): string 7641 7642获取文件选择器标题。 7643 7644**系统能力：** SystemCapability.Web.Webview.Core 7645 7646**返回值：** 7647 7648| 类型 | 说明 | 7649| ------ | ---------- | 7650| string | 返回文件选择器标题。 | 7651 7652### getMode<sup>9+</sup> 7653 7654getMode(): FileSelectorMode 7655 7656获取文件选择器的模式。 7657 7658**系统能力：** SystemCapability.Web.Webview.Core 7659 7660**返回值：** 7661 7662| 类型 | 说明 | 7663| ---------------------------------------- | ----------- | 7664| [FileSelectorMode](#fileselectormode9枚举说明) | 返回文件选择器的模式。 | 7665 7666### getAcceptType<sup>9+</sup> 7667 7668getAcceptType(): Array\<string\> 7669 7670获取文件过滤类型。 7671 7672**系统能力：** SystemCapability.Web.Webview.Core 7673 7674**返回值：** 7675 7676| 类型 | 说明 | 7677| --------------- | --------- | 7678| Array\<string\> | 返回文件过滤类型。 | 7679 7680### isCapture<sup>9+</sup> 7681 7682isCapture(): boolean 7683 7684获取是否调用多媒体能力。 7685 7686**系统能力：** SystemCapability.Web.Webview.Core 7687 7688**返回值：** 7689 7690| 类型 | 说明 | 7691| ------- | ------------ | 7692| boolean | 返回是否调用多媒体能力。 | 7693 7694## HttpAuthHandler<sup>9+</sup> 7695 7696Web组件返回的http auth认证请求确认或取消和使用缓存密码认证功能对象。示例代码参考[onHttpAuthRequest事件](#onhttpauthrequest9)。 7697 7698### constructor<sup>9+</sup> 7699 7700constructor() 7701 7702HttpAuthHandler的构造函数。 7703 7704**系统能力：** SystemCapability.Web.Webview.Core 7705 7706### cancel<sup>9+</sup> 7707 7708cancel(): void 7709 7710通知Web组件用户取消HTTP认证操作。 7711 7712**系统能力：** SystemCapability.Web.Webview.Core 7713 7714### confirm<sup>9+</sup> 7715 7716confirm(userName: string, password: string): boolean 7717 7718使用用户名和密码进行HTTP认证操作。 7719 7720**系统能力：** SystemCapability.Web.Webview.Core 7721 7722**参数：** 7723 7724| 参数名 | 类型 | 必填 | 说明 | 7725| -------- | ------ | ---- | ---------- | 7726| userName | string | 是 | HTTP认证用户名。 | 7727| password | string | 是 | HTTP认证密码。 | 7728 7729**返回值：** 7730 7731| 类型 | 说明 | 7732| ------- | --------------------- | 7733| boolean | 认证成功返回true，失败返回false。 | 7734 7735### isHttpAuthInfoSaved<sup>9+</sup> 7736 7737isHttpAuthInfoSaved(): boolean 7738 7739通知Web组件用户使用服务器缓存的账号密码认证。 7740 7741**系统能力：** SystemCapability.Web.Webview.Core 7742 7743**返回值：** 7744 7745| 类型 | 说明 | 7746| ------- | ------------------------- | 7747| boolean | 存在密码认证成功返回true，其他返回false。 | 7748 7749## SslErrorHandler<sup>9+</sup> 7750 7751Web组件返回的SSL错误通知事件用户处理功能对象。示例代码参考[onSslErrorEventReceive事件](#onsslerroreventreceive9)。 7752 7753### constructor<sup>9+</sup> 7754 7755constructor() 7756 7757SslErrorHandler的构造函数。 7758 7759**系统能力：** SystemCapability.Web.Webview.Core 7760 7761### handleCancel<sup>9+</sup> 7762 7763handleCancel(): void 7764 7765通知Web组件取消此请求。 7766 7767**系统能力：** SystemCapability.Web.Webview.Core 7768 7769### handleConfirm<sup>9+</sup> 7770 7771handleConfirm(): void 7772 7773通知Web组件继续使用SSL证书。 7774 7775**系统能力：** SystemCapability.Web.Webview.Core 7776 7777## ClientAuthenticationHandler<sup>9+</sup> 7778 7779Web组件返回的SSL客户端证书请求事件用户处理功能对象。示例代码参考[onClientAuthenticationRequest事件](#onclientauthenticationrequest9)。 7780 7781### constructor<sup>9+</sup> 7782 7783constructor() 7784 7785ClientAuthenticationHandler的构造函数。 7786 7787**系统能力：** SystemCapability.Web.Webview.Core 7788 7789### confirm<sup>9+</sup> 7790 7791confirm(priKeyFile : string, certChainFile : string): void 7792 7793通知Web组件使用指定的私钥和客户端证书链。 7794 7795**系统能力：** SystemCapability.Web.Webview.Core 7796 7797**参数：** 7798 7799| 参数名 | 类型 | 必填 | 说明 | 7800| ------------- | ------ | ---- | ------------------ | 7801| priKeyFile | string | 是 | 存放私钥的文件，包含路径和文件名。 | 7802| certChainFile | string | 是 | 存放证书链的文件，包含路径和文件名。 | 7803 7804### confirm<sup>10+</sup> 7805 7806confirm(authUri : string): void 7807 7808通知Web组件使用指定的凭据(从证书管理模块获得)。 7809 7810> **说明：** 7811> 7812> 需要配置权限：ohos.permission.ACCESS_CERT_MANAGER。 7813 7814**系统能力：** SystemCapability.Web.Webview.Core 7815 7816**参数：** 7817 7818| 参数名 | 类型 | 必填 | 说明 | 7819| ------- | ------ | ---- | ------- | 7820| authUri | string | 是 | 凭据的关键值。 | 7821 7822### cancel<sup>9+</sup> 7823 7824cancel(): void 7825 7826通知Web组件取消相同host和port服务器发送的客户端证书请求事件。同时，相同host和port服务器的请求，不重复上报该事件。 7827 7828**系统能力：** SystemCapability.Web.Webview.Core 7829 7830### ignore<sup>9+</sup> 7831 7832ignore(): void 7833 7834通知Web组件忽略本次请求。 7835 7836**系统能力：** SystemCapability.Web.Webview.Core 7837 7838## PermissionRequest<sup>9+</sup> 7839 7840Web组件返回授权或拒绝权限功能的对象。示例代码参考[onPermissionRequest事件](#onpermissionrequest9)。 7841 7842### constructor<sup>9+</sup> 7843 7844constructor() 7845 7846PermissionRequest的构造函数。 7847 7848**系统能力：** SystemCapability.Web.Webview.Core 7849 7850### deny<sup>9+</sup> 7851 7852deny(): void 7853 7854拒绝网页所请求的权限。 7855 7856**系统能力：** SystemCapability.Web.Webview.Core 7857 7858### getOrigin<sup>9+</sup> 7859 7860getOrigin(): string 7861 7862获取网页来源。 7863 7864**系统能力：** SystemCapability.Web.Webview.Core 7865 7866**返回值：** 7867 7868| 类型 | 说明 | 7869| ------ | ------------ | 7870| string | 当前请求权限网页的来源。 | 7871 7872### getAccessibleResource<sup>9+</sup> 7873 7874getAccessibleResource(): Array\<string\> 7875 7876获取网页所请求的权限资源列表，资源列表类型参考[ProtectedResourceType](#protectedresourcetype9枚举说明)。 7877 7878**系统能力：** SystemCapability.Web.Webview.Core 7879 7880**返回值：** 7881 7882| 类型 | 说明 | 7883| --------------- | ------------- | 7884| Array\<string\> | 网页所请求的权限资源列表。 | 7885 7886### grant<sup>9+</sup> 7887 7888grant(resources: Array\<string\>): void 7889 7890对网页访问的给定权限进行授权。 7891 7892**系统能力：** SystemCapability.Web.Webview.Core 7893 7894**参数：** 7895 7896| 参数名 | 类型 | 必填 | 说明 | 7897| --------- | --------------- | ---- | --------------- | 7898| resources | Array\<string\> | 是 | 授予网页请求的权限的资源列表。 | 7899 7900## ScreenCaptureHandler<sup>10+</sup> 7901 7902Web组件返回授权或拒绝屏幕捕获功能的对象。示例代码参考[onScreenCaptureRequest事件](#onscreencapturerequest10)。 7903 7904### constructor<sup>10+</sup> 7905 7906constructor() 7907 7908ScreenCaptureHandler的构造函数。 7909 7910**系统能力：** SystemCapability.Web.Webview.Core 7911 7912### deny<sup>10+</sup> 7913 7914deny(): void 7915 7916拒绝网页所请求的屏幕捕获操作。 7917 7918**系统能力：** SystemCapability.Web.Webview.Core 7919 7920### getOrigin<sup>10+</sup> 7921 7922getOrigin(): string 7923 7924获取网页来源。 7925 7926**系统能力：** SystemCapability.Web.Webview.Core 7927 7928**返回值：** 7929 7930| 类型 | 说明 | 7931| ------ | ------------ | 7932| string | 当前请求权限网页的来源。 | 7933 7934### grant<sup>10+</sup> 7935 7936grant(config: ScreenCaptureConfig): void 7937 7938对网页访问的屏幕捕获操作进行授权。 7939 7940> **说明：** 7941> 7942> 需要配置权限：ohos.permission.MICROPHONE。 7943 7944**系统能力：** SystemCapability.Web.Webview.Core 7945 7946**参数：** 7947 7948| 参数名 | 类型 | 必填 | 说明 | 7949| ------ | ---------------------------------------- | ---- | ------- | 7950| config | [ScreenCaptureConfig](#screencaptureconfig10) | 是 | 屏幕捕获配置。 | 7951 7952## EventResult<sup>12+</sup> 7953 7954通知Web组件事件消费结果，支持的事件参考[触摸事件的类型](../apis-arkui/arkui-ts/ts-appendix-enums.md#touchtype)。如果应用不消费该事件，则设置为false，事件被Web组件消费。应用消费了该事件，设置为true，Web组件不消费。示例代码参考[onNativeEmbedGestureEvent事件](#onnativeembedgestureevent11)。 7955 7956### constructor<sup>12+</sup> 7957 7958constructor() 7959 7960EventResult的构造函数。 7961 7962**系统能力：** SystemCapability.Web.Webview.Core 7963 7964### setGestureEventResult<sup>12+</sup> 7965 7966setGestureEventResult(result: boolean): void 7967 7968设置手势事件消费结果。 7969 7970**系统能力：** SystemCapability.Web.Webview.Core 7971 7972**参数：** 7973 7974| 参数名 | 类型 | 必填 | 说明 | 7975| --------------- | -------- | ---- |------- | 7976| result | boolean | 是 | 是否消费该手势事件。默认值为true。 | 7977 7978**示例：** 7979 7980请参考[onNativeEmbedGestureEvent事件](#onnativeembedgestureevent11)。 7981 7982### setGestureEventResult<sup>14+</sup> 7983 7984setGestureEventResult(result: boolean, stopPropagation: boolean): void 7985 7986设置手势事件消费结果。 7987 7988**系统能力：** SystemCapability.Web.Webview.Core 7989 7990**参数：** 7991 7992| 参数名 | 类型 | 必填 | 说明 | 7993| --------------- | -------- | ---- |------- | 7994| result | boolean | 是 | 是否消费该手势事件。默认值为true。 | 7995| stopPropagation | boolean | 是 | 是否阻止冒泡，在result为true时生效。默认值为true。 | 7996 7997**示例：** 7998 7999请参考[onNativeEmbedGestureEvent事件](#onnativeembedgestureevent11)。 8000 8001## ContextMenuSourceType<sup>9+</sup>枚举说明 8002 8003**系统能力：** SystemCapability.Web.Webview.Core 8004 8005| 名称 | 值 | 说明 | 8006| --------- | -- |------------ | 8007| None | 0 | 其他事件来源。 | 8008| Mouse | 1 | 鼠标事件。 | 8009| LongPress | 2 | 长按事件。 | 8010 8011## ContextMenuMediaType<sup>9+</sup>枚举说明 8012 8013**系统能力：** SystemCapability.Web.Webview.Core 8014 8015| 名称 | 值 | 说明 | 8016| ----- | -- | ------------- | 8017| None | 0 | 非特殊媒体或其他媒体类型。 | 8018| Image | 1 | 图片。 | 8019 8020## ContextMenuInputFieldType<sup>9+</sup>枚举说明 8021 8022**系统能力：** SystemCapability.Web.Webview.Core 8023 8024| 名称 | 值 | 说明 | 8025| --------- | -- | --------------------------- | 8026| None | 0 | 非输入框。 | 8027| PlainText | 1 | 纯文本类型，包括text、search、email等。 | 8028| Password | 2 | 密码类型。 | 8029| Number | 3 | 数字类型。 | 8030| Telephone | 4 | 电话号码类型。 | 8031| Other | 5 | 其他类型。 | 8032 8033## ContextMenuEditStateFlags<sup>9+</sup>枚举说明 8034 8035支持以按位或的方式使用此枚举。例如，如果需要同时支持CAN_CUT、CAN_COPY和CAN_SELECT_ALL，可使用CAN_CUT | CAN_COPY | CAN_SELECT_ALL或11。 8036 8037**系统能力：** SystemCapability.Web.Webview.Core 8038 8039| 名称 | 值 | 说明 | 8040| -------------- | -- | -------- | 8041| NONE | 0 | 不可编辑。 | 8042| CAN_CUT | 1 << 0 | 支持剪切。 | 8043| CAN_COPY | 1 << 1 | 支持拷贝。 | 8044| CAN_PASTE | 1 << 2 | 支持粘贴。 | 8045| CAN_SELECT_ALL | 1 << 3 | 支持全选。 | 8046 8047## WebContextMenuParam<sup>9+</sup> 8048 8049实现长按页面元素或鼠标右键弹出来的菜单信息。示例代码参考[onContextMenuShow事件](#oncontextmenushow9)。 8050 8051### constructor<sup>9+</sup> 8052 8053constructor() 8054 8055WebContextMenuParam的构造函数。 8056 8057**系统能力：** SystemCapability.Web.Webview.Core 8058 8059### x<sup>9+</sup> 8060 8061x(): number 8062 8063弹出菜单的x坐标。 8064 8065**系统能力：** SystemCapability.Web.Webview.Core 8066 8067**返回值：** 8068 8069| 类型 | 说明 | 8070| ------ | ------------------ | 8071| number | 显示正常返回非负整数，否则返回-1。 | 8072 8073### y<sup>9+</sup> 8074 8075y(): number 8076 8077弹出菜单的y坐标。 8078 8079**系统能力：** SystemCapability.Web.Webview.Core 8080 8081**返回值：** 8082 8083| 类型 | 说明 | 8084| ------ | ------------------ | 8085| number | 显示正常返回非负整数，否则返回-1。 | 8086 8087### getLinkUrl<sup>9+</sup> 8088 8089getLinkUrl(): string 8090 8091获取链接地址。 8092 8093**系统能力：** SystemCapability.Web.Webview.Core 8094 8095**返回值：** 8096 8097| 类型 | 说明 | 8098| ------ | ------------------------- | 8099| string | 如果长按位置是链接，返回经过安全检查的url链接。 | 8100 8101### getUnfilteredLinkUrl<sup>9+</sup> 8102 8103getUnfilteredLinkUrl(): string 8104 8105获取链接地址。 8106 8107**系统能力：** SystemCapability.Web.Webview.Core 8108 8109**返回值：** 8110 8111| 类型 | 说明 | 8112| ------ | --------------------- | 8113| string | 如果长按位置是链接，返回原始的url链接。 | 8114 8115### getSourceUrl<sup>9+</sup> 8116 8117getSourceUrl(): string 8118 8119获取sourceUrl链接。 8120 8121**系统能力：** SystemCapability.Web.Webview.Core 8122 8123**返回值：** 8124 8125| 类型 | 说明 | 8126| ------ | ------------------------ | 8127| string | 如果选中的元素有src属性，返回src的url。 | 8128 8129### existsImageContents<sup>9+</sup> 8130 8131existsImageContents(): boolean 8132 8133是否存在图像内容。 8134 8135**系统能力：** SystemCapability.Web.Webview.Core 8136 8137**返回值：** 8138 8139| 类型 | 说明 | 8140| ------- | ------------------------- | 8141| boolean | 长按位置中有图片返回true，否则返回false。 | 8142 8143### getMediaType<sup>9+</sup> 8144 8145getMediaType(): ContextMenuMediaType 8146 8147获取网页元素媒体类型。 8148 8149**系统能力：** SystemCapability.Web.Webview.Core 8150 8151**返回值：** 8152 8153| 类型 | 说明 | 8154| ---------------------------------------- | --------- | 8155| [ContextMenuMediaType](#contextmenumediatype9枚举说明) | 网页元素媒体类型。 | 8156 8157### getSelectionText<sup>9+</sup> 8158 8159getSelectionText(): string 8160 8161获取选中文本。 8162 8163**系统能力：** SystemCapability.Web.Webview.Core 8164 8165**返回值：** 8166 8167| 类型 | 说明 | 8168| ------ | -------------------- | 8169| string | 菜单上下文选中文本内容，不存在则返回空。 | 8170 8171### getSourceType<sup>9+</sup> 8172 8173getSourceType(): ContextMenuSourceType 8174 8175获取菜单事件来源。 8176 8177**系统能力：** SystemCapability.Web.Webview.Core 8178 8179**返回值：** 8180 8181| 类型 | 说明 | 8182| ---------------------------------------- | ------- | 8183| [ContextMenuSourceType](#contextmenusourcetype9枚举说明) | 菜单事件来源。 | 8184 8185### getInputFieldType<sup>9+</sup> 8186 8187getInputFieldType(): ContextMenuInputFieldType 8188 8189获取网页元素输入框类型。 8190 8191**系统能力：** SystemCapability.Web.Webview.Core 8192 8193**返回值：** 8194 8195| 类型 | 说明 | 8196| ---------------------------------------- | ------ | 8197| [ContextMenuInputFieldType](#contextmenuinputfieldtype9枚举说明) | 输入框类型。 | 8198 8199### isEditable<sup>9+</sup> 8200 8201isEditable(): boolean 8202 8203获取网页元素是否可编辑标识。 8204 8205**系统能力：** SystemCapability.Web.Webview.Core 8206 8207**返回值：** 8208 8209| 类型 | 说明 | 8210| ------- | -------------------------- | 8211| boolean | 网页元素可编辑返回true，不可编辑返回false。 | 8212 8213### getEditStateFlags<sup>9+</sup> 8214 8215getEditStateFlags(): number 8216 8217获取网页元素可编辑标识。 8218 8219**系统能力：** SystemCapability.Web.Webview.Core 8220 8221**返回值：** 8222 8223| 类型 | 说明 | 8224| ------ | ---------------------------------------- | 8225| number | 网页元素可编辑标识，参照[ContextMenuEditStateFlags](#contextmenueditstateflags9枚举说明)。 | 8226 8227### getPreviewWidth<sup>13+</sup> 8228 8229getPreviewWidth(): number 8230 8231获取预览图的宽。 8232 8233**系统能力：** SystemCapability.Web.Webview.Core 8234 8235**返回值：** 8236 8237| 类型 | 说明 | 8238| ------ | ----------- | 8239| number | 预览图的宽。 | 8240 8241### getPreviewHeight<sup>13+</sup> 8242 8243getPreviewHeight(): number 8244 8245获取预览图的高。 8246 8247**系统能力：** SystemCapability.Web.Webview.Core 8248 8249**返回值：** 8250 8251| 类型 | 说明 | 8252| ------ | ---------- | 8253| number | 预览图的高。 | 8254 8255## WebContextMenuResult<sup>9+</sup> 8256 8257实现长按页面元素或鼠标右键弹出来的菜单所执行的响应事件。示例代码参考[onContextMenuShow事件](#oncontextmenushow9)。 8258 8259### constructor<sup>9+</sup> 8260 8261constructor() 8262 8263WebContextMenuResult的构造函数。 8264 8265**系统能力：** SystemCapability.Web.Webview.Core 8266 8267### closeContextMenu<sup>9+</sup> 8268 8269closeContextMenu(): void 8270 8271不执行WebContextMenuResult其他接口操作时，需要调用此接口关闭菜单。 8272 8273**系统能力：** SystemCapability.Web.Webview.Core 8274 8275### copyImage<sup>9+</sup> 8276 8277copyImage(): void 8278 8279WebContextMenuParam有图片内容则复制图片。 8280 8281**系统能力：** SystemCapability.Web.Webview.Core 8282 8283### copy<sup>9+</sup> 8284 8285copy(): void 8286 8287执行与此上下文菜单相关的拷贝文本操作。 8288 8289**系统能力：** SystemCapability.Web.Webview.Core 8290 8291### paste<sup>9+</sup> 8292 8293paste(): void 8294 8295执行与此上下文菜单相关的粘贴操作。 8296 8297> **说明：** 8298> 8299> 需要配置权限：ohos.permission.READ_PASTEBOARD。 8300 8301**系统能力：** SystemCapability.Web.Webview.Core 8302 8303### cut<sup>9+</sup> 8304 8305cut(): void 8306 8307执行与此上下文菜单相关的剪切操作。 8308 8309**系统能力：** SystemCapability.Web.Webview.Core 8310 8311### selectAll<sup>9+</sup> 8312 8313selectAll(): void 8314 8315执行与此上下文菜单相关的全选操作。 8316 8317**系统能力：** SystemCapability.Web.Webview.Core 8318 8319## JsGeolocation 8320 8321Web组件返回授权或拒绝权限功能的对象。示例代码参考[onGeolocationShow事件](#ongeolocationshow)。 8322 8323### constructor 8324 8325constructor() 8326 8327JsGeolocation的构造函数。 8328 8329**系统能力：** SystemCapability.Web.Webview.Core 8330 8331### invoke 8332 8333invoke(origin: string, allow: boolean, retain: boolean): void 8334 8335设置网页地理位置权限状态。 8336 8337**系统能力：** SystemCapability.Web.Webview.Core 8338 8339**参数：** 8340 8341| 参数名 | 类型 | 必填 | 说明 | 8342| ------ | ------- | ---- | ---------------------------------------- | 8343| origin | string | 是 | 指定源的字符串索引。 | 8344| allow | boolean | 是 | 设置的地理位置权限状态。 | 8345| retain | boolean | 是 | 是否允许将地理位置权限状态保存到系统中。可通过[GeolocationPermissions<sup>9+</sup>](js-apis-webview.md#geolocationpermissions)接口管理保存到系统的地理位置权限。 | 8346 8347## MessageLevel枚举说明 8348 8349**系统能力：** SystemCapability.Web.Webview.Core 8350 8351| 名称 | 值 | 说明 | 8352| ----- | -- | ---- | 8353| Debug | 1 | 调试级别。 | 8354| Error | 4 | 错误级别。 | 8355| Info | 2 | 消息级别。 | 8356| Log | 5 | 日志级别。 | 8357| Warn | 3 | 警告级别。 | 8358 8359## RenderExitReason<sup>9+</sup>枚举说明 8360 8361onRenderExited接口返回的渲染进程退出的具体原因。 8362 8363**系统能力：** SystemCapability.Web.Webview.Core 8364 8365| 名称 | 值 | 说明 | 8366| -------------------------- | -- | ----------------- | 8367| ProcessAbnormalTermination | 0 | 渲染进程异常退出。 | 8368| ProcessWasKilled | 1 | 收到SIGKILL，或被手动终止。 | 8369| ProcessCrashed | 2 | 渲染进程崩溃退出，如段错误。 | 8370| ProcessOom | 3 | 程序内存不足。 | 8371| ProcessExitUnknown | 4 | 其他原因。 | 8372 8373## MixedMode枚举说明 8374 8375**系统能力：** SystemCapability.Web.Webview.Core 8376 8377| 名称 | 值 | 说明 | 8378| ---------- | -- | ---------------------------------- | 8379| All | 0 | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 | 8380| Compatible | 1 | 混合内容兼容性模式，部分不安全的内容可能被加载。 | 8381| None | 2 | 不允许加载HTTP和HTTPS混合内容。 | 8382 8383## CacheMode枚举说明 8384 8385**系统能力：** SystemCapability.Web.Webview.Core 8386 8387| 名称 | 值 | 说明 | 8388| ------- | -- | ------------------------------------ | 8389| Default<sup>9+</sup> | 0 | 优先使用未过期cache加载资源，无效或无cache时从网络获取。 | 8390| None | 1 | 优先使用cache(含过期)加载资源，无cache时从网络获取。 | 8391| Online | 2 | 强制从网络获取最新资源，不使用任何cache。 | 8392| Only | 3 | 仅使用本地cache加载资源。 | 8393 8394## FileSelectorMode<sup>9+</sup>枚举说明 8395 8396**系统能力：** SystemCapability.Web.Webview.Core 8397 8398| 名称 | 值 | 说明 | 8399| -------------------- | -- | ---------- | 8400| FileOpenMode | 0 | 打开上传单个文件。 | 8401| FileOpenMultipleMode | 1 | 打开上传多个文件。 | 8402| FileOpenFolderMode | 2 | 打开上传文件夹模式。 | 8403| FileSaveMode | 3 | 文件保存模式。 | 8404 8405 ## HitTestType枚举说明 8406 8407 **系统能力：** SystemCapability.Web.Webview.Core 8408 8409| 名称 | 值 | 说明 | 8410| ------------- | -- | ------------------------ | 8411| EditText | 0 | 可编辑的区域。 | 8412| Email | 1 | 电子邮件地址。 | 8413| HttpAnchor | 2 | 超链接，其src为http。 | 8414| HttpAnchorImg | 3 | 带有超链接的图片，其中超链接的src为http。 | 8415| Img | 4 | HTML::img标签。 | 8416| Map | 5 | 地理地址。 | 8417| Phone | 6 | 电话号码。 | 8418| Unknown | 7 | 未知内容。 | 8419 8420 ## OverScrollMode<sup>11+</sup>枚举说明 8421 8422 **系统能力：** SystemCapability.Web.Webview.Core 8423 8424| 名称 | 值 | 说明 | 8425| ------ | -- | ----------- | 8426| NEVER | 0 | Web过滚动模式关闭。 | 8427| ALWAYS | 1 | Web过滚动模式开启。 | 8428 8429## OnContextMenuHideCallback<sup>11+</sup> 8430 8431type OnContextMenuHideCallback = () => void 8432 8433上下文菜单自定义隐藏的回调。 8434 8435**系统能力：** SystemCapability.Web.Webview.Core 8436 8437## SslError<sup>9+</sup>枚举说明 8438 8439onSslErrorEventReceive接口返回的SSL错误的具体原因。 8440 8441**系统能力：** SystemCapability.Web.Webview.Core 8442 8443| 名称 | 值 | 说明 | 8444| ------------ | -- | ----------- | 8445| Invalid | 0 | 一般错误。 | 8446| HostMismatch | 1 | 主机名不匹配。 | 8447| DateInvalid | 2 | 证书日期无效。 | 8448| Untrusted | 3 | 证书颁发机构不受信任。 | 8449 8450## ProtectedResourceType<sup>9+</sup>枚举说明 8451 8452**系统能力：** SystemCapability.Web.Webview.Core 8453 8454| 名称 | 值 | 说明 | 备注 | 8455| --------------------------- | --------------- | ------------- | -------------------------- | 8456| MidiSysex | TYPE_MIDI_SYSEX | MIDI SYSEX资源。 | 目前仅支持权限事件上报，MIDI设备的使用还未支持。 | 8457| VIDEO_CAPTURE<sup>10+</sup> | TYPE_VIDEO_CAPTURE | 视频捕获资源，例如相机。 | | 8458| AUDIO_CAPTURE<sup>10+</sup> | TYPE_AUDIO_CAPTURE | 音频捕获资源，例如麦克风。 | | 8459| SENSOR<sup>12+</sup> | TYPE_SENSOR | 传感器资源，例如加速度传感器。 | | 8460 8461## WebDarkMode<sup>9+</sup>枚举说明 8462 8463**系统能力：** SystemCapability.Web.Webview.Core 8464 8465| 名称 | 值 | 说明 | 8466| ---- | -- | ------------ | 8467| Off | 0 | Web深色模式关闭。 | 8468| On | 1 | Web深色模式开启。 | 8469| Auto | 2 | Web深色模式跟随系统。 | 8470 8471## WebCaptureMode<sup>10+</sup>枚举说明 8472 8473**系统能力：** SystemCapability.Web.Webview.Core 8474 8475| 名称 | 值 | 说明 | 8476| ----------- | -- | ------- | 8477| HOME_SCREEN | 0 | 主屏捕获模式。 | 8478 8479## WebMediaOptions<sup>10+</sup> 8480 8481Web媒体策略的配置。 8482 8483**系统能力：** SystemCapability.Web.Webview.Core 8484 8485| 名称 | 类型 | 必填 | 说明 | 8486| -------------- | ------- | ---- | ---------------------------------------- | 8487| resumeInterval | number | 否 | 被暂停的Web音频能够自动续播的有效期，单位：秒。最长有效期为60秒，由于近似值原因，该有效期可能存在一秒内的误差。 | 8488| audioExclusive | boolean | 否 | 应用内多个Web实例的音频是否独占。 | 8489 8490## ScreenCaptureConfig<sup>10+</sup> 8491 8492Web屏幕捕获的配置。 8493 8494**系统能力：** SystemCapability.Web.Webview.Core 8495 8496| 名称 | 类型 | 必填 | 说明 | 8497| ----------- | --------------------------------------- | ---- | ---------- | 8498| captureMode | [WebCaptureMode](#webcapturemode10枚举说明) | 是 | Web屏幕捕获模式。 | 8499 8500## WebLayoutMode<sup>11+</sup>枚举说明 8501 8502**系统能力：** SystemCapability.Web.Webview.Core 8503 8504| 名称 | 值 | 说明 | 8505| ----------- | -- | ------------------ | 8506| NONE | 0 | Web布局跟随系统。 | 8507| FIT_CONTENT | 1 | Web基于页面大小的自适应网页布局。 | 8508 8509## NestedScrollOptionsExt<sup>14+</sup>对象说明 8510 8511通过NestedScrollOptionsExt可以设置上下左右四个方向的嵌套滚动规则。 8512 8513**系统能力：** SystemCapability.Web.Webview.Core 8514 8515| 名称 | 类型 | 必填 | 说明 | 8516| -------------- | ---------------- | ---- | -------------------- | 8517| scrollUp | [NestedScrollMode](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) | 否 | 可滚动组件往上滚动时的嵌套滚动选项。 | 8518| scrollDown | [NestedScrollMode](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) | 否 | 可滚动组件往下滚动时的嵌套滚动选项。 | 8519| scrollLeft | [NestedScrollMode](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) | 否 | 可滚动组件往左滚动时的嵌套滚动选项。 | 8520| scrollRight | [NestedScrollMode](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) | 否 | 可滚动组件往右滚动时的嵌套滚动选项。 | 8521 8522## DataResubmissionHandler<sup>9+</sup> 8523 8524通过DataResubmissionHandler可以重新提交表单数据或取消提交表单数据。 8525 8526### constructor<sup>9+</sup> 8527 8528constructor() 8529 8530DataResubmissionHandler的构造函数。 8531 8532**系统能力：** SystemCapability.Web.Webview.Core 8533 8534### resend<sup>9+</sup> 8535 8536resend(): void 8537 8538重新发送表单数据。 8539 8540**系统能力：** SystemCapability.Web.Webview.Core 8541 8542**示例：** 8543 8544 ```ts 8545 // xxx.ets 8546 import { webview } from '@kit.ArkWeb'; 8547 8548 @Entry 8549 @Component 8550 struct WebComponent { 8551 controller: webview.WebviewController = new webview.WebviewController(); 8552 8553 build() { 8554 Column() { 8555 Web({ src: 'www.example.com', controller: this.controller }) 8556 .onDataResubmitted((event) => { 8557 console.log('onDataResubmitted'); 8558 event.handler.resend(); 8559 }) 8560 } 8561 } 8562 } 8563 ``` 8564 8565### cancel<sup>9+</sup> 8566 8567cancel(): void 8568 8569取消重新发送表单数据。 8570 8571**系统能力：** SystemCapability.Web.Webview.Core 8572 8573**示例：** 8574 8575 ```ts 8576 // xxx.ets 8577 import { webview } from '@kit.ArkWeb'; 8578 8579 @Entry 8580 @Component 8581 struct WebComponent { 8582 controller: webview.WebviewController = new webview.WebviewController(); 8583 8584 build() { 8585 Column() { 8586 Web({ src: 'www.example.com', controller: this.controller }) 8587 .onDataResubmitted((event) => { 8588 console.log('onDataResubmitted'); 8589 event.handler.cancel(); 8590 }) 8591 } 8592 } 8593 } 8594 ``` 8595 8596 ## WebController 8597 8598通过WebController可以控制Web组件各种行为。一个WebController对象只能控制一个Web组件，且必须在Web组件和WebController绑定后，才能调用WebController上的方法。 8599 8600从API version 9开始不再维护，建议使用[WebviewController<sup>9+</sup>](js-apis-webview.md#webviewcontroller)代替。 8601 8602### 创建对象 8603 8604<!--code_no_check--> 8605```ts 8606let webController: WebController = new WebController() 8607``` 8608 8609### constructor 8610 8611constructor() 8612 8613WebController的构造函数。 8614 8615> **说明：** 8616> 8617> 从API version 8开始支持，从API version 9开始废弃。并且不再提供新的接口作为替代。 8618 8619**系统能力：** SystemCapability.Web.Webview.Core 8620 8621### getCookieManager<sup>(deprecated)</sup> 8622 8623getCookieManager(): WebCookie 8624 8625获取Web组件cookie管理对象。 8626 8627从API version 9开始不再维护，建议使用[getCookie](js-apis-webview.md#getcookiedeprecated)代替。 8628 8629**系统能力：** SystemCapability.Web.Webview.Core 8630 8631**返回值：** 8632 8633| 类型 | 说明 | 8634| --------- | ---------------------------------------- | 8635| WebCookie | Web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 | 8636 8637**示例：** 8638 8639 ```ts 8640 // xxx.ets 8641 @Entry 8642 @Component 8643 struct WebComponent { 8644 controller: WebController = new WebController() 8645 8646 build() { 8647 Column() { 8648 Button('getCookieManager') 8649 .onClick(() => { 8650 let cookieManager = this.controller.getCookieManager() 8651 }) 8652 Web({ src: 'www.example.com', controller: this.controller }) 8653 } 8654 } 8655 } 8656 ``` 8657 8658### requestFocus<sup>(deprecated)</sup> 8659 8660requestFocus() 8661 8662使当前web页面获取焦点。 8663 8664从API version 9开始不再维护，建议使用[requestFocus<sup>9+</sup>](js-apis-webview.md#requestfocus)代替。 8665 8666**系统能力：** SystemCapability.Web.Webview.Core 8667 8668**示例：** 8669 8670 ```ts 8671 // xxx.ets 8672 @Entry 8673 @Component 8674 struct WebComponent { 8675 controller: WebController = new WebController() 8676 8677 build() { 8678 Column() { 8679 Button('requestFocus') 8680 .onClick(() => { 8681 this.controller.requestFocus() 8682 }) 8683 Web({ src: 'www.example.com', controller: this.controller }) 8684 } 8685 } 8686 } 8687 ``` 8688 8689### accessBackward<sup>(deprecated)</sup> 8690 8691accessBackward(): boolean 8692 8693当前页面是否可后退，即当前页面是否有返回历史记录。 8694 8695从API version 9开始不再维护，建议使用[accessBackward<sup>9+</sup>](js-apis-webview.md#accessbackward)代替。 8696 8697**系统能力：** SystemCapability.Web.Webview.Core 8698 8699**返回值：** 8700 8701| 类型 | 说明 | 8702| ------- | --------------------- | 8703| boolean | 可以后退返回true,否则返回false。 | 8704 8705**示例：** 8706 8707 ```ts 8708 // xxx.ets 8709 @Entry 8710 @Component 8711 struct WebComponent { 8712 controller: WebController = new WebController() 8713 8714 build() { 8715 Column() { 8716 Button('accessBackward') 8717 .onClick(() => { 8718 let result = this.controller.accessBackward() 8719 console.log('result:' + result) 8720 }) 8721 Web({ src: 'www.example.com', controller: this.controller }) 8722 } 8723 } 8724 } 8725 ``` 8726 8727### accessForward<sup>(deprecated)</sup> 8728 8729accessForward(): boolean 8730 8731当前页面是否可前进，即当前页面是否有前进历史记录。 8732 8733从API version 9开始不再维护，建议使用[accessForward<sup>9+</sup>](js-apis-webview.md#accessforward)代替。 8734 8735**系统能力：** SystemCapability.Web.Webview.Core 8736 8737**返回值：** 8738 8739| 类型 | 说明 | 8740| ------- | --------------------- | 8741| boolean | 可以前进返回true,否则返回false。 | 8742 8743**示例：** 8744 8745 ```ts 8746 // xxx.ets 8747 @Entry 8748 @Component 8749 struct WebComponent { 8750 controller: WebController = new WebController() 8751 8752 build() { 8753 Column() { 8754 Button('accessForward') 8755 .onClick(() => { 8756 let result = this.controller.accessForward() 8757 console.log('result:' + result) 8758 }) 8759 Web({ src: 'www.example.com', controller: this.controller }) 8760 } 8761 } 8762 } 8763 ``` 8764 8765### accessStep<sup>(deprecated)</sup> 8766 8767accessStep(step: number): boolean 8768 8769当前页面是否可前进或者后退给定的step步。 8770 8771从API version 9开始不再维护，建议使用[accessStep<sup>9+</sup>](js-apis-webview.md#accessstep)代替。 8772 8773**系统能力：** SystemCapability.Web.Webview.Core 8774 8775**参数：** 8776 8777| 参数名 | 类型 | 必填 | 说明 | 8778| ---- | ------ | ---- | --------------------- | 8779| step | number | 是 | 要跳转的步数，正数代表前进，负数代表后退。 | 8780 8781**返回值：** 8782 8783| 类型 | 说明 | 8784| ------- | --------- | 8785| boolean | 页面是否前进或后退 | 8786 8787**示例：** 8788 8789 ```ts 8790 // xxx.ets 8791 @Entry 8792 @Component 8793 struct WebComponent { 8794 controller: WebController = new WebController() 8795 @State steps: number = 2 8796 8797 build() { 8798 Column() { 8799 Button('accessStep') 8800 .onClick(() => { 8801 let result = this.controller.accessStep(this.steps) 8802 console.log('result:' + result) 8803 }) 8804 Web({ src: 'www.example.com', controller: this.controller }) 8805 } 8806 } 8807 } 8808 ``` 8809 8810### backward<sup>(deprecated)</sup> 8811 8812backward() 8813 8814按照历史栈，后退一个页面。一般结合accessBackward一起使用。 8815 8816从API version 9开始不再维护，建议使用[backward<sup>9+</sup>](js-apis-webview.md#backward)代替。 8817 8818**系统能力：** SystemCapability.Web.Webview.Core 8819 8820**示例：** 8821 8822 ```ts 8823 // xxx.ets 8824 @Entry 8825 @Component 8826 struct WebComponent { 8827 controller: WebController = new WebController() 8828 8829 build() { 8830 Column() { 8831 Button('backward') 8832 .onClick(() => { 8833 this.controller.backward() 8834 }) 8835 Web({ src: 'www.example.com', controller: this.controller }) 8836 } 8837 } 8838 } 8839 ``` 8840 8841### forward<sup>(deprecated)</sup> 8842 8843forward() 8844 8845按照历史栈，前进一个页面。一般结合accessForward一起使用。 8846 8847从API version 9开始不再维护，建议使用[forward<sup>9+</sup>](js-apis-webview.md#forward)代替。 8848 8849**系统能力：** SystemCapability.Web.Webview.Core 8850 8851**示例：** 8852 8853 ```ts 8854 // xxx.ets 8855 @Entry 8856 @Component 8857 struct WebComponent { 8858 controller: WebController = new WebController() 8859 8860 build() { 8861 Column() { 8862 Button('forward') 8863 .onClick(() => { 8864 this.controller.forward() 8865 }) 8866 Web({ src: 'www.example.com', controller: this.controller }) 8867 } 8868 } 8869 } 8870 ``` 8871 8872### deleteJavaScriptRegister<sup>(deprecated)</sup> 8873 8874deleteJavaScriptRegister(name: string) 8875 8876删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。删除后立即生效，无须调用[refresh](#refreshdeprecated)接口。 8877 8878从API version 9开始不再维护，建议使用[deleteJavaScriptRegister<sup>9+</sup>](js-apis-webview.md#deletejavascriptregister)代替。 8879 8880**系统能力：** SystemCapability.Web.Webview.Core 8881 8882**参数：** 8883 8884| 参数名 | 类型 | 必填 | 说明 | 8885| ---- | ------ | ---- | ---------------------------------------- | 8886| name | string | 是 | 注册对象的名称，可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。 | 8887 8888**示例：** 8889 8890 ```ts 8891 // xxx.ets 8892 @Entry 8893 @Component 8894 struct WebComponent { 8895 controller: WebController = new WebController() 8896 @State name: string = 'Object' 8897 8898 build() { 8899 Column() { 8900 Button('deleteJavaScriptRegister') 8901 .onClick(() => { 8902 this.controller.deleteJavaScriptRegister(this.name) 8903 }) 8904 Web({ src: 'www.example.com', controller: this.controller }) 8905 } 8906 } 8907 } 8908 ``` 8909 8910### getHitTest<sup>(deprecated)</sup> 8911 8912getHitTest(): HitTestType 8913 8914获取当前被点击区域的元素类型。 8915 8916从API version 9开始不再维护，建议使用[getHitTest<sup>9+</sup>](js-apis-webview.md#gethittest)代替。 8917 8918**系统能力：** SystemCapability.Web.Webview.Core 8919 8920**返回值：** 8921 8922| 类型 | 说明 | 8923| ------------------------------- | ----------- | 8924| [HitTestType](#hittesttype枚举说明) | 被点击区域的元素类型。 | 8925 8926**示例：** 8927 8928 ```ts 8929 // xxx.ets 8930 @Entry 8931 @Component 8932 struct WebComponent { 8933 controller: WebController = new WebController() 8934 8935 build() { 8936 Column() { 8937 Button('getHitTest') 8938 .onClick(() => { 8939 let hitType = this.controller.getHitTest() 8940 console.log("hitType: " + hitType) 8941 }) 8942 Web({ src: 'www.example.com', controller: this.controller }) 8943 } 8944 } 8945 } 8946 ``` 8947 8948### loadData<sup>(deprecated)</sup> 8949 8950loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }) 8951 8952baseUrl为空时，通过”data“协议加载指定的一段字符串。 8953 8954当baseUrl为”data“协议时，编码后的data字符串将被Web组件作为”data"协议加载。 8955 8956当baseUrl为“http/https"协议时，编码后的data字符串将被Web组件以类似loadUrl的方式以非编码字符串处理。 8957 8958从API version 9开始不再维护，建议使用[loadData<sup>9+</sup>](js-apis-webview.md#loaddata)代替。 8959 8960**系统能力：** SystemCapability.Web.Webview.Core 8961 8962**参数：** 8963 8964| 参数名 | 类型 | 必填 | 说明 | 8965| ---------- | ------ | ---- | ---------------------------------------- | 8966| data | string | 是 | 按照”Base64“或者”URL"编码后的一段字符串。 | 8967| mimeType | string | 是 | 媒体类型（MIME）。 | 8968| encoding | string | 是 | 编码类型，具体为“Base64"或者”URL编码。 | 8969| baseUrl | string | 否 | 指定的一个URL路径（“http”/“https”/"data"协议），并由Web组件赋值给window.origin。 | 8970| historyUrl | string | 否 | 历史记录URL。非空时，可被历史记录管理，实现前后后退功能。当baseUrl为空时，此属性无效。 | 8971 8972**示例：** 8973 8974 ```ts 8975 // xxx.ets 8976 @Entry 8977 @Component 8978 struct WebComponent { 8979 controller: WebController = new WebController() 8980 8981 build() { 8982 Column() { 8983 Button('loadData') 8984 .onClick(() => { 8985 this.controller.loadData({ 8986 data: "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>", 8987 mimeType: "text/html", 8988 encoding: "UTF-8" 8989 }) 8990 }) 8991 Web({ src: 'www.example.com', controller: this.controller }) 8992 } 8993 } 8994 } 8995 ``` 8996 8997### loadUrl<sup>(deprecated)</sup> 8998 8999loadUrl(options: { url: string | Resource, headers?: Array\<Header\> }) 9000 9001使用指定的http头加载指定的URL。 9002 9003通过loadUrl注入的对象只在当前document有效，即通过loadUrl导航到新的页面会无效。 9004 9005而通过registerJavaScriptProxy注入的对象，在loadUrl导航到新的页面也会有效。 9006 9007从API version 9开始不再维护，建议使用[loadUrl<sup>9+</sup>](js-apis-webview.md#loadurl)代替。 9008 9009**系统能力：** SystemCapability.Web.Webview.Core 9010 9011**参数：** 9012 9013| 参数名 | 类型 | 必填 | 说明 | 9014| ------- | -------------------------- | ---- | -------------- | 9015| url | string \| Resource | 是 | 需要加载的 URL。 | 9016| headers | Array\<[Header](#header)\> | 否 | URL的附加HTTP请求头。默认值：[]。 | 9017 9018**示例：** 9019 9020 ```ts 9021 // xxx.ets 9022 @Entry 9023 @Component 9024 struct WebComponent { 9025 controller: WebController = new WebController() 9026 9027 build() { 9028 Column() { 9029 Button('loadUrl') 9030 .onClick(() => { 9031 this.controller.loadUrl({ url: 'www.example.com' }) 9032 }) 9033 Web({ src: 'www.example.com', controller: this.controller }) 9034 } 9035 } 9036 } 9037 ``` 9038 9039### onActive<sup>(deprecated)</sup> 9040 9041onActive(): void 9042 9043调用此接口通知Web组件进入前台激活状态。 9044 9045从API version 9开始不再维护，建议使用[onActive<sup>9+</sup>](js-apis-webview.md#onactive)代替。 9046 9047**系统能力：** SystemCapability.Web.Webview.Core 9048 9049**示例：** 9050 9051 ```ts 9052 // xxx.ets 9053 @Entry 9054 @Component 9055 struct WebComponent { 9056 controller: WebController = new WebController() 9057 9058 build() { 9059 Column() { 9060 Button('onActive') 9061 .onClick(() => { 9062 this.controller.onActive() 9063 }) 9064 Web({ src: 'www.example.com', controller: this.controller }) 9065 } 9066 } 9067 } 9068 ``` 9069 9070### onInactive<sup>(deprecated)</sup> 9071 9072onInactive(): void 9073 9074调用此接口通知Web组件进入未激活状态。 9075 9076从API version 9开始不再维护，建议使用[onInactive<sup>9+</sup>](js-apis-webview.md#oninactive)代替。 9077 9078**系统能力：** SystemCapability.Web.Webview.Core 9079 9080**示例：** 9081 9082 ```ts 9083 // xxx.ets 9084 @Entry 9085 @Component 9086 struct WebComponent { 9087 controller: WebController = new WebController() 9088 9089 build() { 9090 Column() { 9091 Button('onInactive') 9092 .onClick(() => { 9093 this.controller.onInactive() 9094 }) 9095 Web({ src: 'www.example.com', controller: this.controller }) 9096 } 9097 } 9098 } 9099 ``` 9100 9101### zoom<sup>(deprecated)</sup> 9102 9103zoom(factor: number): void 9104 9105调整当前网页的缩放比例。 9106 9107从API version 9开始不再维护，建议使用[zoom<sup>9+</sup>](js-apis-webview.md#zoom)代替。 9108 9109**系统能力：** SystemCapability.Web.Webview.Core 9110 9111**参数：** 9112 9113| 参数名 | 类型 | 必填 | 说明 | 9114| ------ | ------ | ---- | ------------------------------ | 9115| factor | number | 是 | 基于当前网页所需调整的相对缩放比例，正值为放大，负值为缩小。 | 9116 9117**示例：** 9118 9119 ```ts 9120 // xxx.ets 9121 @Entry 9122 @Component 9123 struct WebComponent { 9124 controller: WebController = new WebController() 9125 @State factor: number = 1 9126 9127 build() { 9128 Column() { 9129 Button('zoom') 9130 .onClick(() => { 9131 this.controller.zoom(this.factor) 9132 }) 9133 Web({ src: 'www.example.com', controller: this.controller }) 9134 } 9135 } 9136 } 9137 ``` 9138 9139### refresh<sup>(deprecated)</sup> 9140 9141refresh() 9142 9143调用此接口通知Web组件刷新网页。 9144 9145从API version 9开始不再维护，建议使用[refresh<sup>9+</sup>](js-apis-webview.md#refresh)代替。 9146 9147**系统能力：** SystemCapability.Web.Webview.Core 9148 9149**示例：** 9150 9151 ```ts 9152 // xxx.ets 9153 @Entry 9154 @Component 9155 struct WebComponent { 9156 controller: WebController = new WebController() 9157 9158 build() { 9159 Column() { 9160 Button('refresh') 9161 .onClick(() => { 9162 this.controller.refresh() 9163 }) 9164 Web({ src: 'www.example.com', controller: this.controller }) 9165 } 9166 } 9167 } 9168 ``` 9169 9170### registerJavaScriptProxy<sup>(deprecated)</sup> 9171 9172registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\<string\> }) 9173 9174注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用[refresh](#refreshdeprecated)接口生效。 9175 9176从API version 9开始不再维护，建议使用[registerJavaScriptProxy<sup>9+</sup>](js-apis-webview.md#registerjavascriptproxy)代替。 9177 9178**系统能力：** SystemCapability.Web.Webview.Core 9179 9180**参数：** 9181 9182| 参数名 | 类型 | 必填 | 说明 | 9183| ---------- | --------------- | ---- | ---------------------------------------- | 9184| object | object | 是 | 参与注册的应用侧JavaScript对象。可以声明方法，也可以声明属性，但是不支持h5直接调用。其中方法的参数和返回类型只能为string，number，boolean | 9185| name | string | 是 | 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。 | 9186| methodList | Array\<string\> | 是 | 参与注册的应用侧JavaScript对象的方法。 | 9187 9188**示例：** 9189 9190 ```ts 9191 // xxx.ets 9192 class TestObj { 9193 constructor() { 9194 } 9195 9196 test(): string { 9197 return "ArkUI Web Component" 9198 } 9199 9200 toString(): void { 9201 console.log('Web Component toString') 9202 } 9203 } 9204 9205 @Entry 9206 @Component 9207 struct Index { 9208 controller: WebController = new WebController() 9209 testObj = new TestObj(); 9210 build() { 9211 Column() { 9212 Row() { 9213 Button('Register JavaScript To Window').onClick(() => { 9214 this.controller.registerJavaScriptProxy({ 9215 object: this.testObj, 9216 name: "objName", 9217 methodList: ["test", "toString"], 9218 }) 9219 }) 9220 } 9221 Web({ src: $rawfile('index.html'), controller: this.controller }) 9222 .javaScriptAccess(true) 9223 } 9224 } 9225 } 9226 ``` 9227 9228 加载的html文件。 9229 ```html 9230 <!-- index.html --> 9231 <!DOCTYPE html> 9232 <html> 9233 <meta charset="utf-8"> 9234 <body> 9235 Hello world! 9236 </body> 9237 <script type="text/javascript"> 9238 function htmlTest() { 9239 str = objName.test("test function") 9240 console.log('objName.test result:'+ str) 9241 } 9242 </script> 9243 </html> 9244 9245 ``` 9246 9247### runJavaScript<sup>(deprecated)</sup> 9248 9249runJavaScript(options: { script: string, callback?: (result: string) => void }) 9250 9251异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。 9252 9253从API version 9开始不再维护，建议使用[runJavaScript<sup>9+</sup>](js-apis-webview.md#runjavascript)代替。 9254 9255**系统能力：** SystemCapability.Web.Webview.Core 9256 9257**参数：** 9258 9259| 参数名 | 类型 | 必填 | 说明 | 9260| -------- | ------------------------ | ---- | ---------------------------------------- | 9261| script | string | 是 | JavaScript脚本。 | 9262| callback | (result: string) => void | 否 | 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。 | 9263 9264**示例：** 9265 9266 ```ts 9267 // xxx.ets 9268 @Entry 9269 @Component 9270 struct WebComponent { 9271 controller: WebController = new WebController() 9272 @State webResult: string = '' 9273 build() { 9274 Column() { 9275 Text(this.webResult).fontSize(20) 9276 Web({ src: $rawfile('index.html'), controller: this.controller }) 9277 .javaScriptAccess(true) 9278 .onPageEnd((event) => { 9279 this.controller.runJavaScript({ 9280 script: 'test()', 9281 callback: (result: string)=> { 9282 this.webResult = result 9283 console.info(`The test() return value is: ${result}`) 9284 }}) 9285 if (event) { 9286 console.info('url: ', event.url) 9287 } 9288 }) 9289 } 9290 } 9291 } 9292 ``` 9293 加载的html文件。 9294 ```html 9295 <!-- index.html --> 9296 <!DOCTYPE html> 9297 <html> 9298 <meta charset="utf-8"> 9299 <body> 9300 Hello world! 9301 </body> 9302 <script type="text/javascript"> 9303 function test() { 9304 console.log('Ark WebComponent') 9305 return "This value is from index.html" 9306 } 9307 </script> 9308 </html> 9309 ``` 9310 9311### stop<sup>(deprecated)</sup> 9312 9313stop() 9314 9315停止页面加载。 9316 9317从API version 9开始不再维护，建议使用[stop<sup>9+</sup>](js-apis-webview.md#stop)代替。 9318 9319**系统能力：** SystemCapability.Web.Webview.Core 9320 9321**示例：** 9322 9323 ```ts 9324 // xxx.ets 9325 @Entry 9326 @Component 9327 struct WebComponent { 9328 controller: WebController = new WebController() 9329 9330 build() { 9331 Column() { 9332 Button('stop') 9333 .onClick(() => { 9334 this.controller.stop() 9335 }) 9336 Web({ src: 'www.example.com', controller: this.controller }) 9337 } 9338 } 9339 } 9340 ``` 9341 9342### clearHistory<sup>(deprecated)</sup> 9343 9344clearHistory(): void 9345 9346删除所有前进后退记录。 9347 9348从API version 9开始不再维护，建议使用[clearHistory<sup>9+</sup>](js-apis-webview.md#clearhistory)代替。 9349 9350**系统能力：** SystemCapability.Web.Webview.Core 9351 9352**示例：** 9353 9354 ```ts 9355 // xxx.ets 9356 @Entry 9357 @Component 9358 struct WebComponent { 9359 controller: WebController = new WebController() 9360 9361 build() { 9362 Column() { 9363 Button('clearHistory') 9364 .onClick(() => { 9365 this.controller.clearHistory() 9366 }) 9367 Web({ src: 'www.example.com', controller: this.controller }) 9368 } 9369 } 9370 } 9371 ``` 9372 9373## WebCookie 9374 9375通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有Web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。 9376 9377### constructor 9378 9379constructor() 9380 9381WebCookie的构造函数。 9382 9383**系统能力：** SystemCapability.Web.Webview.Core 9384 9385### setCookie<sup>(deprecated)</sup> 9386 9387setCookie() 9388 9389设置cookie，该方法为同步方法。设置成功返回true，否则返回false。 9390 9391从API version 9开始不再维护，建议使用[setCookie<sup>9+</sup>](js-apis-webview.md#setcookie)代替。 9392 9393**系统能力：** SystemCapability.Web.Webview.Core 9394 9395### saveCookie<sup>(deprecated)</sup> 9396 9397saveCookie() 9398 9399将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。 9400 9401从API version 9开始不再维护，建议使用[saveCookieAsync<sup>9+</sup>](js-apis-webview.md#savecookieasync)代替。 9402 9403**系统能力：** SystemCapability.Web.Webview.Core 9404 9405## ScriptItem<sup>11+</sup> 9406 9407通过[javaScriptOnDocumentStart](#javascriptondocumentstart11)属性注入到Web组件的ScriptItem对象。 9408 9409**系统能力：** SystemCapability.Web.Webview.Core 9410 9411| 名称 | 类型 | 必填 | 说明 | 9412| ----------- | -------------- | ---- | --------------------- | 9413| script | string | 是 | 需要注入、执行的JavaScript脚本。 | 9414| scriptRules | Array\<string> | 是 | 一组允许来源的匹配规则。<br>1.如果需要允许所有来源的网址，使用通配符“ * ”。<br>2.如果需要精确匹配，则描述网站地址，如"https:\//www\.example.com"。<br>3.如果模糊匹配网址，可以使用“ * ”通配符替代，如"https://*.example.com"。不允许使用"x. * .y.com"、" * foobar.com"等。<br>4.如果来源是ip地址，则使用规则2。<br>5.对于http/https以外的协议(自定义协议)，不支持使用精确匹配和模糊匹配，且必须以"://"结尾，例如"resource://"。<br>6.一组scriptRule中，如果其中一条不满足以上规则，则整组scriptRule都不生效。 | 9415 9416## WebNavigationType<sup>11+</sup> 9417 9418定义navigation类型。 9419 9420**系统能力：** SystemCapability.Web.Webview.Core 9421 9422| 名称 | 值 | 说明 | 9423| ----------------------------- | -- | ------------ | 9424| UNKNOWN | 0 | 未知类型。 | 9425| MAIN_FRAME_NEW_ENTRY | 1 | 主文档上产生的新的历史节点跳转。 | 9426| MAIN_FRAME_EXISTING_ENTRY | 2 | 主文档上产生的到已有的历史节点的跳转。 | 9427| NAVIGATION_TYPE_NEW_SUBFRAME | 4 | 子文档上产生的用户触发的跳转。 | 9428| NAVIGATION_TYPE_AUTO_SUBFRAME | 5 | 子文档上产生的非用户触发的跳转。 | 9429 9430## LoadCommittedDetails<sup>11+</sup> 9431 9432提供已提交跳转的网页的详细信息。 9433 9434**系统能力：** SystemCapability.Web.Webview.Core 9435 9436| 名称 | 类型 | 必填 | 说明 | 9437| ----------- | ------------------------------------ | ---- | --------------------- | 9438| isMainFrame | boolean | 是 | 是否是主文档。 | 9439| isSameDocument | boolean | 是 | 是否在不更改文档的情况下进行的网页跳转。在同文档跳转的示例：1.参考片段跳转；2.pushState或replaceState触发的跳转；3.同一页面历史跳转。 | 9440| didReplaceEntry | boolean | 是 | 是否提交的新节点替换了已有的节点。另外在一些子文档跳转的场景，虽然没有实际替换已有节点，但是有一些属性发生了变更。 | 9441| navigationType | [WebNavigationType](#webnavigationtype11) | 是 | 网页跳转的类型。 | 9442| url | string | 是 | 当前跳转网页的URL。 | 9443 9444## ThreatType<sup>11+</sup> 9445 9446定义网站风险类型。 9447 9448**系统能力：** SystemCapability.Web.Webview.Core 9449 9450| 名称 | 值 | 说明 | 9451| ---------------- | -- | ----------------------| 9452| THREAT_ILLEGAL | 0 | 非法网站。 | 9453| THREAT_FRAUD | 1 | 欺诈网站。 | 9454| THREAT_RISK | 2 | 存在安全风险的网站。 | 9455| THREAT_WARNING | 3 | 涉嫌包含不健康内容的网站。 | 9456 9457## OnNavigationEntryCommittedCallback<sup>11+</sup> 9458 9459type OnNavigationEntryCommittedCallback = (loadCommittedDetails: [LoadCommittedDetails](#loadcommitteddetails11)) => void 9460 9461导航条目提交时触发的回调。 9462 9463**系统能力：** SystemCapability.Web.Webview.Core 9464 9465**参数：** 9466 9467| 参数名 | 类型 | 必填 | 说明 | 9468| ------ | ------ | ---- | --------------------- | 9469| loadCommittedDetails | [LoadCommittedDetails](#loadcommitteddetails11) | 是 | 提供已提交跳转的网页的详细信息。 | 9470 9471## OnSafeBrowsingCheckResultCallback<sup>11+</sup> 9472 9473type OnSafeBrowsingCheckResultCallback = (threatType: ThreatType) => void 9474 9475网站安全风险检查触发的回调。 9476 9477**系统能力：** SystemCapability.Web.Webview.Core 9478 9479**参数：** 9480 9481| 参数名 | 类型 | 必填 | 说明 | 9482| ------ | ------ | ---- | --------------------- | 9483| threatType | [ThreatType](#threattype11) | 是 | 定义网站threat类型。 | 9484 9485## FullScreenEnterEvent<sup>12+</sup> 9486 9487Web组件进入全屏回调事件的详情。 9488 9489**系统能力：** SystemCapability.Web.Webview.Core 9490 9491| 名称 | 类型 | 必填 | 说明 | 9492| ----------- | ------------------------------------ | ---- | --------------------- | 9493| handler | [FullScreenExitHandler](#fullscreenexithandler9) | 是 | 用于退出全屏模式的函数句柄。 | 9494| videoWidth | number | 否 | 视频的宽度，单位：px。如果进入全屏的是 `<video>` 元素，表示其宽度；如果进入全屏的子元素中包含 `<video>` 元素，表示第一个子视频元素的宽度；其他情况下，为0。 | 9495| videoHeight | number | 否 | 视频的高度，单位：px。如果进入全屏的是 `<video>` 元素，表示其高度；如果进入全屏的子元素中包含 `<video>` 元素，表示第一个子视频元素的高度；其他情况下，为0。 | 9496 9497## OnFullScreenEnterCallback<sup>12+</sup> 9498 9499type OnFullScreenEnterCallback = (event: FullScreenEnterEvent) => void 9500 9501Web组件进入全屏时触发的回调。 9502 9503**系统能力：** SystemCapability.Web.Webview.Core 9504 9505**参数：** 9506 9507| 参数名 | 类型 | 必填 | 说明 | 9508| ------ | ------ | ---- | --------------------- | 9509| event | [FullScreenEnterEvent](#fullscreenenterevent12) | 是 | Web组件进入全屏的回调事件详情。 | 9510 9511## SslErrorEvent<sup>12+</sup> 9512 9513用户加载资源时发生SSL错误时触发的回调详情。 9514 9515**系统能力：** SystemCapability.Web.Webview.Core 9516 9517| 名称 | 类型 | 必填 | 说明 | 9518| ------- | ------------------------------------ | ---- | -------------- | 9519| handler | [SslErrorHandler](#sslerrorhandler9) | 是 | 通知Web组件用户操作行为。 | 9520| error | [SslError](#sslerror9枚举说明) | 是 | 错误码。 | 9521| url | string | 是 | url地址。 | 9522| originalUrl | string | 是 | 请求的原始url地址。 | 9523| referrer | string | 是 | referrer url地址。 | 9524| isFatalError | boolean | 是 | 是否是致命错误。 | 9525| isMainFrame | boolean | 是 | 是否是主资源。 | 9526 9527 9528## OnSslErrorEventCallback<sup>12+</sup> 9529 9530type OnSslErrorEventCallback = (sslErrorEvent: SslErrorEvent) => void 9531 9532用户加载资源时发生SSL错误时触发的回调。 9533 9534**系统能力：** SystemCapability.Web.Webview.Core 9535 9536**参数：** 9537 9538| 参数名 | 类型 | 必填 | 说明 | 9539| ------ | ------ | ---- | --------------------- | 9540| sslErrorEvent | [SslErrorEvent](#sslerrorevent12) | 是 | 用户加载资源时发生SSL错误时触发的回调详情。 | 9541 9542## NativeEmbedStatus<sup>11+</sup> 9543 9544定义同层标签生命周期，当加载页面中有同层标签会触发CREATE，同层标签移动或者放大会触发UPDATE，退出页面会触发DESTROY。 9545 9546**系统能力：** SystemCapability.Web.Webview.Core 9547 9548| 名称 | 值 | 说明 | 9549| ----------------------------- | -- | ------------ | 9550| CREATE | 0 | 同层标签创建。 | 9551| UPDATE | 1 | 同层标签更新。 | 9552| DESTROY | 2 | 同层标签销毁。 | 9553| ENTER_BFCACHE<sup>12+</sup> | 3 | 同层标签进入BFCache。 | 9554| LEAVE_BFCACHE<sup>12+</sup> | 4 | 同层标签离开BFCache。 | 9555 9556## NativeEmbedInfo<sup>11+</sup> 9557 9558提供同层标签的详细信息。 9559 9560**系统能力：** SystemCapability.Web.Webview.Core 9561 9562| 名称 | 类型 | 必填 | 说明 | 9563|-------------------| ------------------------------------ | ---- |---------------------------| 9564| id | string | 否 | 同层标签的id信息。 | 9565| type | string | 否 | 同层标签的type信息，统一为小写字符。 | 9566| src | string | 否 | 同层标签的src信息。 | 9567| width | number | 否 | 同层标签的宽，单位为px。 | 9568| height | number | 否 | 同层标签的高，单位为px。 | 9569| url | string | 否 | 同层标签的url信息。 | 9570| tag<sup>12+</sup> | string | 否 | 标签名，统一为大写字符。 | 9571| params<sup>12+</sup> | Map<string, string> | 否 | object标签包含的param标签键值对列表，该map本质为Object类型，请使用Object提供的方法操作该对象。 | 9572| position<sup>12+</sup> | Position | 否 | 同层标签在屏幕坐标系中相对于Web组件的位置信息，此处区别于标准Position，单位为px。 | 9573 9574## NativeEmbedDataInfo<sup>11+</sup> 9575 9576提供同层标签生命周期变化的详细信息。 9577 9578**系统能力：** SystemCapability.Web.Webview.Core 9579 9580| 名称 | 类型 | 必填 | 说明 | 9581| ----------- | ------------------------------------ | ---- | --------------------- | 9582| status | [NativeEmbedStatus](#nativeembedstatus11) | 否 | 同层标签生命周期状态。 | 9583| surfaceId | string | 否 | NativeImage的psurfaceid。 | 9584| embedId | string | 否 | 同层标签的唯一id。 | 9585| info | [NativeEmbedInfo](#nativeembedinfo11) | 否 | 同层标签的详细信息。 | 9586 9587## NativeEmbedTouchInfo<sup>11+</sup> 9588 9589提供手指触摸到同层标签的详细信息。 9590 9591**系统能力：** SystemCapability.Web.Webview.Core 9592 9593| 名称 | 类型 | 必填 | 说明 | 9594| ----------- | ------------------------------------ | ---- | --------------------- | 9595| embedId | string | 否 | 同层标签的唯一id。 | 9596| touchEvent | [TouchEvent](../apis-arkui/arkui-ts/ts-universal-events-touch.md#touchevent对象说明) | 否 | 手指触摸动作信息。 | 9597| result<sup>12+</sup> | [EventResult](#eventresult12) | 否 | 通知Web组件手势事件的消费结果。 | 9598 9599## FirstMeaningfulPaint<sup>12+</sup> 9600 9601提供网页绘制页面主要内容的详细信息。 9602 9603**系统能力：** SystemCapability.Web.Webview.Core 9604 9605| 名称 | 类型 | 必填 | 说明 | 9606| ------------------------ | ------ | ---- | -------------------------------------- | 9607| navigationStartTime | number | 否 | 导航条加载时间，单位以微秒表示。 | 9608| firstMeaningfulPaintTime | number | 否 | 绘制页面主要内容时间，单位以毫秒表示。 | 9609 9610## OnFirstMeaningfulPaintCallback<sup>12+</sup> 9611 9612type OnFirstMeaningfulPaintCallback = (firstMeaningfulPaint: [FirstMeaningfulPaint](#firstmeaningfulpaint12)) => void 9613 9614网页绘制页面度量信息的回调，当网页加载完页面主要内容时会触发该回调。 9615 9616**系统能力：** SystemCapability.Web.Webview.Core 9617 9618**参数：** 9619 9620| 参数名 | 类型 | 必填 | 说明 | 9621| ------ | ------ | ---- | --------------------- | 9622| firstMeaningfulPaint | [FirstMeaningfulPaint](#firstmeaningfulpaint12) | 是 | 绘制页面主要内容度量的详细信息。 | 9623 9624## LargestContentfulPaint<sup>12+</sup> 9625 9626提供网页绘制页面主要内容的详细信息。 9627 9628**系统能力：** SystemCapability.Web.Webview.Core 9629 9630| 名称 | 类型 | 必填 | 说明 | 9631| ------------------------- | ------ | ---- | ---------------------------------------- | 9632| navigationStartTime | number | 否 | 导航条加载时间，单位以微秒表示。 | 9633| largestImagePaintTime | number | 否 | 最大图片加载的时间，单位是以毫秒表示。 | 9634| largestTextPaintTime | number | 否 | 最大文本加载时间，单位是以毫秒表示。 | 9635| largestImageLoadStartTime | number | 否 | 最大图片开始加载时间，单位是以毫秒表示。 | 9636| largestImageLoadEndTime | number | 否 | 最大图片结束记载时间，单位是以毫秒表示。 | 9637| imageBPP | number | 否 | 最大图片像素位数。 | 9638 9639## OnLargestContentfulPaintCallback<sup>12+</sup> 9640 9641type OnLargestContentfulPaintCallback = (largestContentfulPaint: [LargestContentfulPaint](#largestcontentfulpaint12 9642)) => void 9643 9644网页绘制页面最大内容度量信息的回调。 9645 9646**系统能力：** SystemCapability.Web.Webview.Core 9647 9648**参数：** 9649 9650| 参数名 | 类型 | 必填 | 说明 | 9651| ------ | ------ | ---- | --------------------- | 9652| largestContentfulPaint | [LargestContentfulPaint](#largestcontentfulpaint12) | 是 | 网页绘制页面最大内容度量的详细信息。 | 9653 9654## IntelligentTrackingPreventionDetails<sup>12+</sup> 9655 9656提供智能防跟踪拦截的详细信息。 9657 9658**系统能力：** SystemCapability.Web.Webview.Core 9659 9660| 名称 | 类型 | 必填 | 说明 | 9661| ------------- | ------------------------------------| ----- | ------------ | 9662| host | string | 是 | 网站域名。 | 9663| trackerHost | string | 是 | 追踪者域名。 | 9664 9665## OnIntelligentTrackingPreventionCallback<sup>12+</sup> 9666 9667type OnIntelligentTrackingPreventionCallback = (details: IntelligentTrackingPreventionDetails) => void 9668 9669当跟踪者cookie被拦截时触发的回调。 9670 9671**系统能力：** SystemCapability.Web.Webview.Core 9672 9673**参数：** 9674 9675| 参数名 | 类型 | 必填 | 说明 | 9676| ------ | ------ | ---- | --------------------- | 9677| details | [IntelligentTrackingPreventionDetails](#intelligenttrackingpreventiondetails12) | 是 | 提供智能防跟踪拦截的详细信息。 | 9678 9679## OnOverrideUrlLoadingCallback<sup>12+</sup> 9680 9681type OnOverrideUrlLoadingCallback = (webResourceRequest: WebResourceRequest) => boolean 9682 9683onOverrideUrlLoading的回调。 9684 9685**系统能力：** SystemCapability.Web.Webview.Core 9686 9687**参数：** 9688 9689| 参数名 | 类型 | 必填 | 说明 | 9690| ------------------ | ------- | ---- | ------------- | 9691| webResourceRequest | [WebResourceRequest](#webresourcerequest) | 是 | url请求的相关信息。| 9692 9693**返回值：** 9694 9695| 类型 | 说明 | 9696| ------- | ------------------------ | 9697| boolean | 返回true表示阻止此次加载，否则允许此次加载。 | 9698 9699## RenderMode<sup>12+</sup>枚举说明 9700 9701定义Web组件的渲染方式，默认为异步渲染模式。 9702 9703建议使用异步渲染模式，异步渲染模式有更好的性能和更低的功耗。 9704 9705**系统能力：** SystemCapability.Web.Webview.Core 9706 9707| 名称 | 值 | 说明 | 9708| ----------------------------- | -- | ------------ | 9709| ASYNC_RENDER | 0 | Web组件异步渲染模式，ArkWeb组件作为图形surface节点，独立送显，Web组件的宽度最大规格不超过7,680 px（物理像素）。 | 9710| SYNC_RENDER | 1 | Web组件同步渲染模式，ArkWeb组件作为图形canvas节点，跟随系统组件一起送显，可以渲染更长的Web组件内容，Web组件的宽度最大规格不超过500,000 px（物理像素）。 | 9711 9712## NativeMediaPlayerConfig<sup>12+</sup> 9713 9714用于[开启应用接管网页媒体播放功能](#enablenativemediaplayer12)的配置信息。 9715 9716**系统能力：** SystemCapability.Web.Webview.Core 9717 9718| 名称 | 类型 | 必填 | 说明 | 9719|------|------|------|------| 9720| enable | boolean | 是 | 是否开启该功能。<br/> `true` : 开启 <br/> `false` : 关闭(默认值) | 9721| shouldOverlay | boolean | 是 | 开启该功能后， 应用接管网页视频的播放器画面是否覆盖网页内容。<br/> `true` : 是，改变视频图层的高度，使其覆盖网页内容 <br/> `false` : 否(默认值), 不覆盖，跟原视频图层高度一样，嵌入在网页中。 | 9722 9723## RenderProcessNotRespondingReason<sup>12+</sup> 9724 9725触发渲染进程无响应回调的原因。 9726 9727**系统能力：** SystemCapability.Web.Webview.Core 9728 9729| 名称 | 值 | 说明 | 9730| ----------------------------- | -- | ------------ | 9731| INPUT_TIMEOUT | 0 | 发送给渲染进程的input事件响应超时。 | 9732| NAVIGATION_COMMIT_TIMEOUT | 1 | 新的网页加载导航响应超时。 | 9733 9734## RenderProcessNotRespondingData<sup>12+</sup> 9735 9736提供渲染进程无响应的详细信息。 9737 9738**系统能力：** SystemCapability.Web.Webview.Core 9739 9740| 名称 | 类型 | 必填 | 说明 | 9741| ------------------------ | ------ | ---- | -------------------------------------- | 9742| jsStack | string | 是 | 网页的javaScript调用栈信息。 | 9743| pid | number | 是 | 网页的进程id。 | 9744| reason | [RenderProcessNotRespondingReason](#renderprocessnotrespondingreason12) | 是 | 触发渲染进程无响应回调的原因。 | 9745 9746## OnRenderProcessNotRespondingCallback<sup>12+</sup> 9747 9748type OnRenderProcessNotRespondingCallback = (data : RenderProcessNotRespondingData) => void 9749 9750渲染进程无响应时触发的回调。 9751 9752**系统能力：** SystemCapability.Web.Webview.Core 9753 9754**参数：** 9755 9756| 参数名 | 类型 | 必填 | 说明 | 9757| ------ | ------ | ---- | --------------------- | 9758| data | [RenderProcessNotRespondingData](#renderprocessnotrespondingdata12) | 是 | 渲染进程无响应的详细信息。 | 9759 9760## OnRenderProcessRespondingCallback<sup>12+</sup> 9761 9762type OnRenderProcessRespondingCallback = () => void 9763 9764渲染进程由无响应状态变回正常运行状态时触发该回调。 9765 9766**系统能力：** SystemCapability.Web.Webview.Core 9767 9768## ViewportFit<sup>12+</sup> 9769 9770网页meta中viewport-fit配置的视口类型。 9771 9772**系统能力：** SystemCapability.Web.Webview.Core 9773 9774| 名称 | 值 | 说明 | 9775| ----------------------------- | -- | ------------ | 9776| AUTO | 0 | 默认值，整个网页可见。 | 9777| CONTAINS | 1 | 初始布局视口和视觉视口为适应设备显示屏的最大矩形内。 | 9778| COVER | 2| 初始布局视口和视觉视口为设备物理屏幕的外接矩形内。 | 9779 9780## OnViewportFitChangedCallback<sup>12+</sup> 9781 9782type OnViewportFitChangedCallback = (viewportFit: ViewportFit) => void 9783 9784网页meta中viewport-fit配置项更改时触发的回调。 9785 9786**系统能力：** SystemCapability.Web.Webview.Core 9787 9788**参数：** 9789 9790| 参数名 | 类型 | 必填 | 说明 | 9791| ------ | ------ | ---- | --------------------- | 9792| viewportFit | [ViewportFit](#viewportfit12) | 是 | 网页meta中viewport-fit配置的视口类型。 | 9793 9794## ExpandedMenuItemOptions<sup>12+</sup> 9795 9796自定义菜单扩展项。 9797 9798**系统能力：** SystemCapability.Web.Webview.Core 9799 9800| 名称 | 类型 | 必填 | 说明 | 9801| ---------- | -----------------------------------------------------| ------ | ---------------- | 9802| content | [ResourceStr](../apis-arkui/arkui-ts/ts-types.md#resourcestr) | 是 | 显示内容。 | 9803| startIcon | [ResourceStr](../apis-arkui/arkui-ts/ts-types.md#resourcestr) | 否 | 显示图标。 | 9804| action | (selectedText: {plainText: string}) => void | 是 | 选中的文本信息。| 9805 9806## WebKeyboardAvoidMode<sup>12+</sup> 9807 9808软键盘避让的模式。 9809 9810**系统能力：** SystemCapability.Web.Webview.Core 9811 9812| 名称 | 值 | 说明 | 9813| ------------------ | -- | ------------ | 9814| RESIZE_VISUAL | 0 | 软键盘避让时，仅调整可视视口大小，不调整布局视口大小。 | 9815| RESIZE_CONTENT | 1 | 默认值，软键盘避让时，同时调整可视视口和布局视口的大小。 | 9816| OVERLAYS_CONTENT | 2 | 不调整任何视口大小，不会触发软键盘避让。 | 9817 9818## OnPageEndEvent<sup>12+</sup> 9819 9820定义网页加载结束时触发的函数。 9821 9822**系统能力：** SystemCapability.Web.Webview.Core 9823 9824| 名称 | 类型 | 必填 | 说明 | 9825| -------------- | ---- | ---- | ---------------------------------------- | 9826| url | string | 是 | 页面的URL地址。 | 9827 9828## OnPageBeginEvent<sup>12+</sup> 9829 9830定义网页加载开始时触发的函数。 9831 9832**系统能力：** SystemCapability.Web.Webview.Core 9833 9834| 名称 | 类型 | 必填 | 说明 | 9835| -------------- | ---- | ---- | ---------------------------------------- | 9836| url | string | 是 | 页面的URL地址。 | 9837 9838## OnProgressChangeEvent<sup>12+</sup> 9839 9840定义网页加载进度变化时触发该回调。 9841 9842**系统能力：** SystemCapability.Web.Webview.Core 9843 9844| 名称 | 类型 | 必填 | 说明 | 9845| -------------- | ---- | ---- | ---------------------------------------- | 9846| newProgress | number | 是 | 新的加载进度，取值范围为0到100的整数。 | 9847 9848## OnTitleReceiveEvent<sup>12+</sup> 9849 9850定义网页document标题更改时触发该回调。 9851 9852**系统能力：** SystemCapability.Web.Webview.Core 9853 9854| 名称 | 类型 | 必填 | 说明 | 9855| -------------- | ---- | ---- | ---------------------------------------- | 9856| title | string | 是 | document标题内容。 | 9857 9858## OnGeolocationShowEvent<sup>12+</sup> 9859 9860定义通知用户收到地理位置信息获取请求。 9861 9862**系统能力：** SystemCapability.Web.Webview.Core 9863 9864| 名称 | 类型 | 必填 | 说明 | 9865| -------------- | ---- | ---- | ---------------------------------------- | 9866| origin | string | 是 | 指定源的字符串索引。 | 9867| geolocation | [JsGeolocation](#jsgeolocation) | 是 | 通知Web组件用户操作行为。 | 9868 9869## OnAlertEvent<sup>12+</sup> 9870 9871定义网页触发alert()告警弹窗时触发回调。 9872 9873**系统能力：** SystemCapability.Web.Webview.Core 9874 9875| 名称 | 类型 | 必填 | 说明 | 9876| -------------- | ---- | ---- | ---------------------------------------- | 9877| url | string | 是 | 当前显示弹窗所在网页的URL。 | 9878| message | string | 是 | 弹窗中显示的信息。 | 9879| result | [JsResult](#jsresult) | 是 | 通知Web组件用户操作行为。 | 9880 9881## OnBeforeUnloadEvent<sup>12+</sup> 9882 9883定义刷新或关闭场景下，在即将离开当前页面时触发此回调。 9884 9885**系统能力：** SystemCapability.Web.Webview.Core 9886 9887| 名称 | 类型 | 必填 | 说明 | 9888| -------------- | ---- | ---- | ---------------------------------------- | 9889| url | string | 是 | 当前显示弹窗所在网页的URL。 | 9890| message | string | 是 | 弹窗中显示的信息。 | 9891| result | [JsResult](#jsresult) | 是 | 通知Web组件用户操作行为。 | 9892 9893## OnConfirmEvent<sup>12+</sup> 9894 9895定义网页调用confirm()告警时触发此回调。 9896 9897**系统能力：** SystemCapability.Web.Webview.Core 9898 9899| 名称 | 类型 | 必填 | 说明 | 9900| -------------- | ---- | ---- | ---------------------------------------- | 9901| url | string | 是 | 当前显示弹窗所在网页的URL。 | 9902| message | string | 是 | 弹窗中显示的信息。 | 9903| result | [JsResult](#jsresult) | 是 | 通知Web组件用户操作行为。 | 9904 9905## OnPromptEvent<sup>12+</sup> 9906 9907定义网页调用prompt()告警时触发此回调。 9908 9909**系统能力：** SystemCapability.Web.Webview.Core 9910 9911| 名称 | 类型 | 必填 | 说明 | 9912| -------------- | ---- | ---- | ---------------------------------------- | 9913| url | string | 是 | 当前显示弹窗所在网页的URL。 | 9914| message | string | 是 | 弹窗中显示的信息。 | 9915| value | string | 是 | 提示对话框的信息。 | 9916| result | [JsResult](#jsresult) | 是 | 通知Web组件用户操作行为。 | 9917 9918## OnConsoleEvent<sup>12+</sup> 9919 9920定义通知宿主应用JavaScript console消息。 9921 9922**系统能力：** SystemCapability.Web.Webview.Core 9923 9924| 名称 | 类型 | 必填 | 说明 | 9925| -------------- | ---- | ---- | ---------------------------------------- | 9926| message | [ConsoleMessage](#consolemessage) | 是 | 触发的控制台信息。 | 9927 9928## OnErrorReceiveEvent<sup>12+</sup> 9929 9930定义网页加载遇到错误时触发该回调。 9931 9932**系统能力：** SystemCapability.Web.Webview.Core 9933 9934| 名称 | 类型 | 必填 | 说明 | 9935| -------------- | ---- | ---- | ---------------------------------------- | 9936| request | [WebResourceRequest](#webresourcerequest) | 是 | 网页请求的封装信息。 | 9937| error | [WebResourceError](#webresourceerror) | 是 | 网页加载资源错误的封装信息 。 | 9938 9939## OnHttpErrorReceiveEvent<sup>12+</sup> 9940 9941定义网页收到加载资源加载HTTP错误时触发。 9942 9943**系统能力：** SystemCapability.Web.Webview.Core 9944 9945| 名称 | 类型 | 必填 | 说明 | 9946| -------------- | ---- | ---- | ---------------------------------------- | 9947| request | [WebResourceRequest](#webresourcerequest) | 是 | 网页请求的封装信息。 | 9948| response | [WebResourceResponse](#webresourceresponse) | 是 | 资源响应的封装信息。 | 9949 9950## OnDownloadStartEvent<sup>12+</sup> 9951 9952定义通知主应用开始下载一个文件。 9953 9954**系统能力：** SystemCapability.Web.Webview.Core 9955 9956| 名称 | 类型 | 必填 | 说明 | 9957| -------------- | ---- | ---- | ---------------------------------------- | 9958| url | string | 是 | 文件下载的URL。 | 9959| userAgent | string | 是 | 用于下载的用户代理。 | 9960| contentDisposition | string | 是 | 服务器返回的 Content-Disposition响应头，可能为空。 | 9961| mimetype | string | 是 | 服务器返回内容媒体类型（MIME）信息。 | 9962| contentLength | number | 是 | 服务器返回文件的长度。 | 9963 9964## OnRefreshAccessedHistoryEvent<sup>12+</sup> 9965 9966定义网页刷新访问历史记录时触发。 9967 9968**系统能力：** SystemCapability.Web.Webview.Core 9969 9970| 名称 | 类型 | 必填 | 说明 | 9971| -------------- | ---- | ---- | ---------------------------------------- | 9972| url | string | 是 | 访问的url。 | 9973| isRefreshed | boolean | 是 | true表示该页面是被重新加载的（调用[refresh<sup>9+</sup>](js-apis-webview.md#refresh)接口），false表示该页面是新加载的。 | 9974 9975## OnRenderExitedEvent<sup>12+</sup> 9976 9977定义渲染过程退出时触发。 9978 9979**系统能力：** SystemCapability.Web.Webview.Core 9980 9981| 名称 | 类型 | 必填 | 说明 | 9982| -------------- | ---- | ---- | ---------------------------------------- | 9983| renderExitReason | [RenderExitReason](#renderexitreason9枚举说明) | 是 | 渲染进程异常退出的具体原因。 | 9984 9985## OnShowFileSelectorEvent<sup>12+</sup> 9986 9987定义文件选择器结果。 9988 9989**系统能力：** SystemCapability.Web.Webview.Core 9990 9991| 名称 | 类型 | 必填 | 说明 | 9992| -------------- | ---- | ---- | ---------------------------------------- | 9993| result | [FileSelectorResult](#fileselectorresult9) | 是 | 用于通知Web组件文件选择的结果。 | 9994| fileSelector | [FileSelectorParam](#fileselectorparam9) | 是 | 文件选择器的相关信息。 | 9995 9996## OnResourceLoadEvent<sup>12+</sup> 9997 9998定义加载url时触发。 9999 10000**系统能力：** SystemCapability.Web.Webview.Core 10001 10002| 名称 | 类型 | 必填 | 说明 | 10003| -------------- | ---- | ---- | ---------------------------------------- | 10004| url | string | 是 | 所加载的资源文件url信息。 | 10005 10006## OnScaleChangeEvent<sup>12+</sup> 10007 10008定义当前页面显示比例的变化时触发。 10009 10010**系统能力：** SystemCapability.Web.Webview.Core 10011 10012| 名称 | 类型 | 必填 | 说明 | 10013| -------------- | ---- | ---- | ---------------------------------------- | 10014| oldScale | number | 是 | 变化前的显示比例百分比。 | 10015| newScale | number | 是 | 变化后的显示比例百分比。 | 10016 10017## OnHttpAuthRequestEvent<sup>12+</sup> 10018 10019定义通知收到http auth认证请求。 10020 10021**系统能力：** SystemCapability.Web.Webview.Core 10022 10023| 名称 | 类型 | 必填 | 说明 | 10024| -------------- | ---- | ---- | ---------------------------------------- | 10025| handler | [HttpAuthHandler](#httpauthhandler9) | 是 | 通知Web组件用户操作行为。 | 10026| host | string | 是 | HTTP身份验证凭据应用的主机。 | 10027| realm | string | 是 | HTTP身份验证凭据应用的域。 | 10028 10029## OnInterceptRequestEvent<sup>12+</sup> 10030 10031定义当Web组件加载url之前触发。 10032 10033**系统能力：** SystemCapability.Web.Webview.Core 10034 10035| 名称 | 类型 | 必填 | 说明 | 10036| -------------- | ---- | ---- | ---------------------------------------- | 10037| request | [WebResourceRequest](#webresourcerequest) | 是 | url请求的相关信息。 | 10038 10039## OnPermissionRequestEvent<sup>12+</sup> 10040 10041定义通知收到获取权限请求。 10042 10043**系统能力：** SystemCapability.Web.Webview.Core 10044 10045| 名称 | 类型 | 必填 | 说明 | 10046| -------------- | ---- | ---- | ---------------------------------------- | 10047| request | [PermissionRequest](#permissionrequest9) | 是 | 通知Web组件用户操作行为。 | 10048 10049## OnScreenCaptureRequestEvent<sup>12+</sup> 10050 10051定义通知收到屏幕捕获请求。 10052 10053**系统能力：** SystemCapability.Web.Webview.Core 10054 10055| 名称 | 类型 | 必填 | 说明 | 10056| -------------- | ---- | ---- | ---------------------------------------- | 10057| handler | [ScreenCaptureHandler](#screencapturehandler10) | 是 | 通知Web组件用户操作行为。 | 10058 10059## OnContextMenuShowEvent<sup>12+</sup> 10060 10061定义调用时触发的回调，以允许自定义显示上下文菜单。 10062 10063**系统能力：** SystemCapability.Web.Webview.Core 10064 10065| 名称 | 类型 | 必填 | 说明 | 10066| -------------- | ---- | ---- | ---------------------------------------- | 10067| param | [WebContextMenuParam](#webcontextmenuparam9) | 是 | 菜单相关参数。 | 10068| result | [WebContextMenuResult](#webcontextmenuresult9) | 是 | 菜单相应事件传入内核。 | 10069 10070## OnSearchResultReceiveEvent<sup>12+</sup> 10071 10072定义通知调用方网页页内查找的结果。 10073 10074**系统能力：** SystemCapability.Web.Webview.Core 10075 10076| 名称 | 类型 | 必填 | 说明 | 10077| -------------- | ---- | ---- | ---------------------------------------- | 10078| activeMatchOrdinal | number | 是 | 当前匹配的查找项的序号（从0开始）。 | 10079| numberOfMatches | number | 是 | 所有匹配到的关键词的个数。 | 10080| isDoneCounting | boolean | 是 | 当次页内查找操作是否结束。该方法可能会回调多次，直到isDoneCounting为true为止。 | 10081 10082## OnScrollEvent<sup>12+</sup> 10083 10084定义滚动条滑动到指定位置时触发。 10085 10086**系统能力：** SystemCapability.Web.Webview.Core 10087 10088| 名称 | 类型 | 必填 | 说明 | 10089| -------------- | ---- | ---- | ---------------------------------------- | 10090| xOffset | number | 是 | 以网页最左端为基准，水平滚动条滚动所在位置。 | 10091| yOffset | number | 是 | 以网页最上端为基准，竖直滚动条滚动所在位置。 | 10092 10093## OnSslErrorEventReceiveEvent<sup>12+</sup> 10094 10095定义网页收到SSL错误时触发。 10096 10097**系统能力：** SystemCapability.Web.Webview.Core 10098 10099| 名称 | 类型 | 必填 | 说明 | 10100| -------------- | ---- | ---- | ---------------------------------------- | 10101| handler | [SslErrorHandler](#sslerrorhandler9) | 是 | 通知Web组件用户操作行为。 | 10102| error | [SslError](#sslerror9枚举说明) | 是 | 错误码。 | 10103| certChainData<sup>15+</sup> | Array<Uint8Array\> | 否 | 证书链数据。 | 10104 10105## OnClientAuthenticationEvent<sup>12+</sup> 10106 10107定义当需要用户提供SSL客户端证书时触发回调。 10108 10109**系统能力：** SystemCapability.Web.Webview.Core 10110 10111| 名称 | 类型 | 必填 | 说明 | 10112| -------------- | ---- | ---- | ---------------------------------------- | 10113| handler | [ClientAuthenticationHandler](#clientauthenticationhandler9) | 是 | 通知Web组件用户操作行为。 | 10114| host | string | 是 | 请求证书服务器的主机名。 | 10115| port | number | 是 | 请求证书服务器的端口号。 | 10116| keyTypes | Array<string\> | 是 | 可接受的非对称秘钥类型。 | 10117| issuers | Array<string\> | 是 | 与私钥匹配的证书可接受颁发者。 | 10118 10119## OnWindowNewEvent<sup>12+</sup> 10120 10121定义网页要求用户创建窗口时触发的回调。 10122 10123**系统能力：** SystemCapability.Web.Webview.Core 10124 10125| 名称 | 类型 | 必填 | 说明 | 10126| -------------- | ---- | ---- | ---------------------------------------- | 10127| isAlert | boolean | 是 | true代表请求创建对话框，false代表新标签页。 | 10128| isUserTrigger | boolean | 是 | true代表用户触发，false代表非用户触发。 | 10129| targetUrl | string | 是 | 目标url。 | 10130| handler | [ControllerHandler](#controllerhandler9) | 是 | 用于设置新建窗口的WebviewController实例。 | 10131 10132## OnTouchIconUrlReceivedEvent<sup>12+</sup> 10133 10134定义设置接收到apple-touch-icon url地址时的回调函数。 10135 10136**系统能力：** SystemCapability.Web.Webview.Core 10137 10138| 名称 | 类型 | 必填 | 说明 | 10139| -------------- | ---- | ---- | ---------------------------------------- | 10140| url | string | 是 | 接收到的apple-touch-icon url地址。 | 10141| precomposed | boolean | 是 | 对应apple-touch-icon是否为预合成。 | 10142 10143## OnFaviconReceivedEvent<sup>12+</sup> 10144 10145定义应用为当前页面接收到新的favicon时的回调函数。 10146 10147**系统能力：** SystemCapability.Web.Webview.Core 10148 10149| 名称 | 类型 | 必填 | 说明 | 10150| -------------- | ---- | ---- | ---------------------------------------- | 10151| favicon | [PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 接收到的favicon图标的PixelMap对象。 | 10152 10153## OnPageVisibleEvent<sup>12+</sup> 10154 10155定义旧页面不再呈现，新页面即将可见时触发的回调函数。 10156 10157**系统能力：** SystemCapability.Web.Webview.Core 10158 10159| 名称 | 类型 | 必填 | 说明 | 10160| -------------- | ---- | ---- | ---------------------------------------- | 10161| url | string | 是 | 旧页面不再呈现，新页面即将可见时新页面的url地址。 | 10162 10163## OnDataResubmittedEvent<sup>12+</sup> 10164 10165定义网页表单可以重新提交时触发的回调函数。 10166 10167**系统能力：** SystemCapability.Web.Webview.Core 10168 10169| 名称 | 类型 | 必填 | 说明 | 10170| -------------- | ---- | ---- | ---------------------------------------- | 10171| handler | [DataResubmissionHandler](#dataresubmissionhandler9) | 是 | 表单数据重新提交句柄。 | 10172 10173## OnAudioStateChangedEvent<sup>12+</sup> 10174 10175定义网页上的音频播放状态发生改变时的回调函数。 10176 10177**系统能力：** SystemCapability.Web.Webview.Core 10178 10179| 名称 | 类型 | 必填 | 说明 | 10180| -------------- | ---- | ---- | ---------------------------------------- | 10181| playing | boolean | 是 | 当前页面的音频播放状态，true表示正在播放，false表示未播放。 | 10182 10183## OnFirstContentfulPaintEvent<sup>12+</sup> 10184 10185定义网页首次内容绘制回调函数。 10186 10187**系统能力：** SystemCapability.Web.Webview.Core 10188 10189| 名称 | 类型 | 必填 | 说明 | 10190| -------------- | ---- | ---- | ---------------------------------------- | 10191| navigationStartTick | number | 是 | navigation开始的时间，单位以微秒表示。 | 10192| firstContentfulPaintMs | number | 是 | 从navigation开始第一次绘制内容的时间，单位是以毫秒表示。 | 10193 10194## OnLoadInterceptEvent<sup>12+</sup> 10195 10196定义截获资源加载时触发的回调。 10197 10198**系统能力：** SystemCapability.Web.Webview.Core 10199 10200| 名称 | 类型 | 必填 | 说明 | 10201| -------------- | ---- | ---- | ---------------------------------------- | 10202| data | [WebResourceRequest](#webresourcerequest) | 是 | url请求的相关信息。 | 10203 10204## OnOverScrollEvent<sup>12+</sup> 10205 10206定义网页过度滚动时触发的回调。 10207 10208**系统能力：** SystemCapability.Web.Webview.Core 10209 10210| 名称 | 类型 | 必填 | 说明 | 10211| -------------- | ---- | ---- | ---------------------------------------- | 10212| xOffset | number | 是 | 以网页最左端为基准，水平过度滚动的偏移量。 | 10213| yOffset | number | 是 | 以网页最上端为基准，竖直过度滚动的偏移量。 | 10214 10215## JavaScriptProxy<sup>12+</sup> 10216 10217定义要注入的JavaScript对象。 10218 10219**系统能力：** SystemCapability.Web.Webview.Core 10220 10221| 名称 | 类型 | 必填 | 说明 | 10222| -------------- | ---- | ---- | ---------------------------------------- | 10223| object | object | 是 | 参与注册的对象。只能声明方法，不能声明属性。 | 10224| name | string | 是 | 注册对象的名称，与window中调用的对象名一致。 | 10225| methodList | Array\<string\> | 是 | 参与注册的应用侧JavaScript对象的同步方法。 | 10226| controller | [WebController](#webcontroller) \| [WebviewController<sup>9+</sup>](#webviewcontroller9) | 是 | - | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 | 10227| asyncMethodList<sup>12+</sup> | Array\<string\> | 否 | 参与注册的应用侧JavaScript对象的异步方法。异步方法无法获取返回值。 | 10228| permission<sup>12+</sup> | string | 否 | json字符串，默认为空，通过该字符串配置JSBridge的权限管控，可以定义object、method一级的url白名单。<br>示例请参考[前端页面调用应用侧函数](../../web/web-in-page-app-function-invoking.md)。 | 10229 10230## AdsBlockedDetails<sup>12+</sup> 10231 10232发生广告拦截时，广告资源信息。 10233 10234**系统能力：** SystemCapability.Web.Webview.Core 10235 10236| 名称 | 类型 | 必填 | 说明 | 10237| ------- | -------------------------------------------------------------------------------- | ---- | ------------------------- | 10238| url | string | 是 | 发生广告过滤的页面url。 | 10239| adsBlocked | Array\<string\> | 是 | 被过滤的资源的url或dompath标识，被过滤的多个对象url相同则可能出现重复元素。 | 10240 10241## OnAdsBlockedCallback<sup>12+</sup> 10242 10243type OnAdsBlockedCallback = (details: AdsBlockedDetails) => void 10244 10245当页面发生广告过滤时触发此回调。 10246 10247**系统能力：** SystemCapability.Web.Webview.Core 10248 10249**参数：** 10250 10251| 参数名 | 类型 | 必填 | 说明 | 10252| -------------------- | ----------------------------------------------- | ---- | -------------------------------- | 10253| details | [AdsBlockedDetails](#adsblockeddetails12) | 是 | 发生广告拦截时，广告资源信息。 | 10254 10255## NativeEmbedVisibilityInfo<sup>12+</sup> 10256 10257提供同层标签的可见性信息。 10258 10259**系统能力：** SystemCapability.Web.Webview.Core 10260 10261| 名称 | 类型 | 必填 | 说明 | 10262| ------------- | ------------------------------------| ----- | ------------------ | 10263| visibility | boolean | 是 | 可见性。 | 10264| embedId | string | 是 | 同层渲染标签的唯一id。 | 10265 10266## OnNativeEmbedVisibilityChangeCallback<sup>12+</sup> 10267 10268type OnNativeEmbedVisibilityChangeCallback = (nativeEmbedVisibilityInfo: NativeEmbedVisibilityInfo) => void 10269 10270当同层标签可见性变化时触发该回调。 10271 10272**系统能力：** SystemCapability.Web.Webview.Core 10273 10274**参数：** 10275 10276| 参数名 | 类型 | 必填 | 说明 | 10277| ------ | ------ | ---- | --------------------- | 10278| nativeEmbedVisibilityInfo | [NativeEmbedVisibilityInfo](#nativeembedvisibilityinfo12) | 是 | 提供同层标签的可见性信息。 | 10279 10280## WebElementType<sup>13+</sup>枚举说明 10281 10282网页元素信息。 10283 10284**系统能力：** SystemCapability.Web.Webview.Core 10285 10286**参数：** 10287 10288| 名称 | 值 | 说明 | 10289| --------- | -- | ----------------- | 10290| IMAGE | 1 | 网页元素为图像类型。 | 10291 10292## WebResponseType<sup>13+</sup>枚举说明 10293 10294菜单的响应类型。 10295 10296**系统能力：** SystemCapability.Web.Webview.Core 10297 10298**参数：** 10299 10300| 名称 | 值 | 说明 | 10301| -------------- | -- | ------------------ | 10302| LONG_PRESS | 1 | 通过长按触发菜单弹出。 | 10303 10304## SelectionMenuOptionsExt<sup>13+</sup> 10305 10306自定义菜单扩展项。 10307 10308**系统能力：** SystemCapability.Web.Webview.Core 10309 10310| 名称 | 类型 | 必填 | 说明 | 10311| ---------- | -----------------------------------------------------| ------ | ---------------- | 10312| onAppear | Callback\<void\> | 否 | 自定义选择菜单弹出时回调。 | 10313| onDisappear | Callback\<void\> | 否 | 自定义选择菜单关闭时回调。 | 10314| preview | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | 否 | 自定义选择菜单的预览内容样式, 未配置时无预览内容。| 10315| menuType | [MenuType](../apis-arkui/arkui-ts/ts-text-common.md#menutype13枚举说明) | 否 | 自定义选择菜单类型。<br>默认值：MenuType.SELECTION_MENU | 10316 10317## BlurOnKeyboardHideMode<sup>14+</sup>枚举说明 10318 10319设置手动收起软键盘时Web元素是否失焦。 10320 10321**系统能力：** SystemCapability.Web.Webview.Core 10322 10323**参数：** 10324 10325| 名称 | 值 | 说明 | 10326| ------ | -- | ----------- | 10327| SILENT | 0 | 软键盘收起时web组件失焦功能关闭。 | 10328| BLUR | 1 | 软键盘收起时web组件失焦功能开启。 | 10329
