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 138使用 `resource://rawfile/` 协议前缀可以避免常规 `$rawfile` 方式在处理带有"#"路由链接时的局限性。当URL中包含"#"号时，"#"后面的内容会被视为锚点（fragment）。 139 ```ts 140 // xxx.ets 141 import { webview } from '@kit.ArkWeb'; 142 143 @Entry 144 @Component 145 struct WebComponent { 146 controller: webview.WebviewController = new webview.WebviewController(); 147 148 build() { 149 Column() { 150 // 通过resource协议加载本地资源文件。 151 Web({ src: "resource://rawfile/index.html#home", controller: this.controller }) 152 } 153 } 154 } 155 ``` 156 157在“src\main\resources\rawfile”文件夹下创建index.html： 158```html 159<!-- index.html --> 160<!DOCTYPE html> 161<html> 162<body> 163<div id="content"></div> 164 165<script> 166 function loadContent() { 167 var hash = window.location.hash; 168 var contentDiv = document.getElementById('content'); 169 170 if (hash === '#home') { 171 contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the Home Page!</p>'; 172 } else { 173 contentDiv.innerHTML = '<h1>Default Page</h1><p>This is the default content.</p>'; 174 } 175 } 176 177 // 加载界面 178 window.addEventListener('load', loadContent); 179 180 // 当hash变化时，更新界面 181 window.addEventListener('hashchange', loadContent); 182</script> 183</body> 184</html> 185``` 186 187加载沙箱路径下的本地资源文件，需要开启应用中文件系统的访问[fileAccess](#fileaccess)权限。 188 1891. 通过构造的单例对象GlobalContext获取沙箱路径。 190 191 ```ts 192 // GlobalContext.ets 193 export class GlobalContext { 194 private constructor() {} 195 private static instance: GlobalContext; 196 private _objects = new Map<string, Object>(); 197 198 public static getContext(): GlobalContext { 199 if (!GlobalContext.instance) { 200 GlobalContext.instance = new GlobalContext(); 201 } 202 return GlobalContext.instance; 203 } 204 205 getObject(value: string): Object | undefined { 206 return this._objects.get(value); 207 } 208 209 setObject(key: string, objectClass: Object): void { 210 this._objects.set(key, objectClass); 211 } 212 } 213 ``` 214 215 ```ts 216 // xxx.ets 217 import { webview } from '@kit.ArkWeb'; 218 import { GlobalContext } from '../GlobalContext'; 219 220 let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'; 221 222 @Entry 223 @Component 224 struct WebComponent { 225 controller: webview.WebviewController = new webview.WebviewController(); 226 227 build() { 228 Column() { 229 // 加载沙箱路径文件。 230 Web({ src: url, controller: this.controller }) 231 .fileAccess(true) 232 } 233 } 234 } 235 ``` 236 2372. 修改EntryAbility.ets。 238 239 以filesDir为例，获取沙箱路径。若想获取其他路径，请参考[应用文件路径](../../application-models/application-context-stage.md#获取应用文件路径)。 240 241 ```ts 242 // xxx.ets 243 import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 244 import { webview } from '@kit.ArkWeb'; 245 import { GlobalContext } from '../GlobalContext'; 246 247 export default class EntryAbility extends UIAbility { 248 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { 249 // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。 250 GlobalContext.getContext().setObject("filesDir", this.context.filesDir); 251 console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir")); 252 } 253 } 254 ``` 255 256 加载的html文件。 257 258 ```html 259 <!-- index.html --> 260 <!DOCTYPE html> 261 <html> 262 <body> 263 <p>Hello World</p> 264 </body> 265 </html> 266 ``` 267 268## WebOptions 269 270通过[接口](#接口)定义Web选项。 271 272**系统能力：** SystemCapability.Web.Webview.Core 273 274| 名称 | 类型 | 必填 | 说明 | 275| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 276| 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)重新加载。 | 277| controller | [WebController](#webcontroller) \| [WebviewController<sup>9+</sup>](#webviewcontroller9) | 是 | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 | 278| renderMode<sup>12+</sup> | [RenderMode](#rendermode12枚举说明)| 否 | 表示当前Web组件的渲染方式，RenderMode.ASYNC_RENDER表示Web组件自渲染，RenderMode.SYNC_RENDER表示支持Web组件统一渲染能力，默认值RenderMode.ASYNC_RENDER, 该模式不支持动态调整。 | 279| incognitoMode<sup>11+</sup> | boolean | 否 | 表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview, false表示创建正常模式的webview。<br> 默认值：false | 280| sharedRenderProcessToken<sup>12+</sup> | string | 否 | 表示当前Web组件指定共享渲染进程的token, 多渲染进程模式下，相同token的Web组件会优先尝试复用与token相绑定的渲染进程。token与渲染进程的绑定发生在渲染进程的初始化阶段。当渲染进程没有关联的Web组件时，其与token绑定关系将被移除。<br> 默认值： "" | 281 282## WebviewController<sup>9+</sup> 283 284type WebviewController = WebviewController 285 286提供Web控制器的方法。 287 288**系统能力：** SystemCapability.Web.Webview.Core 289 290| 类型 | 说明 | 291| ------ | ---------- | 292| [WebviewController](js-apis-webview.md#webviewcontroller) | 通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法（静态方法除外）。 | 293 294## 属性 295 296通用属性仅支持[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)。 297 298### domStorageAccess 299 300domStorageAccess(domStorageAccess: boolean) 301 302设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 303 304**系统能力：** SystemCapability.Web.Webview.Core 305 306**参数：** 307 308| 参数名 | 类型 | 必填 | 说明 | 309| ---------------- | ------- | ---- | ------------------------------------ | 310| domStorageAccess | boolean | 是 | 设置是否开启文档对象模型存储接口（DOM Storage API）权限。<br>true表示开启，false表示未开启。<br>默认值：false。 | 311 312**示例：** 313 314 ```ts 315 // xxx.ets 316 import { webview } from '@kit.ArkWeb'; 317 318 @Entry 319 @Component 320 struct WebComponent { 321 controller: webview.WebviewController = new webview.WebviewController(); 322 323 build() { 324 Column() { 325 Web({ src: 'www.example.com', controller: this.controller }) 326 .domStorageAccess(true) 327 } 328 } 329 } 330 ``` 331 332### fileAccess 333 334fileAccess(fileAccess: boolean) 335 336设置是否开启应用中文件系统的访问。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。 337 338从API version 12开始，fileAccess默认不启用。同时，当fileAccess为false的时候，仅只读资源目录/data/storage/el1/bundle/entry/resources/resfile里面的file协议资源依然可以访问，不受fileAccess管控。 339 340**系统能力：** SystemCapability.Web.Webview.Core 341 342**参数：** 343 344| 参数名 | 类型 | 必填 | 说明 | 345| ---------- | ------- | ---- | ---------------------- | 346| fileAccess | boolean | 是 | API version 11及以前：默认为true，启动应用中文件系统的访问。API version 12及以后：默认为false，不启用应用中文件系统的访问。 | 347 348**示例：** 349 350 ```ts 351 // xxx.ets 352 import { webview } from '@kit.ArkWeb'; 353 354 @Entry 355 @Component 356 struct WebComponent { 357 controller: webview.WebviewController = new webview.WebviewController(); 358 359 build() { 360 Column() { 361 Web({ src: 'www.example.com', controller: this.controller }) 362 .fileAccess(true) 363 } 364 } 365 } 366 ``` 367 368### imageAccess 369 370imageAccess(imageAccess: boolean) 371 372设置是否允许自动加载图片资源，默认允许。 373 374**系统能力：** SystemCapability.Web.Webview.Core 375 376**参数：** 377 378| 参数名 | 类型 | 必填 | 说明 | 379| ----------- | ------- | ---- | --------------- | 380| imageAccess | boolean | 是 | 设置是否允许自动加载图片资源。<br>true表示设置允许自动加载图片资源，false表示设置不允许自动加载图片资源。<br>默认值：true。 | 381 382**示例：** 383 ```ts 384 // xxx.ets 385 import { webview } from '@kit.ArkWeb'; 386 387 @Entry 388 @Component 389 struct WebComponent { 390 controller: webview.WebviewController = new webview.WebviewController(); 391 392 build() { 393 Column() { 394 Web({ src: 'www.example.com', controller: this.controller }) 395 .imageAccess(true) 396 } 397 } 398 } 399 ``` 400 401### javaScriptProxy 402 403javaScriptProxy(javaScriptProxy: JavaScriptProxy) 404 405注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。 406 407> **说明：** 408> 409> javaScriptProxy接口需要和deleteJavaScriptRegister接口配合使用，防止内存泄漏。 410> javaScriptProxy对象的所有参数不支持更新。 411> 注册对象时，同步与异步方法列表请至少选择一项不为空，可同时注册两类方法。 412> 此接口只支持注册一个对象，若需要注册多个对象请使用[registerJavaScriptProxy<sup>9+</sup>](js-apis-webview.md#registerjavascriptproxy)。 413 414**系统能力：** SystemCapability.Web.Webview.Core 415 416**参数：** 417 418| 参数名 | 类型 | 必填 | 说明 | 419| ---------- | ---------------------------------------- | ---- |---------------------------------------- | 420| javaScriptProxy | [JavaScriptProxy](#javascriptproxy12) | 是 | 参与注册的对象。只能声明方法，不能声明属性。 | 421 422**示例：** 423 424 ```ts 425 // xxx.ets 426 import { webview } from '@kit.ArkWeb'; 427 428 class TestObj { 429 constructor() { 430 } 431 432 test(data1: string, data2: string, data3: string): string { 433 console.log("data1:" + data1); 434 console.log("data2:" + data2); 435 console.log("data3:" + data3); 436 return "AceString"; 437 } 438 439 asyncTest(data: string): void { 440 console.log("async data:" + data); 441 } 442 443 toString(): void { 444 console.log('toString' + "interface instead."); 445 } 446 } 447 448 @Entry 449 @Component 450 struct WebComponent { 451 controller: webview.WebviewController = new webview.WebviewController(); 452 testObj = new TestObj(); 453 build() { 454 Column() { 455 Button('deleteJavaScriptRegister') 456 .onClick(() => { 457 try { 458 this.controller.deleteJavaScriptRegister("objName"); 459 } catch (error) { 460 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 461 } 462 }) 463 Web({ src: 'www.example.com', controller: this.controller }) 464 .javaScriptAccess(true) 465 .javaScriptProxy({ 466 object: this.testObj, 467 name: "objName", 468 methodList: ["test", "toString"], 469 asyncMethodList: ["asyncTest"], 470 controller: this.controller, 471 }) 472 } 473 } 474 } 475 ``` 476 477### javaScriptAccess 478 479javaScriptAccess(javaScriptAccess: boolean) 480 481设置是否允许执行JavaScript脚本，默认允许执行。 482 483**系统能力：** SystemCapability.Web.Webview.Core 484 485**参数：** 486 487| 参数名 | 类型 | 必填 | 说明 | 488| ---------------- | ------- | ---- | ------------------- | 489| javaScriptAccess | boolean | 是 | 是否允许执行JavaScript脚本。<br>true表示允许执行JavaScript脚本，false表示不允许执行JavaScript脚本。<br>默认值：true。 | 490 491**示例：** 492 493 ```ts 494 // xxx.ets 495 import { webview } from '@kit.ArkWeb'; 496 497 @Entry 498 @Component 499 struct WebComponent { 500 controller: webview.WebviewController = new webview.WebviewController(); 501 build() { 502 Column() { 503 Web({ src: 'www.example.com', controller: this.controller }) 504 .javaScriptAccess(true) 505 } 506 } 507 } 508 ``` 509 510### overScrollMode<sup>11+</sup> 511 512overScrollMode(mode: OverScrollMode) 513 514设置Web过滚动模式，默认关闭。当过滚动模式开启时，当用户在Web根页面上滑动到边缘时，Web会通过弹性动画弹回界面，根页面上的内部页面不会触发回弹。 515 516**系统能力：** SystemCapability.Web.Webview.Core 517 518**参数：** 519 520| 参数名 | 类型 | 必填 | 说明 | 521| ---- | --------------------------------------- | ---- | ------------------ | 522| mode | [OverScrollMode](#overscrollmode11枚举说明) | 是 | 设置Web的过滚动模式为关闭或开启。默认值：OverScrollMode.NEVER。 | 523 524**示例：** 525 526 ```ts 527 // xxx.ets 528 import { webview } from '@kit.ArkWeb'; 529 530 @Entry 531 @Component 532 struct WebComponent { 533 controller: webview.WebviewController = new webview.WebviewController(); 534 @State mode: OverScrollMode = OverScrollMode.ALWAYS; 535 build() { 536 Column() { 537 Web({ src: 'www.example.com', controller: this.controller }) 538 .overScrollMode(this.mode) 539 } 540 } 541 } 542 ``` 543 544### mixedMode 545 546mixedMode(mixedMode: MixedMode) 547 548设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 549 550**系统能力：** SystemCapability.Web.Webview.Core 551 552**参数：** 553 554| 参数名 | 类型 | 必填 | 说明 | 555| --------- | --------------------------- | ---- | --------- | 556| mixedMode | [MixedMode](#mixedmode枚举说明) | 是 | 要设置的混合内容。默认值：MixedMode.None，表示不允许安全来源（secure origin）加载不安全来源（insecure origin）的内容。 | 557 558**示例：** 559 560 ```ts 561 // xxx.ets 562 import { webview } from '@kit.ArkWeb'; 563 564 @Entry 565 @Component 566 struct WebComponent { 567 controller: webview.WebviewController = new webview.WebviewController(); 568 @State mode: MixedMode = MixedMode.All; 569 build() { 570 Column() { 571 Web({ src: 'www.example.com', controller: this.controller }) 572 .mixedMode(this.mode) 573 } 574 } 575 } 576 ``` 577 578### onlineImageAccess 579 580onlineImageAccess(onlineImageAccess: boolean) 581 582设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 583 584**系统能力：** SystemCapability.Web.Webview.Core 585 586**参数：** 587 588| 参数名 | 类型 | 必填 | 说明 | 589| ----------------- | ------- | ---- | ---------------- | 590| onlineImageAccess | boolean | 是 | 设置是否允许从网络加载图片资源。<br>true表示设置允许从网络加载图片资源，false表示设置不允许从网络加载图片资源。<br>默认值：true。 | 591 592**示例：** 593 594 ```ts 595 // xxx.ets 596 import { webview } from '@kit.ArkWeb'; 597 598 @Entry 599 @Component 600 struct WebComponent { 601 controller: webview.WebviewController = new webview.WebviewController(); 602 603 build() { 604 Column() { 605 Web({ src: 'www.example.com', controller: this.controller }) 606 .onlineImageAccess(true) 607 } 608 } 609 } 610 ``` 611 612### zoomAccess 613 614zoomAccess(zoomAccess: boolean) 615 616设置是否支持手势进行缩放，默认允许执行缩放。 617 618**系统能力：** SystemCapability.Web.Webview.Core 619 620**参数：** 621 622| 参数名 | 类型 | 必填 | 说明 | 623| ---------- | ------- | ---- | ------------- | 624| zoomAccess | boolean | 是 | 设置是否支持手势进行缩放。<br>true表示设置支持手势进行缩放，false表示设置不支持手势进行缩放。<br>默认值：true。 | 625 626**示例：** 627 628 ```ts 629 // xxx.ets 630 import { webview } from '@kit.ArkWeb'; 631 632 @Entry 633 @Component 634 struct WebComponent { 635 controller: webview.WebviewController = new webview.WebviewController(); 636 637 build() { 638 Column() { 639 Web({ src: 'www.example.com', controller: this.controller }) 640 .zoomAccess(true) 641 } 642 } 643 } 644 ``` 645 646### overviewModeAccess 647 648overviewModeAccess(overviewModeAccess: boolean) 649 650设置是否使用概览模式加载网页，默认使用该方式。当前仅支持移动设备。 651 652**系统能力：** SystemCapability.Web.Webview.Core 653 654**参数：** 655 656| 参数名 | 类型 | 必填 | 说明 | 657| ------------------ | ------- | ---- | --------------- | 658| overviewModeAccess | boolean | 是 | 设置是否使用概览模式加载网页。<br>true表示设置使用概览模式加载网页，false表示设置不使用概览模式加载网页。<br>默认值：true。 | 659 660**示例：** 661 662 ```ts 663 // xxx.ets 664 import { webview } from '@kit.ArkWeb'; 665 666 @Entry 667 @Component 668 struct WebComponent { 669 controller: webview.WebviewController = new webview.WebviewController(); 670 671 build() { 672 Column() { 673 Web({ src: 'www.example.com', controller: this.controller }) 674 .overviewModeAccess(true) 675 } 676 } 677 } 678 ``` 679 680### databaseAccess 681 682databaseAccess(databaseAccess: boolean) 683 684设置是否开启数据库存储API权限，默认不开启。 685 686**系统能力：** SystemCapability.Web.Webview.Core 687 688**参数：** 689 690| 参数名 | 类型 | 必填 | 说明 | 691| -------------- | ------- | ---- | ----------------- | 692| databaseAccess | boolean | 是 | 设置是否开启数据库存储API权限。<br>true表示设置开启数据库存储API权限，false表示设置不开启数据库存储API权限。<br>默认值：false。 | 693 694**示例：** 695 696 ```ts 697 // xxx.ets 698 import { webview } from '@kit.ArkWeb'; 699 700 @Entry 701 @Component 702 struct WebComponent { 703 controller: webview.WebviewController = new webview.WebviewController(); 704 705 build() { 706 Column() { 707 Web({ src: 'www.example.com', controller: this.controller }) 708 .databaseAccess(true) 709 } 710 } 711 } 712 ``` 713 714### geolocationAccess 715 716geolocationAccess(geolocationAccess: boolean) 717 718设置是否开启获取地理位置权限，默认开启。具体使用方式参考[管理位置权限](../../web/web-geolocation-permission.md)。 719 720**系统能力：** SystemCapability.Web.Webview.Core 721 722**参数：** 723 724| 参数名 | 类型 | 必填 | 说明 | 725| ----------------- | ------- | ---- | --------------- | 726| geolocationAccess | boolean | 是 | 设置是否开启获取地理位置权限。<br>true表示设置开启获取地理位置权限，false表示设置不开启获取地理位置权限。<br>默认值：true。 | 727 728**示例：** 729 730 ```ts 731 // xxx.ets 732 import { webview } from '@kit.ArkWeb'; 733 734 @Entry 735 @Component 736 struct WebComponent { 737 controller: webview.WebviewController = new webview.WebviewController(); 738 739 build() { 740 Column() { 741 Web({ src: 'www.example.com', controller: this.controller }) 742 .geolocationAccess(true) 743 } 744 } 745 } 746 ``` 747 748### mediaPlayGestureAccess<sup>9+</sup> 749 750mediaPlayGestureAccess(access: boolean) 751 752设置有声视频播放是否需要用户手动点击，静音视频播放不受该接口管控，默认需要。 753 754**系统能力：** SystemCapability.Web.Webview.Core 755 756**参数：** 757 758| 参数名 | 类型 | 必填 | 说明 | 759| ------ | ------- | ---- | ------------------- | 760| access | boolean | 是 | 设置有声视频播放是否需要用户手动点击。<br>true表示设置有声视频播放需要用户手动点击，false表示设置有声视频播放不需要用户手动点击。<br>默认值：true。 | 761 762**示例：** 763 764 ```ts 765 // xxx.ets 766 import { webview } from '@kit.ArkWeb'; 767 768 @Entry 769 @Component 770 struct WebComponent { 771 controller: webview.WebviewController = new webview.WebviewController(); 772 @State access: boolean = true; 773 774 build() { 775 Column() { 776 Web({ src: 'www.example.com', controller: this.controller }) 777 .mediaPlayGestureAccess(this.access) 778 } 779 } 780 } 781 ``` 782 783### multiWindowAccess<sup>9+</sup> 784 785multiWindowAccess(multiWindow: boolean) 786 787设置是否开启多窗口权限，默认不开启。 788使能多窗口权限时，需要实现onWindowNew事件，示例代码参考[onWindowNew事件](#onwindownew9)。 789 790**系统能力：** SystemCapability.Web.Webview.Core 791 792**参数：** 793 794| 参数名 | 类型 | 必填 | 说明 | 795| ----------- | ------- | ---- | ------------ | 796| multiWindow | boolean | 是 | 设置是否开启多窗口权限。<br>true表示设置开启多窗口权限，false表示设置不开启多窗口权限。<br>默认值：false。 | 797 798**示例：** 799 800 ```ts 801 // xxx.ets 802 import { webview } from '@kit.ArkWeb'; 803 804 @Entry 805 @Component 806 struct WebComponent { 807 controller: webview.WebviewController = new webview.WebviewController(); 808 809 build() { 810 Column() { 811 Web({ src: 'www.example.com', controller: this.controller }) 812 .multiWindowAccess(false) 813 } 814 } 815 } 816 ``` 817 818### horizontalScrollBarAccess<sup>9+</sup> 819 820horizontalScrollBarAccess(horizontalScrollBar: boolean) 821 822设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。 823 824> **说明：** 825> 826> - 通过@State变量控制横向滚动条的隐藏/显示后，需要调用controller.refresh()生效。 827> - 通过@State变量频繁动态改变时，建议切换开关变量和Web组件一一对应。 828 829**系统能力：** SystemCapability.Web.Webview.Core 830 831**参数：** 832 833| 参数名 | 类型 | 必填 | 说明 | 834| ------------------- | ------- | ---- | ------------ | 835| horizontalScrollBar | boolean | 是 | 设置是否显示横向滚动条。<br>true表示设置显示横向滚动条，false表示设置不显示横向滚动条。<br>默认值：true。 | 836 837**示例：** 838 839 ```ts 840 // xxx.ets 841 import { webview } from '@kit.ArkWeb'; 842 import { BusinessError } from '@kit.BasicServicesKit'; 843 844 @Entry 845 @Component 846 struct WebComponent { 847 controller: webview.WebviewController = new webview.WebviewController(); 848 @State isShow: boolean = true; 849 @State btnMsg: string ="隐藏滚动条"; 850 851 build() { 852 Column() { 853 // 通过@State变量改变横向滚动条的隐藏/显示后，需调用this.controller.refresh()后生效 854 Button('refresh') 855 .onClick(() => { 856 if(this.isShow){ 857 this.isShow = false; 858 this.btnMsg="显示滚动条"; 859 }else{ 860 this.isShow = true; 861 this.btnMsg="隐藏滚动条"; 862 } 863 try { 864 this.controller.refresh(); 865 } catch (error) { 866 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 867 } 868 }).height("10%").width("40%") 869 Web({ src: $rawfile('index.html'), controller: this.controller }).height("90%") 870 .horizontalScrollBarAccess(this.isShow) 871 } 872 } 873 } 874 ``` 875 876 加载的html文件。 877 ```html 878 <!--index.html--> 879 <!DOCTYPE html> 880 <html> 881 <head> 882 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0"> 883 <title>Demo</title> 884 <style> 885 body { 886 width:3000px; 887 height:6000px; 888 padding-right:170px; 889 padding-left:170px; 890 border:5px solid blueviolet 891 } 892 </style> 893 </head> 894 <body> 895 Scroll Test 896 </body> 897 </html> 898 ``` 899 900### verticalScrollBarAccess<sup>9+</sup> 901 902verticalScrollBarAccess(verticalScrollBar: boolean) 903 904设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。 905 906> **说明：** 907> 908> - 通过@State变量控制纵向滚动条的隐藏/显示后，需要调用controller.refresh()生效。 909> - 通过@State变量频繁动态改变时，建议切换开关变量和Web组件一一对应。 910 911**系统能力：** SystemCapability.Web.Webview.Core 912 913**参数：** 914 915| 参数名 | 类型 | 必填 | 说明 | 916| ----------------- | ------- | ---- | ------------ | 917| verticalScrollBar | boolean | 是 | 设置是否显示纵向滚动条。<br>true表示设置显示纵向滚动条，false表示设置不显示纵向滚动条。<br>默认值：true。 | 918 919**示例：** 920 921 ```ts 922 // xxx.ets 923 import { webview } from '@kit.ArkWeb'; 924 import { BusinessError } from '@kit.BasicServicesKit'; 925 926 @Entry 927 @Component 928 struct WebComponent { 929 controller: webview.WebviewController = new webview.WebviewController(); 930 @State isShow: boolean = true; 931 @State btnMsg: string ="隐藏滚动条"; 932 933 build() { 934 Column() { 935 // 通过@State变量改变横向滚动条的隐藏/显示后，需调用this.controller.refresh()后生效 936 Button(this.btnMsg) 937 .onClick(() => { 938 if(this.isShow){ 939 this.isShow = false; 940 this.btnMsg="显示滚动条"; 941 }else{ 942 this.isShow = true; 943 this.btnMsg="隐藏滚动条"; 944 } 945 try { 946 this.controller.refresh(); 947 } catch (error) { 948 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 949 } 950 }).height("10%").width("40%") 951 Web({ src: $rawfile('index.html'), controller: this.controller }).height("90%") 952 .verticalScrollBarAccess(this.isShow) 953 } 954 } 955 } 956 ``` 957 958 加载的html文件。 959 ```html 960 <!--index.html--> 961 <!DOCTYPE html> 962 <html> 963 <head> 964 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0"> 965 <title>Demo</title> 966 <style> 967 body { 968 width:3000px; 969 height:6000px; 970 padding-right:170px; 971 padding-left:170px; 972 border:5px solid blueviolet 973 } 974 </style> 975 </head> 976 <body> 977 Scroll Test 978 </body> 979 </html> 980 ``` 981 982### password<sup>(deprecated)</sup> 983 984password(password: boolean) 985 986设置是否应保存密码。该接口为空接口。 987 988> **说明：** 989> 990> 从API version 10开始废弃，并且不再提供新的接口作为替代。 991 992**系统能力：** SystemCapability.Web.Webview.Core 993 994### cacheMode 995 996cacheMode(cacheMode: CacheMode) 997 998设置缓存模式。 999 1000**系统能力：** SystemCapability.Web.Webview.Core 1001 1002**参数：** 1003 1004| 参数名 | 类型 | 必填 | 说明 | 1005| --------- | --------------------------- | ---- | --------- | 1006| cacheMode | [CacheMode](#cachemode枚举说明) | 是 | 要设置的缓存模式。默认值：CacheMode.Default。 | 1007 1008**示例：** 1009 1010 ```ts 1011 // xxx.ets 1012 import { webview } from '@kit.ArkWeb'; 1013 1014 @Entry 1015 @Component 1016 struct WebComponent { 1017 controller: webview.WebviewController = new webview.WebviewController(); 1018 @State mode: CacheMode = CacheMode.None; 1019 1020 build() { 1021 Column() { 1022 Web({ src: 'www.example.com', controller: this.controller }) 1023 .cacheMode(this.mode) 1024 } 1025 } 1026 } 1027 ``` 1028 1029### copyOptions<sup>11+</sup> 1030 1031copyOptions(value: CopyOptions) 1032 1033设置剪贴板复制范围选项。 1034 1035**系统能力：** SystemCapability.Web.Webview.Core 1036 1037**参数：** 1038 1039| 参数名 | 类型 | 必填 | 说明 | 1040| --------- | --------------------------- | ---- | --------- | 1041| value | [CopyOptions](../apis-arkui/arkui-ts/ts-appendix-enums.md#copyoptions9) | 是 | 要设置的剪贴板复制范围选项。默认值：CopyOptions.LocalDevice。 | 1042 1043**示例：** 1044 1045 ```ts 1046import { webview } from '@kit.ArkWeb'; 1047 1048@Entry 1049@Component 1050struct WebComponent { 1051 controller: webview.WebviewController = new webview.WebviewController(); 1052 1053 build() { 1054 Column() { 1055 Web({ src: 'www.example.com', controller: this.controller }) 1056 .copyOptions(CopyOptions.None) 1057 } 1058 } 1059} 1060 ``` 1061 1062### textZoomAtio<sup>(deprecated)</sup> 1063 1064textZoomAtio(textZoomAtio: number) 1065 1066设置页面的文本缩放百分比，默认为100。 1067 1068**系统能力：** SystemCapability.Web.Webview.Core 1069 1070从API version 9开始不再维护，建议使用[textZoomRatio<sup>9+</sup>](#textzoomratio9)代替。 1071 1072**参数：** 1073 1074| 参数名 | 类型 | 必填 | 说明 | 1075| ------------ | ------ | ---- | -------------------------------- | 1076| textZoomAtio | number | 是 | 要设置的页面的文本缩放百分比。取值为正整数。默认值：100。 | 1077 1078**示例：** 1079 1080 ```ts 1081 // xxx.ets 1082 @Entry 1083 @Component 1084 struct WebComponent { 1085 controller: WebController = new WebController() 1086 @State ratio: number = 150 1087 build() { 1088 Column() { 1089 Web({ src: 'www.example.com', controller: this.controller }) 1090 .textZoomAtio(this.ratio) 1091 } 1092 } 1093 } 1094 ``` 1095 1096### textZoomRatio<sup>9+</sup> 1097 1098textZoomRatio(textZoomRatio: number) 1099 1100设置页面的文本缩放百分比，默认为100。 1101 1102**系统能力：** SystemCapability.Web.Webview.Core 1103 1104**参数：** 1105 1106| 参数名 | 类型 | 必填 | 说明 | 1107| ------------- | ------ | ---- | -------------------------------- | 1108| textZoomRatio | number | 是 | 要设置的页面的文本缩放百分比。<br>取值为整数，范围为(0, 2147483647]。默认值：100。 | 1109 1110**示例：** 1111 1112 ```ts 1113 // xxx.ets 1114 import { webview } from '@kit.ArkWeb'; 1115 1116 @Entry 1117 @Component 1118 struct WebComponent { 1119 controller: webview.WebviewController = new webview.WebviewController(); 1120 @State ratio: number = 150; 1121 1122 build() { 1123 Column() { 1124 Web({ src: 'www.example.com', controller: this.controller }) 1125 .textZoomRatio(this.ratio) 1126 } 1127 } 1128 } 1129 ``` 1130 1131### initialScale<sup>9+</sup> 1132 1133initialScale(percent: number) 1134 1135设置整体页面的缩放百分比，默认为100。 1136 1137**系统能力：** SystemCapability.Web.Webview.Core 1138 1139**参数：** 1140 1141| 参数名 | 类型 | 必填 | 说明 | 1142| ------- | ------ | ---- | ----------------------------- | 1143| percent | number | 是 | 要设置的整体页面的缩放百分比。<br>默认值：100。取值范围：(0, 1000]。 | 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 percent: number = 100; 1156 1157 build() { 1158 Column() { 1159 Web({ src: 'www.example.com', controller: this.controller }) 1160 .initialScale(this.percent) 1161 } 1162 } 1163 } 1164 ``` 1165 1166### userAgent<sup>(deprecated)</sup> 1167 1168userAgent(userAgent: string) 1169 1170设置用户代理。 1171 1172> **说明：** 1173> 1174> 从API version 8开始支持，从API version 10开始废弃。建议使用[setCustomUserAgent](js-apis-webview.md#setcustomuseragent10)<sup>10+</sup>替代。 1175 1176**系统能力：** SystemCapability.Web.Webview.Core 1177 1178**参数：** 1179 1180| 参数名 | 类型 | 必填 | 说明 | 1181| --------- | ------ | ---- | --------- | 1182| userAgent | string | 是 | 要设置的用户代理。 | 1183 1184**示例：** 1185 1186 ```ts 1187 // xxx.ets 1188 import { webview } from '@kit.ArkWeb'; 1189 1190 @Entry 1191 @Component 1192 struct WebComponent { 1193 controller: webview.WebviewController = new webview.WebviewController(); 1194 @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'; 1195 1196 build() { 1197 Column() { 1198 Web({ src: 'www.example.com', controller: this.controller }) 1199 .userAgent(this.userAgent) 1200 } 1201 } 1202 } 1203 ``` 1204 1205### blockNetwork<sup>9+</sup> 1206 1207blockNetwork(block: boolean) 1208 1209设置Web组件是否阻止从网络加载资源。 1210 1211**系统能力：** SystemCapability.Web.Webview.Core 1212 1213**参数：** 1214 1215| 参数名 | 类型 | 必填 | 说明 | 1216| ----- | ------- | ---- | ------------------- | 1217| block | boolean | 是 | 设置Web组件是否阻止从网络加载资源。<br>true表示设置Web组件阻止从网络加载资源，false表示设置Web组件不阻止从网络加载资源。<br>默认值：false。 | 1218 1219**示例：** 1220 1221 ```ts 1222 // xxx.ets 1223 import { webview } from '@kit.ArkWeb'; 1224 1225 @Entry 1226 @Component 1227 struct WebComponent { 1228 controller: webview.WebviewController = new webview.WebviewController(); 1229 @State block: boolean = true; 1230 1231 build() { 1232 Column() { 1233 Web({ src: 'www.example.com', controller: this.controller }) 1234 .blockNetwork(this.block) 1235 } 1236 } 1237 } 1238 ``` 1239 1240### defaultFixedFontSize<sup>9+</sup> 1241 1242defaultFixedFontSize(size: number) 1243 1244设置网页的默认等宽字体大小。 1245 1246**系统能力：** SystemCapability.Web.Webview.Core 1247 1248**参数：** 1249 1250| 参数名 | 类型 | 必填 | 说明 | 1251| ---- | ------ | ---- | ---------------------------------------- | 1252| size | number | 是 | 设置网页的默认等宽字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。默认值：13。 | 1253 1254**示例：** 1255 1256 ```ts 1257 // xxx.ets 1258 import { webview } from '@kit.ArkWeb'; 1259 1260 @Entry 1261 @Component 1262 struct WebComponent { 1263 controller: webview.WebviewController = new webview.WebviewController(); 1264 @State fontSize: number = 16; 1265 1266 build() { 1267 Column() { 1268 Web({ src: 'www.example.com', controller: this.controller }) 1269 .defaultFixedFontSize(this.fontSize) 1270 } 1271 } 1272 } 1273 ``` 1274 1275### defaultFontSize<sup>9+</sup> 1276 1277defaultFontSize(size: number) 1278 1279设置网页的默认字体大小。 1280 1281**系统能力：** SystemCapability.Web.Webview.Core 1282 1283**参数：** 1284 1285| 参数名 | 类型 | 必填 | 说明 | 1286| ---- | ------ | ---- | ---------------------------------------- | 1287| size | number | 是 | 设置网页的默认字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。默认值：16。 | 1288 1289**示例：** 1290 1291 ```ts 1292 // xxx.ets 1293 import { webview } from '@kit.ArkWeb'; 1294 1295 @Entry 1296 @Component 1297 struct WebComponent { 1298 controller: webview.WebviewController = new webview.WebviewController(); 1299 @State fontSize: number = 13; 1300 1301 build() { 1302 Column() { 1303 Web({ src: 'www.example.com', controller: this.controller }) 1304 .defaultFontSize(this.fontSize) 1305 } 1306 } 1307 } 1308 ``` 1309 1310### minFontSize<sup>9+</sup> 1311 1312minFontSize(size: number) 1313 1314设置网页字体大小最小值。 1315 1316**系统能力：** SystemCapability.Web.Webview.Core 1317 1318**参数：** 1319 1320| 参数名 | 类型 | 必填 | 说明 | 1321| ---- | ------ | ---- | ---------------------------------------- | 1322| size | number | 是 | 设置网页字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。默认值：8。 | 1323 1324**示例：** 1325 1326 ```ts 1327 // xxx.ets 1328 import { webview } from '@kit.ArkWeb'; 1329 1330 @Entry 1331 @Component 1332 struct WebComponent { 1333 controller: webview.WebviewController = new webview.WebviewController(); 1334 @State fontSize: number = 13; 1335 1336 build() { 1337 Column() { 1338 Web({ src: 'www.example.com', controller: this.controller }) 1339 .minFontSize(this.fontSize) 1340 } 1341 } 1342 } 1343 ``` 1344 1345### minLogicalFontSize<sup>9+</sup> 1346 1347minLogicalFontSize(size: number) 1348 1349设置网页逻辑字体大小最小值。 1350 1351**系统能力：** SystemCapability.Web.Webview.Core 1352 1353**参数：** 1354 1355| 参数名 | 类型 | 必填 | 说明 | 1356| ---- | ------ | ---- | ---------------------------------------- | 1357| size | number | 是 | 设置网页逻辑字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。默认值：8。 | 1358 1359**示例：** 1360 1361 ```ts 1362 // xxx.ets 1363 import { webview } from '@kit.ArkWeb'; 1364 1365 @Entry 1366 @Component 1367 struct WebComponent { 1368 controller: webview.WebviewController = new webview.WebviewController(); 1369 @State fontSize: number = 13; 1370 1371 build() { 1372 Column() { 1373 Web({ src: 'www.example.com', controller: this.controller }) 1374 .minLogicalFontSize(this.fontSize) 1375 } 1376 } 1377 } 1378 ``` 1379 1380### webFixedFont<sup>9+</sup> 1381 1382webFixedFont(family: string) 1383 1384设置网页的fixed font字体库。 1385 1386**系统能力：** SystemCapability.Web.Webview.Core 1387 1388**参数：** 1389 1390| 参数名 | 类型 | 必填 | 说明 | 1391| ------ | ------ | ---- | ------------------- | 1392| family | string | 是 | 设置网页的fixed font字体库。默认值：monospace。 | 1393 1394**示例：** 1395 1396 ```ts 1397 // xxx.ets 1398 import { webview } from '@kit.ArkWeb'; 1399 1400 @Entry 1401 @Component 1402 struct WebComponent { 1403 controller: webview.WebviewController = new webview.WebviewController(); 1404 @State family: string = "monospace"; 1405 1406 build() { 1407 Column() { 1408 Web({ src: 'www.example.com', controller: this.controller }) 1409 .webFixedFont(this.family) 1410 } 1411 } 1412 } 1413 ``` 1414 1415### webSansSerifFont<sup>9+</sup> 1416 1417webSansSerifFont(family: string) 1418 1419设置网页的sans serif font字体库。 1420 1421**系统能力：** SystemCapability.Web.Webview.Core 1422 1423**参数：** 1424 1425| 参数名 | 类型 | 必填 | 说明 | 1426| ------ | ------ | ---- | ------------------------ | 1427| family | string | 是 | 设置网页的sans serif font字体库。默认值：sans-serif。 | 1428 1429**示例：** 1430 1431 ```ts 1432 // xxx.ets 1433 import { webview } from '@kit.ArkWeb'; 1434 1435 @Entry 1436 @Component 1437 struct WebComponent { 1438 controller: webview.WebviewController = new webview.WebviewController(); 1439 @State family: string = "sans-serif"; 1440 1441 build() { 1442 Column() { 1443 Web({ src: 'www.example.com', controller: this.controller }) 1444 .webSansSerifFont(this.family) 1445 } 1446 } 1447 } 1448 ``` 1449 1450### webSerifFont<sup>9+</sup> 1451 1452webSerifFont(family: string) 1453 1454设置网页的serif font字体库。 1455 1456**系统能力：** SystemCapability.Web.Webview.Core 1457 1458**参数：** 1459 1460| 参数名 | 类型 | 必填 | 说明 | 1461| ------ | ------ | ---- | ------------------- | 1462| family | string | 是 | 设置网页的serif font字体库。默认值：serif。 | 1463 1464**示例：** 1465 1466 ```ts 1467 // xxx.ets 1468 import { webview } from '@kit.ArkWeb'; 1469 1470 @Entry 1471 @Component 1472 struct WebComponent { 1473 controller: webview.WebviewController = new webview.WebviewController(); 1474 @State family: string = "serif"; 1475 1476 build() { 1477 Column() { 1478 Web({ src: 'www.example.com', controller: this.controller }) 1479 .webSerifFont(this.family) 1480 } 1481 } 1482 } 1483 ``` 1484 1485### webStandardFont<sup>9+</sup> 1486 1487webStandardFont(family: string) 1488 1489设置网页的standard font字体库。 1490 1491**系统能力：** SystemCapability.Web.Webview.Core 1492 1493**参数：** 1494 1495| 参数名 | 类型 | 必填 | 说明 | 1496| ------ | ------ | ---- | ---------------------- | 1497| family | string | 是 | 设置网页的standard font字体库。默认值：sans serif。 | 1498 1499**示例：** 1500 1501 ```ts 1502 // xxx.ets 1503 import { webview } from '@kit.ArkWeb'; 1504 1505 @Entry 1506 @Component 1507 struct WebComponent { 1508 controller: webview.WebviewController = new webview.WebviewController(); 1509 @State family: string = "sans-serif"; 1510 1511 build() { 1512 Column() { 1513 Web({ src: 'www.example.com', controller: this.controller }) 1514 .webStandardFont(this.family) 1515 } 1516 } 1517 } 1518 ``` 1519 1520### webFantasyFont<sup>9+</sup> 1521 1522webFantasyFont(family: string) 1523 1524设置网页的fantasy font字体库。 1525 1526**系统能力：** SystemCapability.Web.Webview.Core 1527 1528**参数：** 1529 1530| 参数名 | 类型 | 必填 | 说明 | 1531| ------ | ------ | ---- | --------------------- | 1532| family | string | 是 | 设置网页的fantasy font字体库。默认值：fantasy。 | 1533 1534**示例：** 1535 1536 ```ts 1537 // xxx.ets 1538 import { webview } from '@kit.ArkWeb'; 1539 @Entry 1540 @Component 1541 struct WebComponent { 1542 controller: webview.WebviewController = new webview.WebviewController(); 1543 @State family: string = "fantasy"; 1544 1545 build() { 1546 Column() { 1547 Web({ src: 'www.example.com', controller: this.controller }) 1548 .webFantasyFont(this.family) 1549 } 1550 } 1551 } 1552 ``` 1553 1554### webCursiveFont<sup>9+</sup> 1555 1556webCursiveFont(family: string) 1557 1558设置网页的cursive font字体库。 1559 1560**系统能力：** SystemCapability.Web.Webview.Core 1561 1562**参数：** 1563 1564| 参数名 | 类型 | 必填 | 说明 | 1565| ------ | ------ | ---- | --------------------- | 1566| family | string | 是 | 设置网页的cursive font字体库。默认值：cursive。 | 1567 1568**示例：** 1569 1570 ```ts 1571 // xxx.ets 1572 import { webview } from '@kit.ArkWeb'; 1573 1574 @Entry 1575 @Component 1576 struct WebComponent { 1577 controller: webview.WebviewController = new webview.WebviewController(); 1578 @State family: string = "cursive"; 1579 1580 build() { 1581 Column() { 1582 Web({ src: 'www.example.com', controller: this.controller }) 1583 .webCursiveFont(this.family) 1584 } 1585 } 1586 } 1587 ``` 1588 1589### darkMode<sup>9+</sup> 1590 1591darkMode(mode: WebDarkMode) 1592 1593设置Web深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合[forceDarkAccess](#forcedarkaccess9)使用。 1594 1595**系统能力：** SystemCapability.Web.Webview.Core 1596 1597**参数：** 1598 1599| 参数名 | 类型 | 必填 | 说明 | 1600| ---- | -------------------------------- | ---- | ---------------------- | 1601| mode | [WebDarkMode](#webdarkmode9枚举说明) | 是 | 设置Web的深色模式为关闭、开启或跟随系统。默认值：WebDarkMode.Off。 | 1602 1603**示例：** 1604 1605 ```ts 1606 // xxx.ets 1607 import { webview } from '@kit.ArkWeb'; 1608 1609 @Entry 1610 @Component 1611 struct WebComponent { 1612 controller: webview.WebviewController = new webview.WebviewController(); 1613 @State mode: WebDarkMode = WebDarkMode.On; 1614 1615 build() { 1616 Column() { 1617 Web({ src: 'www.example.com', controller: this.controller }) 1618 .darkMode(this.mode) 1619 } 1620 } 1621 } 1622 ``` 1623 1624### forceDarkAccess<sup>9+</sup> 1625 1626forceDarkAccess(access: boolean) 1627 1628设置网页是否开启强制深色模式。默认关闭。该属性仅在[darkMode](#darkmode9)开启深色模式时生效。 1629 1630**系统能力：** SystemCapability.Web.Webview.Core 1631 1632**参数：** 1633 1634| 参数名 | 类型 | 必填 | 说明 | 1635| ------ | ------- | ---- | --------------- | 1636| access | boolean | 是 | 设置网页是否开启强制深色模式。<br>true表示设置网页开启强制深色模式，false表示设置网页不开启强制深色模式。<br>默认值：false。 | 1637 1638**示例：** 1639 1640 ```ts 1641 // xxx.ets 1642 import { webview } from '@kit.ArkWeb'; 1643 1644 @Entry 1645 @Component 1646 struct WebComponent { 1647 controller: webview.WebviewController = new webview.WebviewController(); 1648 @State mode: WebDarkMode = WebDarkMode.On; 1649 @State access: boolean = true; 1650 1651 build() { 1652 Column() { 1653 Web({ src: 'www.example.com', controller: this.controller }) 1654 .darkMode(this.mode) 1655 .forceDarkAccess(this.access) 1656 } 1657 } 1658 } 1659 ``` 1660 1661### tableData<sup>(deprecated)</sup> 1662 1663tableData(tableData: boolean) 1664 1665设置是否应保存表单数据。该接口为空接口。 1666 1667> **说明：** 1668> 1669> 从API version 10开始废弃，并且不再提供新的接口作为替代。 1670 1671**系统能力：** SystemCapability.Web.Webview.Core 1672 1673### wideViewModeAccess<sup>(deprecated)</sup> 1674 1675wideViewModeAccess(wideViewModeAccess: boolean) 1676 1677设置web是否支持html中meta标签的viewport属性。该接口为空接口。 1678 1679> **说明：** 1680> 1681> 从API version 10开始废弃，并且不再提供新的接口作为替代。 1682 1683**系统能力：** SystemCapability.Web.Webview.Core 1684 1685### pinchSmooth<sup>9+</sup> 1686 1687pinchSmooth(isEnabled: boolean) 1688 1689设置网页是否开启捏合流畅模式，默认不开启。 1690 1691**系统能力：** SystemCapability.Web.Webview.Core 1692 1693**参数：** 1694 1695| 参数名 | 类型 | 必填 | 说明 | 1696| --------- | ------- | ---- | ------------- | 1697| isEnabled | boolean | 是 | 网页是否开启捏合流畅模式。<br>true表示设置网页开启捏合流畅模式，false表示设置网页不开启捏合流畅模式。<br>默认值：false。 | 1698 1699**示例：** 1700 1701 ```ts 1702 // xxx.ets 1703 import { webview } from '@kit.ArkWeb'; 1704 1705 @Entry 1706 @Component 1707 struct WebComponent { 1708 controller: webview.WebviewController = new webview.WebviewController(); 1709 1710 build() { 1711 Column() { 1712 Web({ src: 'www.example.com', controller: this.controller }) 1713 .pinchSmooth(true) 1714 } 1715 } 1716 } 1717 ``` 1718 1719### allowWindowOpenMethod<sup>10+</sup> 1720 1721allowWindowOpenMethod(flag: boolean) 1722 1723设置网页是否可以通过JavaScript自动打开新窗口。 1724 1725该属性为true时，可通过JavaScript自动打开新窗口。该属性为false时，用户行为仍可通过JavaScript自动打开新窗口，但非用户行为不能通过JavaScript自动打开新窗口。此处的用户行为是指，在用户对Web组件进行点击等操作后，同时在5秒内请求打开新窗口（window.open）的行为。 1726 1727该属性仅在[javaScriptAccess](#javascriptaccess)开启时生效。 1728 1729该属性在[multiWindowAccess](#multiwindowaccess9)开启时打开新窗口，关闭时打开本地窗口。 1730 1731该属性的默认值与系统属性persist.web.allowWindowOpenMethod.enabled 保持一致，如果未设置系统属性则默认值为false。 1732 1733检查系统配置项persist.web.allowWindowOpenMethod.enabled 是否开启。 1734 1735通过`hdc shell param get persist.web.allowWindowOpenMethod.enabled` 查看，若配置项为0或不存在， 1736可通过命令`hdc shell param set persist.web.allowWindowOpenMethod.enabled 1` 开启配置。 1737 1738**系统能力：** SystemCapability.Web.Webview.Core 1739 1740**参数：** 1741 1742| 参数名 | 类型 | 必填 | 说明 | 1743| ---- | ------- | ---- | ------------------------- | 1744| flag | boolean | 是 | 网页是否可以通过JavaScript自动打开窗口。<br>true表示网页可以通过JavaScript自动打开窗口，false表示网页不可以通过JavaScript自动打开窗口。<br>默认值与系统参数关联，当系统参数persist.web.allowWindowOpenMethod.enabled为true时，默认值为true，否则为false。 | 1745 1746**示例：** 1747 1748 ```ts 1749 // xxx.ets 1750 import { webview } from '@kit.ArkWeb'; 1751 1752 // 在同一page页有两个Web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。 1753 @CustomDialog 1754 struct NewWebViewComp { 1755 controller?: CustomDialogController; 1756 webviewController1: webview.WebviewController = new webview.WebviewController(); 1757 1758 build() { 1759 Column() { 1760 Web({ src: "", controller: this.webviewController1 }) 1761 .javaScriptAccess(true) 1762 .multiWindowAccess(false) 1763 .onWindowExit(() => { 1764 console.info("NewWebViewComp onWindowExit"); 1765 if (this.controller) { 1766 this.controller.close(); 1767 } 1768 }) 1769 } 1770 } 1771 } 1772 1773 @Entry 1774 @Component 1775 struct WebComponent { 1776 controller: webview.WebviewController = new webview.WebviewController(); 1777 dialogController: CustomDialogController | null = null; 1778 1779 build() { 1780 Column() { 1781 Web({ src: 'www.example.com', controller: this.controller }) 1782 .javaScriptAccess(true) 1783 // 需要使能multiWindowAccess 1784 .multiWindowAccess(true) 1785 .allowWindowOpenMethod(true) 1786 .onWindowNew((event) => { 1787 if (this.dialogController) { 1788 this.dialogController.close(); 1789 } 1790 let popController: webview.WebviewController = new webview.WebviewController(); 1791 this.dialogController = new CustomDialogController({ 1792 builder: NewWebViewComp({ webviewController1: popController }) 1793 }) 1794 this.dialogController.open(); 1795 // 将新窗口对应WebviewController返回给Web内核。 1796 // 若不调用event.handler.setWebController接口，会造成render进程阻塞。 1797 // 如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。 1798 event.handler.setWebController(popController); 1799 }) 1800 } 1801 } 1802 } 1803 ``` 1804 1805### mediaOptions<sup>10+</sup> 1806 1807mediaOptions(options: WebMediaOptions) 1808 1809设置Web媒体播放的策略，其中包括：Web中的音频在重新获焦后能够自动续播的有效期、应用内多个Web实例的音频是否独占。 1810 1811> **说明：** 1812> 1813> - 同一Web实例中的多个音频均视为同一音频。 1814> - 该媒体播放策略将同时管控有声视频。 1815> - 属性参数更新后需重新播放音频方可生效。 1816> - 建议为所有Web组件设置相同的audioExclusive值。 1817> - 音视频互相打断在应用内和应用间生效，续播只在应用间生效。 1818 1819**系统能力：** SystemCapability.Web.Webview.Core 1820 1821**参数：** 1822 1823| 参数名 | 类型 | 必填 | 说明 | 1824| ------- | ------------------------------------- | ---- | ---------------------------------------- | 1825| options | [WebMediaOptions](#webmediaoptions10) | 是 | 设置Web的媒体策略。其中，resumeInterval的默认值为0表示不自动续播。默认值：{resumeInterval: 0, audioExclusive: true}。 | 1826 1827**示例：** 1828 1829 ```ts 1830 // xxx.ets 1831 import { webview } from '@kit.ArkWeb'; 1832 1833 @Entry 1834 @Component 1835 struct WebComponent { 1836 controller: webview.WebviewController = new webview.WebviewController(); 1837 @State options: WebMediaOptions = {resumeInterval: 10, audioExclusive: true}; 1838 1839 build() { 1840 Column() { 1841 Web({ src: 'www.example.com', controller: this.controller }) 1842 .mediaOptions(this.options) 1843 } 1844 } 1845 } 1846 ``` 1847 1848### javaScriptOnDocumentStart<sup>11+</sup> 1849 1850javaScriptOnDocumentStart(scripts: Array\<ScriptItem>) 1851 1852将JavaScript脚本注入到Web组件中，当指定页面或者文档开始加载时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1853 1854> **说明：** 1855> 1856> - 该脚本将在页面的任何JavaScript代码之前运行，并且DOM树此时可能尚未加载、渲染完毕。 1857> - 该脚本按照字典序执行，非数组本身顺序，若需数组本身顺序，建议使用[runJavaScriptOnDocumentStart](#runjavascriptondocumentstart15)接口。 1858> - 不建议与[runJavaScriptOnDocumentStart](#runjavascriptondocumentstart15)同时使用。 1859 1860**系统能力：** SystemCapability.Web.Webview.Core 1861 1862**参数：** 1863 1864| 参数名 | 类型 | 必填 | 说明 | 1865| ------- | ----------------------------------- | ---- | ------------------ | 1866| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组。 | 1867 1868**ets示例：** 1869 1870 ```ts 1871 // xxx.ets 1872 import { webview } from '@kit.ArkWeb'; 1873 1874 @Entry 1875 @Component 1876 struct Index { 1877 controller: webview.WebviewController = new webview.WebviewController(); 1878 private localStorage: string = 1879 "if (typeof(Storage) !== 'undefined') {" + 1880 " localStorage.setItem('color', 'Red');" + 1881 "}"; 1882 @State scripts: Array<ScriptItem> = [ 1883 { script: this.localStorage, scriptRules: ["*"] } 1884 ]; 1885 1886 build() { 1887 Column({ space: 20 }) { 1888 Web({ src: $rawfile('index.html'), controller: this.controller }) 1889 .javaScriptAccess(true) 1890 .domStorageAccess(true) 1891 .backgroundColor(Color.Grey) 1892 .javaScriptOnDocumentStart(this.scripts) 1893 .width('100%') 1894 .height('100%') 1895 } 1896 } 1897 } 1898 ``` 1899**HTML示例：** 1900 1901```html 1902<!-- index.html --> 1903<!DOCTYPE html> 1904<html> 1905 <head> 1906 <meta charset="utf-8"> 1907 </head> 1908 <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 1909 Hello world! 1910 <div id="result"></div> 1911 </body> 1912 <script type="text/javascript"> 1913 function bodyOnLoadLocalStorage() { 1914 if (typeof(Storage) !== 'undefined') { 1915 document.getElementById('result').innerHTML = localStorage.getItem('color'); 1916 } else { 1917 document.getElementById('result').innerHTML = 'Your browser does not support localStorage.'; 1918 } 1919 } 1920 </script> 1921</html> 1922``` 1923 1924### javaScriptOnDocumentEnd<sup>11+</sup> 1925 1926javaScriptOnDocumentEnd(scripts: Array\<ScriptItem>) 1927 1928将JavaScript脚本注入到Web组件中，当指定页面或者文档加载完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1929 1930> **说明：** 1931> 1932> - 该脚本将在页面的任何JavaScript代码之后运行，并且DOM树此时已经加载、渲染完毕。 1933> - 该脚本按照字典序执行，非数组本身顺序。 1934> - 不建议与[runJavaScriptOnDocumentEnd](#runjavascriptondocumentend15)同时使用。 1935 1936**系统能力：** SystemCapability.Web.Webview.Core 1937 1938**参数：** 1939 1940| 参数名 | 类型 | 必填 | 说明 | 1941| ------- | ----------------------------------- | ---- | ------------------ | 1942| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 1943 1944**示例：** 1945 1946 ```ts 1947// xxx.ets 1948import { webview } from '@kit.ArkWeb'; 1949 1950@Entry 1951@Component 1952struct Index { 1953 controller: webview.WebviewController = new webview.WebviewController(); 1954 private jsStr: string = 1955 "window.document.getElementById(\"result\").innerHTML = 'this is msg from javaScriptOnDocumentEnd'"; 1956 @State scripts: Array<ScriptItem> = [ 1957 { script: this.jsStr, scriptRules: ["*"] } 1958 ]; 1959 1960 build() { 1961 Column({ space: 20 }) { 1962 Web({ src: $rawfile('index.html'), controller: this.controller }) 1963 .javaScriptAccess(true) 1964 .domStorageAccess(true) 1965 .backgroundColor(Color.Grey) 1966 .javaScriptOnDocumentEnd(this.scripts) 1967 .width('100%') 1968 .height('100%') 1969 } 1970 } 1971} 1972 ``` 1973 1974```html 1975<!DOCTYPE html> 1976<html> 1977<head> 1978 <meta charset="utf-8"> 1979</head> 1980<body style="font-size: 30px;"> 1981Hello world! 1982<div id="result">test msg</div> 1983</body> 1984</html> 1985``` 1986 1987### runJavaScriptOnDocumentStart<sup>15+</sup> 1988 1989runJavaScriptOnDocumentStart(scripts: Array\<ScriptItem>) 1990 1991将JavaScript脚本注入到Web组件中，当指定页面或者文档开始加载时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1992 1993> **说明：** 1994> 1995> - 该脚本将在页面的任何JavaScript代码之前运行，并且DOM树此时可能尚未加载、渲染完毕。 1996> - 该脚本按照数组本身顺序执行。 1997> - 不建议与[javaScriptOnDocumentStart](#javascriptondocumentstart11)同时使用。 1998 1999**系统能力：** SystemCapability.Web.Webview.Core 2000 2001**参数：** 2002 2003| 参数名 | 类型 | 必填 | 说明 | 2004| ------- | ----------------------------------- | ---- | ------------------ | 2005| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 2006 2007**ets示例：** 2008 2009 ```ts 2010 // xxx.ets 2011 import { webview } from '@kit.ArkWeb'; 2012 2013 @Entry 2014 @Component 2015 struct Index { 2016 controller: webview.WebviewController = new webview.WebviewController(); 2017 private localStorage: string = 2018 "if (typeof(Storage) !== 'undefined') {" + 2019 " localStorage.setItem('color', 'Red');" + 2020 "}"; 2021 @State scripts: Array<ScriptItem> = [ 2022 { script: this.localStorage, scriptRules: ["*"] } 2023 ]; 2024 2025 build() { 2026 Column({ space: 20 }) { 2027 Web({ src: $rawfile('index.html'), controller: this.controller }) 2028 .javaScriptAccess(true) 2029 .domStorageAccess(true) 2030 .backgroundColor(Color.Grey) 2031 .runJavaScriptOnDocumentStart(this.scripts) 2032 .width('100%') 2033 .height('100%') 2034 } 2035 } 2036 } 2037 ``` 2038**HTML示例：** 2039 2040```html 2041<!-- index.html --> 2042<!DOCTYPE html> 2043<html> 2044 <head> 2045 <meta charset="utf-8"> 2046 </head> 2047 <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 2048 Hello world! 2049 <div id="result"></div> 2050 </body> 2051 <script type="text/javascript"> 2052 function bodyOnLoadLocalStorage() { 2053 if (typeof(Storage) !== 'undefined') { 2054 document.getElementById('result').innerHTML = localStorage.getItem('color'); 2055 } else { 2056 document.getElementById('result').innerHTML = 'Your browser does not support localStorage.'; 2057 } 2058 } 2059 </script> 2060</html> 2061``` 2062 2063### runJavaScriptOnDocumentEnd<sup>15+</sup> 2064 2065runJavaScriptOnDocumentEnd(scripts: Array\<ScriptItem>) 2066 2067将JavaScript脚本注入到Web组件中，当指定页面或者文档加载完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 2068 2069> **说明：** 2070> 2071> - 该脚本将在页面的任何JavaScript代码之后运行，并且DOM树此时已经加载、渲染完毕。 2072> - 该脚本按照数组本身顺序执行。 2073> - 不建议与[javaScriptOnDocumentEnd](#javascriptondocumentend11)同时使用。 2074 2075**系统能力：** SystemCapability.Web.Webview.Core 2076 2077**参数：** 2078 2079| 参数名 | 类型 | 必填 | 说明 | 2080| ------- | ----------------------------------- | ---- | ------------------ | 2081| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 2082 2083**示例：** 2084 2085 ```ts 2086// xxx.ets 2087import { webview } from '@kit.ArkWeb'; 2088 2089@Entry 2090@Component 2091struct Index { 2092 controller: webview.WebviewController = new webview.WebviewController(); 2093 private jsStr: string = 2094 "window.document.getElementById(\"result\").innerHTML = 'this is msg from runJavaScriptOnDocumentEnd'"; 2095 @State scripts: Array<ScriptItem> = [ 2096 { script: this.jsStr, scriptRules: ["*"] } 2097 ]; 2098 2099 build() { 2100 Column({ space: 20 }) { 2101 Web({ src: $rawfile('index.html'), controller: this.controller }) 2102 .javaScriptAccess(true) 2103 .domStorageAccess(true) 2104 .backgroundColor(Color.Grey) 2105 .runJavaScriptOnDocumentEnd(this.scripts) 2106 .width('100%') 2107 .height('100%') 2108 } 2109 } 2110} 2111 ``` 2112 2113```html 2114<!DOCTYPE html> 2115<html> 2116<head> 2117 <meta charset="utf-8"> 2118</head> 2119<body style="font-size: 30px;"> 2120Hello world! 2121<div id="result">test msg</div> 2122</body> 2123</html> 2124``` 2125 2126### runJavaScriptOnHeadEnd<sup>15+</sup> 2127 2128runJavaScriptOnHeadEnd(scripts: Array\<ScriptItem>) 2129 2130将JavaScript脚本注入到Web组件中，当页面DOM树head标签解析完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 2131 2132> **说明：** 2133> 2134> - 该脚本按照数组本身顺序执行。 2135 2136**系统能力：** SystemCapability.Web.Webview.Core 2137 2138**参数：** 2139 2140| 参数名 | 类型 | 必填 | 说明 | 2141| ------- | ----------------------------------- | ---- | ------------------ | 2142| scripts | Array\<[ScriptItem](#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 2143 2144**示例：** 2145 2146 ```ts 2147// xxx.ets 2148import { webview } from '@kit.ArkWeb'; 2149 2150@Entry 2151@Component 2152struct Index { 2153 controller: webview.WebviewController = new webview.WebviewController(); 2154 private jsStr: string = 2155 "window.document.getElementById(\"result\").innerHTML = 'this is msg from runJavaScriptOnHeadEnd'"; 2156 @State scripts: Array<ScriptItem> = [ 2157 { script: this.jsStr, scriptRules: ["*"] } 2158 ]; 2159 2160 build() { 2161 Column({ space: 20 }) { 2162 Web({ src: $rawfile('index.html'), controller: this.controller }) 2163 .javaScriptAccess(true) 2164 .domStorageAccess(true) 2165 .backgroundColor(Color.Grey) 2166 .runJavaScriptOnHeadEnd(this.scripts) 2167 .width('100%') 2168 .height('100%') 2169 } 2170 } 2171} 2172 ``` 2173 2174```html 2175<!DOCTYPE html> 2176<html> 2177<head> 2178 <meta charset="utf-8"> 2179</head> 2180<body style="font-size: 30px;"> 2181Hello world! 2182<div id="result">test msg</div> 2183</body> 2184</html> 2185``` 2186 2187### layoutMode<sup>11+</sup> 2188 2189layoutMode(mode: WebLayoutMode) 2190 2191设置Web布局模式。 2192 2193> **说明：** 2194> 2195> 目前只支持两种Web布局模式，分别为Web布局跟随系统（WebLayoutMode.NONE）和Web组件高度基于前端页面高度的自适应网页布局（WebLayoutMode.FIT_CONTENT）。 2196> 2197> Web组件高度基于前端页面自适应布局有如下限制： 2198> - 如果Web组件宽或长度超过7680px，请在Web组件创建的时候指定RenderMode.SYNC_RENDER模式，否则会整个白屏。 2199> - Web组件创建后不支持动态切换layoutMode模式 2200> - Web组件宽高规格：指定RenderMode.SYNC_RENDER模式时，分别不超过50万px；指定RenderMode.ASYNC_RENDER模式时，分别不超过7680px。 2201> - 频繁更改页面宽高会触发Web组件重新布局，影响体验。 2202> - 不支持瀑布流网页（下拉到底部加载更多）。 2203> - 仅支持高度自适应，不支持宽度自适应。 2204> - 由于高度自适应网页高度，您无法通过修改组件高度属性来修改组件高度。 2205 2206**系统能力：** SystemCapability.Web.Webview.Core 2207 2208**参数：** 2209 2210| 参数名 | 类型 | 必填 | 说明 | 2211| ---- | ------------------------------------- | ---- | --------------------- | 2212| mode | [WebLayoutMode](#weblayoutmode11枚举说明) | 是 | 设置web布局模式，跟随系统或自适应布局。默认值：WebLayoutMode.NONE。 | 2213 2214**示例：** 2215 2216 1、指明layoutMode为WebLayoutMode.FIT_CONTENT模式，为避免默认渲染模式下(RenderMode.ASYNC_RENDER)视口高度超过7680px导致页面渲染出错，需要显式指明渲染模式(RenderMode.SYNC_RENDER)。 2217 ```ts 2218 // xxx.ets 2219 import { webview } from '@kit.ArkWeb'; 2220 2221 @Entry 2222 @Component 2223 struct WebComponent { 2224 controller: webview.WebviewController = new webview.WebviewController(); 2225 mode: WebLayoutMode = WebLayoutMode.FIT_CONTENT; 2226 2227 build() { 2228 Column() { 2229 Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER }) 2230 .layoutMode(this.mode) 2231 } 2232 } 2233 } 2234 ``` 2235 2236 2、指明layoutMode为WebLayoutMode.FIT_CONTENT模式，为避免嵌套滚动场景下，Web滚动到边缘时会优先触发过滚动的过界回弹效果影响用户体验，建议指定overScrollMode为OverScrollMode.NEVER。 2237 ```ts 2238 // xxx.ets 2239 import { webview } from '@kit.ArkWeb'; 2240 2241 @Entry 2242 @Component 2243 struct WebComponent { 2244 controller: webview.WebviewController = new webview.WebviewController(); 2245 layoutMode: WebLayoutMode = WebLayoutMode.FIT_CONTENT; 2246 @State overScrollMode: OverScrollMode = OverScrollMode.NEVER; 2247 2248 build() { 2249 Column() { 2250 Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER }) 2251 .layoutMode(this.layoutMode) 2252 .overScrollMode(this.overScrollMode) 2253 } 2254 } 2255 } 2256 ``` 2257 2258### nestedScroll<sup>11+</sup> 2259 2260nestedScroll(value: NestedScrollOptions | NestedScrollOptionsExt) 2261 2262调用以设置嵌套滚动选项。 2263 2264> **说明：** 2265> 2266> - 可以设置上下左右四个方向，或者设置向前、向后两个方向的嵌套滚动模式，实现与父组件的滚动联动。 2267> - value为NestedScrollOptionsExt（上下左右四个方向）类型时，scrollUp、scrollDown、scrollLeft、scrollRight默认滚动选项为[NestedScrollMode.SELF_FIRST](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10)。 2268> - value为NestedScrollOptions（向前、向后两个方向）类型时，scrollForward、scrollBackward默认滚动选项为NestedScrollMode.SELF_FIRST。 2269> - 支持嵌套滚动的容器：[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)。 2270> - 支持嵌套滚动的输入事件：使用手势、鼠标、触控板。 2271> - 嵌套滚动场景下，由于Web滚动到边缘时会优先触发过滚动的过界回弹效果，建议设置overScrollMode为OverScrollMode.NEVER，避免影响此场景的用户体验。 2272 2273**系统能力：** SystemCapability.Web.Webview.Core 2274 2275**参数：** 2276 2277| 参数名 | 类型 | 必填 | 说明 | 2278| ----- | ---------------------------------------- | ---- | ---------------- | 2279| value | [NestedScrollOptions](../apis-arkui/arkui-ts/ts-container-scrollable-common.md#nestedscrolloptions10对象说明) \| [NestedScrollOptionsExt](#nestedscrolloptionsext14对象说明)<sup>14+</sup> | 是 | 可滚动组件滚动时的嵌套滚动选项。 | 2280 2281**示例：** 2282 2283 ```ts 2284 // xxx.ets 2285 import { webview } from '@kit.ArkWeb'; 2286 @Entry 2287 @Component 2288 struct WebComponent { 2289 controller: webview.WebviewController = new webview.WebviewController(); 2290 2291 build() { 2292 Column() { 2293 Web({ src: 'www.example.com', controller: this.controller }) 2294 .nestedScroll({ 2295 scrollForward: NestedScrollMode.SELF_FIRST, 2296 scrollBackward: NestedScrollMode.SELF_FIRST, 2297 }) 2298 } 2299 } 2300 } 2301 ``` 2302 ```ts 2303 // xxx.ets 2304 import { webview } from '@kit.ArkWeb'; 2305 @Entry 2306 @Component 2307 struct WebComponent { 2308 controller: webview.WebviewController = new webview.WebviewController() 2309 build() { 2310 Scroll(){ 2311 Column() { 2312 Text("嵌套Web") 2313 .height("25%") 2314 .width("100%") 2315 .fontSize(30) 2316 .backgroundColor(Color.Yellow) 2317 Web({ src: $rawfile('index.html'), 2318 controller: this.controller }) 2319 .nestedScroll({ 2320 scrollUp: NestedScrollMode.SELF_FIRST, 2321 scrollDown: NestedScrollMode.PARENT_FIRST, 2322 scrollLeft: NestedScrollMode.SELF_FIRST, 2323 scrollRight: NestedScrollMode.SELF_FIRST, 2324 }) 2325 } 2326 } 2327 } 2328 } 2329 ``` 2330 加载的html文件。 2331 ```html 2332 <!-- index.html --> 2333 <!DOCTYPE html> 2334 <html> 2335 <head> 2336 <style> 2337 .blue { 2338 background-color: lightblue; 2339 } 2340 .green { 2341 background-color: lightgreen; 2342 } 2343 .blue, .green { 2344 width: 100%; 2345 font-size:70px; 2346 height:1000px; 2347 } 2348 </style> 2349 </head> 2350 <body> 2351 <div class="blue" align="center" >滚动1</div> 2352 <div class="green" align="center">滚动2</div> 2353 <div class="blue" align="center">滚动3</div> 2354 <div class="green" align="center">滚动4</div> 2355 <div class="blue" align="center">滚动5</div> 2356 <div class="green" align="center">滚动6</div> 2357 <div class="blue" align="center">滚动7</div> 2358 </body> 2359 </html> 2360 ``` 2361 2362### enableNativeEmbedMode<sup>11+</sup> 2363 2364enableNativeEmbedMode(mode: boolean) 2365 2366设置是否开启同层渲染功能，默认不开启。 2367 2368**系统能力：** SystemCapability.Web.Webview.Core 2369 2370**参数：** 2371 2372| 参数名 | 类型 | 必填 | 说明 | 2373| ----- | ---------------------------------------- | ---- | ---------------- | 2374| mode | boolean | 是 | 是否开启同层渲染功能。<br>true表示开启同层渲染功能，false表示不开启同层渲染功能。<br>默认值：false。 | 2375 2376**示例：** 2377 2378 ```ts 2379 // xxx.ets 2380 import { webview } from '@kit.ArkWeb'; 2381 @Entry 2382 @Component 2383 struct WebComponent { 2384 controller: webview.WebviewController = new webview.WebviewController(); 2385 2386 build() { 2387 Column() { 2388 Web({ src: 'www.example.com', controller: this.controller }) 2389 .enableNativeEmbedMode(true) 2390 } 2391 } 2392 } 2393 ``` 2394### forceDisplayScrollBar<sup>14+</sup> 2395 2396forceDisplayScrollBar(enabled: boolean) 2397 2398 2399设置滚动条是否常驻。默认不常驻，在常驻状态下，当页面大小超过一页时，滚动条出现且不消失。 2400 2401全量展开模式下不支持滚动条常驻，即layoutMode为WebLayoutMode.FIT_CONTENT模式时，参数enabled为false。 2402 2403**系统能力：** SystemCapability.Web.Webview.Core 2404 2405**参数：** 2406 2407| 参数名 | 类型 | 必填 | 说明 | 2408| ------- | -------- | ---- | ------------------ | 2409| enabled | boolean | 是 | 滚动条是否常驻。<br>true表示滚动条常驻，false表示滚动条不常驻。<br>默认值：false。 | 2410 2411 2412**示例：** 2413 2414 ```ts 2415 // xxx.ets 2416 import { webview } from '@kit.ArkWeb'; 2417 2418 @Entry 2419 @Component 2420 struct WebComponent { 2421 controller: webview.WebviewController = new webview.WebviewController(); 2422 2423 build() { 2424 Column() { 2425 Web({ src: $rawfile('index.html'), controller: this.controller }) 2426 .forceDisplayScrollBar(true) 2427 } 2428 } 2429 } 2430 ``` 2431 2432 加载的html文件。 2433 ```html 2434 <!--index.html--> 2435 <!DOCTYPE html> 2436 <html> 2437 <head> 2438 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2439 <title>Demo</title> 2440 <style> 2441 body { 2442 width:2560px; 2443 height:2560px; 2444 padding-right:170px; 2445 padding-left:170px; 2446 border:5px solid blueviolet 2447 } 2448 </style> 2449 </head> 2450 <body> 2451 Scroll Test 2452 </body> 2453 </html> 2454 ``` 2455### registerNativeEmbedRule<sup>12+</sup> 2456 2457registerNativeEmbedRule(tag: string, type: string) 2458 2459注册使用同层渲染的HTML标签名和类型。标签名仅支持使用object和embed。标签类型只能使用ASCII可显示字符。 2460 2461若指定类型与w3c定义的object或embed标准类型重合，ArkWeb内核将其识别为非同层标签。 2462 2463本接口同样受enableNativeEmbedMode接口控制，在未使能同层渲染时本接口无效。在不使用本接口的情况下，ArkWeb内核默认将"native/"前缀类型的embed标签识别为同层标签。 2464 2465**系统能力：** SystemCapability.Web.Webview.Core 2466 2467**参数：** 2468 2469| 参数名 | 类型 | 必填 | 说明 | 2470|------|--------| ---- |------------------| 2471| tag | string | 是 | 标签名。 | 2472| type | string | 是 | 标签类型,内核使用前缀匹配此参数。 | 2473 2474**示例：** 2475 2476 ```ts 2477 // xxx.ets 2478 import { webview } from '@kit.ArkWeb'; 2479 2480 @Entry 2481 @Component 2482 struct WebComponent { 2483 controller: webview.WebviewController = new webview.WebviewController(); 2484 2485 build() { 2486 Column() { 2487 Web({ src: 'www.example.com', controller: this.controller }) 2488 .enableNativeEmbedMode(true) 2489 .registerNativeEmbedRule("object", "application/view") 2490 } 2491 } 2492 } 2493 ``` 2494### defaultTextEncodingFormat<sup>12+</sup> 2495 2496defaultTextEncodingFormat(textEncodingFormat: string) 2497 2498设置网页的默认字符编码。 2499 2500**系统能力：** SystemCapability.Web.Webview.Core 2501 2502**参数：** 2503 2504| 参数名 | 类型 | 必填 | 说明 | 2505| ---- | ------ | ---- | ---------------------------------------- | 2506| textEncodingFormat | string | 是 | 默认字符编码。默认值："UTF-8"。 | 2507 2508 **示例：** 2509 2510 ```ts 2511 // xxx.ets 2512 import { webview } from '@kit.ArkWeb'; 2513 2514 @Entry 2515 @Component 2516 struct WebComponent { 2517 controller: webview.WebviewController = new webview.WebviewController(); 2518 2519 build() { 2520 Column() { 2521 Web({ src: $rawfile('index.html'), controller: this.controller }) 2522 // 设置高 2523 .height(500) 2524 .defaultTextEncodingFormat("UTF-8") 2525 .javaScriptAccess(true) 2526 } 2527 } 2528 } 2529 ``` 2530 2531```html 2532 2533<!doctype html> 2534<html> 2535<head> 2536 <meta name="viewport" content="width=device-width" /> 2537 <title>My test html5 page</title> 2538</head> 2539<body> 2540 hello world, 你好世界! 2541</body> 2542</html> 2543``` 2544### metaViewport<sup>12+</sup> 2545 2546metaViewport(enabled: boolean) 2547 2548设置meta标签的viewport属性是否可用。 2549 2550> **说明：** 2551> 2552> - 设置false不支持meta标签viewport属性，将不解析viewport属性，进行默认布局。 2553> - 设置true支持meta标签viewport属性，将解析viewport属性，并根据viewport属性布局。 2554> - 如果设置为异常值将无效。 2555> - 如果设备为2in1，不支持viewport属性。设置为true或者false均不会解析viewport属性，进行默认布局。 2556> - 如果设备为Tablet，设置为true或false均会解析meta标签viewport-fit属性。当viewport-fit=cover时，可通过CSS属性获取安全区域大小。 2557> - 当前通过User-Agent中是否含有"Mobile"字段来判断是否开启前端HTML页面中meta标签的viewport属性。当User-Agent中不含有"Mobile"字段时，meta标签中viewport属性默认关闭，此时可通过显性设置metaViewport属性为true来覆盖关闭状态。 2558 2559**系统能力：** SystemCapability.Web.Webview.Core 2560 2561**参数：** 2562 2563| 参数名 | 类型 | 必填 | 说明 | 2564| ------ | -------- | ---- | -------------------------------- | 2565| enabled | boolean | 是 | 是否支持meta标签的viewport属性。<br>true表示支持meta标签的viewport属性，false表示不支持meta标签的viewport属性。<br>默认值：true。 | 2566 2567**示例：** 2568 2569 ```ts 2570// xxx.ets 2571import { webview } from '@kit.ArkWeb'; 2572 2573@Entry 2574@Component 2575struct WebComponent { 2576 controller: webview.WebviewController = new webview.WebviewController(); 2577 2578 build() { 2579 Column() { 2580 Web({ src: $rawfile('index.html'), controller: this.controller }) 2581 .metaViewport(true) 2582 } 2583 } 2584} 2585 ``` 2586 2587```html 2588<!doctype html> 2589<html> 2590<head> 2591 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2592</head> 2593<body> 2594 <p>hello world, 你好世界!</p> 2595</body> 2596</html> 2597``` 2598 2599### textAutosizing<sup>12+</sup> 2600 2601textAutosizing(textAutosizing: boolean) 2602 2603设置使能文本自动调整大小。 2604 2605**系统能力：** SystemCapability.Web.Webview.Core 2606 2607**参数：** 2608 2609| 参数名 | 类型 | 必填 | 说明 | 2610| ---- | ------ | ---- | ---------------------------------------- | 2611| textAutosizing | boolean | 是 | 文本自动调整大小。<br>true表示文本自动调整大小，false表示文本不自动调整大小。<br>默认值：true。 | 2612 2613 **示例：** 2614 2615 ```ts 2616 // xxx.ets 2617 import { webview } from '@kit.ArkWeb'; 2618 2619 @Entry 2620 @Component 2621 struct WebComponent { 2622 controller: webview.WebviewController = new webview.WebviewController(); 2623 2624 build() { 2625 Column() { 2626 Web({ src: 'www.example.com', controller: this.controller }) 2627 .textAutosizing(false) 2628 } 2629 } 2630 } 2631 ``` 2632### enableNativeMediaPlayer<sup>12+</sup> 2633 2634enableNativeMediaPlayer(config: NativeMediaPlayerConfig) 2635 2636开启[应用接管网页媒体播放功能](../../web/app-takeovers-web-media.md)。 2637 2638**系统能力：** SystemCapability.Web.Webview.Core 2639 2640**参数：** 2641 2642| 参数名 | 类型 | 必填 | 说明 | 2643| ---- | ------ | ---- | ---------------------| 2644| config | [NativeMediaPlayerConfig](#nativemediaplayerconfig12) | 是 | enable: 是否开启该功能。<br/> shouldOverlay: 该功能开启后， 应用接管网页视频的播放器画面是否覆盖网页内容。默认值：{enable: false, shouldOverlay: false}。| 2645 2646 **示例：** 2647 2648 ```ts 2649 // xxx.ets 2650 import { webview } from '@kit.ArkWeb'; 2651 2652 @Entry 2653 @Component 2654 struct WebComponent { 2655 controller: webview.WebviewController = new webview.WebviewController(); 2656 2657 build() { 2658 Column() { 2659 Web({ src: 'www.example.com', controller: this.controller }) 2660 .enableNativeMediaPlayer({enable: true, shouldOverlay: false}) 2661 } 2662 } 2663 } 2664 ``` 2665 2666### selectionMenuOptions<sup>12+</sup> 2667 2668selectionMenuOptions(expandedMenuOptions: Array\<ExpandedMenuItemOptions>) 2669 2670Web组件自定义菜单扩展项接口，允许用户设置扩展项的文本内容、图标、回调方法。 2671 2672该接口只支持选中纯文本，当选中内容包含图片及其他非文本内容时，action信息中会显示乱码。 2673 2674**系统能力：** SystemCapability.Web.Webview.Core 2675 2676**参数：** 2677 2678| 参数名 | 类型 | 必填 | 说明 | 2679| ------------------- | ---------------------------------------------------------- | ---- | ------------- | 2680| expandedMenuOptions | Array<[ExpandedMenuItemOptions](#expandedmenuitemoptions12)> | 是 | 扩展菜单选项。<br/>菜单项数量，及菜单的content大小、startIcon图标尺寸，与ArkUI [Menu](../apis-arkui/arkui-ts/ts-basic-components-menu.md)组件保持一致。| 2681 2682**示例：** 2683 2684 ```ts 2685 // xxx.ets 2686 import { webview } from '@kit.ArkWeb'; 2687 2688 @Entry 2689 @Component 2690 struct WebComponent { 2691 controller: webview.WebviewController = new webview.WebviewController(); 2692 @State menuOptionArray: Array<ExpandedMenuItemOptions> = [ 2693 {content: 'Apple', startIcon: $r('app.media.icon'), action: (selectedText) => { 2694 console.info('select info ' + selectedText.toString()); 2695 }}, 2696 {content: '香蕉', startIcon: $r('app.media.icon'), action: (selectedText) => { 2697 console.info('select info ' + selectedText.toString()); 2698 }} 2699 ]; 2700 2701 build() { 2702 Column() { 2703 Web({ src: $rawfile("index.html"), controller: this.controller }) 2704 .selectionMenuOptions(this.menuOptionArray) 2705 } 2706 } 2707 } 2708 ``` 2709 2710 加载的html文件。 2711 ```html 2712 <!--index.html--> 2713 <!DOCTYPE html> 2714 <html> 2715 <head> 2716 <title>测试网页</title> 2717 </head> 2718 <body> 2719 <h1>selectionMenuOptions Demo</h1> 2720 <span>selection menu options</span> 2721 </body> 2722 </html> 2723 ``` 2724 2725### onAdsBlocked<sup>12+</sup> 2726 2727onAdsBlocked(callback: OnAdsBlockedCallback) 2728 2729一个页面发生广告过滤后，通过此回调接口通知过滤的详细信息。由于页面可能随时发生变化并不断产生网络请求，为了减少通知频次、降低对页面加载过程的影响，仅在页面加载完成时进行首次通知，此后发生的过滤将间隔1秒钟上报，无广告过滤则无通知。 2730 2731**系统能力：** SystemCapability.Web.Webview.Core 2732 2733**参数：** 2734 2735| 参数名 | 类型 | 必填 | 说明 | 2736| ------ | ------ | ---- | --------------------- | 2737| callback | [OnAdsBlockedCallback](#onadsblockedcallback12) | 是 | onAdsBlocked的回调。 | 2738 2739**示例：** 2740 2741 ```ts 2742 // xxx.ets 2743 import { webview } from '@kit.ArkWeb'; 2744 2745 @Entry 2746 @Component 2747 struct WebComponent { 2748 @State totalAdsBlockCounts: number = 0; 2749 controller: webview.WebviewController = new webview.WebviewController(); 2750 2751 build() { 2752 Column() { 2753 Web({ src: 'https://www.example.com', controller: this.controller }) 2754 .onAdsBlocked((details: AdsBlockedDetails) => { 2755 if (details) { 2756 console.log(' Blocked ' + details.adsBlocked.length + ' in ' + details.url); 2757 let adList: Array<string> = Array.from(new Set(details.adsBlocked)); 2758 this.totalAdsBlockCounts += adList.length; 2759 console.log('Total blocked counts :' + this.totalAdsBlockCounts); 2760 } 2761 }) 2762 } 2763 } 2764 } 2765 ``` 2766 2767### keyboardAvoidMode<sup>12+</sup> 2768 2769keyboardAvoidMode(mode: WebKeyboardAvoidMode) 2770 2771Web组件自定义软件键盘避让模式。 2772 2773当UIContext设置的键盘避让模式为[KeyboardAvoidMode.RESIZE](../apis-arkui/js-apis-arkui-UIContext.md#keyboardavoidmode11)模式时，该接口功能不生效。 2774 2775**系统能力：** SystemCapability.Web.Webview.Core 2776 2777**参数：** 2778 2779| 参数名 | 类型 | 必填 | 说明 | 2780| ------------------- | ------------------------------ | ------ | ------------- | 2781| mode | [WebKeyboardAvoidMode](#webkeyboardavoidmode12) | 是 | Web软键盘避让模式。<br>默认是WebKeyboardAvoidMode.RESIZE_CONTENT避让行为。<br>嵌套滚动场景下不推荐使用web软键盘避让，包括RESIZE_VISUAL与RESIZE_CONTENT。| 2782 2783**示例：** 2784 2785 ```ts 2786 // xxx.ets 2787 import { webview } from '@kit.ArkWeb'; 2788 2789 @Entry 2790 @Component 2791 struct WebComponent { 2792 controller: webview.WebviewController = new webview.WebviewController(); 2793 @State avoidMode: WebKeyboardAvoidMode = WebKeyboardAvoidMode.RESIZE_VISUAL; 2794 2795 build() { 2796 Column() { 2797 Web({ src: $rawfile("index.html"), controller: this.controller }) 2798 .keyboardAvoidMode(this.avoidMode) 2799 } 2800 } 2801 } 2802 ``` 2803 2804 加载的html文件。 2805 ```html 2806 <!--index.html--> 2807 <!DOCTYPE html> 2808 <html> 2809 <head> 2810 <title>测试网页</title> 2811 </head> 2812 <body> 2813 <input type="text" placeholder="Text"> 2814 </body> 2815 </html> 2816 ``` 2817 2818### editMenuOptions<sup>12+</sup> 2819 2820editMenuOptions(editMenu: EditMenuOptions) 2821 2822Web组件自定义文本选择菜单。 2823 2824用户可以通过该属性设置自定义的文本菜单。 2825 2826在[onCreateMenu](../apis-arkui/arkui-ts/ts-text-common.md#oncreatemenu)中，可以修改、增加、删除菜单选项，如果希望不显示文本菜单，需要返回空数组。 2827 2828在[onMenuItemClick](../apis-arkui/arkui-ts/ts-text-common.md#onmenuitemclick)中，可以自定义菜单选项的回调函数。该函数在菜单选项被点击后触发，并根据返回值决定是否执行系统默认的回调。返回true不执行系统回调，返回false继续执行系统回调。 2829 2830本接口在与[selectionMenuOptions](#selectionmenuoptions12)同时使用时，会使selectionMenuOptions不生效。 2831 2832**系统能力：** SystemCapability.Web.Webview.Core 2833 2834**参数：** 2835 2836| 参数名 | 类型 | 必填 | 说明 | 2837| ------------------- | ------------------------------ | ------ | ------------- | 2838| 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。| 2839 2840**示例** 2841 2842```ts 2843// xxx.ets 2844import { webview } from '@kit.ArkWeb'; 2845 2846@Entry 2847@Component 2848struct WebComponent { 2849 controller: webview.WebviewController = new webview.WebviewController(); 2850 2851 onCreateMenu(menuItems: Array<TextMenuItem>): Array<TextMenuItem> { 2852 let items = menuItems.filter((menuItem) => { 2853 // 过滤用户需要的系统按键 2854 return ( 2855 menuItem.id.equals(TextMenuItemId.CUT) || 2856 menuItem.id.equals(TextMenuItemId.COPY) || 2857 menuItem.id.equals((TextMenuItemId.PASTE)) 2858 ) 2859 }); 2860 let customItem1: TextMenuItem = { 2861 content: 'customItem1', 2862 id: TextMenuItemId.of('customItem1'), 2863 icon: $r('app.media.icon') 2864 }; 2865 let customItem2: TextMenuItem = { 2866 content: $r('app.string.customItem2'), 2867 id: TextMenuItemId.of('customItem2'), 2868 icon: $r('app.media.icon') 2869 }; 2870 items.push(customItem1);// 在选项列表后添加新选项 2871 items.unshift(customItem2);// 在选项列表前添加选项 2872 2873 return items; 2874 } 2875 2876 onMenuItemClick(menuItem: TextMenuItem, textRange: TextRange): boolean { 2877 if (menuItem.id.equals(TextMenuItemId.CUT)) { 2878 // 用户自定义行为 2879 console.log("拦截 id：CUT") 2880 return true; // 返回true不执行系统回调 2881 } else if (menuItem.id.equals(TextMenuItemId.COPY)) { 2882 // 用户自定义行为 2883 console.log("不拦截 id：COPY") 2884 return false; // 返回false执行系统回调 2885 } else if (menuItem.id.equals(TextMenuItemId.of('customItem1'))) { 2886 // 用户自定义行为 2887 console.log("拦截 id：customItem1") 2888 return true;// 用户自定义菜单选项返回true时点击后不关闭菜单，返回false时关闭菜单 2889 } else if (menuItem.id.equals((TextMenuItemId.of($r('app.string.customItem2'))))){ 2890 // 用户自定义行为 2891 console.log("拦截 id：app.string.customItem2") 2892 return true; 2893 } 2894 return false;// 返回默认值false 2895 } 2896 2897 @State EditMenuOptions: EditMenuOptions = { onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick } 2898 2899 build() { 2900 Column() { 2901 Web({ src: $rawfile("index.html"), controller: this.controller }) 2902 .editMenuOptions(this.EditMenuOptions) 2903 } 2904 } 2905} 2906``` 2907 2908 加载的html文件。 2909```html 2910<!--index.html--> 2911<!DOCTYPE html> 2912<html> 2913 <head> 2914 <title>测试网页</title> 2915 </head> 2916 <body> 2917 <h1>editMenuOptions Demo</h1> 2918 <span>edit menu options</span> 2919 </body> 2920</html> 2921``` 2922 2923### enableHapticFeedback<sup>13+</sup> 2924 2925enableHapticFeedback(enabled: boolean) 2926 2927设置Web组件长按文本选择是否开启振动，默认开启。 需配置"ohos.permission.VIBRATE"。 2928 2929**系统能力：** SystemCapability.Web.Webview.Core 2930 2931**参数：** 2932 2933| 参数名 | 类型 | 必填 | 说明 | 2934| --------- | --------- | ------ | ------------- | 2935| enabled | boolean | 是 | 是否开启振动。<br>true表示开启振动，false表示不开启振动。<br>默认值：true。 | 2936 2937**示例：** 2938 2939```ts 2940// xxx.ets 2941import { webview } from '@kit.ArkWeb'; 2942 2943@Entry 2944@Component 2945struct WebComponent { 2946 controller: webview.WebviewController = new webview.WebviewController(); 2947 2948 build() { 2949 Column() { 2950 Web({ src: $rawfile("index.html"), controller: this.controller }) 2951 .enableHapticFeedback(true) 2952 } 2953 } 2954} 2955``` 2956 2957 加载的html文件。 2958```html 2959<!--index.html--> 2960<!DOCTYPE html> 2961<html> 2962 <head> 2963 <title>测试网页</title> 2964 </head> 2965 <body> 2966 <h1>enableHapticFeedback Demo</h1> 2967 <span>enable haptic feedback</span> 2968 </body> 2969</html> 2970``` 2971 2972### bindSelectionMenu<sup>13+</sup> 2973 2974bindSelectionMenu(elementType: WebElementType, content: CustomBuilder, responseType: WebResponseType, options?: SelectionMenuOptionsExt) 2975 2976设置自定义选择菜单。 2977 2978**系统能力：** SystemCapability.Web.Webview.Core 2979 2980**参数：** 2981 2982| 参数名 | 类型 | 必填 | 说明 | 2983| ------------ | ------------------------------- | ---- | ----------------------------------- | 2984| elementType | [WebElementType](#webelementtype13枚举说明) | 是 | 菜单的类型。 | 2985| content | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | 是 | 菜单的内容。 | 2986| responseType | [WebResponseType](#webresponsetype13枚举说明) | 是 | 菜单的响应类型。 | 2987| options | [SelectionMenuOptionsExt](#selectionmenuoptionsext13) | 否 | 菜单的选项。| 2988 2989**示例：** 2990 2991```ts 2992// xxx.ets 2993import { webview } from '@kit.ArkWeb'; 2994 2995interface PreviewBuilderParam { 2996 previewImage: Resource | string | undefined; 2997 width: number; 2998 height: number; 2999} 3000 3001@Builder function PreviewBuilderGlobal($$: PreviewBuilderParam) { 3002 Column() { 3003 Image($$.previewImage) 3004 .objectFit(ImageFit.Fill) 3005 .autoResize(true) 3006 }.width($$.width).height($$.height) 3007} 3008 3009@Entry 3010@Component 3011struct WebComponent { 3012 controller: webview.WebviewController = new webview.WebviewController(); 3013 3014 private result: WebContextMenuResult | undefined = undefined; 3015 @State previewImage: Resource | string | undefined = undefined; 3016 @State previewWidth: number = 0; 3017 @State previewHeight: number = 0; 3018 3019 @Builder 3020 MenuBuilder() { 3021 Menu() { 3022 MenuItem({ content: '复制', }) 3023 .onClick(() => { 3024 this.result?.copy(); 3025 this.result?.closeContextMenu(); 3026 }) 3027 MenuItem({ content: '全选', }) 3028 .onClick(() => { 3029 this.result?.selectAll(); 3030 this.result?.closeContextMenu(); 3031 }) 3032 } 3033 } 3034 build() { 3035 Column() { 3036 Web({ src: $rawfile("index.html"), controller: this.controller }) 3037 .bindSelectionMenu(WebElementType.IMAGE, this.MenuBuilder, WebResponseType.LONG_PRESS, 3038 { 3039 onAppear: () => {}, 3040 onDisappear: () => { 3041 this.result?.closeContextMenu(); 3042 }, 3043 preview: PreviewBuilderGlobal({ 3044 previewImage: this.previewImage, 3045 width: this.previewWidth, 3046 height: this.previewHeight 3047 }), 3048 menuType: MenuType.PREVIEW_MENU 3049 }) 3050 .onContextMenuShow((event) => { 3051 if (event) { 3052 this.result = event.result; 3053 if (event.param.getLinkUrl()) { 3054 return false; 3055 } 3056 this.previewWidth = px2vp(event.param.getPreviewWidth()); 3057 this.previewHeight = px2vp(event.param.getPreviewHeight()); 3058 if (event.param.getSourceUrl().indexOf("resource://rawfile/") == 0) { 3059 this.previewImage = $rawfile(event.param.getSourceUrl().substr(19)); 3060 } else { 3061 this.previewImage = event.param.getSourceUrl(); 3062 } 3063 return true; 3064 } 3065 return false; 3066 }) 3067 } 3068 } 3069} 3070``` 3071 3072 加载的html文件。 3073```html 3074<!--index.html--> 3075<!DOCTYPE html> 3076<html> 3077 <head> 3078 <title>测试网页</title> 3079 </head> 3080 <body> 3081 <h1>bindSelectionMenu Demo</h1> 3082 <img src="./img.png" > 3083 </body> 3084</html> 3085``` 3086 3087### blurOnKeyboardHideMode<sup>14+</sup> 3088 3089blurOnKeyboardHideMode(mode: BlurOnKeyboardHideMode) 3090 3091设置当软键盘收起时Web元素失焦模式。枚举类型的默认值为SILENT，当用户手动收起软键盘时焦点仍在文本框。可更改为BLUR，当用户手动收起软键盘时，焦点会从文本框转移到Web的body上，文本框失焦。 3092 3093**系统能力：** SystemCapability.Web.Webview.Core 3094 3095**参数：** 3096 3097| 参数名 | 类型 | 必填 | 说明 | 3098| ---- | --------------------------------------- | ---- | ------------------ | 3099| mode | [BlurOnKeyboardHideMode](#bluronkeyboardhidemode14枚举说明) | 是 | 设置设置当软键盘收起时Web元素失焦关闭或开启。默认值：BlurOnKeyboardHideMode.SILENT。 | 3100 3101**示例：** 3102 3103 ```ts 3104 // xxx.ets 3105 import { webview } from '@kit.ArkWeb'; 3106 3107 @Entry 3108 @Component 3109 struct WebComponent { 3110 controller: webview.WebviewController = new webview.WebviewController(); 3111 @State blurMode: BlurOnKeyboardHideMode = BlurOnKeyboardHideMode.BLUR; 3112 build() { 3113 Column() { 3114 Web({ src: $rawfile("index.html"), controller: this.controller }) 3115 .blurOnKeyboardHideMode(this.blurMode) 3116 } 3117 } 3118 } 3119 ``` 3120 3121 加载的html文件。 3122```html 3123<!--index.html--> 3124<!DOCTYPE html> 3125<html> 3126 <head> 3127 <title>测试网页</title> 3128 </head> 3129 <body> 3130 <h1>blurOnKeyboardHideMode Demo</h1> 3131 <input type="text" id="input_a"> 3132 <script> 3133 const inputElement = document.getElementById('input_a'); 3134 inputElement.addEventListener('blur', function() { 3135 console.log('Input has lost focus'); 3136 }); 3137 </script> 3138 </body> 3139</html> 3140``` 3141 3142### enableFollowSystemFontWeight<sup>18+</sup> 3143 3144enableFollowSystemFontWeight(follow: boolean) 3145 3146设置Web组件是否开启字重跟随系统设置变化，默认不开启。 3147 3148> **说明：** 3149> 3150> 目前该能力只支持前端文本元素跟随变化，暂不支持canvas元素、内嵌docx和pdf格式中的文本跟随变化。 3151 3152**系统能力：** SystemCapability.Web.Webview.Core 3153 3154**参数：** 3155 3156| 参数名 | 类型 | 必填 | 说明 | 3157| ------------ | ------------------------------- | ---- | ----------------------------------- | 3158| follow | boolean | 是 | 设置Web组件是否开启字重跟随系统设置变化，默认值：false。设置为true时，字重跟随系统设置中的字体粗细变化，系统设置改变时字重跟随变化。设置为false时，字重不再跟随系统设置中的字体粗细变化，系统设置改变时维持当前字重不变。 | 3159 3160**示例：** 3161 3162 ```ts 3163 // xxx.ets 3164 import { webview } from '@kit.ArkWeb'; 3165 3166 @Entry 3167 @Component 3168 struct WebComponent { 3169 controller: webview.WebviewController = new webview.WebviewController(); 3170 build() { 3171 Column() { 3172 Web({ src: "www.example.com", controller: this.controller }) 3173 .enableFollowSystemFontWeight(true) 3174 } 3175 } 3176 } 3177 ``` 3178 3179### optimizeParserBudget<sup>15+</sup> 3180 3181optimizeParserBudget(optimizeParserBudget: boolean) 3182 3183设置是否开启分段解析HTML优化，默认不开启。 3184 3185ArkWeb内核在解析HTML文档结构时采取分段解析策略，旨在避免过多占用主线程资源，并使网页具有渐进式加载能力。ArkWeb内核默认使用解析时间作为分段点，当单次解析时间超过阈值时，会中断解析，随后进行布局和渲染操作。 3186 3187开启优化后，ArkWeb内核将不仅检查解析时间是否超出限制，还会额外判断解析的Token（HTML文档的最小解析单位，例如<div>、attr="xxx"等）数量是否超过内核规定的阈值，并下调此阈值。当页面的FCP(First Contentful Paint 首次内容绘制）触发时会恢复成默认的中断判断逻辑。这将使得网页在FCP到来之前的解析操作更频繁，从而提高首帧内容被提前解析完成并进入渲染阶段的可能性，同时有效缩减首帧渲染的工作量，最终实现FCP时间提前。 3188 3189由于页面的FCP触发时会恢复成默认分段解析逻辑，因此分段解析HTML优化仅对每个Web组件加载的首个页面生效。 3190 3191**系统能力：** SystemCapability.Web.Webview.Core 3192 3193**参数：** 3194 3195| 参数名 | 类型 | 必填 | 说明 | 3196| ---------- | ------- | ---- | ---------------------- | 3197| optimizeParserBudget | boolean | 是 | 设置为true时将使用解析个数代替解析时间作为HTML分段解析的分段点，并减少每段解析的个数上限。设置为false时则使用解析时间作为HTML分段解析的分段点。默认值：false。 | 3198 3199 3200**示例：** 3201 3202 ```ts 3203 // xxx.ets 3204 import { webview } from '@kit.ArkWeb'; 3205 3206 @Entry 3207 @Component 3208 struct WebComponent { 3209 controller: webview.WebviewController = new webview.WebviewController() 3210 build() { 3211 Column() { 3212 Web({ src: 'www.example.com', controller: this.controller }) 3213 .optimizeParserBudget(true) 3214 } 3215 } 3216 } 3217 ``` 3218 3219### enableWebAVSession<sup>18+</sup> 3220 3221enableWebAVSession(enabled: boolean) 3222 3223设置是否支持应用对接到播控中心。默认支持应用对接到播控中心。 3224 3225**系统能力：** SystemCapability.Web.Webview.Core 3226 3227**参数：** 3228 3229| 参数名 | 类型 | 必填 | 说明 | 3230| ------- | -------- | ---- | ------------------ | 3231| enabled | boolean | 是 | 设置是否支持应用对接到播控中心。默认值：true。 | 3232 3233**示例：** 3234 3235 ```ts 3236 // xxx.ets 3237 import { webview } from '@kit.ArkWeb'; 3238 3239 @Entry 3240 @Component 3241 struct WebComponent { 3242 controller: webview.WebviewController = new webview.WebviewController(); 3243 build() { 3244 Column() { 3245 Web({ src: $rawfile('index.html'), controller: this.controller }) 3246 .enableWebAVSession(true) 3247 } 3248 } 3249 } 3250 ``` 3251 3252 加载的html文件。 3253 ```html 3254 <!--index.html--> 3255 <!DOCTYPE html> 3256 <html> 3257 <head> 3258 <title>视频播放页面</title> 3259 </head> 3260 <body> 3261 <h1>视频播放</h1> 3262 <video id="testVideo" controls> 3263 // 在resources的rawfile目录中放置任意一个mp4媒体文件，并将其命名为example.mp4 3264 <source src="example.mp4" type="video/mp4"> 3265 </video> 3266 </body> 3267 </html> 3268 ``` 3269 3270### nativeEmbedOptions<sup>16+</sup> 3271 3272nativeEmbedOptions(options?: EmbedOptions) 3273 3274设置同层渲染相关配置，该属性仅在[enableNativeEmbedMode](#enablenativeembedmode11)开启时生效，不支持动态修改。 3275 3276**系统能力：** SystemCapability.Web.Webview.Core 3277 3278**参数：** 3279 3280| 参数名 | 类型 | 必填 | 说明 | 3281| ------------ | ------------------------------- | ---- | ----------------------------------- | 3282| options | [EmbedOptions](#embedoptions16) | 否 | 同层渲染相关配置，默认值：{supportDefaultIntrinsicSize: false}。 | 3283 3284**示例：** 3285 3286 ```ts 3287 // xxx.ets 3288 import { webview } from '@kit.ArkWeb'; 3289 3290 @Entry 3291 @Component 3292 struct WebComponent { 3293 controller: webview.WebviewController = new webview.WebviewController(); 3294 options: EmbedOptions = {supportDefaultIntrinsicSize: true}; 3295 3296 build() { 3297 Column() { 3298 Web({ src: $rawfile("index.html"), controller: this.controller }) 3299 .enableNativeEmbedMode(true) 3300 .nativeEmbedOptions(this.options) 3301 } 3302 } 3303 } 3304 ``` 3305加载的html文件 3306 ``` 3307 <!-- index.html --> 3308 <!DOCTYPE html> 3309 <html> 3310 <head> 3311 <title>同层渲染固定大小测试html</title> 3312 </head> 3313 <body> 3314 <div> 3315 <embed id="input" type = "native/view" style = "background-color:red"/> 3316 </div> 3317 </body> 3318 </html> 3319 ``` 3320 3321## 事件 3322 3323通用事件仅支持[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)。 3324 3325### onAlert 3326 3327onAlert(callback: Callback\<OnAlertEvent, boolean\>) 3328 3329网页触发alert()告警弹窗时触发回调。 3330 3331**系统能力：** SystemCapability.Web.Webview.Core 3332 3333**参数：** 3334 3335| 参数名 | 类型 | 必填 | 说明 | 3336| ------- | --------------------- | ---- | --------------- | 3337| callback | Callback\<[OnAlertEvent](#onalertevent12), boolean\> | 是 | 网页触发alert()告警弹窗时触发<br>返回值boolean。当回调返回true时，应用可以调用自定义弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 | 3338 3339**示例：** 3340 3341 ```ts 3342 // xxx.ets 3343 import { webview } from '@kit.ArkWeb'; 3344 3345 @Entry 3346 @Component 3347 struct WebComponent { 3348 controller: webview.WebviewController = new webview.WebviewController(); 3349 3350 build() { 3351 Column() { 3352 Web({ src: $rawfile("index.html"), controller: this.controller }) 3353 .onAlert((event) => { 3354 if (event) { 3355 console.log("event.url:" + event.url); 3356 console.log("event.message:" + event.message); 3357 AlertDialog.show({ 3358 title: 'onAlert', 3359 message: 'text', 3360 primaryButton: { 3361 value: 'cancel', 3362 action: () => { 3363 event.result.handleCancel(); 3364 } 3365 }, 3366 secondaryButton: { 3367 value: 'ok', 3368 action: () => { 3369 event.result.handleConfirm(); 3370 } 3371 }, 3372 cancel: () => { 3373 event.result.handleCancel(); 3374 } 3375 }) 3376 } 3377 return true; 3378 }) 3379 } 3380 } 3381 } 3382 ``` 3383 3384 加载的html文件。 3385 ```html 3386 <!--index.html--> 3387 <!DOCTYPE html> 3388 <html> 3389 <head> 3390 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 3391 </head> 3392 <body> 3393 <h1>WebView onAlert Demo</h1> 3394 <button onclick="myFunction()">Click here</button> 3395 <script> 3396 function myFunction() { 3397 alert("Hello World"); 3398 } 3399 </script> 3400 </body> 3401 </html> 3402 ``` 3403 3404### onBeforeUnload 3405 3406onBeforeUnload(callback: Callback\<OnBeforeUnloadEvent, boolean\>) 3407 3408刷新或关闭场景下，在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点，才会触发此回调。 3409 3410**系统能力：** SystemCapability.Web.Webview.Core 3411 3412**参数：** 3413 3414| 参数名 | 类型 | 必填 | 说明 | 3415| ------- | --------------------- | ---- | --------------- | 3416| callback | Callback\<[OnBeforeUnloadEvent](#onbeforeunloadevent12), boolean\> | 是 | 刷新或关闭场景下，在即将离开当前页面时触发。<br>返回值boolean。当回调返回true时，应用可以调用自定义弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 | 3417 3418**示例：** 3419 3420 ```ts 3421 // xxx.ets 3422 import { webview } from '@kit.ArkWeb'; 3423 3424 @Entry 3425 @Component 3426 struct WebComponent { 3427 controller: webview.WebviewController = new webview.WebviewController(); 3428 3429 build() { 3430 Column() { 3431 Web({ src: $rawfile("index.html"), controller: this.controller }) 3432 .onBeforeUnload((event) => { 3433 if (event) { 3434 console.log("event.url:" + event.url); 3435 console.log("event.message:" + event.message); 3436 AlertDialog.show({ 3437 title: 'onBeforeUnload', 3438 message: 'text', 3439 primaryButton: { 3440 value: 'cancel', 3441 action: () => { 3442 event.result.handleCancel(); 3443 } 3444 }, 3445 secondaryButton: { 3446 value: 'ok', 3447 action: () => { 3448 event.result.handleConfirm(); 3449 } 3450 }, 3451 cancel: () => { 3452 event.result.handleCancel(); 3453 } 3454 }) 3455 } 3456 return true; 3457 }) 3458 } 3459 } 3460 } 3461 ``` 3462 3463 加载的html文件。 3464 ```html 3465 <!--index.html--> 3466 <!DOCTYPE html> 3467 <html> 3468 <head> 3469 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 3470 </head> 3471 <body onbeforeunload="return myFunction()"> 3472 <h1>WebView onBeforeUnload Demo</h1> 3473 <a href="https://www.example.com">Click here</a> 3474 <script> 3475 function myFunction() { 3476 return "onBeforeUnload Event"; 3477 } 3478 </script> 3479 </body> 3480 </html> 3481 ``` 3482 3483### onConfirm 3484 3485onConfirm(callback: Callback\<OnConfirmEvent, boolean\>) 3486 3487网页调用confirm()告警时触发此回调。 3488 3489**系统能力：** SystemCapability.Web.Webview.Core 3490 3491**参数：** 3492 3493| 参数名 | 类型 | 必填 | 说明 | 3494| ------- | --------------------- | ---- | --------------- | 3495| callback | Callback\<[OnConfirmEvent](#onconfirmevent12), boolean\> | 是 | 网页调用confirm()告警时触发<br>返回值boolean。当回调返回true时，应用可以调用自定义弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 | 3496 3497**示例：** 3498 3499 ```ts 3500 // xxx.ets 3501 import { webview } from '@kit.ArkWeb'; 3502 3503 @Entry 3504 @Component 3505 struct WebComponent { 3506 controller: webview.WebviewController = new webview.WebviewController(); 3507 3508 build() { 3509 Column() { 3510 Web({ src: $rawfile("index.html"), controller: this.controller }) 3511 .onConfirm((event) => { 3512 if (event) { 3513 console.log("event.url:" + event.url); 3514 console.log("event.message:" + event.message); 3515 AlertDialog.show({ 3516 title: 'onConfirm', 3517 message: 'text', 3518 primaryButton: { 3519 value: 'cancel', 3520 action: () => { 3521 event.result.handleCancel(); 3522 } 3523 }, 3524 secondaryButton: { 3525 value: 'ok', 3526 action: () => { 3527 event.result.handleConfirm(); 3528 } 3529 }, 3530 cancel: () => { 3531 event.result.handleCancel(); 3532 } 3533 }) 3534 } 3535 return true; 3536 }) 3537 } 3538 } 3539 } 3540 ``` 3541 3542 加载的html文件。 3543 ```html 3544 <!--index.html--> 3545 <!DOCTYPE html> 3546 <html> 3547 <head> 3548 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 3549 </head> 3550 3551 <body> 3552 <h1>WebView onConfirm Demo</h1> 3553 <button onclick="myFunction()">Click here</button> 3554 <p id="demo"></p> 3555 <script> 3556 function myFunction() { 3557 let x; 3558 let r = confirm("click button!"); 3559 if (r == true) { 3560 x = "ok"; 3561 } else { 3562 x = "cancel"; 3563 } 3564 document.getElementById("demo").innerHTML = x; 3565 } 3566 </script> 3567 </body> 3568 </html> 3569 ``` 3570 3571### onPrompt<sup>9+</sup> 3572 3573onPrompt(callback: Callback\<OnPromptEvent, boolean\>) 3574 3575网页调用prompt()告警时触发此回调。 3576 3577**系统能力：** SystemCapability.Web.Webview.Core 3578 3579**参数：** 3580 3581| 参数名 | 类型 | 必填 | 说明 | 3582| ------- | --------------------- | ---- | --------------- | 3583| callback | Callback\<[OnPromptEvent](#onpromptevent12), boolean\> | 是 | 网页调用prompt()告警时触发。<br>返回值boolean。当回调返回true时，应用可以调用自定义弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 | 3584 3585**示例：** 3586 3587 ```ts 3588 // xxx.ets 3589 import { webview } from '@kit.ArkWeb'; 3590 3591 @Entry 3592 @Component 3593 struct WebComponent { 3594 controller: webview.WebviewController = new webview.WebviewController(); 3595 3596 build() { 3597 Column() { 3598 Web({ src: $rawfile("index.html"), controller: this.controller }) 3599 .onPrompt((event) => { 3600 if (event) { 3601 console.log("url:" + event.url); 3602 console.log("message:" + event.message); 3603 console.log("value:" + event.value); 3604 AlertDialog.show({ 3605 title: 'onPrompt', 3606 message: 'text', 3607 primaryButton: { 3608 value: 'cancel', 3609 action: () => { 3610 event.result.handleCancel(); 3611 } 3612 }, 3613 secondaryButton: { 3614 value: 'ok', 3615 action: () => { 3616 event.result.handlePromptConfirm(event.value); 3617 } 3618 }, 3619 cancel: () => { 3620 event.result.handleCancel(); 3621 } 3622 }) 3623 } 3624 return true; 3625 }) 3626 } 3627 } 3628 } 3629 ``` 3630 3631 加载的html文件。 3632 ```html 3633 <!--index.html--> 3634 <!DOCTYPE html> 3635 <html> 3636 <head> 3637 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 3638 </head> 3639 3640 <body> 3641 <h1>WebView onPrompt Demo</h1> 3642 <button onclick="myFunction()">Click here</button> 3643 <p id="demo"></p> 3644 <script> 3645 function myFunction() { 3646 let message = prompt("Message info", "Hello World"); 3647 if (message != null && message != "") { 3648 document.getElementById("demo").innerHTML = message; 3649 } 3650 } 3651 </script> 3652 </body> 3653 </html> 3654 ``` 3655 3656### onConsole 3657 3658onConsole(callback: Callback\<OnConsoleEvent, boolean\>) 3659 3660通知宿主应用JavaScript console消息。 3661 3662**系统能力：** SystemCapability.Web.Webview.Core 3663 3664**参数：** 3665 3666| 参数名 | 类型 | 必填 | 说明 | 3667| ------- | --------------------------------- | ---- | --------- | 3668| callback | Callback\<[OnConsoleEvent](#onconsoleevent12), boolean\> | 是 | 网页收到JavaScript控制台消息时触发。<br>返回值boolean。当返回true时，该条消息将不会再打印至控制台，反之仍会打印至控制台。 | 3669 3670**示例：** 3671 3672 ```ts 3673 // xxx.ets 3674 import { webview } from '@kit.ArkWeb'; 3675 3676 @Entry 3677 @Component 3678 struct WebComponent { 3679 controller: webview.WebviewController = new webview.WebviewController(); 3680 3681 build() { 3682 Column() { 3683 Button('onconsole message') 3684 .onClick(() => { 3685 this.controller.runJavaScript('myFunction()'); 3686 }) 3687 Web({ src: $rawfile('index.html'), controller: this.controller }) 3688 .onConsole((event) => { 3689 if (event) { 3690 console.log('getMessage:' + event.message.getMessage()); 3691 console.log('getSourceId:' + event.message.getSourceId()); 3692 console.log('getLineNumber:' + event.message.getLineNumber()); 3693 console.log('getMessageLevel:' + event.message.getMessageLevel()); 3694 } 3695 return false; 3696 }) 3697 } 3698 } 3699 } 3700 ``` 3701 3702 加载的html文件。 3703 ```html 3704 <!-- index.html --> 3705 <!DOCTYPE html> 3706 <html> 3707 <body> 3708 <script> 3709 function myFunction() { 3710 console.log("onconsole printf"); 3711 } 3712 </script> 3713 </body> 3714 </html> 3715 ``` 3716 3717### onDownloadStart 3718 3719onDownloadStart(callback: Callback\<OnDownloadStartEvent\>) 3720 3721通知主应用开始下载一个文件。 3722 3723**系统能力：** SystemCapability.Web.Webview.Core 3724 3725**参数：** 3726 3727| 参数名 | 类型 | 必填 | 说明 | 3728| ------------------ | ------ | ---- | ----------------------------------- | 3729| callback | Callback\<[OnDownloadStartEvent](#ondownloadstartevent12)\> | 是 | 开始下载时触发。 | 3730 3731**示例：** 3732 3733 ```ts 3734 // xxx.ets 3735 import { webview } from '@kit.ArkWeb'; 3736 3737 @Entry 3738 @Component 3739 struct WebComponent { 3740 controller: webview.WebviewController = new webview.WebviewController(); 3741 3742 build() { 3743 Column() { 3744 Web({ src: 'www.example.com', controller: this.controller }) 3745 .onDownloadStart((event) => { 3746 if (event) { 3747 console.log('url:' + event.url) 3748 console.log('userAgent:' + event.userAgent) 3749 console.log('contentDisposition:' + event.contentDisposition) 3750 console.log('contentLength:' + event.contentLength) 3751 console.log('mimetype:' + event.mimetype) 3752 } 3753 }) 3754 } 3755 } 3756 } 3757 ``` 3758 3759### onErrorReceive 3760 3761onErrorReceive(callback: Callback\<OnErrorReceiveEvent\>) 3762 3763网页加载遇到错误时触发该回调。主资源与子资源出错都会回调该接口，可以通过request.isMainFrame来判断是否是主资源报错。出于性能考虑，建议此回调中尽量执行简单逻辑。在无网络的情况下，触发此回调。 3764 3765**系统能力：** SystemCapability.Web.Webview.Core 3766 3767**参数：** 3768 3769| 参数名 | 类型 | 必填 | 说明 | 3770| ------- | ---------------------------------------- | ---- | --------------- | 3771| callback | Callback\<[OnErrorReceiveEvent](#onerrorreceiveevent12)\> | 是 | 网页收到 Web 资源加载错误时触发。 | 3772 3773**示例：** 3774 3775 ```ts 3776 // xxx.ets 3777 import { webview } from '@kit.ArkWeb'; 3778 3779 @Entry 3780 @Component 3781 struct WebComponent { 3782 controller: webview.WebviewController = new webview.WebviewController(); 3783 3784 build() { 3785 Column() { 3786 Web({ src: 'www.example.com', controller: this.controller }) 3787 .onErrorReceive((event) => { 3788 if (event) { 3789 console.log('getErrorInfo:' + event.error.getErrorInfo()); 3790 console.log('getErrorCode:' + event.error.getErrorCode()); 3791 console.log('url:' + event.request.getRequestUrl()); 3792 console.log('isMainFrame:' + event.request.isMainFrame()); 3793 console.log('isRedirect:' + event.request.isRedirect()); 3794 console.log('isRequestGesture:' + event.request.isRequestGesture()); 3795 console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString()); 3796 let result = event.request.getRequestHeader(); 3797 console.log('The request header result size is ' + result.length); 3798 for (let i of result) { 3799 console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue); 3800 } 3801 } 3802 }) 3803 } 3804 } 3805 } 3806 ``` 3807 3808### onHttpErrorReceive 3809 3810onHttpErrorReceive(callback: Callback\<OnHttpErrorReceiveEvent\>) 3811 3812网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。 3813 3814**系统能力：** SystemCapability.Web.Webview.Core 3815 3816**参数：** 3817 3818| 参数名 | 类型 | 必填 | 说明 | 3819| -------- | ---------------------------------------- | ---- | ---------- | 3820| callback | Callback\<[OnHttpErrorReceiveEvent](#onhttperrorreceiveevent12)\> | 是 | 网页收到加载资源加载HTTP错误时触发。 | 3821 3822**示例：** 3823 3824 ```ts 3825 // xxx.ets 3826 import { webview } from '@kit.ArkWeb'; 3827 3828 @Entry 3829 @Component 3830 struct WebComponent { 3831 controller: webview.WebviewController = new webview.WebviewController(); 3832 3833 build() { 3834 Column() { 3835 Web({ src: 'www.example.com', controller: this.controller }) 3836 .onHttpErrorReceive((event) => { 3837 if (event) { 3838 console.log('url:' + event.request.getRequestUrl()); 3839 console.log('isMainFrame:' + event.request.isMainFrame()); 3840 console.log('isRedirect:' + event.request.isRedirect()); 3841 console.log('isRequestGesture:' + event.request.isRequestGesture()); 3842 console.log('getResponseData:' + event.response.getResponseData()); 3843 console.log('getResponseEncoding:' + event.response.getResponseEncoding()); 3844 console.log('getResponseMimeType:' + event.response.getResponseMimeType()); 3845 console.log('getResponseCode:' + event.response.getResponseCode()); 3846 console.log('getReasonMessage:' + event.response.getReasonMessage()); 3847 let result = event.request.getRequestHeader(); 3848 console.log('The request header result size is ' + result.length); 3849 for (let i of result) { 3850 console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); 3851 } 3852 let resph = event.response.getResponseHeader(); 3853 console.log('The response header result size is ' + resph.length); 3854 for (let i of resph) { 3855 console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); 3856 } 3857 } 3858 }) 3859 } 3860 } 3861 } 3862 ``` 3863 3864### onPageBegin 3865 3866onPageBegin(callback: Callback\<OnPageBeginEvent\>) 3867 3868网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。 3869 3870**系统能力：** SystemCapability.Web.Webview.Core 3871 3872**参数：** 3873 3874| 参数名 | 类型 | 必填 | 说明 | 3875| ---- | ------ | ---- | --------- | 3876| callback | Callback\<[OnPageBeginEvent](#onpagebeginevent12)\> | 是 | 网页加载开始时触发。 | 3877 3878**示例：** 3879 3880 ```ts 3881 // xxx.ets 3882 import { webview } from '@kit.ArkWeb'; 3883 3884 @Entry 3885 @Component 3886 struct WebComponent { 3887 controller: webview.WebviewController = new webview.WebviewController(); 3888 3889 build() { 3890 Column() { 3891 Web({ src: 'www.example.com', controller: this.controller }) 3892 .onPageBegin((event) => { 3893 if (event) { 3894 console.log('url:' + event.url); 3895 } 3896 }) 3897 } 3898 } 3899 } 3900 ``` 3901 3902### onPageEnd 3903 3904onPageEnd(callback: Callback\<OnPageEndEvent\>) 3905 3906网页加载完成时触发该回调，且只在主frame触发。 3907 3908**系统能力：** SystemCapability.Web.Webview.Core 3909 3910**参数：** 3911 3912| 参数名 | 类型 | 必填 | 说明 | 3913| ---- | ------ | ---- | --------- | 3914| callback | Callback\<[OnPageEndEvent](#onpageendevent12)\> | 是 | 网页加载结束时触发。 | 3915 3916**示例：** 3917 3918 ```ts 3919 // xxx.ets 3920 import { webview } from '@kit.ArkWeb'; 3921 3922 @Entry 3923 @Component 3924 struct WebComponent { 3925 controller: webview.WebviewController = new webview.WebviewController(); 3926 3927 build() { 3928 Column() { 3929 Web({ src: 'www.example.com', controller: this.controller }) 3930 .onPageEnd((event) => { 3931 if (event) { 3932 console.log('url:' + event.url); 3933 } 3934 }) 3935 } 3936 } 3937 } 3938 ``` 3939 3940### onProgressChange 3941 3942onProgressChange(callback: Callback\<OnProgressChangeEvent\>) 3943 3944网页加载进度变化时触发该回调。 3945 3946**系统能力：** SystemCapability.Web.Webview.Core 3947 3948**参数：** 3949 3950| 参数名 | 类型 | 必填 | 说明 | 3951| ----------- | ------ | ---- | --------------------- | 3952| callback | Callback\<[OnProgressChangeEvent](#onprogresschangeevent12)\> | 是 | 页面加载进度变化时触发的回调。 | 3953 3954**示例：** 3955 3956 ```ts 3957 // xxx.ets 3958 import { webview } from '@kit.ArkWeb'; 3959 @Entry 3960 @Component 3961 struct WebComponent { 3962 controller: webview.WebviewController = new webview.WebviewController(); 3963 3964 build() { 3965 Column() { 3966 Web({ src: 'www.example.com', controller: this.controller }) 3967 .onProgressChange((event) => { 3968 if (event) { 3969 console.log('newProgress:' + event.newProgress); 3970 } 3971 }) 3972 } 3973 } 3974 } 3975 ``` 3976 3977### onTitleReceive 3978 3979onTitleReceive(callback: Callback\<OnTitleReceiveEvent\>) 3980 3981网页document标题更改时触发该回调，当H5未设置<title\>元素时会返回对应的URL。 3982 3983**系统能力：** SystemCapability.Web.Webview.Core 3984 3985**参数：** 3986 3987| 参数名 | 类型 | 必填 | 说明 | 3988| ----- | ------ | ---- | ------------- | 3989| callback | Callback\<[OnTitleReceiveEvent](#ontitlereceiveevent12)\> | 是 | 定义主应用程序文档标题更改时触发。 | 3990 3991**示例：** 3992 3993 ```ts 3994 // xxx.ets 3995 import { webview } from '@kit.ArkWeb'; 3996 3997 @Entry 3998 @Component 3999 struct WebComponent { 4000 controller: webview.WebviewController = new webview.WebviewController(); 4001 4002 build() { 4003 Column() { 4004 Web({ src: 'www.example.com', controller: this.controller }) 4005 .onTitleReceive((event) => { 4006 if (event) { 4007 console.log('title:' + event.title); 4008 } 4009 }) 4010 } 4011 } 4012 } 4013 ``` 4014 4015### onRefreshAccessedHistory 4016 4017onRefreshAccessedHistory(callback: Callback\<OnRefreshAccessedHistoryEvent\>) 4018 4019加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。 4020 4021**系统能力：** SystemCapability.Web.Webview.Core 4022 4023**参数：** 4024 4025| 参数名 | 类型 | 必填 | 说明 | 4026| ----------- | ------- | ---- | ---------------------------------------- | 4027| callback | Callback\<[OnRefreshAccessedHistoryEvent](#onrefreshaccessedhistoryevent12)\> | 是 | 在网页刷新访问历史记录时触发。 | 4028 4029**示例：** 4030 4031 ```ts 4032 // xxx.ets 4033 import { webview } from '@kit.ArkWeb'; 4034 4035 @Entry 4036 @Component 4037 struct WebComponent { 4038 controller: webview.WebviewController = new webview.WebviewController(); 4039 4040 build() { 4041 Column() { 4042 Web({ src: 'www.example.com', controller: this.controller }) 4043 .onRefreshAccessedHistory((event) => { 4044 if (event) { 4045 console.log('url:' + event.url + ' isReload:' + event.isRefreshed); 4046 } 4047 }) 4048 } 4049 } 4050 } 4051 ``` 4052 4053### onSslErrorReceive<sup>(deprecated)</sup> 4054 4055onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void) 4056 4057通知用户加载资源时发生SSL错误。 4058 4059> **说明：** 4060> 4061> 从API version 8开始支持，从API version 9开始废弃。建议使用[onSslErrorEventReceive<sup>9+</sup>](#onsslerroreventreceive9)替代。 4062 4063**系统能力：** SystemCapability.Web.Webview.Core 4064 4065### onFileSelectorShow<sup>(deprecated)</sup> 4066 4067onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void) 4068 4069调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。 4070 4071> **说明：** 4072> 4073> 从API version 8开始支持，从API version 9开始废弃。建议使用[onShowFileSelector<sup>9+</sup>](#onshowfileselector9)替代。 4074 4075**系统能力：** SystemCapability.Web.Webview.Core 4076 4077### onRenderExited<sup>9+</sup> 4078 4079onRenderExited(callback: Callback\<OnRenderExitedEvent\>) 4080 4081应用渲染进程异常退出时触发该回调。 4082 4083多个Web组件可能共享单个渲染进程，每个受影响的Web组件都会触发该回调。 4084 4085应用处理该回调时，可以调用绑定的webviewController相关接口来恢复页面。例如[refresh](js-apis-webview.md#refresh)、[loadUrl](js-apis-webview.md#loadurl)等。 4086 4087组件生命周期回调详情可参考[Web组件的生命周期](../../web/web-event-sequence.md)。 4088 4089**系统能力：** SystemCapability.Web.Webview.Core 4090 4091**参数：** 4092 4093| 参数名 | 类型 | 必填 | 说明 | 4094| ---------------- | ---------------------------------------- | ---- | ---------------- | 4095| callback | Callback\<[OnRenderExitedEvent](#onrenderexitedevent12)\> | 是 | 渲染过程退出时触发。 | 4096 4097**示例：** 4098 4099 ```ts 4100 // xxx.ets 4101 import { webview } from '@kit.ArkWeb'; 4102 4103 @Entry 4104 @Component 4105 struct WebComponent { 4106 controller: webview.WebviewController = new webview.WebviewController(); 4107 4108 build() { 4109 Column() { 4110 Web({ src: 'chrome://crash/', controller: this.controller }) 4111 .onRenderExited((event) => { 4112 if (event) { 4113 console.log('reason:' + event.renderExitReason); 4114 } 4115 }) 4116 } 4117 } 4118 } 4119 ``` 4120### onRenderProcessNotResponding<sup>12+</sup> 4121 4122onRenderProcessNotResponding(callback: OnRenderProcessNotRespondingCallback) 4123 4124渲染进程无响应时触发该回调函数。如果Web组件无法处理输入事件，或者无法在合理的时间范围内导航到新的URL，则认为网页进程无响应，并将触发该回调。 4125 4126只要网页进程一直无响应，此回调仍可能会持续触发，直到网页进程再次响应，此时[onRenderProcessResponding](#onrenderprocessresponding12)将会触发。 4127 4128应用可以通过WebviewController接口[terminateRenderProcess](js-apis-webview.md#terminaterenderprocess12)来终止关联的渲染进程，这可能会影响同一渲染进程的其他Web组件。 4129 4130**系统能力：** SystemCapability.Web.Webview.Core 4131 4132**参数：** 4133 4134| 参数名 | 类型 | 必填 | 说明 | 4135| -------- | ------------------------------------------------------------ | ---- | -------------------------------------- | 4136| callback | [OnRenderProcessNotRespondingCallback](#onrenderprocessnotrespondingcallback12) | 是 | 渲染进程无响应时触发的回调。 | 4137 4138**示例：** 4139 4140 ```ts 4141 // xxx.ets 4142 import { webview } from '@kit.ArkWeb'; 4143 4144 @Entry 4145 @Component 4146 struct WebComponent { 4147 controller: webview.WebviewController = new webview.WebviewController(); 4148 4149 build() { 4150 Column() { 4151 Web({ src: 'www.example.com', controller: this.controller }) 4152 .onRenderProcessNotResponding((data) => { 4153 console.log("onRenderProcessNotResponding: [jsStack]= " + data.jsStack + 4154 ", [process]=" + data.pid + ", [reason]=" + data.reason); 4155 }) 4156 } 4157 } 4158 } 4159 ``` 4160 4161### onRenderProcessResponding<sup>12+</sup> 4162 4163onRenderProcessResponding(callback: OnRenderProcessRespondingCallback) 4164 4165渲染进程由无响应状态变回正常运行状态时触发该回调函数,该回调表明该网页并非真正卡死。 4166 4167**系统能力：** SystemCapability.Web.Webview.Core 4168 4169**参数：** 4170 4171| 参数名 | 类型 | 必填 | 说明 | 4172| -------- | ------------------------------------------------------------ | ---- | -------------------------------------- | 4173| callback | [OnRenderProcessRespondingCallback](#onrenderprocessrespondingcallback12) | 是 | 渲染进程由无响应状态变回正常运行状态时触发的回调。 | 4174 4175**示例：** 4176 4177 ```ts 4178 // xxx.ets 4179 import { webview } from '@kit.ArkWeb'; 4180 4181 @Entry 4182 @Component 4183 struct WebComponent { 4184 controller: webview.WebviewController = new webview.WebviewController(); 4185 4186 build() { 4187 Column() { 4188 Web({ src: 'www.example.com', controller: this.controller }) 4189 .onRenderProcessResponding(() => { 4190 console.log("onRenderProcessResponding again"); 4191 }) 4192 } 4193 } 4194 } 4195 ``` 4196 4197### onShowFileSelector<sup>9+</sup> 4198 4199onShowFileSelector(callback: Callback\<OnShowFileSelectorEvent, boolean\>) 4200 4201调用此函数以处理具有“文件”输入类型的HTML表单。如果不调用此函数或返回false，Web组件会提供默认的“选择文件”处理界面。如果返回true，应用可以自定义“选择文件”的响应行为。 4202 4203**系统能力：** SystemCapability.Web.Webview.Core 4204 4205**参数：** 4206 4207| 参数名 | 类型 | 必填 | 说明 | 4208| ------------ | ---------------------------------------- | ---- | ----------------- | 4209| callback | Callback\<[OnShowFileSelectorEvent](#onshowfileselectorevent12), boolean\> | 是 | 用于通知Web组件文件选择的结果。<br>返回值boolean。当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，函数中绘制的自定义弹窗无效。 | 4210 4211**示例：** 4212 42131. 拉起文件选择器。 4214 4215 ```ts 4216 // xxx.ets 4217 import { webview } from '@kit.ArkWeb'; 4218 import { picker } from '@kit.CoreFileKit'; 4219 import { BusinessError } from '@kit.BasicServicesKit'; 4220 4221 @Entry 4222 @Component 4223 struct WebComponent { 4224 controller: webview.WebviewController = new webview.WebviewController() 4225 4226 build() { 4227 Column() { 4228 Web({ src: $rawfile('index.html'), controller: this.controller }) 4229 .onShowFileSelector((event) => { 4230 console.log('MyFileUploader onShowFileSelector invoked') 4231 const documentSelectOptions = new picker.DocumentSelectOptions(); 4232 let uri: string | null = null; 4233 const documentViewPicker = new picker.DocumentViewPicker(); 4234 documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => { 4235 uri = documentSelectResult[0]; 4236 console.info('documentViewPicker.select to file succeed and uri is:' + uri); 4237 if (event) { 4238 event.result.handleFileList([uri]); 4239 } 4240 }).catch((err: BusinessError) => { 4241 console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`); 4242 }) 4243 return true; 4244 }) 4245 } 4246 } 4247 } 4248 ``` 4249 42502. 拉起图库选择器。 4251 4252 ```ts 4253 // xxx.ets 4254 import { webview } from '@kit.ArkWeb'; 4255 import { picker } from '@kit.CoreFileKit'; 4256 import { photoAccessHelper } from '@kit.MediaLibraryKit'; 4257 4258 @Entry 4259 @Component 4260 struct WebComponent { 4261 controller: webview.WebviewController = new webview.WebviewController() 4262 4263 async selectFile(result: FileSelectorResult): Promise<void> { 4264 let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions(); 4265 let photoPicker = new photoAccessHelper.PhotoViewPicker(); 4266 // 过滤选择媒体文件类型为IMAGE 4267 photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; 4268 // 设置最大选择数量 4269 photoSelectOptions.maxSelectNumber = 5; 4270 let chooseFile: picker.PhotoSelectResult = await photoPicker.select(photoSelectOptions); 4271 // 获取选择的文件列表 4272 result.handleFileList(chooseFile.photoUris); 4273 } 4274 4275 build() { 4276 Column() { 4277 Web({ src: $rawfile('index.html'), controller: this.controller }) 4278 .onShowFileSelector((event) => { 4279 if (event) { 4280 this.selectFile(event.result); 4281 } 4282 return true; 4283 }) 4284 } 4285 } 4286 } 4287 ``` 4288 42893. 拉起相机选择器。 4290 4291 ```ts 4292 // xxx.ets 4293 import { webview } from '@kit.ArkWeb'; 4294 import { cameraPicker, camera } from '@kit.CameraKit'; 4295 import { BusinessError } from '@kit.BasicServicesKit'; 4296 import { common } from '@kit.AbilityKit'; 4297 4298 let mContext = getContext(this) as common.Context; 4299 4300 async function openCamera(callback: Callback<string>) { 4301 try { 4302 let pickerProfile: cameraPicker.PickerProfile = { 4303 cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK 4304 }; 4305 let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(mContext, 4306 [cameraPicker.PickerMediaType.PHOTO, cameraPicker.PickerMediaType.VIDEO], pickerProfile); 4307 callback(pickerResult.resultUri); 4308 } catch (error) { 4309 let err = error as BusinessError; 4310 console.error(`the pick call failed. error code: ${err.code}`); 4311 } 4312 } 4313 4314 @Entry 4315 @Component 4316 struct WebComponent { 4317 controller: webview.WebviewController = new webview.WebviewController() 4318 4319 build() { 4320 Column() { 4321 Web({ src: $rawfile('index.html'), controller: this.controller }) 4322 .onShowFileSelector((event) => { 4323 openCamera((result) => { 4324 if (event) { 4325 console.log('Title is ' + event.fileSelector.getTitle()); 4326 console.log('Mode is ' + event.fileSelector.getMode()); 4327 console.log('Accept types are ' + event.fileSelector.getAcceptType()); 4328 console.log('Capture is ' + event.fileSelector.isCapture()); 4329 console.log('Mime types are ' + event.fileSelector.getMimeTypes()); 4330 event.result.handleFileList([result]); 4331 } 4332 }) 4333 return true; 4334 }) 4335 } 4336 } 4337 } 4338 ``` 4339 4340 加载的html文件。 4341 ```html 4342 <!DOCTYPE html> 4343 <html> 4344 <head> 4345 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 4346 </head> 4347 <body> 4348 <form id="upload-form" enctype="multipart/form-data"> 4349 <input type="file" id="upload" name="upload" accept="image/*, video/*"/> 4350 </form> 4351 </body> 4352 </html> 4353 ``` 4354 4355### onResourceLoad<sup>9+</sup> 4356 4357onResourceLoad(callback: Callback\<OnResourceLoadEvent\>) 4358 4359通知Web组件所加载的资源文件url信息。 4360 4361**系统能力：** SystemCapability.Web.Webview.Core 4362 4363**参数：** 4364 4365| 参数名 | 类型 | 必填 | 说明 | 4366| ------ | ------ | ---- | --------------------- | 4367| callback | Callback\<[OnResourceLoadEvent](#onresourceloadevent12)\> | 是 | 加载url时触发。 | 4368 4369**示例：** 4370 4371 ```ts 4372 // xxx.ets 4373 import { webview } from '@kit.ArkWeb'; 4374 4375 @Entry 4376 @Component 4377 struct WebComponent { 4378 controller: webview.WebviewController = new webview.WebviewController(); 4379 4380 build() { 4381 Column() { 4382 Web({ src: 'www.example.com', controller: this.controller }) 4383 .onResourceLoad((event) => { 4384 console.log('onResourceLoad: ' + event.url); 4385 }) 4386 } 4387 } 4388 } 4389 ``` 4390 4391### onScaleChange<sup>9+</sup> 4392 4393onScaleChange(callback: Callback\<OnScaleChangeEvent\>) 4394 4395当前页面显示比例的变化时触发该回调。 4396 4397**系统能力：** SystemCapability.Web.Webview.Core 4398 4399**参数：** 4400 4401| 参数名 | 类型 | 必填 | 说明 | 4402| ------ | ------ | ---- | --------------------- | 4403| callback | Callback\<[OnScaleChangeEvent](#onscalechangeevent12)\> | 是 | 当前页面显示比例的变化时触发。 | 4404 4405**示例：** 4406 4407 ```ts 4408 // xxx.ets 4409 import { webview } from '@kit.ArkWeb'; 4410 4411 @Entry 4412 @Component 4413 struct WebComponent { 4414 controller: webview.WebviewController = new webview.WebviewController(); 4415 4416 build() { 4417 Column() { 4418 Web({ src: 'www.example.com', controller: this.controller }) 4419 .onScaleChange((event) => { 4420 console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale); 4421 }) 4422 } 4423 } 4424 } 4425 ``` 4426 4427### onUrlLoadIntercept<sup>(deprecated)</sup> 4428 4429onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean) 4430 4431当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 4432从API version 10开始不再维护，建议使用[onLoadIntercept<sup>10+</sup>](#onloadintercept10)代替。 4433 4434**系统能力：** SystemCapability.Web.Webview.Core 4435 4436**参数：** 4437 4438| 参数名 | 类型 | 必填 | 说明 | 4439| ------ | ------ | ---- | --------------------- | 4440| callback | (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean | 是 | url的相关信息。返回值：boolean，true表示阻止此次加载，否则允许此次加载。 | 4441 4442**示例：** 4443 4444 ```ts 4445 // xxx.ets 4446 import { webview } from '@kit.ArkWeb'; 4447 4448 @Entry 4449 @Component 4450 struct WebComponent { 4451 controller: webview.WebviewController = new webview.WebviewController(); 4452 4453 build() { 4454 Column() { 4455 Web({ src: 'www.example.com', controller: this.controller }) 4456 .onUrlLoadIntercept((event) => { 4457 if (event) { 4458 console.log('onUrlLoadIntercept ' + event.data.toString()); 4459 } 4460 return true 4461 }) 4462 } 4463 } 4464 } 4465 ``` 4466 4467### onInterceptRequest<sup>9+</sup> 4468 4469onInterceptRequest(callback: Callback<OnInterceptRequestEvent, WebResourceResponse>) 4470 4471当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。 4472 4473**系统能力：** SystemCapability.Web.Webview.Core 4474 4475**参数：** 4476 4477| 参数名 | 类型 | 必填 | 说明 | 4478| ------ | ------ | ---- | --------------------- | 4479| callback | Callback\<[OnInterceptRequestEvent](#oninterceptrequestevent12), [WebResourceResponse](#webresourceresponse)\> | 是 | 当Web组件加载url之前触发。<br>返回值[WebResourceResponse](#webresourceresponse)。返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载。 | 4480 4481**示例：** 4482 4483 ```ts 4484 // xxx.ets 4485 import { webview } from '@kit.ArkWeb'; 4486 4487 @Entry 4488 @Component 4489 struct WebComponent { 4490 controller: webview.WebviewController = new webview.WebviewController(); 4491 responseWeb: WebResourceResponse = new WebResourceResponse(); 4492 heads: Header[] = new Array(); 4493 webData: string = "<!DOCTYPE html>\n" + 4494 "<html>\n" + 4495 "<head>\n" + 4496 "<title>intercept test</title>\n" + 4497 "</head>\n" + 4498 "<body>\n" + 4499 "<h1>intercept test</h1>\n" + 4500 "</body>\n" + 4501 "</html>"; 4502 4503 build() { 4504 Column() { 4505 Web({ src: 'www.example.com', controller: this.controller }) 4506 .onInterceptRequest((event) => { 4507 if (event) { 4508 console.log('url:' + event.request.getRequestUrl()); 4509 } 4510 let head1: Header = { 4511 headerKey: "Connection", 4512 headerValue: "keep-alive" 4513 } 4514 let head2: Header = { 4515 headerKey: "Cache-Control", 4516 headerValue: "no-cache" 4517 } 4518 // 将新元素追加到数组的末尾，并返回数组的新长度。 4519 let length = this.heads.push(head1); 4520 length = this.heads.push(head2); 4521 console.log('The response header result length is :' + length); 4522 const promise: Promise<String> = new Promise((resolve: Function, reject: Function) => { 4523 this.responseWeb.setResponseHeader(this.heads); 4524 this.responseWeb.setResponseData(this.webData); 4525 this.responseWeb.setResponseEncoding('utf-8'); 4526 this.responseWeb.setResponseMimeType('text/html'); 4527 this.responseWeb.setResponseCode(200); 4528 this.responseWeb.setReasonMessage('OK'); 4529 resolve("success"); 4530 }) 4531 promise.then(() => { 4532 console.log("prepare response ready"); 4533 this.responseWeb.setResponseIsReady(true); 4534 }) 4535 this.responseWeb.setResponseIsReady(false); 4536 return this.responseWeb; 4537 }) 4538 } 4539 } 4540 } 4541 ``` 4542 4543### onHttpAuthRequest<sup>9+</sup> 4544 4545onHttpAuthRequest(callback: Callback\<OnHttpAuthRequestEvent, boolean\>) 4546 4547通知收到http auth认证请求。 4548 4549**系统能力：** SystemCapability.Web.Webview.Core 4550 4551**参数：** 4552 4553| 参数名 | 类型 | 必填 | 说明 | 4554| ------ | ------ | ---- | --------------------- | 4555| callback | Callback\<[OnHttpAuthRequestEvent](#onhttpauthrequestevent12), boolean\> | 是 | 当浏览器需要用户的凭据时触发。<br>返回值boolean。返回false表示此次认证失败，否则成功。 | 4556 4557**示例：** 4558 4559 ```ts 4560 // xxx.ets 4561 import { webview } from '@kit.ArkWeb'; 4562 4563 @Entry 4564 @Component 4565 struct WebComponent { 4566 controller: webview.WebviewController = new webview.WebviewController(); 4567 httpAuth: boolean = false; 4568 4569 build() { 4570 Column() { 4571 Web({ src: 'www.example.com', controller: this.controller }) 4572 .onHttpAuthRequest((event) => { 4573 if (event) { 4574 AlertDialog.show({ 4575 title: 'onHttpAuthRequest', 4576 message: 'text', 4577 primaryButton: { 4578 value: 'cancel', 4579 action: () => { 4580 event.handler.cancel(); 4581 } 4582 }, 4583 secondaryButton: { 4584 value: 'ok', 4585 action: () => { 4586 this.httpAuth = event.handler.isHttpAuthInfoSaved(); 4587 if (this.httpAuth == false) { 4588 webview.WebDataBase.saveHttpAuthCredentials( 4589 event.host, 4590 event.realm, 4591 "2222", 4592 "2222" 4593 ) 4594 event.handler.cancel(); 4595 } 4596 } 4597 }, 4598 cancel: () => { 4599 event.handler.cancel(); 4600 } 4601 }) 4602 } 4603 return true; 4604 }) 4605 } 4606 } 4607 } 4608 ``` 4609### onSslErrorEventReceive<sup>9+</sup> 4610 4611onSslErrorEventReceive(callback: Callback\<OnSslErrorEventReceiveEvent\>) 4612 4613通知用户加载资源时发生SSL错误，只支持主资源。 4614如果需要支持子资源，请使用[OnSslErrorEvent](#onsslerrorevent12)接口。 4615 4616**系统能力：** SystemCapability.Web.Webview.Core 4617 4618**参数：** 4619 4620| 参数名 | 类型 | 必填 | 说明 | 4621| ------ | ------ | ---- | --------------------- | 4622| callback | Callback\<[OnSslErrorEventReceiveEvent](#onsslerroreventreceiveevent12)\> | 是 | 当网页收到SSL错误时触发。 | 4623 4624**示例：** 4625 4626 ```ts 4627 // xxx.ets 4628 import { webview } from '@kit.ArkWeb'; 4629 import { cert } from '@kit.DeviceCertificateKit'; 4630 4631 function LogCertInfo(certChainData : Array<Uint8Array> | undefined) { 4632 if (!(certChainData instanceof Array)) { 4633 console.log('failed, cert chain data type is not array'); 4634 return; 4635 } 4636 4637 for (let i = 0; i < certChainData.length; i++) { 4638 let encodeBlobData: cert.EncodingBlob = { 4639 data: certChainData[i], 4640 encodingFormat: cert.EncodingFormat.FORMAT_DER 4641 } 4642 cert.createX509Cert(encodeBlobData, (error, x509Cert) => { 4643 if (error) { 4644 console.error('Index : ' + i + ',createX509Cert failed, errCode: ' + error.code + ', errMsg: ' + error.message); 4645 } else { 4646 console.log('createX509Cert success'); 4647 console.log(ParseX509CertInfo(x509Cert)); 4648 } 4649 }); 4650 } 4651 return; 4652 } 4653 4654 function Uint8ArrayToString(dataArray: Uint8Array) { 4655 let dataString = ''; 4656 for (let i = 0; i < dataArray.length; i++) { 4657 dataString += String.fromCharCode(dataArray[i]); 4658 } 4659 return dataString; 4660 } 4661 4662 function ParseX509CertInfo(x509Cert: cert.X509Cert) { 4663 let res: string = 'getCertificate success, ' 4664 + 'issuer name = ' 4665 + Uint8ArrayToString(x509Cert.getIssuerName().data) + ', subject name = ' 4666 + Uint8ArrayToString(x509Cert.getSubjectName().data) + ', valid start = ' 4667 + x509Cert.getNotBeforeTime() 4668 + ', valid end = ' + x509Cert.getNotAfterTime(); 4669 return res; 4670 } 4671 4672 @Entry 4673 @Component 4674 struct WebComponent { 4675 controller: webview.WebviewController = new webview.WebviewController(); 4676 4677 build() { 4678 Column() { 4679 Web({ src: 'www.example.com', controller: this.controller }) 4680 .onSslErrorEventReceive((event) => { 4681 LogCertInfo(event.certChainData); 4682 AlertDialog.show({ 4683 title: 'onSslErrorEventReceive', 4684 message: 'text', 4685 primaryButton: { 4686 value: 'confirm', 4687 action: () => { 4688 event.handler.handleConfirm(); 4689 } 4690 }, 4691 secondaryButton: { 4692 value: 'cancel', 4693 action: () => { 4694 event.handler.handleCancel(); 4695 } 4696 }, 4697 cancel: () => { 4698 event.handler.handleCancel(); 4699 } 4700 }) 4701 }) 4702 } 4703 } 4704 } 4705 ``` 4706 4707### onSslErrorEvent<sup>12+</sup> 4708 4709onSslErrorEvent(callback: OnSslErrorEventCallback) 4710 4711通知用户加载资源（主资源+子资源）时发生SSL错误，如果只想处理主资源的SSL错误，请用isMainFrame字段进行区分。 4712 4713**系统能力：** SystemCapability.Web.Webview.Core 4714 4715**参数：** 4716 4717| 参数名 | 类型 | 必填 | 说明 | 4718| ------ | ------ | ---- | --------------------- | 4719| callback | [OnSslErrorEventCallback](#onsslerroreventcallback12) | 是 | 通知用户加载资源时发生SSL错误。 | 4720 4721**示例：** 4722 4723 ```ts 4724 // xxx.ets 4725 import { webview } from '@kit.ArkWeb'; 4726 4727 @Entry 4728 @Component 4729 struct WebComponent { 4730 controller: webview.WebviewController = new webview.WebviewController(); 4731 4732 build() { 4733 Column() { 4734 Web({ src: 'www.example.com', controller: this.controller }) 4735 .onSslErrorEvent((event: SslErrorEvent) => { 4736 console.log("onSslErrorEvent url: " + event.url); 4737 console.log("onSslErrorEvent error: " + event.error); 4738 console.log("onSslErrorEvent originalUrl: " + event.originalUrl); 4739 console.log("onSslErrorEvent referrer: " + event.referrer); 4740 console.log("onSslErrorEvent isFatalError: " + event.isFatalError); 4741 console.log("onSslErrorEvent isMainFrame: " + event.isMainFrame); 4742 AlertDialog.show({ 4743 title: 'onSslErrorEvent', 4744 message: 'text', 4745 primaryButton: { 4746 value: 'confirm', 4747 action: () => { 4748 event.handler.handleConfirm(); 4749 } 4750 }, 4751 secondaryButton: { 4752 value: 'cancel', 4753 action: () => { 4754 event.handler.handleCancel(); 4755 } 4756 }, 4757 cancel: () => { 4758 event.handler.handleCancel(); 4759 } 4760 }) 4761 }) 4762 } 4763 } 4764 } 4765 ``` 4766 4767### onClientAuthenticationRequest<sup>9+</sup> 4768 4769onClientAuthenticationRequest(callback: Callback\<OnClientAuthenticationEvent\>) 4770 4771通知用户收到SSL客户端证书请求事件。 4772 4773**系统能力：** SystemCapability.Web.Webview.Core 4774 4775**参数：** 4776 4777| 参数名 | 类型 | 必填 | 说明 | 4778| ------ | ------ | ---- | --------------------- | 4779| callback | Callback\<[OnClientAuthenticationEvent](#onclientauthenticationevent12)\> | 是 | 当需要用户提供的SSL客户端证书时触发的回调。 | 4780 4781 **示例：** 4782 4783 未对接证书管理的双向认证。 4784 4785 ```ts 4786 // xxx.ets API9 4787 import { webview } from '@kit.ArkWeb'; 4788 4789 @Entry 4790 @Component 4791 struct WebComponent { 4792 controller: webview.WebviewController = new webview.WebviewController(); 4793 4794 build() { 4795 Column() { 4796 Web({ src: 'www.example.com', controller: this.controller }) 4797 .onClientAuthenticationRequest((event) => { 4798 AlertDialog.show({ 4799 title: 'onClientAuthenticationRequest', 4800 message: 'text', 4801 primaryButton: { 4802 value: 'confirm', 4803 action: () => { 4804 event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem"); 4805 } 4806 }, 4807 secondaryButton: { 4808 value: 'cancel', 4809 action: () => { 4810 event.handler.cancel(); 4811 } 4812 }, 4813 cancel: () => { 4814 event.handler.ignore(); 4815 } 4816 }) 4817 }) 4818 } 4819 } 4820 } 4821 ``` 4822 4823 对接证书管理的双向认证。 4824 4825 1. 构造单例对象GlobalContext。 4826 4827 ```ts 4828 // GlobalContext.ets 4829 export class GlobalContext { 4830 private constructor() {} 4831 private static instance: GlobalContext; 4832 private _objects = new Map<string, Object>(); 4833 4834 public static getContext(): GlobalContext { 4835 if (!GlobalContext.instance) { 4836 GlobalContext.instance = new GlobalContext(); 4837 } 4838 return GlobalContext.instance; 4839 } 4840 4841 getObject(value: string): Object | undefined { 4842 return this._objects.get(value); 4843 } 4844 4845 setObject(key: string, objectClass: Object): void { 4846 this._objects.set(key, objectClass); 4847 } 4848 } 4849 ``` 4850 4851 4852 2. 实现双向认证。 4853 4854 ```ts 4855 // xxx.ets API10 4856 import { webview } from '@kit.ArkWeb'; 4857 import { common, Want, bundleManager } from '@kit.AbilityKit'; 4858 import { BusinessError } from '@kit.BasicServicesKit'; 4859 import { GlobalContext } from '../GlobalContext'; 4860 4861 let uri = ""; 4862 4863 export default class CertManagerService { 4864 private static sInstance: CertManagerService; 4865 private authUri = ""; 4866 private appUid = ""; 4867 4868 public static getInstance(): CertManagerService { 4869 if (CertManagerService.sInstance == null) { 4870 CertManagerService.sInstance = new CertManagerService(); 4871 } 4872 return CertManagerService.sInstance; 4873 } 4874 4875 async grantAppPm(callback: (message: string) => void) { 4876 let message = ''; 4877 let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION; 4878 // 注：com.example.myapplication需要写实际应用名称 4879 try { 4880 bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => { 4881 console.info('getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data)); 4882 this.appUid = data.appInfo.uid.toString(); 4883 }).catch((err: BusinessError) => { 4884 console.error('getBundleInfoForSelf failed. Cause: %{public}s', err.message); 4885 }); 4886 } catch (err) { 4887 let message = (err as BusinessError).message; 4888 console.error('getBundleInfoForSelf failed: %{public}s', message); 4889 } 4890 4891 // 注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context) 4892 let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContext 4893 await abilityContext.startAbilityForResult( 4894 { 4895 bundleName: "com.ohos.certmanager", 4896 abilityName: "MainAbility", 4897 uri: "requestAuthorize", 4898 parameters: { 4899 appUid: this.appUid, // 传入申请应用的appUid 4900 } 4901 } as Want) 4902 .then((data: common.AbilityResult) => { 4903 if (!data.resultCode && data.want) { 4904 if (data.want.parameters) { 4905 this.authUri = data.want.parameters.authUri as string; // 授权成功后获取返回的authUri 4906 } 4907 } 4908 }) 4909 message += "after grantAppPm authUri: " + this.authUri; 4910 uri = this.authUri; 4911 callback(message) 4912 } 4913 } 4914 4915 @Entry 4916 @Component 4917 struct WebComponent { 4918 controller: webview.WebviewController = new webview.WebviewController(); 4919 @State message: string = 'Hello World' // message主要是调试观察使用 4920 certManager = CertManagerService.getInstance(); 4921 4922 build() { 4923 Row() { 4924 Column() { 4925 Row() { 4926 // 第一步：需要先进行授权，获取到uri 4927 Button('GrantApp') 4928 .onClick(() => { 4929 this.certManager.grantAppPm((data) => { 4930 this.message = data; 4931 }); 4932 }) 4933 // 第二步：授权后，双向认证会通过onClientAuthenticationRequest回调将uri传给web进行认证 4934 Button("ClientCertAuth") 4935 .onClick(() => { 4936 this.controller.loadUrl('https://www.example2.com'); // 支持双向认证的服务器网站 4937 }) 4938 } 4939 4940 Web({ src: 'https://www.example1.com', controller: this.controller }) 4941 .fileAccess(true) 4942 .javaScriptAccess(true) 4943 .domStorageAccess(true) 4944 .onlineImageAccess(true) 4945 4946 .onClientAuthenticationRequest((event) => { 4947 AlertDialog.show({ 4948 title: 'ClientAuth', 4949 message: 'Text', 4950 confirm: { 4951 value: 'Confirm', 4952 action: () => { 4953 event.handler.confirm(uri); 4954 } 4955 }, 4956 cancel: () => { 4957 event.handler.cancel(); 4958 } 4959 }) 4960 }) 4961 } 4962 } 4963 .width('100%') 4964 .height('100%') 4965 } 4966 } 4967 ``` 4968 4969### onPermissionRequest<sup>9+</sup> 4970 4971onPermissionRequest(callback: Callback\<OnPermissionRequestEvent\>) 4972 4973通知收到获取权限请求，需配置"ohos.permission.CAMERA"、"ohos.permission.MICROPHONE"权限。 4974 4975**系统能力：** SystemCapability.Web.Webview.Core 4976 4977**参数：** 4978 4979| 参数名 | 类型 | 必填 | 说明 | 4980| ------ | ------ | ---- | --------------------- | 4981| callback | Callback\<[OnPermissionRequestEvent](#onpermissionrequestevent12)\> | 是 | 通知收到获取权限请求触发。 | 4982 4983**示例：** 4984 4985 ```ts 4986 // xxx.ets 4987 import { webview } from '@kit.ArkWeb'; 4988 import { BusinessError } from '@kit.BasicServicesKit'; 4989 import { abilityAccessCtrl } from '@kit.AbilityKit'; 4990 4991 @Entry 4992 @Component 4993 struct WebComponent { 4994 controller: webview.WebviewController = new webview.WebviewController(); 4995 4996 aboutToAppear() { 4997 // 配置Web开启调试模式 4998 webview.WebviewController.setWebDebuggingAccess(true); 4999 let atManager = abilityAccessCtrl.createAtManager(); 5000 atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE']) 5001 .then((data) => { 5002 console.info('data:' + JSON.stringify(data)); 5003 console.info('data permissions:' + data.permissions); 5004 console.info('data authResults:' + data.authResults); 5005 }).catch((error: BusinessError) => { 5006 console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`); 5007 }) 5008 } 5009 5010 build() { 5011 Column() { 5012 Web({ src: $rawfile('index.html'), controller: this.controller }) 5013 .onPermissionRequest((event) => { 5014 if (event) { 5015 AlertDialog.show({ 5016 title: 'title', 5017 message: 'text', 5018 primaryButton: { 5019 value: 'deny', 5020 action: () => { 5021 event.request.deny(); 5022 } 5023 }, 5024 secondaryButton: { 5025 value: 'onConfirm', 5026 action: () => { 5027 event.request.grant(event.request.getAccessibleResource()); 5028 } 5029 }, 5030 cancel: () => { 5031 event.request.deny(); 5032 } 5033 }) 5034 } 5035 }) 5036 } 5037 } 5038 } 5039 ``` 5040 5041 加载的html文件。 5042 ```html 5043 <!-- index.html --> 5044 <!DOCTYPE html> 5045 <html> 5046 <head> 5047 <meta charset="UTF-8"> 5048 </head> 5049 <body> 5050 <video id="video" width="500px" height="500px" autoplay="autoplay"></video> 5051 <canvas id="canvas" width="500px" height="500px"></canvas> 5052 <br> 5053 <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/> 5054 <script> 5055 function getMedia() 5056 { 5057 let constraints = { 5058 video: {width: 500, height: 500}, 5059 audio: true 5060 }; 5061 // 获取video摄像头区域 5062 let video = document.getElementById("video"); 5063 // 返回的Promise对象 5064 let promise = navigator.mediaDevices.getUserMedia(constraints); 5065 // then()异步，调用MediaStream对象作为参数 5066 promise.then(function (MediaStream) { 5067 video.srcObject = MediaStream; 5068 video.play(); 5069 }); 5070 } 5071 </script> 5072 </body> 5073 </html> 5074 ``` 5075 5076### onContextMenuShow<sup>9+</sup> 5077 5078onContextMenuShow(callback: Callback\<OnContextMenuShowEvent, boolean\>) 5079 5080长按特定元素（例如图片，链接）或鼠标右键，跳出菜单。 5081 5082**系统能力：** SystemCapability.Web.Webview.Core 5083 5084**参数：** 5085 5086| 参数名 | 类型 | 必填 | 说明 | 5087| ------ | ------ | ---- | --------------------- | 5088| callback | Callback\<[OnContextMenuShowEvent](#oncontextmenushowevent12), boolean\> | 是 | 调用时触发的回调，以允许自定义显示上下文菜单。<br>返回值boolean。自定义菜单返回true，触发的自定义菜单无效返回false。 | 5089 5090**示例：** 5091 5092 ```ts 5093 // xxx.ets 5094 import { webview } from '@kit.ArkWeb'; 5095 import { pasteboard } from '@kit.BasicServicesKit'; 5096 5097 const TAG = 'ContextMenu'; 5098 5099 @Entry 5100 @Component 5101 struct WebComponent { 5102 controller: webview.WebviewController = new webview.WebviewController(); 5103 private result: WebContextMenuResult | undefined = undefined; 5104 @State linkUrl: string = ''; 5105 @State offsetX: number = 0; 5106 @State offsetY: number = 0; 5107 @State showMenu: boolean = false; 5108 5109 @Builder 5110 // 构建自定义菜单及触发功能接口 5111 MenuBuilder() { 5112 // 以垂直列表形式显示的菜单。 5113 Menu() { 5114 // 展示菜单Menu中具体的item菜单项。 5115 MenuItem({ 5116 content: '复制图片', 5117 }) 5118 .width(100) 5119 .height(50) 5120 .onClick(() => { 5121 this.result?.copyImage(); 5122 this.showMenu = false; 5123 }) 5124 MenuItem({ 5125 content: '剪切', 5126 }) 5127 .width(100) 5128 .height(50) 5129 .onClick(() => { 5130 this.result?.cut(); 5131 this.showMenu = false; 5132 }) 5133 MenuItem({ 5134 content: '复制', 5135 }) 5136 .width(100) 5137 .height(50) 5138 .onClick(() => { 5139 this.result?.copy(); 5140 this.showMenu = false; 5141 }) 5142 MenuItem({ 5143 content: '粘贴', 5144 }) 5145 .width(100) 5146 .height(50) 5147 .onClick(() => { 5148 this.result?.paste(); 5149 this.showMenu = false; 5150 }) 5151 MenuItem({ 5152 content: '复制链接', 5153 }) 5154 .width(100) 5155 .height(50) 5156 .onClick(() => { 5157 let pasteData = pasteboard.createData('text/plain', this.linkUrl); 5158 pasteboard.getSystemPasteboard().setData(pasteData, (error) => { 5159 if (error) { 5160 return; 5161 } 5162 }) 5163 this.showMenu = false; 5164 }) 5165 MenuItem({ 5166 content: '全选', 5167 }) 5168 .width(100) 5169 .height(50) 5170 .onClick(() => { 5171 this.result?.selectAll(); 5172 this.showMenu = false; 5173 }) 5174 } 5175 .width(150) 5176 .height(300) 5177 } 5178 5179 build() { 5180 Column() { 5181 Web({ src: $rawfile("index.html"), controller: this.controller }) 5182 // 触发自定义弹窗 5183 .onContextMenuShow((event) => { 5184 if (event) { 5185 this.result = event.result 5186 console.info("x coord = " + event.param.x()); 5187 console.info("link url = " + event.param.getLinkUrl()); 5188 this.linkUrl = event.param.getLinkUrl(); 5189 } 5190 console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`); 5191 this.showMenu = true; 5192 this.offsetX = 0; 5193 this.offsetY = Math.max(px2vp(event?.param.y() ?? 0) - 0, 0); 5194 return true; 5195 }) 5196 .bindPopup(this.showMenu, 5197 { 5198 builder: this.MenuBuilder(), 5199 enableArrow: false, 5200 placement: Placement.LeftTop, 5201 offset: { x: this.offsetX, y: this.offsetY }, 5202 mask: false, 5203 onStateChange: (e) => { 5204 if (!e.isVisible) { 5205 this.showMenu = false; 5206 this.result!.closeContextMenu(); 5207 } 5208 } 5209 }) 5210 } 5211 } 5212 } 5213 ``` 5214 5215 加载的html文件。 5216 ```html 5217 <!-- index.html --> 5218 <!DOCTYPE html> 5219 <html lang="en"> 5220 <body> 5221 <h1>onContextMenuShow</h1> 5222 <a href="http://www.example.com" style="font-size:27px">链接www.example.com</a> 5223 // rawfile下放任意一张图片命名为example.png 5224 <div><img src="example.png"></div> 5225 <p>选中文字鼠标右键弹出菜单</p> 5226 </body> 5227 </html> 5228 ``` 5229 5230### onContextMenuHide<sup>11+</sup> 5231 5232onContextMenuHide(callback: OnContextMenuHideCallback) 5233 5234长按特定元素（例如图片，链接）或鼠标右键，隐藏菜单。 5235 5236**系统能力：** SystemCapability.Web.Webview.Core 5237 5238**参数：** 5239 5240| 参数名 | 类型 | 必填 | 说明 | 5241| ------ | ------ | ---- | --------------------- | 5242| callback | [OnContextMenuHideCallback](#oncontextmenuhidecallback11) | 是 | 菜单相关参数。 | 5243 5244**示例：** 5245 5246 ```ts 5247 // xxx.ets 5248 import { webview } from '@kit.ArkWeb'; 5249 5250 @Entry 5251 @Component 5252 struct WebComponent { 5253 controller: webview.WebviewController = new webview.WebviewController(); 5254 5255 build() { 5256 Column() { 5257 Web({ src: 'www.example.com', controller: this.controller }) 5258 .onContextMenuHide(() => { 5259 console.log("onContextMenuHide callback"); 5260 }) 5261 } 5262 } 5263 } 5264 ``` 5265 5266### onScroll<sup>9+</sup> 5267 5268onScroll(callback: Callback\<OnScrollEvent\>) 5269 5270通知网页滚动条滚动位置。 5271 5272**系统能力：** SystemCapability.Web.Webview.Core 5273 5274**参数：** 5275 5276| 参数名 | 类型 | 必填 | 说明 | 5277| ------ | ------ | ---- | --------------------- | 5278| callback | Callback\<[OnScrollEvent](#onscrollevent12)\> | 是 | 当滚动条滑动到指定位置时触发。 | 5279 5280**示例：** 5281 5282 ```ts 5283 // xxx.ets 5284 import { webview } from '@kit.ArkWeb'; 5285 5286 @Entry 5287 @Component 5288 struct WebComponent { 5289 controller: webview.WebviewController = new webview.WebviewController(); 5290 5291 build() { 5292 Column() { 5293 Web({ src: 'www.example.com', controller: this.controller }) 5294 .onScroll((event) => { 5295 console.info("x = " + event.xOffset); 5296 console.info("y = " + event.yOffset); 5297 }) 5298 } 5299 } 5300 } 5301 ``` 5302 5303### onGeolocationShow 5304 5305onGeolocationShow(callback: Callback\<OnGeolocationShowEvent\>) 5306 5307通知用户收到地理位置信息获取请求。 5308 5309**系统能力：** SystemCapability.Web.Webview.Core 5310 5311**参数：** 5312 5313| 参数名 | 类型 | 必填 | 说明 | 5314| ------ | ------ | ---- | --------------------- | 5315| callback | Callback\<[OnGeolocationShowEvent](#ongeolocationshowevent12)\> | 是 | 请求显示地理位置权限时触发。 | 5316 5317**示例：** 5318 5319 ```ts 5320 // xxx.ets 5321 import { webview } from '@kit.ArkWeb'; 5322 5323 @Entry 5324 @Component 5325 struct WebComponent { 5326 controller: webview.WebviewController = new webview.WebviewController(); 5327 5328 build() { 5329 Column() { 5330 Web({ src: $rawfile('index.html'), controller: this.controller }) 5331 .geolocationAccess(true) 5332 .onGeolocationShow((event) => { 5333 if (event) { 5334 AlertDialog.show({ 5335 title: 'title', 5336 message: 'text', 5337 confirm: { 5338 value: 'onConfirm', 5339 action: () => { 5340 event.geolocation.invoke(event.origin, true, true); 5341 } 5342 }, 5343 cancel: () => { 5344 event.geolocation.invoke(event.origin, false, true); 5345 } 5346 }) 5347 } 5348 }) 5349 } 5350 } 5351 } 5352 ``` 5353 5354 加载的html文件。 5355 ```html 5356 <!DOCTYPE html> 5357 <html> 5358 <body> 5359 <p id="locationInfo">位置信息</p> 5360 <button onclick="getLocation()">获取位置</button> 5361 <script> 5362 var locationInfo=document.getElementById("locationInfo"); 5363 function getLocation(){ 5364 if (navigator.geolocation) { 5365 <!-- 前端页面访问设备地理位置 --> 5366 navigator.geolocation.getCurrentPosition(showPosition); 5367 } 5368 } 5369 function showPosition(position){ 5370 locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 5371 } 5372 </script> 5373 </body> 5374 </html> 5375 ``` 5376 5377### onGeolocationHide 5378 5379onGeolocationHide(callback: () => void) 5380 5381通知用户先前被调用[onGeolocationShow](#ongeolocationshow)时收到地理位置信息获取请求已被取消。 5382 5383**系统能力：** SystemCapability.Web.Webview.Core 5384 5385**参数：** 5386 5387| 参数名 | 类型 | 必填 | 说明 | 5388| ------ | ------ | ---- | --------------------- | 5389| callback | () => void | 是 | 地理位置信息获取请求已被取消的回调函数。 | 5390 5391**示例：** 5392 5393 ```ts 5394 // xxx.ets 5395 import { webview } from '@kit.ArkWeb'; 5396 5397 @Entry 5398 @Component 5399 struct WebComponent { 5400 controller: webview.WebviewController = new webview.WebviewController(); 5401 5402 build() { 5403 Column() { 5404 Web({ src: 'www.example.com', controller: this.controller }) 5405 .geolocationAccess(true) 5406 .onGeolocationHide(() => { 5407 console.log("onGeolocationHide..."); 5408 }) 5409 } 5410 } 5411 } 5412 ``` 5413 5414### onFullScreenEnter<sup>9+</sup> 5415 5416onFullScreenEnter(callback: OnFullScreenEnterCallback) 5417 5418通知开发者Web组件进入全屏模式。 5419 5420**系统能力：** SystemCapability.Web.Webview.Core 5421 5422**参数：** 5423 5424| 参数名 | 类型 | 必填 | 说明 | 5425| ------ | ------ | ---- | --------------------- | 5426| callback | [OnFullScreenEnterCallback](#onfullscreenentercallback12) | 是 | Web组件进入全屏时的回调信息。 | 5427 5428**示例：** 5429 5430 ```ts 5431 // xxx.ets 5432 import { webview } from '@kit.ArkWeb'; 5433 5434 @Entry 5435 @Component 5436 struct WebComponent { 5437 controller: webview.WebviewController = new webview.WebviewController(); 5438 handler: FullScreenExitHandler | null = null; 5439 5440 build() { 5441 Column() { 5442 Web({ src: 'www.example.com', controller: this.controller }) 5443 .onFullScreenEnter((event) => { 5444 console.log("onFullScreenEnter videoWidth: " + event.videoWidth + 5445 ", videoHeight: " + event.videoHeight); 5446 // 应用可以通过 this.handler.exitFullScreen() 主动退出全屏。 5447 this.handler = event.handler; 5448 }) 5449 } 5450 } 5451 } 5452 ``` 5453 5454### onFullScreenExit<sup>9+</sup> 5455 5456onFullScreenExit(callback: () => void) 5457 5458通知开发者Web组件退出全屏模式。 5459 5460**系统能力：** SystemCapability.Web.Webview.Core 5461 5462**参数：** 5463 5464| 参数名 | 类型 | 必填 | 说明 | 5465| ------ | ------ | ---- | --------------------- | 5466| callback | () => void | 是 | 退出全屏模式时的回调函数。 | 5467 5468**示例：** 5469 5470 ```ts 5471 // xxx.ets 5472 import { webview } from '@kit.ArkWeb'; 5473 5474 @Entry 5475 @Component 5476 struct WebComponent { 5477 controller: webview.WebviewController = new webview.WebviewController(); 5478 handler: FullScreenExitHandler | null = null; 5479 5480 build() { 5481 Column() { 5482 Web({ src: 'www.example.com', controller: this.controller }) 5483 .onFullScreenExit(() => { 5484 console.log("onFullScreenExit...") 5485 if (this.handler) { 5486 this.handler.exitFullScreen(); 5487 } 5488 }) 5489 .onFullScreenEnter((event) => { 5490 this.handler = event.handler; 5491 }) 5492 } 5493 } 5494 } 5495 ``` 5496 5497### onWindowNew<sup>9+</sup> 5498 5499onWindowNew(callback: Callback\<OnWindowNewEvent\>) 5500 5501使能multiWindowAccess情况下，通知用户新建窗口请求。 5502若不调用event.handler.setWebController接口，会造成render进程阻塞。 5503如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。 5504 5505应用应谨慎的显示新窗口：不要简单的覆盖在原web组件上，防止误导用户正在查看哪个网站，如果应用显示主页的URL，请确保也以相似的方式显示新窗口的URL。否则请考虑完全禁止创建新窗口。 5506 5507注意：没有可靠的方式判断哪个页面请求了新窗口，该请求可能来自第三方iframe 5508 5509**系统能力：** SystemCapability.Web.Webview.Core 5510 5511**参数：** 5512 5513| 参数名 | 类型 | 必填 | 说明 | 5514| ------ | ------ | ---- | --------------------- | 5515| callback | Callback\<[OnWindowNewEvent](#onwindownewevent12)\> | 是 | 网页要求用户创建窗口时触发的回调。 | 5516 5517**示例：** 5518 5519 ```ts 5520 // xxx.ets 5521 import { webview } from '@kit.ArkWeb'; 5522 5523 // 在同一page页有两个Web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。 5524 @CustomDialog 5525 struct NewWebViewComp { 5526 controller?: CustomDialogController; 5527 webviewController1: webview.WebviewController = new webview.WebviewController(); 5528 5529 build() { 5530 Column() { 5531 Web({ src: "", controller: this.webviewController1 }) 5532 .javaScriptAccess(true) 5533 .multiWindowAccess(false) 5534 .onWindowExit(() => { 5535 console.info("NewWebViewComp onWindowExit"); 5536 if (this.controller) { 5537 this.controller.close(); 5538 } 5539 }) 5540 } 5541 } 5542 } 5543 5544 @Entry 5545 @Component 5546 struct WebComponent { 5547 controller: webview.WebviewController = new webview.WebviewController(); 5548 dialogController: CustomDialogController | null = null; 5549 5550 build() { 5551 Column() { 5552 Web({ src: 'www.example.com', controller: this.controller }) 5553 .javaScriptAccess(true) 5554 // 需要使能multiWindowAccess 5555 .multiWindowAccess(true) 5556 .allowWindowOpenMethod(true) 5557 .onWindowNew((event) => { 5558 if (this.dialogController) { 5559 this.dialogController.close(); 5560 } 5561 let popController: webview.WebviewController = new webview.WebviewController(); 5562 this.dialogController = new CustomDialogController({ 5563 builder: NewWebViewComp({ webviewController1: popController }) 5564 }) 5565 this.dialogController.open(); 5566 // 将新窗口对应WebviewController返回给Web内核。 5567 // 若不调用event.handler.setWebController接口，会造成render进程阻塞。 5568 // 如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。 5569 event.handler.setWebController(popController); 5570 }) 5571 } 5572 } 5573 } 5574 ``` 5575 5576### onWindowExit<sup>9+</sup> 5577 5578onWindowExit(callback: () => void) 5579 5580通知用户窗口关闭请求。和[onWindowNew](#onwindownew9)一样，从安全角度讲，应用应该确保用户可以知道他们交互的页面已关闭。 5581 5582**系统能力：** SystemCapability.Web.Webview.Core 5583 5584**参数：** 5585 5586| 参数名 | 类型 | 必填 | 说明 | 5587| ------ | ------ | ---- | --------------------- | 5588| callback | () => void | 是 | 窗口请求关闭的回调函数。 | 5589 5590**示例：** 5591 5592 ```ts 5593 // xxx.ets 5594 import { webview } from '@kit.ArkWeb'; 5595 5596 @Entry 5597 @Component 5598 struct WebComponent { 5599 controller: webview.WebviewController = new webview.WebviewController(); 5600 5601 build() { 5602 Column() { 5603 Web({ src: 'www.example.com', controller: this.controller }) 5604 .onWindowExit(() => { 5605 console.log("onWindowExit..."); 5606 }) 5607 } 5608 } 5609 } 5610 ``` 5611 5612### onSearchResultReceive<sup>9+</sup> 5613 5614onSearchResultReceive(callback: Callback\<OnSearchResultReceiveEvent\>) 5615 5616回调通知调用方网页页内查找的结果。 5617 5618**系统能力：** SystemCapability.Web.Webview.Core 5619 5620**参数：** 5621 5622| 参数名 | 类型 | 必填 | 说明 | 5623| ------ | ------ | ---- | --------------------- | 5624| callback | Callback\<[OnSearchResultReceiveEvent](#onsearchresultreceiveevent12)\> | 是 | 通知调用方网页页内查找的结果。 | 5625 5626**示例：** 5627 5628 ```ts 5629 // xxx.ets 5630 import { webview } from '@kit.ArkWeb'; 5631 5632 @Entry 5633 @Component 5634 struct WebComponent { 5635 controller: webview.WebviewController = new webview.WebviewController(); 5636 5637 build() { 5638 Column() { 5639 Web({ src: 'www.example.com', controller: this.controller }) 5640 .onSearchResultReceive(ret => { 5641 if (ret) { 5642 console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal + 5643 "[total]" + ret.numberOfMatches + "[isDone]" + ret.isDoneCounting); 5644 } 5645 }) 5646 } 5647 } 5648 } 5649 ``` 5650 5651### onDataResubmitted<sup>9+</sup> 5652 5653onDataResubmitted(callback: Callback\<OnDataResubmittedEvent\>) 5654 5655设置网页表单可以重新提交时触发的回调函数。 5656 5657**系统能力：** SystemCapability.Web.Webview.Core 5658 5659**参数：** 5660 5661| 参数名 | 类型 | 必填 | 说明 | 5662| ------ | ------ | ---- | --------------------- | 5663| callback | Callback\<[OnDataResubmittedEvent](#ondataresubmittedevent12)\> | 是 | 网页表单可以重新提交时触发。 | 5664 5665**示例：** 5666 5667 ```ts 5668 // xxx.ets 5669 import { webview } from '@kit.ArkWeb'; 5670 import { BusinessError } from '@kit.BasicServicesKit'; 5671 5672 @Entry 5673 @Component 5674 struct WebComponent { 5675 controller: webview.WebviewController = new webview.WebviewController(); 5676 5677 build() { 5678 Column() { 5679 // 在网页中点击提交之后，点击refresh按钮可以重新提交时的触发函数。 5680 Button('refresh') 5681 .onClick(() => { 5682 try { 5683 this.controller.refresh(); 5684 } catch (error) { 5685 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 5686 } 5687 }) 5688 Web({ src: $rawfile('index.html'), controller: this.controller }) 5689 .onDataResubmitted((event) => { 5690 console.log('onDataResubmitted'); 5691 event.handler.resend(); 5692 }) 5693 } 5694 } 5695 } 5696 ``` 5697 5698 加载的html文件。 5699 ```html 5700 <!-- index.html --> 5701 <!DOCTYPE html> 5702 <html> 5703 <head> 5704 <meta charset="utf-8"> 5705 </head> 5706 <body> 5707 <form action="http://httpbin.org/post" method="post"> 5708 <input type="text" name="username"> 5709 <input type="submit" name="提交"> 5710 </form> 5711 </body> 5712 </html> 5713 ``` 5714 5715### onPageVisible<sup>9+</sup> 5716 5717onPageVisible(callback: Callback\<OnPageVisibleEvent\>) 5718 5719设置旧页面不再呈现，新页面即将可见时触发的回调函数。 5720 5721**系统能力：** SystemCapability.Web.Webview.Core 5722 5723**参数：** 5724 5725| 参数名 | 类型 | 必填 | 说明 | 5726| ------ | ------ | ---- | --------------------- | 5727| callback | Callback\<[OnPageVisibleEvent](#onpagevisibleevent12)\> | 是 | 旧页面不再呈现，新页面即将可见时触发的回调函数。 | 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 .onPageVisible((event) => { 5744 console.log('onPageVisible url:' + event.url); 5745 }) 5746 } 5747 } 5748 } 5749 ``` 5750 5751### onInterceptKeyEvent<sup>9+</sup> 5752 5753onInterceptKeyEvent(callback: (event: KeyEvent) => boolean) 5754 5755设置键盘事件的回调函数，该回调在被Webview使用前触发。 5756 5757**系统能力：** SystemCapability.Web.Webview.Core 5758 5759**参数：** 5760 5761| 参数名 | 类型 | 必填 | 说明 | 5762| ------ | ------ | ---- | --------------------- | 5763| callback | (event:[KeyEvent](../apis-arkui/arkui-ts/ts-universal-events-key.md#keyevent对象说明)) => boolean | 是 | 触发的KeyEvent事件。返回值：回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入Webview内核。 | 5764 5765**示例：** 5766 5767 ```ts 5768 // xxx.ets 5769 import { webview } from '@kit.ArkWeb'; 5770 5771 @Entry 5772 @Component 5773 struct WebComponent { 5774 controller: webview.WebviewController = new webview.WebviewController(); 5775 5776 build() { 5777 Column() { 5778 Web({ src: 'www.example.com', controller: this.controller }) 5779 .onInterceptKeyEvent((event) => { 5780 if (event.keyCode == 2017 || event.keyCode == 2018) { 5781 console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`); 5782 return true; 5783 } 5784 return false; 5785 }) 5786 } 5787 } 5788 } 5789 ``` 5790 5791### onTouchIconUrlReceived<sup>9+</sup> 5792 5793onTouchIconUrlReceived(callback: Callback\<OnTouchIconUrlReceivedEvent\>) 5794 5795设置接收到apple-touch-icon url地址时的回调函数。 5796 5797**系统能力：** SystemCapability.Web.Webview.Core 5798 5799**参数：** 5800 5801| 参数名 | 类型 | 必填 | 说明 | 5802| ------ | ------ | ---- | --------------------- | 5803| callback | Callback\<[OnTouchIconUrlReceivedEvent](#ontouchiconurlreceivedevent12)\> | 是 | 接收到的apple-touch-icon url地址时触发。 | 5804 5805**示例：** 5806 5807 ```ts 5808 // xxx.ets 5809 import { webview } from '@kit.ArkWeb'; 5810 5811 @Entry 5812 @Component 5813 struct WebComponent { 5814 controller: webview.WebviewController = new webview.WebviewController(); 5815 5816 build() { 5817 Column() { 5818 Web({ src: 'www.baidu.com', controller: this.controller }) 5819 .onTouchIconUrlReceived((event) => { 5820 console.log('onTouchIconUrlReceived:' + JSON.stringify(event)); 5821 }) 5822 } 5823 } 5824 } 5825 ``` 5826 5827### onFaviconReceived<sup>9+</sup> 5828 5829onFaviconReceived(callback: Callback\<OnFaviconReceivedEvent\>) 5830 5831设置应用为当前页面接收到新的favicon时的回调函数。 5832 5833**系统能力：** SystemCapability.Web.Webview.Core 5834 5835**参数：** 5836 5837| 参数名 | 类型 | 必填 | 说明 | 5838| ------ | ------ | ---- | --------------------- | 5839| callback | Callback\<[OnFaviconReceivedEvent](#onfaviconreceivedevent12)\> | 是 | 当前页面接收到新的favicon时触发。 | 5840 5841**示例：** 5842 5843 ```ts 5844 // xxx.ets 5845 import { webview } from '@kit.ArkWeb'; 5846 import { image } from '@kit.ImageKit'; 5847 5848 @Entry 5849 @Component 5850 struct WebComponent { 5851 controller: webview.WebviewController = new webview.WebviewController(); 5852 @State icon: image.PixelMap | undefined = undefined; 5853 5854 build() { 5855 Column() { 5856 Web({ src: 'www.example.com', controller: this.controller }) 5857 .onFaviconReceived((event) => { 5858 console.log('onFaviconReceived'); 5859 this.icon = event.favicon; 5860 }) 5861 } 5862 } 5863 } 5864 ``` 5865 5866### onAudioStateChanged<sup>10+</sup> 5867 5868onAudioStateChanged(callback: Callback\<OnAudioStateChangedEvent\>) 5869 5870设置网页上的音频播放状态发生改变时的回调函数。 5871 5872**系统能力：** SystemCapability.Web.Webview.Core 5873 5874**参数：** 5875 5876| 参数名 | 类型 | 必填 | 说明 | 5877| ------ | ------ | ---- | --------------------- | 5878| callback | Callback\<[OnAudioStateChangedEvent](#onaudiostatechangedevent12)\> | 是 | 网页上的音频播放状态发生改变时触发。 | 5879 5880**示例：** 5881 5882 ```ts 5883 // xxx.ets 5884 import { webview } from '@kit.ArkWeb'; 5885 5886 @Entry 5887 @Component 5888 struct WebComponent { 5889 controller: webview.WebviewController = new webview.WebviewController(); 5890 @State playing: boolean = false; 5891 5892 build() { 5893 Column() { 5894 Web({ src: 'www.example.com', controller: this.controller }) 5895 .onAudioStateChanged(event => { 5896 this.playing = event.playing; 5897 console.debug('onAudioStateChanged playing: ' + this.playing); 5898 }) 5899 } 5900 } 5901 } 5902 ``` 5903 5904### onFirstContentfulPaint<sup>10+</sup> 5905 5906 onFirstContentfulPaint(callback: Callback\<OnFirstContentfulPaintEvent\>) 5907 5908设置网页首次内容绘制回调函数。 5909 5910**系统能力：** SystemCapability.Web.Webview.Core 5911 5912**参数：** 5913 5914| 参数名 | 类型 | 必填 | 说明 | 5915| ------ | ------ | ---- | --------------------- | 5916| callback | Callback\<[OnFirstContentfulPaintEvent](#onfirstcontentfulpaintevent12)\> | 是 | 网页首次内容绘制回调函数。 | 5917 5918**示例：** 5919 5920 ```ts 5921 // xxx.ets 5922 import { webview } from '@kit.ArkWeb'; 5923 5924 @Entry 5925 @Component 5926 struct WebComponent { 5927 controller: webview.WebviewController = new webview.WebviewController(); 5928 5929 build() { 5930 Column() { 5931 Web({ src: 'www.example.com', controller: this.controller }) 5932 .onFirstContentfulPaint(event => { 5933 if (event) { 5934 console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + 5935 event.navigationStartTick + ", [firstContentfulPaintMs]:" + 5936 event.firstContentfulPaintMs); 5937 } 5938 }) 5939 } 5940 } 5941 } 5942 ``` 5943 5944### onFirstMeaningfulPaint<sup>12+</sup> 5945 5946onFirstMeaningfulPaint(callback: [OnFirstMeaningfulPaintCallback](#onfirstmeaningfulpaintcallback12)) 5947 5948设置网页绘制页面主要内容回调函数。 5949 5950**系统能力：** SystemCapability.Web.Webview.Core 5951 5952**参数：** 5953 5954| 参数名 | 类型 | 必填 | 说明 | 5955| ------ | ------ | ---- | --------------------- | 5956| callback | [OnFirstMeaningfulPaintCallback](#onfirstmeaningfulpaintcallback12) | 是 | 网页绘制页面主要内容度量信息的回调。 | 5957 5958**示例：** 5959 5960 ```ts 5961 // xxx.ets 5962 import { webview } from '@kit.ArkWeb'; 5963 5964 @Entry 5965 @Component 5966 struct WebComponent { 5967 controller: webview.WebviewController = new webview.WebviewController(); 5968 5969 build() { 5970 Column() { 5971 Web({ src: 'www.example.com', controller: this.controller }) 5972 .onFirstMeaningfulPaint((details) => { 5973 console.log("onFirstMeaningfulPaint: [navigationStartTime]= " + details.navigationStartTime + 5974 ", [firstMeaningfulPaintTime]=" + details.firstMeaningfulPaintTime); 5975 }) 5976 } 5977 } 5978 } 5979 ``` 5980 5981### onLargestContentfulPaint<sup>12+</sup> 5982 5983onLargestContentfulPaint(callback: [OnLargestContentfulPaintCallback](#onlargestcontentfulpaintcallback12)) 5984 5985设置网页绘制页面最大内容回调函数。 5986 5987**系统能力：** SystemCapability.Web.Webview.Core 5988 5989**参数：** 5990 5991| 参数名 | 类型 | 必填 | 说明 | 5992| ------ | ------ | ---- | --------------------- | 5993| callback | [OnLargestContentfulPaintCallback](#onlargestcontentfulpaintcallback12) | 是 | 网页绘制页面最大内容度量信息的回调。 | 5994 5995**示例：** 5996 5997 ```ts 5998 // xxx.ets 5999 import { webview } from '@kit.ArkWeb'; 6000 6001 @Entry 6002 @Component 6003 struct WebComponent { 6004 controller: webview.WebviewController = new webview.WebviewController(); 6005 6006 build() { 6007 Column() { 6008 Web({ src: 'www.example.com', controller: this.controller }) 6009 .onLargestContentfulPaint((details) => { 6010 console.log("onLargestContentfulPaint: [navigationStartTime]= " + details.navigationStartTime + 6011 ", [largestImagePaintTime]=" + details.largestImagePaintTime + 6012 ", [largestTextPaintTime]=" + details.largestTextPaintTime + 6013 ", [largestImageLoadStartTime]=" + details.largestImageLoadStartTime + 6014 ", [largestImageLoadEndTime]=" + details.largestImageLoadEndTime + 6015 ", [imageBPP]=" + details.imageBPP); 6016 }) 6017 } 6018 } 6019 } 6020 ``` 6021 6022### onLoadIntercept<sup>10+</sup> 6023 6024onLoadIntercept(callback: Callback\<OnLoadInterceptEvent, boolean\>) 6025 6026当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 6027 6028**系统能力：** SystemCapability.Web.Webview.Core 6029 6030**参数：** 6031 6032| 参数名 | 类型 | 必填 | 说明 | 6033| ------ | ------ | ---- | --------------------- | 6034| callback | Callback\<[OnLoadInterceptEvent](#onloadinterceptevent12), boolean\> | 是 | 截获资源加载时触发的回调。<br>返回值boolean。返回true表示阻止此次加载，否则允许此次加载。 | 6035 6036**示例：** 6037 6038 ```ts 6039 // xxx.ets 6040 import { webview } from '@kit.ArkWeb'; 6041 6042 @Entry 6043 @Component 6044 struct WebComponent { 6045 controller: webview.WebviewController = new webview.WebviewController(); 6046 6047 build() { 6048 Column() { 6049 Web({ src: 'www.example.com', controller: this.controller }) 6050 .onLoadIntercept((event) => { 6051 console.log('url:' + event.data.getRequestUrl()); 6052 console.log('isMainFrame:' + event.data.isMainFrame()); 6053 console.log('isRedirect:' + event.data.isRedirect()); 6054 console.log('isRequestGesture:' + event.data.isRequestGesture()); 6055 return true; 6056 }) 6057 } 6058 } 6059 } 6060 ``` 6061 6062### onRequestSelected 6063 6064onRequestSelected(callback: () => void) 6065 6066当Web组件获得焦点时触发该回调。 6067 6068**系统能力：** SystemCapability.Web.Webview.Core 6069 6070**示例：** 6071 6072 ```ts 6073 // xxx.ets 6074 import { webview } from '@kit.ArkWeb'; 6075 6076 @Entry 6077 @Component 6078 struct WebComponent { 6079 controller: webview.WebviewController = new webview.WebviewController(); 6080 6081 build() { 6082 Column() { 6083 Web({ src: 'www.example.com', controller: this.controller }) 6084 .onRequestSelected(() => { 6085 console.log('onRequestSelected'); 6086 }) 6087 } 6088 } 6089 } 6090 ``` 6091### onScreenCaptureRequest<sup>10+</sup> 6092 6093onScreenCaptureRequest(callback: Callback\<OnScreenCaptureRequestEvent\>) 6094 6095通知收到屏幕捕获请求。 6096 6097**系统能力：** SystemCapability.Web.Webview.Core 6098 6099**参数：** 6100 6101| 参数名 | 类型 | 必填 | 说明 | 6102| ------ | ------ | ---- | --------------------- | 6103| callback | Callback\<[OnScreenCaptureRequestEvent](#onscreencapturerequestevent12)\> | 是 | 通知收到屏幕捕获请求。 | 6104 6105**示例：** 6106 6107 ```ts 6108 // xxx.ets 6109 import { webview } from '@kit.ArkWeb'; 6110 6111 @Entry 6112 @Component 6113 struct WebComponent { 6114 controller: webview.WebviewController = new webview.WebviewController(); 6115 6116 build() { 6117 Column() { 6118 Web({ src: 'www.example.com', controller: this.controller }) 6119 .onScreenCaptureRequest((event) => { 6120 if (event) { 6121 AlertDialog.show({ 6122 title: 'title: ' + event.handler.getOrigin(), 6123 message: 'text', 6124 primaryButton: { 6125 value: 'deny', 6126 action: () => { 6127 event.handler.deny(); 6128 } 6129 }, 6130 secondaryButton: { 6131 value: 'onConfirm', 6132 action: () => { 6133 event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN }); 6134 } 6135 }, 6136 cancel: () => { 6137 event.handler.deny(); 6138 } 6139 }) 6140 } 6141 }) 6142 } 6143 } 6144 } 6145 ``` 6146 6147### onOverScroll<sup>10+</sup> 6148 6149onOverScroll(callback: Callback\<OnOverScrollEvent\>) 6150 6151该接口在网页过度滚动时触发，用于通知网页过度滚动的偏移量。 6152 6153**系统能力：** SystemCapability.Web.Webview.Core 6154 6155**参数：** 6156 6157| 参数名 | 类型 | 必填 | 说明 | 6158| ------ | ------ | ---- | --------------------- | 6159| callback | Callback\<[OnOverScrollEvent](#onoverscrollevent12)\> | 是 | 网页过度滚动时触发。 | 6160 6161**示例：** 6162 6163 ```ts 6164 // xxx.ets 6165 import { webview } from '@kit.ArkWeb'; 6166 6167 @Entry 6168 @Component 6169 struct WebComponent { 6170 controller: webview.WebviewController = new webview.WebviewController(); 6171 6172 build() { 6173 Column() { 6174 Web({ src: 'www.example.com', controller: this.controller }) 6175 .onOverScroll((event) => { 6176 console.info("x = " + event.xOffset); 6177 console.info("y = " + event.yOffset); 6178 }) 6179 } 6180 } 6181 } 6182 ``` 6183 6184### onControllerAttached<sup>10+</sup> 6185 6186onControllerAttached(callback: () => void) 6187 6188当Controller成功绑定到Web组件时触发该回调，并且该Controller必须为WebviewController，且禁止在该事件回调前调用Web组件相关的接口，否则会抛出js-error异常。 6189因该回调调用时网页还未加载，无法在回调中使用有关操作网页的接口，例如[zoomIn](js-apis-webview.md#zoomin)、[zoomOut](js-apis-webview.md#zoomout)等，可以使用[loadUrl](js-apis-webview.md#loadurl)、[getWebId](js-apis-webview.md#getwebid)等操作网页不相关的接口。 6190 6191组件生命周期详情可参考[Web组件的生命周期](../../web/web-event-sequence.md)。 6192 6193**系统能力：** SystemCapability.Web.Webview.Core 6194 6195**示例：** 6196 6197在该回调中使用loadUrl加载网页 6198 ```ts 6199 // xxx.ets 6200 import { webview } from '@kit.ArkWeb'; 6201 6202 @Entry 6203 @Component 6204 struct WebComponent { 6205 controller: webview.WebviewController = new webview.WebviewController(); 6206 6207 build() { 6208 Column() { 6209 Web({ src: '', controller: this.controller }) 6210 .onControllerAttached(() => { 6211 this.controller.loadUrl($rawfile("index.html")); 6212 }) 6213 } 6214 } 6215 } 6216 ``` 6217 6218在该回调中使用getWebId 6219 ```ts 6220 // xxx.ets 6221 import { webview } from '@kit.ArkWeb'; 6222 import { BusinessError } from '@kit.BasicServicesKit'; 6223 6224 @Entry 6225 @Component 6226 struct WebComponent { 6227 controller: webview.WebviewController = new webview.WebviewController(); 6228 6229 build() { 6230 Column() { 6231 Web({ src: $rawfile("index.html"), controller: this.controller }) 6232 .onControllerAttached(() => { 6233 try { 6234 let id = this.controller.getWebId(); 6235 console.log("id: " + id); 6236 } catch (error) { 6237 let code = (error as BusinessError).code; 6238 let message = (error as BusinessError).message; 6239 console.error(`ErrorCode: ${code}, Message: ${message}`); 6240 } 6241 }) 6242 } 6243 } 6244 } 6245 ``` 6246 加载的html文件。 6247 ```html 6248 <!-- index.html --> 6249 <!DOCTYPE html> 6250 <html> 6251 <body> 6252 <p>Hello World</p> 6253 </body> 6254 </html> 6255 ``` 6256 6257### onNavigationEntryCommitted<sup>11+</sup> 6258 6259onNavigationEntryCommitted(callback: [OnNavigationEntryCommittedCallback](#onnavigationentrycommittedcallback11)) 6260 6261当网页跳转提交时触发该回调。 6262 6263**系统能力：** SystemCapability.Web.Webview.Core 6264 6265**参数：** 6266 6267| 参数名 | 类型 | 必填 | 说明 | 6268| ------ | ------ | ---- | --------------------- | 6269| callback | [OnNavigationEntryCommittedCallback](#onnavigationentrycommittedcallback11) | 是 | 网页跳转提交时触发的回调。 | 6270 6271**示例：** 6272 6273 ```ts 6274 // xxx.ets 6275 import { webview } from '@kit.ArkWeb'; 6276 6277 @Entry 6278 @Component 6279 struct WebComponent { 6280 controller: webview.WebviewController = new webview.WebviewController(); 6281 6282 build() { 6283 Column() { 6284 Web({ src: 'www.example.com', controller: this.controller }) 6285 .onNavigationEntryCommitted((details) => { 6286 console.log("onNavigationEntryCommitted: [isMainFrame]= " + details.isMainFrame + 6287 ", [isSameDocument]=" + details.isSameDocument + 6288 ", [didReplaceEntry]=" + details.didReplaceEntry + 6289 ", [navigationType]=" + details.navigationType + 6290 ", [url]=" + details.url); 6291 }) 6292 } 6293 } 6294 } 6295 ``` 6296 6297### onSafeBrowsingCheckResult<sup>11+</sup> 6298 6299onSafeBrowsingCheckResult(callback: OnSafeBrowsingCheckResultCallback) 6300 6301收到网站安全风险检查结果时触发的回调。 6302 6303**系统能力：** SystemCapability.Web.Webview.Core 6304 6305**参数：** 6306 6307| 参数名 | 类型 | 必填 | 说明 | 6308| ------ | ------ | ---- | --------------------- | 6309| callback | [OnSafeBrowsingCheckResultCallback](#onsafebrowsingcheckresultcallback11) | 是 | 收到网站安全风险检查结果时触发的回调。| 6310 6311**示例：** 6312 6313 ```ts 6314 // xxx.ets 6315 import { webview } from '@kit.ArkWeb'; 6316 6317 export enum ThreatType { 6318 UNKNOWN = -1, 6319 THREAT_ILLEGAL = 0, 6320 THREAT_FRAUD = 1, 6321 THREAT_RISK = 2, 6322 THREAT_WARNING = 3, 6323 } 6324 6325 export class OnSafeBrowsingCheckResultCallback { 6326 threatType: ThreatType = ThreatType.UNKNOWN; 6327 } 6328 6329 @Entry 6330 @Component 6331 struct WebComponent { 6332 controller: webview.WebviewController = new webview.WebviewController(); 6333 6334 build() { 6335 Column() { 6336 Web({ src: 'www.example.com', controller: this.controller }) 6337 .onSafeBrowsingCheckResult((callback) => { 6338 let jsonData = JSON.stringify(callback); 6339 let json: OnSafeBrowsingCheckResultCallback = JSON.parse(jsonData); 6340 console.log("onSafeBrowsingCheckResult: [threatType]= " + json.threatType); 6341 }) 6342 } 6343 } 6344 } 6345 ``` 6346 6347### onNativeEmbedLifecycleChange<sup>11+</sup> 6348 6349onNativeEmbedLifecycleChange(callback: (event: NativeEmbedDataInfo) => void) 6350 6351当同层标签生命周期变化时触发该回调。 6352 6353**系统能力：** SystemCapability.Web.Webview.Core 6354 6355**参数：** 6356 6357| 参数名 | 类型 | 必填 | 说明 | 6358| ------ | ------ | ---- | --------------------- | 6359| callback | (event: [NativeEmbedDataInfo](#nativeembeddatainfo11)) => void | 是 | 同层标签生命周期变化时触发该回调。 | 6360 6361**示例：** 6362 6363```ts 6364// EntryAbility.ets 6365 6366import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 6367import { hilog } from '@kit.PerformanceAnalysisKit'; 6368import { window } from '@kit.ArkUI'; 6369import { webview } from '@kit.ArkWeb'; 6370 6371export default class EntryAbility extends UIAbility { 6372 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 6373 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 6374 // API12新增：开启同层渲染BFCache开关 6375 let features = new webview.BackForwardCacheSupportedFeatures(); 6376 features.nativeEmbed = true; 6377 features.mediaTakeOver = true; 6378 webview.WebviewController.enableBackForwardCache(features); 6379 webview.WebviewController.initializeWebEngine(); 6380 } 6381 6382 onDestroy(): void { 6383 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 6384 } 6385 6386 onWindowStageCreate(windowStage: window.WindowStage): void { 6387 // Main window is created, set main page for this ability 6388 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 6389 6390 windowStage.loadContent('pages/Index', (err) => { 6391 if (err.code) { 6392 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 6393 return; 6394 } 6395 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 6396 }); 6397 } 6398 6399 onWindowStageDestroy(): void { 6400 // Main window is destroyed, release UI related resources 6401 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 6402 } 6403 6404 onForeground(): void { 6405 // Ability has brought to foreground 6406 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 6407 } 6408 6409 onBackground(): void { 6410 // Ability has back to background 6411 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 6412 } 6413} 6414``` 6415 6416 ```ts 6417 // xxx.ets 6418 import { webview } from '@kit.ArkWeb'; 6419 import { BusinessError } from '@kit.BasicServicesKit'; 6420 6421 @Entry 6422 @Component 6423 struct WebComponent { 6424 @State embedStatus: string = ''; 6425 controller: webview.WebviewController = new webview.WebviewController(); 6426 6427 build() { 6428 Column() { 6429 // 默认行为：点击按钮跳转页面，关闭index页面，使同层标签销毁。 6430 // API12新增：使能同层渲染所在的页面支持BFCache后，点击按钮跳转页面，关闭index页面，使同层标签进入BFCache。 6431 Button('Destroy') 6432 .onClick(() => { 6433 try { 6434 this.controller.loadUrl("www.example.com"); 6435 } catch (error) { 6436 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 6437 } 6438 }) 6439 6440 // API12新增：使能同层渲染所在的页面支持BFCache后，点击按钮返回页面，使同层标签离开BFCache。 6441 Button('backward') 6442 .onClick(() => { 6443 try { 6444 this.controller.backward(); 6445 } catch (error) { 6446 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 6447 } 6448 }) 6449 6450 // API12新增：使能同层渲染所在的页面支持BFCache后，点击按钮前进页面，使同层标签进入BFCache。 6451 Button('forward') 6452 .onClick(() => { 6453 try { 6454 this.controller.forward(); 6455 } catch (error) { 6456 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 6457 } 6458 }) 6459 6460 6461 // API12新增同层标签进入离开BFCache状态：非http与https协议加载的网页，Web内核不支持进入BFCache; 6462 // 因此如果要测试ENTER_BFCACHE/LEAVE_BFCACHE状态，需要将index.html放到Web服务器上，使用http或者https协议加载，如： 6463 // Web({ src: "http://xxxx/index.html", controller: this.controller }) 6464 Web({ src: $rawfile("index.html"), controller: this.controller }) 6465 .enableNativeEmbedMode(true) 6466 .onNativeEmbedLifecycleChange((event) => { 6467 // 当加载页面中有同层标签会触发Create。 6468 if (event.status == NativeEmbedStatus.CREATE) { 6469 this.embedStatus = 'Create'; 6470 } 6471 // 当页面中同层标签移动或者缩放时会触发Update。 6472 if (event.status == NativeEmbedStatus.UPDATE) { 6473 this.embedStatus = 'Update'; 6474 } 6475 // 退出页面时会触发Destroy。 6476 if (event.status == NativeEmbedStatus.DESTROY) { 6477 this.embedStatus = 'Destroy'; 6478 } 6479 // 同层标签所在的页面进入BFCache时，会触发Enter BFCache。 6480 if (event.status == NativeEmbedStatus.ENTER_BFCACHE) { 6481 this.embedStatus = 'Enter BFCache'; 6482 } 6483 // 同层标签所在的页面离开BFCache时，会触发Leave BFCache。 6484 if (event.status == NativeEmbedStatus.LEAVE_BFCACHE) { 6485 this.embedStatus = 'Leave BFCache'; 6486 } 6487 console.log("status = " + this.embedStatus); 6488 console.log("surfaceId = " + event.surfaceId); 6489 console.log("embedId = " + event.embedId); 6490 if (event.info) { 6491 console.log("id = " + event.info.id); 6492 console.log("type = " + event.info.type); 6493 console.log("src = " + event.info.src); 6494 console.log("width = " + event.info.width); 6495 console.log("height = " + event.info.height); 6496 console.log("url = " + event.info.url); 6497 } 6498 }) 6499 } 6500 } 6501 } 6502 ``` 6503 6504 加载的html文件 6505 ``` 6506 <!-- index.html --> 6507 <!Document> 6508 <html> 6509 <head> 6510 <title>同层渲染测试html</title> 6511 <meta name="viewport"> 6512 </head> 6513 <body> 6514 <div> 6515 <div id="bodyId"> 6516 <embed id="nativeButton" type = "native/button" width="800" height="800" src="test? params1=1?" style = "background-color:red"/> 6517 </div> 6518 </div> 6519 </body> 6520 </html> 6521 ``` 6522 6523### onNativeEmbedGestureEvent<sup>11+</sup> 6524 6525onNativeEmbedGestureEvent(callback: (event: NativeEmbedTouchInfo) => void) 6526 6527当手指触摸到同层标签时触发该回调。 6528 6529**系统能力：** SystemCapability.Web.Webview.Core 6530 6531**参数：** 6532 6533| 参数名 | 类型 | 必填 | 说明 | 6534| ------ | ------ | ---- | --------------------- | 6535| callback | (event: [NativeEmbedTouchInfo](#nativeembedtouchinfo11)) => void | 是 | 手指触摸到同层标签时触发该回调。 | 6536 6537**示例：** 6538 6539 ```ts 6540 // xxx.ets 6541 import { webview } from '@kit.ArkWeb'; 6542 import { NodeController, BuilderNode, NodeRenderType, FrameNode, UIContext } from "@kit.ArkUI"; 6543 6544 declare class Params { 6545 text: string; 6546 width: number; 6547 height: number; 6548 } 6549 6550 declare class NodeControllerParams { 6551 surfaceId: string; 6552 renderType: NodeRenderType; 6553 width: number; 6554 height: number; 6555 } 6556 6557 class MyNodeController extends NodeController { 6558 private rootNode: BuilderNode<[Params]> | undefined | null; 6559 private surfaceId_: string = ""; 6560 private renderType_: NodeRenderType = NodeRenderType.RENDER_TYPE_DISPLAY; 6561 private width_: number = 0; 6562 private height_: number = 0; 6563 6564 setRenderOption(params: NodeControllerParams) { 6565 this.surfaceId_ = params.surfaceId; 6566 this.renderType_ = params.renderType; 6567 this.width_ = params.width; 6568 this.height_ = params.height; 6569 } 6570 6571 makeNode(uiContext: UIContext): FrameNode | null { 6572 this.rootNode = new BuilderNode(uiContext, { surfaceId: this.surfaceId_, type: this.renderType_ }); 6573 this.rootNode.build(wrapBuilder(ButtonBuilder), { text: "myButton", width: this.width_, height: this.height_ }); 6574 return this.rootNode.getFrameNode(); 6575 } 6576 6577 postEvent(event: TouchEvent | undefined): boolean { 6578 return this.rootNode?.postTouchEvent(event) as boolean; 6579 } 6580 } 6581 6582 @Component 6583 struct ButtonComponent { 6584 @Prop params: Params; 6585 @State bkColor: Color = Color.Red; 6586 6587 build() { 6588 Column() { 6589 Button(this.params.text) 6590 .height(50) 6591 .width(200) 6592 .border({ width: 2, color: Color.Red }) 6593 .backgroundColor(this.bkColor) 6594 6595 } 6596 .width(this.params.width) 6597 .height(this.params.height) 6598 } 6599 } 6600 6601 @Builder 6602 function ButtonBuilder(params: Params) { 6603 ButtonComponent({ params: params }) 6604 .backgroundColor(Color.Green) 6605 } 6606 6607 @Entry 6608 @Component 6609 struct WebComponent { 6610 @State eventType: string = ''; 6611 controller: webview.WebviewController = new webview.WebviewController(); 6612 private nodeController: MyNodeController = new MyNodeController(); 6613 6614 build() { 6615 Column() { 6616 Stack() { 6617 NodeContainer(this.nodeController) 6618 Web({ src: $rawfile("index.html"), controller: this.controller }) 6619 .enableNativeEmbedMode(true) 6620 .onNativeEmbedLifecycleChange((embed) => { 6621 if (embed.status == NativeEmbedStatus.CREATE) { 6622 this.nodeController.setRenderOption({ 6623 surfaceId: embed.surfaceId as string, 6624 renderType: NodeRenderType.RENDER_TYPE_TEXTURE, 6625 width: px2vp(embed.info?.width), 6626 height: px2vp(embed.info?.height) 6627 }); 6628 this.nodeController.rebuild(); 6629 } 6630 }) 6631 .onNativeEmbedGestureEvent((event) => { 6632 if (event && event.touchEvent) { 6633 if (event.touchEvent.type == TouchType.Down) { 6634 this.eventType = 'Down' 6635 } 6636 if (event.touchEvent.type == TouchType.Up) { 6637 this.eventType = 'Up' 6638 } 6639 if (event.touchEvent.type == TouchType.Move) { 6640 this.eventType = 'Move' 6641 } 6642 if (event.touchEvent.type == TouchType.Cancel) { 6643 this.eventType = 'Cancel' 6644 } 6645 let ret = this.nodeController.postEvent(event.touchEvent) 6646 if (event.result) { 6647 event.result.setGestureEventResult(ret, true); 6648 } 6649 console.log("embedId = " + event.embedId); 6650 console.log("touchType = " + this.eventType); 6651 console.log("x = " + event.touchEvent.touches[0].x); 6652 console.log("y = " + event.touchEvent.touches[0].y); 6653 console.log("Component globalPos:(" + event.touchEvent.target.area.globalPosition.x + "," + event.touchEvent.target.area.globalPosition.y + ")"); 6654 console.log("width = " + event.touchEvent.target.area.width); 6655 console.log("height = " + event.touchEvent.target.area.height); 6656 } 6657 }) 6658 } 6659 } 6660 } 6661 } 6662 ``` 6663加载的html文件 6664 ``` 6665 <!-- index.html --> 6666 <!Document> 6667<html> 6668<head> 6669 <title>同层渲染测试html</title> 6670 <meta name="viewport"> 6671</head> 6672<body> 6673<div> 6674 <div id="bodyId"> 6675 <embed id="nativeButton" type = "native/button" width="800" height="800" src="test?params1=1?" style = "background-color:red"/> 6676 </div> 6677</div> 6678</body> 6679</html> 6680 ``` 6681 6682### onIntelligentTrackingPreventionResult<sup>12+</sup> 6683 6684onIntelligentTrackingPreventionResult(callback: OnIntelligentTrackingPreventionCallback) 6685 6686智能防跟踪功能使能时，当追踪者cookie被拦截时触发该回调。 6687 6688**系统能力：** SystemCapability.Web.Webview.Core 6689 6690**参数：** 6691 6692| 参数名 | 类型 | 必填 | 说明 | 6693| ------ | ------ | ---- | --------------------- | 6694| callback | [OnIntelligentTrackingPreventionCallback](#onintelligenttrackingpreventioncallback12) | 是 | 智能防跟踪功能使能时，当追踪者cookie被拦截时触发的回调。 | 6695 6696**示例：** 6697 6698 ```ts 6699 // xxx.ets 6700 import { webview } from '@kit.ArkWeb'; 6701 import { BusinessError } from '@kit.BasicServicesKit'; 6702 6703 @Entry 6704 @Component 6705 struct WebComponent { 6706 controller: webview.WebviewController = new webview.WebviewController(); 6707 6708 build() { 6709 Column() { 6710 // 需要打开智能防跟踪功能，才会触发onIntelligentTrackingPreventionResult回调 6711 Button('enableIntelligentTrackingPrevention') 6712 .onClick(() => { 6713 try { 6714 this.controller.enableIntelligentTrackingPrevention(true); 6715 } catch (error) { 6716 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 6717 } 6718 }) 6719 Web({ src: 'www.example.com', controller: this.controller }) 6720 .onIntelligentTrackingPreventionResult((details) => { 6721 console.log("onIntelligentTrackingPreventionResult: [websiteHost]= " + details.host + 6722 ", [trackerHost]=" + details.trackerHost); 6723 }) 6724 } 6725 } 6726 } 6727 ``` 6728 6729### onOverrideUrlLoading<sup>12+</sup> 6730 6731onOverrideUrlLoading(callback: OnOverrideUrlLoadingCallback) 6732 6733当URL将要加载到当前Web中时，让宿主应用程序有机会获得控制权，回调函数返回true将导致当前Web中止加载URL，而返回false则会导致Web继续照常加载URL。 6734 6735POST请求不会触发该回调。 6736 6737iframe加载HTTP(s)协议或about:blank时不会触发该回调，加载非HTTP(s)协议的跳转可以触发。调用loadUrl(String)主动触发的跳转不会触发该回调。 6738 6739不要使用相同的URL调用loadUrl(String)方法，然后返回true。这样做会不必要地取消当前的加载并重新使用相同的URL开始新的加载。继续加载给定URL的正确方式是直接返回false，而不是调用loadUrl(String)。 6740 6741**系统能力：** SystemCapability.Web.Webview.Core 6742 6743**参数：** 6744 6745| 参数名 | 类型 | 必填 | 说明 | 6746| ------ | ------ | ---- | --------------------- | 6747| callback | [OnOverrideUrlLoadingCallback](#onoverrideurlloadingcallback12) | 是 | onOverrideUrlLoading的回调。 | 6748 6749**示例：** 6750 6751 ```ts 6752 // xxx.ets 6753 import { webview } from '@kit.ArkWeb'; 6754 6755 @Entry 6756 @Component 6757 struct WebComponent { 6758 controller: webview.WebviewController = new webview.WebviewController(); 6759 6760 build() { 6761 Column() { 6762 Web({ src: $rawfile("index.html"), controller: this.controller }) 6763 .onOverrideUrlLoading((webResourceRequest: WebResourceRequest) => { 6764 if (webResourceRequest && webResourceRequest.getRequestUrl() == "about:blank") { 6765 return true; 6766 } 6767 return false; 6768 }) 6769 } 6770 } 6771 } 6772 ``` 6773 6774 加载的html文件。 6775 ```html 6776 <!--index.html--> 6777 <!DOCTYPE html> 6778 <html> 6779 <head> 6780 <title>测试网页</title> 6781 </head> 6782 <body> 6783 <h1>onOverrideUrlLoading Demo</h1> 6784 <a href="about:blank">Click here</a>// 访问about:blank。 6785 </body> 6786 </html> 6787 ``` 6788 6789### onViewportFitChanged<sup>12+</sup> 6790 6791onViewportFitChanged(callback: OnViewportFitChangedCallback) 6792 6793网页meta中viewport-fit配置项更改时触发该回调，应用可在此回调中自适应布局视口。 6794 6795**系统能力：** SystemCapability.Web.Webview.Core 6796 6797**参数：** 6798 6799| 参数名 | 类型 | 必填 | 说明 | 6800| ------ | ------ | ---- | --------------------- | 6801| callback | [OnViewportFitChangedCallback](#onviewportfitchangedcallback12) | 是 | 网页meta中viewport-fit配置项更改时触发的回调。 | 6802 6803**示例：** 6804 6805 ```ts 6806 // xxx.ets 6807 import { webview } from '@kit.ArkWeb'; 6808 6809 @Entry 6810 @Component 6811 struct WebComponent { 6812 controller: webview.WebviewController = new webview.WebviewController(); 6813 6814 build() { 6815 Column() { 6816 Web({ src: $rawfile('index.html'), controller: this.controller }) 6817 .onViewportFitChanged((data) => { 6818 let jsonData = JSON.stringify(data); 6819 let viewportFit: ViewportFit = JSON.parse(jsonData).viewportFit; 6820 if (viewportFit === ViewportFit.COVER) { 6821 // index.html网页支持沉浸式布局，可调用expandSafeArea调整web控件布局视口覆盖避让区域(状态栏或导航条)。 6822 } else if (viewportFit === ViewportFit.CONTAINS) { 6823 // index.html网页不支持沉浸式布局，可调用expandSafeArea调整web控件布局视口为安全区域。 6824 } else { 6825 // 默认值，可不作处理 6826 } 6827 }) 6828 } 6829 } 6830 } 6831 ``` 6832 6833 加载的html文件。 6834 ```html 6835 <!-- index.html --> 6836 <!DOCTYPE html> 6837 <html> 6838 <head> 6839 <meta name="viewport" content="width=device-width,viewport-fit=cover"> 6840 </head> 6841 <body> 6842 <div style="position: absolute; bottom: 0; margin-bottom: env(safe-area-inset-bottom)"></div> 6843 </body> 6844 </html> 6845 ``` 6846 6847### onInterceptKeyboardAttach<sup>12+</sup> 6848 6849onInterceptKeyboardAttach(callback: WebKeyboardCallback) 6850 6851网页中可编辑元素（如input标签）拉起软键盘之前会回调该接口，应用可以使用该接口拦截系统软键盘的弹出，配置应用定制的软键盘（应用根据该接口可以决定使用系统默认软键盘/定制enter键的系统软键盘/全部由应用自定义的软键盘）。 6852 6853**系统能力：** SystemCapability.Web.Webview.Core 6854 6855**参数：** 6856 6857| 参数名 | 类型 | 必填 | 说明 | 6858| ------ | ------ | ---- | --------------------- | 6859| callback | [WebKeyboardCallback](#webkeyboardcallback12) | 是 | 拦截网页拉起软键盘回调。 | 6860 6861**示例：** 6862 6863 ```ts 6864 // xxx.ets 6865 import { webview } from '@kit.ArkWeb'; 6866 import { inputMethodEngine } from '@kit.IMEKit'; 6867 6868 @Entry 6869 @Component 6870 struct WebComponent { 6871 controller: webview.WebviewController = new webview.WebviewController(); 6872 webKeyboardController: WebKeyboardController = new WebKeyboardController() 6873 inputAttributeMap: Map<string, number> = new Map([ 6874 ['UNSPECIFIED', inputMethodEngine.ENTER_KEY_TYPE_UNSPECIFIED], 6875 ['GO', inputMethodEngine.ENTER_KEY_TYPE_GO], 6876 ['SEARCH', inputMethodEngine.ENTER_KEY_TYPE_SEARCH], 6877 ['SEND', inputMethodEngine.ENTER_KEY_TYPE_SEND], 6878 ['NEXT', inputMethodEngine.ENTER_KEY_TYPE_NEXT], 6879 ['DONE', inputMethodEngine.ENTER_KEY_TYPE_DONE], 6880 ['PREVIOUS', inputMethodEngine.ENTER_KEY_TYPE_PREVIOUS] 6881 ]) 6882 6883 /** 6884 * 自定义键盘组件Builder 6885 */ 6886 @Builder 6887 customKeyboardBuilder() { 6888 // 这里实现自定义键盘组件，对接WebKeyboardController实现输入、删除、关闭等操作。 6889 Row() { 6890 Text("完成") 6891 .fontSize(20) 6892 .fontColor(Color.Blue) 6893 .onClick(() => { 6894 this.webKeyboardController.close(); 6895 }) 6896 // 插入字符。 6897 Button("insertText").onClick(() => { 6898 this.webKeyboardController.insertText('insert '); 6899 }).margin({ 6900 bottom: 200, 6901 }) 6902 // 从后往前删除length参数指定长度的字符。 6903 Button("deleteForward").onClick(() => { 6904 this.webKeyboardController.deleteForward(1); 6905 }).margin({ 6906 bottom: 200, 6907 }) 6908 // 从前往后删除length参数指定长度的字符。 6909 Button("deleteBackward").onClick(() => { 6910 this.webKeyboardController.deleteBackward(1); 6911 }).margin({ 6912 left: -220, 6913 }) 6914 // 插入功能按键。 6915 Button("sendFunctionKey").onClick(() => { 6916 this.webKeyboardController.sendFunctionKey(6); 6917 }) 6918 } 6919 } 6920 6921 build() { 6922 Column() { 6923 Web({ src: $rawfile('index.html'), controller: this.controller }) 6924 .onInterceptKeyboardAttach((KeyboardCallbackInfo) => { 6925 // option初始化，默认使用系统默认键盘 6926 let option: WebKeyboardOptions = { 6927 useSystemKeyboard: true, 6928 }; 6929 if (!KeyboardCallbackInfo) { 6930 return option; 6931 } 6932 6933 // 保存WebKeyboardController，使用自定义键盘时候，需要使用该handler控制输入、删除、软键盘关闭等行为 6934 this.webKeyboardController = KeyboardCallbackInfo.controller 6935 let attributes: Record<string, string> = KeyboardCallbackInfo.attributes 6936 // 遍历attributes 6937 let attributeKeys = Object.keys(attributes) 6938 for (let i = 0; i < attributeKeys.length; i++) { 6939 console.log('WebCustomKeyboard key = ' + attributeKeys[i] + ', value = ' + attributes[attributeKeys[i]]) 6940 } 6941 6942 if (attributes) { 6943 if (attributes['data-keyboard'] == 'customKeyboard') { 6944 // 根据html可编辑元素的属性，判断使用不同的软键盘，例如这里如果属性包含有data-keyboard，且值为customKeyboard，则使用自定义键盘 6945 console.log('WebCustomKeyboard use custom keyboard') 6946 option.useSystemKeyboard = false; 6947 // 设置自定义键盘builder 6948 option.customKeyboard = () => { 6949 this.customKeyboardBuilder() 6950 } 6951 return option; 6952 } 6953 6954 if (attributes['keyboard-return'] != undefined) { 6955 // 根据html可编辑元素的属性，判断使用不同的软键盘，例如这里如果属性包含有keyboard-return，使用系统键盘，并且指定系统软键盘enterKey类型 6956 option.useSystemKeyboard = true; 6957 let enterKeyType: number | undefined = this.inputAttributeMap.get(attributes['keyboard-return']) 6958 if (enterKeyType != undefined) { 6959 option.enterKeyType = enterKeyType 6960 } 6961 return option; 6962 } 6963 } 6964 6965 return option; 6966 }) 6967 } 6968 } 6969 } 6970 ``` 6971 6972 加载的html文件。 6973 ```html 6974 <!-- index.html --> 6975 <!DOCTYPE html> 6976 <html> 6977 6978 <head> 6979 <meta charset="utf-8"> 6980 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"> 6981 </head> 6982 6983 <body> 6984 6985 <p style="font-size:12px">input标签，原有默认行为：</p> 6986 <input type="text" style="width: 300px; height: 20px"><br> 6987 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6988 6989 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key UNSPECIFIED：</p> 6990 <input type="text" keyboard-return="UNSPECIFIED" style="width: 300px; height: 20px"><br> 6991 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6992 6993 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key GO：</p> 6994 <input type="text" keyboard-return="GO" style="width: 300px; height: 20px"><br> 6995 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 6996 6997 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key SEARCH：</p> 6998 <input type="text" keyboard-return="SEARCH" style="width: 300px; height: 20px"><br> 6999 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 7000 7001 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key SEND：</p> 7002 <input type="text" keyboard-return="SEND" style="width: 300px; height: 20px"><br> 7003 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 7004 7005 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key NEXT：</p> 7006 <input type="text" keyboard-return="NEXT" style="width: 300px; height: 20px"><br> 7007 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 7008 7009 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key DONE：</p> 7010 <input type="text" keyboard-return="DONE" style="width: 300px; height: 20px"><br> 7011 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 7012 7013 <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key PREVIOUS：</p> 7014 <input type="text" keyboard-return="PREVIOUS" style="width: 300px; height: 20px"><br> 7015 <hr style="height:2px;border-width:0;color:gray;background-color:gray"> 7016 7017 <p style="font-size:12px">input标签，应用自定义键盘：</p> 7018 <input type="text" data-keyboard="customKeyboard" style="width: 300px; height: 20px"><br> 7019 7020 </body> 7021 7022 </html> 7023 ``` 7024 7025### onNativeEmbedVisibilityChange<sup>12+</sup> 7026 7027onNativeEmbedVisibilityChange(callback: OnNativeEmbedVisibilityChangeCallback) 7028 7029网页中同层标签（如Embed标签或Object标签）在视口内的可见性发生变化时会触发该回调。同层标签默认不可见，如果首次进入页面可见则会上报，不可见则不会上报，当同层标签大小由非0值变为0 *0时，不会上报不可见，由0 *0变为非0值时会上报可见。同层标签全部不可见才算不可见，部分可见或全部可见算作可见。 7030 7031**系统能力：** SystemCapability.Web.Webview.Core 7032 7033**参数：** 7034 7035| 参数名 | 类型 | 必填 | 说明 | 7036| ------ | ------ | ---- | --------------------- | 7037| callback | [OnNativeEmbedVisibilityChangeCallback](#onnativeembedvisibilitychangecallback12) | 是 | 同层标签可见性变化时触发该回调。 | 7038 7039**示例：** 7040 7041 ```ts 7042 // xxx.ets 7043 import { webview } from '@kit.ArkWeb'; 7044 import { NodeController, BuilderNode, NodeRenderType, FrameNode, UIContext } from "@kit.ArkUI"; 7045 7046 declare class Params { 7047 text: string; 7048 width: number; 7049 height: number; 7050 } 7051 7052 declare class NodeControllerParams { 7053 surfaceId: string; 7054 renderType: NodeRenderType; 7055 width: number; 7056 height: number; 7057 } 7058 7059 class MyNodeController extends NodeController { 7060 private rootNode: BuilderNode<[Params]> | undefined | null; 7061 private surfaceId_: string = ""; 7062 private renderType_: NodeRenderType = NodeRenderType.RENDER_TYPE_DISPLAY; 7063 private width_: number = 0; 7064 private height_: number = 0; 7065 7066 setRenderOption(params: NodeControllerParams) { 7067 this.surfaceId_ = params.surfaceId; 7068 this.renderType_ = params.renderType; 7069 this.width_ = params.width; 7070 this.height_ = params.height; 7071 } 7072 7073 makeNode(uiContext: UIContext): FrameNode | null { 7074 this.rootNode = new BuilderNode(uiContext, { surfaceId: this.surfaceId_, type: this.renderType_ }); 7075 this.rootNode.build(wrapBuilder(ButtonBuilder), { text: "myButton", width: this.width_, height: this.height_ }); 7076 return this.rootNode.getFrameNode(); 7077 } 7078 7079 postEvent(event: TouchEvent | undefined): boolean { 7080 return this.rootNode?.postTouchEvent(event) as boolean; 7081 } 7082 } 7083 7084 @Component 7085 struct ButtonComponent { 7086 @Prop params: Params; 7087 @State bkColor: Color = Color.Red; 7088 7089 build() { 7090 Column() { 7091 Button(this.params.text) 7092 .height(50) 7093 .width(200) 7094 .border({ width: 2, color: Color.Red }) 7095 .backgroundColor(this.bkColor) 7096 7097 } 7098 .width(this.params.width) 7099 .height(this.params.height) 7100 } 7101 } 7102 7103 @Builder 7104 function ButtonBuilder(params: Params) { 7105 ButtonComponent({ params: params }) 7106 .backgroundColor(Color.Green) 7107 } 7108 7109 @Entry 7110 @Component 7111 struct WebComponent { 7112 @State embedVisibility: string = ''; 7113 controller: webview.WebviewController = new webview.WebviewController(); 7114 private nodeController: MyNodeController = new MyNodeController(); 7115 7116 build() { 7117 Column() { 7118 Stack() { 7119 NodeContainer(this.nodeController) 7120 Web({ src: $rawfile("index.html"), controller: this.controller }) 7121 .enableNativeEmbedMode(true) 7122 .onNativeEmbedLifecycleChange((embed) => { 7123 if (embed.status == NativeEmbedStatus.CREATE) { 7124 this.nodeController.setRenderOption({ 7125 surfaceId: embed.surfaceId as string, 7126 renderType: NodeRenderType.RENDER_TYPE_TEXTURE, 7127 width: px2vp(embed.info?.width), 7128 height: px2vp(embed.info?.height) 7129 }); 7130 this.nodeController.rebuild(); 7131 } 7132 }) 7133 .onNativeEmbedVisibilityChange((embed) => { 7134 if (embed.visibility) { 7135 this.embedVisibility = 'Visible'; 7136 } else { 7137 this.embedVisibility = 'Hidden'; 7138 } 7139 console.log("embedId = " + embed.embedId); 7140 console.log("visibility = " + embed.visibility); 7141 }) 7142 } 7143 } 7144 } 7145 } 7146 ``` 7147 7148 加载的html文件 7149 ```html 7150 <!-- index.html --> 7151 <!DOCTYPE html> 7152 <html> 7153 <head> 7154 <title>同层渲染测试html</title> 7155 <meta name="viewport"> 7156 </head> 7157 <body> 7158 <div> 7159 <div id="bodyId"> 7160 <embed id="nativeButton" type = "native/button" width="800" height="800" src="test?params1=1?" style = "background-color:red"/> 7161 </div> 7162 </div> 7163 </body> 7164 </html> 7165 ``` 7166 7167## WebKeyboardCallback<sup>12+</sup> 7168 7169type WebKeyboardCallback = (keyboardCallbackInfo: WebKeyboardCallbackInfo) => WebKeyboardOptions 7170 7171拦截网页可编辑元素拉起软键盘的回调，一般在点击网页input标签时触发。 7172 7173**系统能力：** SystemCapability.Web.Webview.Core 7174 7175**参数：** 7176 7177| 参数名 | 类型 | 必填 | 说明 | 7178| ------------- | ------ | ---- | ------------------ | 7179| keyboardCallbackInfo | [WebKeyboardCallbackInfo](#webkeyboardcallbackinfo12) | 是 | 拦截网页拉起软键盘回调通知的入参，其中包括[WebKeyboardController](#webkeyboardcontroller12)、可编辑元素的属性。 | 7180 7181**返回值：** 7182 7183| 类型 | 说明 | 7184| ------------------ | ------------------------------------------------------------ | 7185| [WebKeyboardOptions](#webkeyboardoptions12) | 回调函数通过返回[WebKeyboardOptions](#webkeyboardoptions12)来决定ArkWeb内核拉起不同类型的软键盘。 | 7186 7187## WebKeyboardCallbackInfo<sup>12+</sup> 7188 7189拦截网页可编辑元素拉起软键盘的回调入参，其中包括[WebKeyboardController](#webkeyboardcontroller12)、可编辑元素的属性。 7190 7191**系统能力：** SystemCapability.Web.Webview.Core 7192 7193| 名称 | 类型 | 必填 | 说明 | 7194| -------------- | ------- | ---- | ---------------------------------------- | 7195| controller | [WebKeyboardController](#webkeyboardcontroller12) | 是 | 提供控制自定义键盘的输入、删除、关闭等操作。 | 7196| attributes | Record<string, string> | 是 | 触发本次软键盘弹出的网页元素属性。 7197 7198## WebKeyboardOptions<sup>12+</sup> 7199 7200拦截网页可编辑元素拉起软键盘的回调返回值，可以指定使用的键盘类型，并返回给web内核，以控制拉起不同类型的软键盘； 7201 7202**系统能力：** SystemCapability.Web.Webview.Core 7203 7204| 名称 | 类型 | 必填 | 说明 | 7205| -------------- | ------- | ---- | ---------------------------------------- | 7206| useSystemKeyboard | boolean | 是 | 是否使用系统默认软键盘。<br>true表示使用系统默认软键盘，false表示不使用系统默认软键盘。<br>默认值：true。 | 7207| enterKeyType | number | 否 | 指定系统软键盘enter键的类型，取值范围见输入框架的定义[EnterKeyType](../apis-ime-kit/js-apis-inputmethod.md#enterkeytype10)，该参数为可选参数，当useSystemKeyboard为true，并且设置了有效的enterKeyType时候，才有效。| 7208| customKeyboard | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | 否 | 指定自定义键盘组件builder，可选参数，当useSystemKeyboard为false时，需要设置该参数，然后Web组件会拉起该自定义键盘。 7209 7210## WebKeyboardController<sup>12+</sup> 7211 7212控制自定义键盘的输入、删除、关闭等操作。示例代码参考[onInterceptKeyboardAttach](#oninterceptkeyboardattach12)。 7213 7214### constructor<sup>12+</sup> 7215 7216constructor() 7217 7218WebKeyboardController的构造函数。 7219 7220**系统能力：** SystemCapability.Web.Webview.Core 7221 7222### insertText<sup>12+</sup> 7223 7224insertText(text: string): void 7225 7226插入字符。 7227 7228**系统能力：** SystemCapability.Web.Webview.Core 7229 7230**参数：** 7231 7232| 参数名 | 类型 | 必填 | 说明 | 7233| ------ | -------- | ---- | --------------------- | 7234| text | string | 是 | 向Web输入框插入字符。 | 7235 7236### deleteForward<sup>12+</sup> 7237 7238deleteForward(length: number): void 7239 7240从后往前删除length参数指定长度的字符。 7241 7242**系统能力：** SystemCapability.Web.Webview.Core 7243 7244**参数：** 7245 7246| 参数名 | 类型 | 必填 | 说明 | 7247| ------ | -------- | ---- | ------------------------ | 7248| length | number | 是 | 从后往前删除字符的长度。<br>参数无取值范围，当参数值大于字符长度时，默认删除光标前面所有字符；参数值为负数时，不执行删除操作。 | 7249 7250### deleteBackward12+</sup> 7251 7252deleteBackward(length: number): void 7253 7254从前往后删除length参数指定长度的字符。 7255 7256**系统能力：** SystemCapability.Web.Webview.Core 7257 7258**参数：** 7259 7260| 参数名 | 类型 | 必填 | 说明 | 7261| ------ | -------- | ---- | ------------------------ | 7262| length | number | 是 | 从前往后删除字符的长度。<br>参数无取值范围，当参数值大于字符长度时，默认删除光标后面所有字符；参数值为负数时，不执行删除操作。 | 7263 7264### sendFunctionKey<sup>12+</sup> 7265 7266sendFunctionKey(key: number): void 7267 7268插入功能按键，目前仅支持enter键类型，取值见[EnterKeyType](../apis-ime-kit/js-apis-inputmethod.md#enterkeytype10)。 7269 7270**系统能力：** SystemCapability.Web.Webview.Core 7271 7272**参数：** 7273 7274| 参数名 | 类型 | 必填 | 说明 | 7275| ------ | -------- | ---- | ------------------------------------------ | 7276| key | number | 是 | 向Web输入框传递功能键，目前仅支持enter键。 | 7277 7278### close<sup>12+</sup> 7279 7280close(): void 7281 7282关闭自定义键盘。 7283 7284**系统能力：** SystemCapability.Web.Webview.Core 7285 7286## ConsoleMessage 7287 7288Web组件获取控制台信息对象。示例代码参考[onConsole事件](#onconsole)。 7289 7290### constructor 7291 7292constructor(message: string, sourceId: string, lineNumber: number, messageLevel: MessageLevel) 7293 7294ConsoleMessage的构造函数。 7295 7296> **说明：** 7297> 7298> 从API version 8开始支持，从API version 9开始废弃。建议使用[constructor](#constructor9)代替。 7299 7300**系统能力：** SystemCapability.Web.Webview.Core 7301 7302### constructor<sup>9+</sup> 7303 7304constructor() 7305 7306ConsoleMessage的构造函数。 7307 7308**系统能力：** SystemCapability.Web.Webview.Core 7309 7310### getLineNumber 7311 7312getLineNumber(): number 7313 7314获取ConsoleMessage的行数。 7315 7316**系统能力：** SystemCapability.Web.Webview.Core 7317 7318**返回值：** 7319 7320| 类型 | 说明 | 7321| ------ | -------------------- | 7322| number | 返回ConsoleMessage的行数。 | 7323 7324### getMessage 7325 7326getMessage(): string 7327 7328获取ConsoleMessage的日志信息。 7329 7330**系统能力：** SystemCapability.Web.Webview.Core 7331 7332**返回值：** 7333 7334| 类型 | 说明 | 7335| ------ | ---------------------- | 7336| string | 返回ConsoleMessage的日志信息。 | 7337 7338### getMessageLevel 7339 7340getMessageLevel(): MessageLevel 7341 7342获取ConsoleMessage的信息级别。 7343 7344**系统能力：** SystemCapability.Web.Webview.Core 7345 7346**返回值：** 7347 7348| 类型 | 说明 | 7349| --------------------------------- | ---------------------- | 7350| [MessageLevel](#messagelevel枚举说明) | 返回ConsoleMessage的信息级别。 | 7351 7352### getSourceId 7353 7354getSourceId(): string 7355 7356获取网页源文件路径和名字。 7357 7358**系统能力：** SystemCapability.Web.Webview.Core 7359 7360**返回值：** 7361 7362| 类型 | 说明 | 7363| ------ | ------------- | 7364| string | 返回网页源文件路径和名字。 | 7365 7366## JsResult 7367 7368Web组件返回的弹窗确认或弹窗取消功能对象。示例代码参考[onAlert事件](#onalert)。 7369 7370### constructor 7371 7372constructor() 7373 7374JsResult的构造函数。 7375 7376**系统能力：** SystemCapability.Web.Webview.Core 7377 7378### handleCancel 7379 7380handleCancel(): void 7381 7382通知Web组件用户取消弹窗操作。 7383 7384**系统能力：** SystemCapability.Web.Webview.Core 7385 7386### handleConfirm 7387 7388handleConfirm(): void 7389 7390通知Web组件用户确认弹窗操作。 7391 7392**系统能力：** SystemCapability.Web.Webview.Core 7393 7394### handlePromptConfirm<sup>9+</sup> 7395 7396handlePromptConfirm(result: string): void 7397 7398通知Web组件用户确认弹窗操作及对话框内容。 7399 7400**系统能力：** SystemCapability.Web.Webview.Core 7401 7402**参数：** 7403 7404| 参数名 | 类型 | 必填 | 说明 | 7405| ------ | ------ | ---- | ----------- | 7406| result | string | 是 | 用户输入的对话框内容。 | 7407 7408## FullScreenExitHandler<sup>9+</sup> 7409 7410通知开发者Web组件退出全屏。示例代码参考[onFullScreenEnter事件](#onfullscreenenter9)。 7411 7412### constructor<sup>9+</sup> 7413 7414constructor() 7415 7416FullScreenExitHandler的构造函数。 7417 7418**系统能力：** SystemCapability.Web.Webview.Core 7419 7420### exitFullScreen<sup>9+</sup> 7421 7422exitFullScreen(): void 7423 7424通知开发者Web组件退出全屏。 7425 7426**系统能力：** SystemCapability.Web.Webview.Core 7427 7428## ControllerHandler<sup>9+</sup> 7429 7430设置用户新建Web组件的WebviewController对象。示例代码参考[onWindowNew事件](#onwindownew9)。 7431 7432**系统能力：** SystemCapability.Web.Webview.Core 7433 7434### constructor<sup>9+</sup> 7435 7436constructor() 7437 7438ControllerHandler的构造函数。 7439 7440**系统能力：** SystemCapability.Web.Webview.Core 7441 7442### setWebController<sup>9+</sup> 7443 7444setWebController(controller: WebviewController): void 7445 7446设置WebviewController对象，如果不需要打开新窗口请设置为null。 7447 7448**系统能力：** SystemCapability.Web.Webview.Core 7449 7450**参数：** 7451 7452| 参数名 | 类型 | 必填 | 说明 | 7453| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 7454| controller | [WebviewController](js-apis-webview.md#webviewcontroller) | 是 | 新建Web组件的WebviewController对象，如果不需要打开新窗口请设置为null。 | 7455 7456## WebResourceError 7457 7458Web组件资源管理错误信息对象。示例代码参考[onErrorReceive事件](#onerrorreceive)。 7459 7460### constructor 7461 7462constructor() 7463 7464WebResourceError的构造函数。 7465 7466**系统能力：** SystemCapability.Web.Webview.Core 7467 7468### getErrorCode 7469 7470getErrorCode(): number 7471 7472获取加载资源的错误码。 7473 7474**系统能力：** SystemCapability.Web.Webview.Core 7475 7476**返回值：** 7477 7478| 类型 | 说明 | 7479| ------ | ----------- | 7480| number | 返回加载资源的错误码。错误码的含义可以参考[WebNetErrorList](js-apis-netErrorList.md) | 7481 7482### getErrorInfo 7483 7484getErrorInfo(): string 7485 7486获取加载资源的错误信息。 7487 7488**系统能力：** SystemCapability.Web.Webview.Core 7489 7490**返回值：** 7491 7492| 类型 | 说明 | 7493| ------ | ------------ | 7494| string | 返回加载资源的错误信息。 | 7495 7496## WebResourceRequest 7497 7498Web组件获取资源请求对象。示例代码参考[onErrorReceive事件](#onerrorreceive)。 7499 7500### constructor 7501 7502constructor() 7503 7504WebResourceRequest的构造函数。 7505 7506**系统能力：** SystemCapability.Web.Webview.Core 7507 7508### getRequestHeader 7509 7510getRequestHeader(): Array\<Header\> 7511 7512获取资源请求头信息。 7513 7514**系统能力：** SystemCapability.Web.Webview.Core 7515 7516**返回值：** 7517 7518| 类型 | 说明 | 7519| -------------------------- | ---------- | 7520| Array\<[Header](#header)\> | 返回资源请求头信息。 | 7521 7522### getRequestUrl 7523 7524getRequestUrl(): string 7525 7526获取资源请求的URL信息。 7527 7528**系统能力：** SystemCapability.Web.Webview.Core 7529 7530**返回值：** 7531 7532| 类型 | 说明 | 7533| ------ | ------------- | 7534| string | 返回资源请求的URL信息。 | 7535 7536### isMainFrame 7537 7538isMainFrame(): boolean 7539 7540判断资源请求是否为主frame。 7541 7542**系统能力：** SystemCapability.Web.Webview.Core 7543 7544**返回值：** 7545 7546| 类型 | 说明 | 7547| ------- | ---------------- | 7548| boolean | 返回资源请求是否为主frame。<br>true表示返回资源请求为主frame，false表示返回资源请求不为主frame。 | 7549 7550### isRedirect 7551 7552isRedirect(): boolean 7553 7554判断资源请求是否被服务端重定向。 7555 7556**系统能力：** SystemCapability.Web.Webview.Core 7557 7558**返回值：** 7559 7560| 类型 | 说明 | 7561| ------- | ---------------- | 7562| boolean | 返回资源请求是否被服务端重定向。<br>true表示返回资源请求被服务端重定向，false表示返回资源请求未被服务端重定向。 | 7563 7564### isRequestGesture 7565 7566isRequestGesture(): boolean 7567 7568获取资源请求是否与手势（如点击）相关联。 7569 7570**系统能力：** SystemCapability.Web.Webview.Core 7571 7572**返回值：** 7573 7574| 类型 | 说明 | 7575| ------- | -------------------- | 7576| boolean | 返回资源请求是否与手势（如点击）相关联。<br>true表示返回资源请求与手势（如点击）相关联，false表示返回资源请求与手势（如点击）不相关联。 | 7577 7578### getRequestMethod<sup>9+</sup> 7579 7580getRequestMethod(): string 7581 7582获取请求方法。 7583 7584**系统能力：** SystemCapability.Web.Webview.Core 7585 7586**返回值：** 7587 7588| 类型 | 说明 | 7589| ------ | ------- | 7590| string | 返回请求方法。 | 7591 7592## Header 7593 7594Web组件返回的请求/响应头对象。 7595 7596**系统能力：** SystemCapability.Web.Webview.Core 7597 7598| 名称 | 类型 | 必填 | 说明 | 7599| ----------- | ------ | ---- | ------------- | 7600| headerKey | string | 是 | 请求/响应头的key。 | 7601| headerValue | string | 是 | 请求/响应头的value。 | 7602 7603## WebResourceResponse 7604 7605Web组件资源响应对象。示例代码参考[onHttpErrorReceive事件](#onhttperrorreceive)。 7606 7607### constructor 7608 7609constructor() 7610 7611WebResourceResponse的构造函数。 7612 7613**系统能力：** SystemCapability.Web.Webview.Core 7614 7615### getReasonMessage 7616 7617getReasonMessage(): string 7618 7619获取资源响应的状态码描述。 7620 7621**系统能力：** SystemCapability.Web.Webview.Core 7622 7623**返回值：** 7624 7625| 类型 | 说明 | 7626| ------ | ------------- | 7627| string | 返回资源响应的状态码描述。 | 7628 7629### getResponseCode 7630 7631getResponseCode(): number 7632 7633获取资源响应的状态码。 7634 7635**系统能力：** SystemCapability.Web.Webview.Core 7636 7637**返回值：** 7638 7639| 类型 | 说明 | 7640| ------ | ----------- | 7641| number | 返回资源响应的状态码。 | 7642 7643### getResponseData 7644 7645getResponseData(): string 7646 7647获取资源响应数据。 7648 7649**系统能力：** SystemCapability.Web.Webview.Core 7650 7651**返回值：** 7652 7653| 类型 | 说明 | 7654| ------ | --------- | 7655| string | 返回资源响应数据。 | 7656 7657### getResponseEncoding 7658 7659getResponseEncoding(): string 7660 7661获取资源响应的编码。 7662 7663**系统能力：** SystemCapability.Web.Webview.Core 7664 7665**返回值：** 7666 7667| 类型 | 说明 | 7668| ------ | ---------- | 7669| string | 返回资源响应的编码。 | 7670 7671### getResponseHeader 7672 7673getResponseHeader() : Array\<Header\> 7674 7675获取资源响应头。 7676 7677**系统能力：** SystemCapability.Web.Webview.Core 7678 7679**返回值：** 7680 7681| 类型 | 说明 | 7682| -------------------------- | -------- | 7683| Array\<[Header](#header)\> | 返回资源响应头。 | 7684 7685### getResponseMimeType 7686 7687getResponseMimeType(): string 7688 7689获取资源响应的媒体（MIME）类型。 7690 7691**系统能力：** SystemCapability.Web.Webview.Core 7692 7693**返回值：** 7694 7695| 类型 | 说明 | 7696| ------ | ------------------ | 7697| string | 返回资源响应的媒体（MIME）类型。 | 7698 7699### getResponseDataEx<sup>13+</sup> 7700 7701getResponseDataEx(): string | number | ArrayBuffer | Resource | undefined 7702 7703获取资源响应数据，支持多种数据类型。 7704 7705**系统能力：** SystemCapability.Web.Webview.Core 7706 7707**返回值：** 7708 7709|类型|说明| 7710|---|---| 7711|string|返回HTML格式的字符串。| 7712|number|返回文件句柄。| 7713|ArrayBuffer|返回二进制数据。| 7714|[Resource](../apis-arkui/arkui-ts/ts-types.md)|返回`$rawfile`资源。| 7715|undefined|如果没有可用数据，返回`undefined`。| 7716 7717### getResponseIsReady<sup>13+</sup> 7718 7719getResponseIsReady(): boolean 7720 7721获取响应数据是否已准备就绪。 7722 7723**系统能力：** SystemCapability.Web.Webview.Core 7724 7725**返回值：** 7726 7727|类型|说明| 7728|---|---| 7729|boolean|`true`表示响应数据已准备好，`false`表示未准备好。| 7730 7731### setResponseData<sup>9+</sup> 7732 7733setResponseData(data: string \| number \| Resource \| ArrayBuffer): void 7734 7735设置资源响应数据。 7736 7737**系统能力：** SystemCapability.Web.Webview.Core 7738 7739**参数：** 7740 7741| 参数名 | 类型 | 必填 | 说明 | 7742| ---- | ---------------------------------------- | ---- | ---------------------------------------- | 7743| 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表示资源的原始二进制数据。 | 7744 7745### setResponseEncoding<sup>9+</sup> 7746 7747setResponseEncoding(encoding: string): void 7748 7749设置资源响应的编码。 7750 7751**系统能力：** SystemCapability.Web.Webview.Core 7752 7753**参数：** 7754 7755| 参数名 | 类型 | 必填 | 说明 | 7756| -------- | ------ | ---- | ------------ | 7757| encoding | string | 是 | 要设置的资源响应的编码。 | 7758 7759### setResponseMimeType<sup>9+</sup> 7760 7761setResponseMimeType(mimeType: string): void 7762 7763设置资源响应的媒体（MIME）类型。 7764 7765**系统能力：** SystemCapability.Web.Webview.Core 7766 7767**参数：** 7768 7769| 参数名 | 类型 | 必填 | 说明 | 7770| -------- | ------ | ---- | -------------------- | 7771| mimeType | string | 是 | 要设置的资源响应的媒体（MIME）类型。 | 7772 7773### setReasonMessage<sup>9+</sup> 7774 7775setReasonMessage(reason: string): void 7776 7777设置资源响应的状态码描述。 7778 7779**系统能力：** SystemCapability.Web.Webview.Core 7780 7781**参数：** 7782 7783| 参数名 | 类型 | 必填 | 说明 | 7784| ------ | ------ | ---- | --------------- | 7785| reason | string | 是 | 要设置的资源响应的状态码描述。 | 7786 7787### setResponseHeader<sup>9+</sup> 7788 7789setResponseHeader(header: Array\<Header\>): void 7790 7791设置资源响应头。 7792 7793**系统能力：** SystemCapability.Web.Webview.Core 7794 7795**参数：** 7796 7797| 参数名 | 类型 | 必填 | 说明 | 7798| ------ | -------------------------- | ---- | ---------- | 7799| header | Array\<[Header](#header)\> | 是 | 要设置的资源响应头。 | 7800 7801### setResponseCode<sup>9+</sup> 7802 7803setResponseCode(code: number): void 7804 7805设置资源响应的状态码。 7806 7807**系统能力：** SystemCapability.Web.Webview.Core 7808 7809**参数：** 7810 7811| 参数名 | 类型 | 必填 | 说明 | 7812| ---- | ------ | ---- | ------------- | 7813| code | number | 是 | 要设置的资源响应的状态码。如果该资源以错误结束，请参考[@ohos.web.netErrorList](js-apis-netErrorList.md)设置相应错误码，避免设置错误码为 ERR_IO_PENDING，设置为该错误码可能会导致XMLHttpRequest同步请求阻塞。 | 7814 7815### setResponseIsReady<sup>9+</sup> 7816 7817setResponseIsReady(IsReady: boolean): void 7818 7819设置资源响应数据是否已经就绪。 7820 7821**系统能力：** SystemCapability.Web.Webview.Core 7822 7823**参数：** 7824 7825| 参数名 | 类型 | 必填 | 说明 | 7826| ------- | ------- | ---- | ------------- | 7827| IsReady | boolean | 是 | 资源响应数据是否已经就绪。<br>true表示资源响应数据已经就绪，false表示资源响应数据未就绪。默认值：true。 | 7828 7829## FileSelectorResult<sup>9+</sup> 7830 7831通知Web组件的文件选择结果。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。 7832 7833### constructor<sup>9+</sup> 7834 7835constructor() 7836 7837FileSelectorResult的构造函数。 7838 7839**系统能力：** SystemCapability.Web.Webview.Core 7840 7841### handleFileList<sup>9+</sup> 7842 7843handleFileList(fileList: Array\<string\>): void 7844 7845通知Web组件进行文件选择操作。 7846 7847**系统能力：** SystemCapability.Web.Webview.Core 7848 7849**参数：** 7850 7851| 参数名 | 类型 | 必填 | 说明 | 7852| -------- | --------------- | ---- | ------------ | 7853| fileList | Array\<string\> | 是 | 需要进行操作的文件列表。 | 7854 7855## FileSelectorParam<sup>9+</sup> 7856 7857Web组件获取文件对象。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。 7858 7859### constructor<sup>9+</sup> 7860 7861constructor() 7862 7863FileSelectorParam的构造函数。 7864 7865**系统能力：** SystemCapability.Web.Webview.Core 7866 7867### getTitle<sup>9+</sup> 7868 7869getTitle(): string 7870 7871获取文件选择器标题。 7872 7873**系统能力：** SystemCapability.Web.Webview.Core 7874 7875**返回值：** 7876 7877| 类型 | 说明 | 7878| ------ | ---------- | 7879| string | 返回文件选择器标题。 | 7880 7881### getMode<sup>9+</sup> 7882 7883getMode(): FileSelectorMode 7884 7885获取文件选择器的模式。 7886 7887**系统能力：** SystemCapability.Web.Webview.Core 7888 7889**返回值：** 7890 7891| 类型 | 说明 | 7892| ---------------------------------------- | ----------- | 7893| [FileSelectorMode](#fileselectormode9枚举说明) | 返回文件选择器的模式。 | 7894 7895### getAcceptType<sup>9+</sup> 7896 7897getAcceptType(): Array\<string\> 7898 7899获取文件过滤类型。 7900 7901**系统能力：** SystemCapability.Web.Webview.Core 7902 7903**返回值：** 7904 7905| 类型 | 说明 | 7906| --------------- | --------- | 7907| Array\<string\> | 返回文件过滤类型。 | 7908 7909### isCapture<sup>9+</sup> 7910 7911isCapture(): boolean 7912 7913获取是否调用多媒体能力。 7914 7915**系统能力：** SystemCapability.Web.Webview.Core 7916 7917**返回值：** 7918 7919| 类型 | 说明 | 7920| ------- | ------------ | 7921| boolean | 返回是否调用多媒体能力。<br>true表示返回调用多媒体能力，false表示返回未调用多媒体能力。 | 7922 7923### getMimeTypes<sup>18+</sup> 7924 7925getMimeTypes(): Array\<string\> 7926 7927获取文件MIME类型。 7928 7929**系统能力：** SystemCapability.Web.Webview.Core 7930 7931**返回值：** 7932 7933| 类型 | 说明 | 7934| --------------- | --------- | 7935| Array\<string\> | 返回文件MIME类型。 | 7936 7937## HttpAuthHandler<sup>9+</sup> 7938 7939Web组件返回的http auth认证请求确认或取消和使用缓存密码认证功能对象。示例代码参考[onHttpAuthRequest事件](#onhttpauthrequest9)。 7940 7941### constructor<sup>9+</sup> 7942 7943constructor() 7944 7945HttpAuthHandler的构造函数。 7946 7947**系统能力：** SystemCapability.Web.Webview.Core 7948 7949### cancel<sup>9+</sup> 7950 7951cancel(): void 7952 7953通知Web组件用户取消HTTP认证操作。 7954 7955**系统能力：** SystemCapability.Web.Webview.Core 7956 7957### confirm<sup>9+</sup> 7958 7959confirm(userName: string, password: string): boolean 7960 7961使用用户名和密码进行HTTP认证操作。 7962 7963**系统能力：** SystemCapability.Web.Webview.Core 7964 7965**参数：** 7966 7967| 参数名 | 类型 | 必填 | 说明 | 7968| -------- | ------ | ---- | ---------- | 7969| userName | string | 是 | HTTP认证用户名。 | 7970| password | string | 是 | HTTP认证密码。 | 7971 7972**返回值：** 7973 7974| 类型 | 说明 | 7975| ------- | --------------------- | 7976| boolean | 认证成功返回true，失败返回false。 | 7977 7978### isHttpAuthInfoSaved<sup>9+</sup> 7979 7980isHttpAuthInfoSaved(): boolean 7981 7982通知Web组件用户使用服务器缓存的账号密码认证。 7983 7984**系统能力：** SystemCapability.Web.Webview.Core 7985 7986**返回值：** 7987 7988| 类型 | 说明 | 7989| ------- | ------------------------- | 7990| boolean | 存在密码认证成功返回true，其他返回false。 | 7991 7992## SslErrorHandler<sup>9+</sup> 7993 7994Web组件返回的SSL错误通知事件用户处理功能对象。示例代码参考[onSslErrorEventReceive事件](#onsslerroreventreceive9)。 7995 7996### constructor<sup>9+</sup> 7997 7998constructor() 7999 8000SslErrorHandler的构造函数。 8001 8002**系统能力：** SystemCapability.Web.Webview.Core 8003 8004### handleCancel<sup>9+</sup> 8005 8006handleCancel(): void 8007 8008通知Web组件取消此请求。 8009 8010**系统能力：** SystemCapability.Web.Webview.Core 8011 8012### handleConfirm<sup>9+</sup> 8013 8014handleConfirm(): void 8015 8016通知Web组件继续使用SSL证书。 8017 8018**系统能力：** SystemCapability.Web.Webview.Core 8019 8020## ClientAuthenticationHandler<sup>9+</sup> 8021 8022Web组件返回的SSL客户端证书请求事件用户处理功能对象。示例代码参考[onClientAuthenticationRequest事件](#onclientauthenticationrequest9)。 8023 8024### constructor<sup>9+</sup> 8025 8026constructor() 8027 8028ClientAuthenticationHandler的构造函数。 8029 8030**系统能力：** SystemCapability.Web.Webview.Core 8031 8032### confirm<sup>9+</sup> 8033 8034confirm(priKeyFile : string, certChainFile : string): void 8035 8036通知Web组件使用指定的私钥和客户端证书链。 8037 8038**系统能力：** SystemCapability.Web.Webview.Core 8039 8040**参数：** 8041 8042| 参数名 | 类型 | 必填 | 说明 | 8043| ------------- | ------ | ---- | ------------------ | 8044| priKeyFile | string | 是 | 存放私钥文件的完整路径。 | 8045| certChainFile | string | 是 | 存放证书链文件的完整路径。 | 8046 8047### confirm<sup>10+</sup> 8048 8049confirm(authUri : string): void 8050 8051通知Web组件使用指定的凭据(从证书管理模块获得)。 8052 8053> **说明：** 8054> 8055> 需要配置权限：ohos.permission.ACCESS_CERT_MANAGER。 8056 8057**系统能力：** SystemCapability.Web.Webview.Core 8058 8059**参数：** 8060 8061| 参数名 | 类型 | 必填 | 说明 | 8062| ------- | ------ | ---- | ------- | 8063| authUri | string | 是 | 凭据的关键值。 | 8064 8065### cancel<sup>9+</sup> 8066 8067cancel(): void 8068 8069通知Web组件取消相同host和port服务器发送的客户端证书请求事件。同时，相同host和port服务器的请求，不重复上报该事件。 8070 8071**系统能力：** SystemCapability.Web.Webview.Core 8072 8073### ignore<sup>9+</sup> 8074 8075ignore(): void 8076 8077通知Web组件忽略本次请求。 8078 8079**系统能力：** SystemCapability.Web.Webview.Core 8080 8081## PermissionRequest<sup>9+</sup> 8082 8083Web组件返回授权或拒绝权限功能的对象。示例代码参考[onPermissionRequest事件](#onpermissionrequest9)。 8084 8085### constructor<sup>9+</sup> 8086 8087constructor() 8088 8089PermissionRequest的构造函数。 8090 8091**系统能力：** SystemCapability.Web.Webview.Core 8092 8093### deny<sup>9+</sup> 8094 8095deny(): void 8096 8097拒绝网页所请求的权限。 8098 8099**系统能力：** SystemCapability.Web.Webview.Core 8100 8101### getOrigin<sup>9+</sup> 8102 8103getOrigin(): string 8104 8105获取网页来源。 8106 8107**系统能力：** SystemCapability.Web.Webview.Core 8108 8109**返回值：** 8110 8111| 类型 | 说明 | 8112| ------ | ------------ | 8113| string | 当前请求权限网页的来源。 | 8114 8115### getAccessibleResource<sup>9+</sup> 8116 8117getAccessibleResource(): Array\<string\> 8118 8119获取网页所请求的权限资源列表，资源列表类型参考[ProtectedResourceType](#protectedresourcetype9枚举说明)。 8120 8121**系统能力：** SystemCapability.Web.Webview.Core 8122 8123**返回值：** 8124 8125| 类型 | 说明 | 8126| --------------- | ------------- | 8127| Array\<string\> | 网页所请求的权限资源列表。 | 8128 8129### grant<sup>9+</sup> 8130 8131grant(resources: Array\<string\>): void 8132 8133对网页访问的给定权限进行授权。 8134 8135**系统能力：** SystemCapability.Web.Webview.Core 8136 8137**参数：** 8138 8139| 参数名 | 类型 | 必填 | 说明 | 8140| --------- | --------------- | ---- | --------------- | 8141| resources | Array\<string\> | 是 | 授予网页请求的权限的资源列表。 | 8142 8143## ScreenCaptureHandler<sup>10+</sup> 8144 8145Web组件返回授权或拒绝屏幕捕获功能的对象。示例代码参考[onScreenCaptureRequest事件](#onscreencapturerequest10)。 8146 8147### constructor<sup>10+</sup> 8148 8149constructor() 8150 8151ScreenCaptureHandler的构造函数。 8152 8153**系统能力：** SystemCapability.Web.Webview.Core 8154 8155### deny<sup>10+</sup> 8156 8157deny(): void 8158 8159拒绝网页所请求的屏幕捕获操作。 8160 8161**系统能力：** SystemCapability.Web.Webview.Core 8162 8163### getOrigin<sup>10+</sup> 8164 8165getOrigin(): string 8166 8167获取网页来源。 8168 8169**系统能力：** SystemCapability.Web.Webview.Core 8170 8171**返回值：** 8172 8173| 类型 | 说明 | 8174| ------ | ------------ | 8175| string | 当前请求权限网页的来源。 | 8176 8177### grant<sup>10+</sup> 8178 8179grant(config: ScreenCaptureConfig): void 8180 8181对网页访问的屏幕捕获操作进行授权。 8182 8183> **说明：** 8184> 8185> 需要配置权限：ohos.permission.MICROPHONE。 8186 8187**系统能力：** SystemCapability.Web.Webview.Core 8188 8189**参数：** 8190 8191| 参数名 | 类型 | 必填 | 说明 | 8192| ------ | ---------------------------------------- | ---- | ------- | 8193| config | [ScreenCaptureConfig](#screencaptureconfig10) | 是 | 屏幕捕获配置。 | 8194 8195## EventResult<sup>12+</sup> 8196 8197通知Web组件事件消费结果，支持的事件参考[触摸事件的类型](../apis-arkui/arkui-ts/ts-appendix-enums.md#touchtype)。如果应用不消费该事件，则设置为false，事件被Web组件消费。应用消费了该事件，设置为true，Web组件不消费。示例代码参考[onNativeEmbedGestureEvent事件](#onnativeembedgestureevent11)。 8198 8199### constructor<sup>12+</sup> 8200 8201constructor() 8202 8203EventResult的构造函数。 8204 8205**系统能力：** SystemCapability.Web.Webview.Core 8206 8207### setGestureEventResult<sup>12+</sup> 8208 8209setGestureEventResult(result: boolean): void 8210 8211设置手势事件消费结果。 8212 8213**系统能力：** SystemCapability.Web.Webview.Core 8214 8215**参数：** 8216 8217| 参数名 | 类型 | 必填 | 说明 | 8218| --------------- | -------- | ---- |------- | 8219| result | boolean | 是 | 是否消费该手势事件。<br>true表示消费该手势事件，false表示不消费该手势事件。默认值为true。 | 8220 8221**示例：** 8222 8223请参考[onNativeEmbedGestureEvent事件](#onnativeembedgestureevent11)。 8224 8225### setGestureEventResult<sup>14+</sup> 8226 8227setGestureEventResult(result: boolean, stopPropagation: boolean): void 8228 8229设置手势事件消费结果。 8230 8231**系统能力：** SystemCapability.Web.Webview.Core 8232 8233**参数：** 8234 8235| 参数名 | 类型 | 必填 | 说明 | 8236| --------------- | -------- | ---- |------- | 8237| result | boolean | 是 | 是否消费该手势事件。<br>true表示消费该手势事件，false表示不消费该手势事件。<br>默认值为true。 | 8238| stopPropagation | boolean | 是 | 是否阻止冒泡，在result为true时生效。<br>true表示阻止冒泡，false表示不阻止冒泡。<br>默认值为true。 | 8239 8240**示例：** 8241 8242请参考[onNativeEmbedGestureEvent事件](#onnativeembedgestureevent11)。 8243 8244## ContextMenuSourceType<sup>9+</sup>枚举说明 8245 8246**系统能力：** SystemCapability.Web.Webview.Core 8247 8248| 名称 | 值 | 说明 | 8249| --------- | -- |------------ | 8250| None | 0 | 其他事件来源。 | 8251| Mouse | 1 | 鼠标事件。 | 8252| LongPress | 2 | 长按事件。 | 8253 8254## ContextMenuMediaType<sup>9+</sup>枚举说明 8255 8256**系统能力：** SystemCapability.Web.Webview.Core 8257 8258| 名称 | 值 | 说明 | 8259| ----- | -- | ------------- | 8260| None | 0 | 非特殊媒体或其他媒体类型。 | 8261| Image | 1 | 图片。 | 8262 8263## ContextMenuInputFieldType<sup>9+</sup>枚举说明 8264 8265**系统能力：** SystemCapability.Web.Webview.Core 8266 8267| 名称 | 值 | 说明 | 8268| --------- | -- | --------------------------- | 8269| None | 0 | 非输入框。 | 8270| PlainText | 1 | 纯文本类型，包括text、search、email等。 | 8271| Password | 2 | 密码类型。 | 8272| Number | 3 | 数字类型。 | 8273| Telephone | 4 | 电话号码类型。 | 8274| Other | 5 | 其他类型。 | 8275 8276## ContextMenuEditStateFlags<sup>9+</sup>枚举说明 8277 8278支持以按位或的方式使用此枚举。例如，如果需要同时支持CAN_CUT、CAN_COPY和CAN_SELECT_ALL，可使用CAN_CUT | CAN_COPY | CAN_SELECT_ALL或11。 8279 8280**系统能力：** SystemCapability.Web.Webview.Core 8281 8282| 名称 | 值 | 说明 | 8283| -------------- | -- | -------- | 8284| NONE | 0 | 不可编辑。 | 8285| CAN_CUT | 1 << 0 | 支持剪切。 | 8286| CAN_COPY | 1 << 1 | 支持拷贝。 | 8287| CAN_PASTE | 1 << 2 | 支持粘贴。 | 8288| CAN_SELECT_ALL | 1 << 3 | 支持全选。 | 8289 8290## WebContextMenuParam<sup>9+</sup> 8291 8292实现长按页面元素或鼠标右键弹出来的菜单信息。示例代码参考[onContextMenuShow事件](#oncontextmenushow9)。 8293 8294### constructor<sup>9+</sup> 8295 8296constructor() 8297 8298WebContextMenuParam的构造函数。 8299 8300**系统能力：** SystemCapability.Web.Webview.Core 8301 8302### x<sup>9+</sup> 8303 8304x(): number 8305 8306弹出菜单的x坐标。 8307 8308**系统能力：** SystemCapability.Web.Webview.Core 8309 8310**返回值：** 8311 8312| 类型 | 说明 | 8313| ------ | ------------------ | 8314| number | 显示正常返回非负整数，否则返回-1。<br>单位：vp。 | 8315 8316### y<sup>9+</sup> 8317 8318y(): number 8319 8320弹出菜单的y坐标。 8321 8322**系统能力：** SystemCapability.Web.Webview.Core 8323 8324**返回值：** 8325 8326| 类型 | 说明 | 8327| ------ | ------------------ | 8328| number | 显示正常返回非负整数，否则返回-1。<br>单位：vp。 | 8329 8330### getLinkUrl<sup>9+</sup> 8331 8332getLinkUrl(): string 8333 8334获取链接地址。 8335 8336**系统能力：** SystemCapability.Web.Webview.Core 8337 8338**返回值：** 8339 8340| 类型 | 说明 | 8341| ------ | ------------------------- | 8342| string | 如果长按位置是链接，返回经过安全检查的url链接。 | 8343 8344### getUnfilteredLinkUrl<sup>9+</sup> 8345 8346getUnfilteredLinkUrl(): string 8347 8348获取链接地址。 8349 8350**系统能力：** SystemCapability.Web.Webview.Core 8351 8352**返回值：** 8353 8354| 类型 | 说明 | 8355| ------ | --------------------- | 8356| string | 如果长按位置是链接，返回原始的url链接。 | 8357 8358### getSourceUrl<sup>9+</sup> 8359 8360getSourceUrl(): string 8361 8362获取sourceUrl链接。 8363 8364**系统能力：** SystemCapability.Web.Webview.Core 8365 8366**返回值：** 8367 8368| 类型 | 说明 | 8369| ------ | ------------------------ | 8370| string | 如果选中的元素有src属性，返回src的url。 | 8371 8372### existsImageContents<sup>9+</sup> 8373 8374existsImageContents(): boolean 8375 8376是否存在图像内容。 8377 8378**系统能力：** SystemCapability.Web.Webview.Core 8379 8380**返回值：** 8381 8382| 类型 | 说明 | 8383| ------- | ------------------------- | 8384| boolean | 长按位置中有图片返回true，否则返回false。 | 8385 8386### getMediaType<sup>9+</sup> 8387 8388getMediaType(): ContextMenuMediaType 8389 8390获取网页元素媒体类型。 8391 8392**系统能力：** SystemCapability.Web.Webview.Core 8393 8394**返回值：** 8395 8396| 类型 | 说明 | 8397| ---------------------------------------- | --------- | 8398| [ContextMenuMediaType](#contextmenumediatype9枚举说明) | 网页元素媒体类型。 | 8399 8400### getSelectionText<sup>9+</sup> 8401 8402getSelectionText(): string 8403 8404获取选中文本。 8405 8406**系统能力：** SystemCapability.Web.Webview.Core 8407 8408**返回值：** 8409 8410| 类型 | 说明 | 8411| ------ | -------------------- | 8412| string | 菜单上下文选中文本内容，不存在则返回空。 | 8413 8414### getSourceType<sup>9+</sup> 8415 8416getSourceType(): ContextMenuSourceType 8417 8418获取菜单事件来源。 8419 8420**系统能力：** SystemCapability.Web.Webview.Core 8421 8422**返回值：** 8423 8424| 类型 | 说明 | 8425| ---------------------------------------- | ------- | 8426| [ContextMenuSourceType](#contextmenusourcetype9枚举说明) | 菜单事件来源。 | 8427 8428### getInputFieldType<sup>9+</sup> 8429 8430getInputFieldType(): ContextMenuInputFieldType 8431 8432获取网页元素输入框类型。 8433 8434**系统能力：** SystemCapability.Web.Webview.Core 8435 8436**返回值：** 8437 8438| 类型 | 说明 | 8439| ---------------------------------------- | ------ | 8440| [ContextMenuInputFieldType](#contextmenuinputfieldtype9枚举说明) | 输入框类型。 | 8441 8442### isEditable<sup>9+</sup> 8443 8444isEditable(): boolean 8445 8446获取网页元素是否可编辑标识。 8447 8448**系统能力：** SystemCapability.Web.Webview.Core 8449 8450**返回值：** 8451 8452| 类型 | 说明 | 8453| ------- | -------------------------- | 8454| boolean | 网页元素可编辑返回true，不可编辑返回false。 | 8455 8456### getEditStateFlags<sup>9+</sup> 8457 8458getEditStateFlags(): number 8459 8460获取网页元素可编辑标识。 8461 8462**系统能力：** SystemCapability.Web.Webview.Core 8463 8464**返回值：** 8465 8466| 类型 | 说明 | 8467| ------ | ---------------------------------------- | 8468| number | 网页元素可编辑标识，参照[ContextMenuEditStateFlags](#contextmenueditstateflags9枚举说明)。 | 8469 8470### getPreviewWidth<sup>13+</sup> 8471 8472getPreviewWidth(): number 8473 8474获取预览图的宽。 8475 8476**系统能力：** SystemCapability.Web.Webview.Core 8477 8478**返回值：** 8479 8480| 类型 | 说明 | 8481| ------ | ----------- | 8482| number | 预览图的宽。<br>单位：vp。 | 8483 8484### getPreviewHeight<sup>13+</sup> 8485 8486getPreviewHeight(): number 8487 8488获取预览图的高。 8489 8490**系统能力：** SystemCapability.Web.Webview.Core 8491 8492**返回值：** 8493 8494| 类型 | 说明 | 8495| ------ | ---------- | 8496| number | 预览图的高。<br>单位：vp。 | 8497 8498## WebContextMenuResult<sup>9+</sup> 8499 8500实现长按页面元素或鼠标右键弹出来的菜单所执行的响应事件。示例代码参考[onContextMenuShow事件](#oncontextmenushow9)。 8501 8502### constructor<sup>9+</sup> 8503 8504constructor() 8505 8506WebContextMenuResult的构造函数。 8507 8508**系统能力：** SystemCapability.Web.Webview.Core 8509 8510### closeContextMenu<sup>9+</sup> 8511 8512closeContextMenu(): void 8513 8514不执行WebContextMenuResult其他接口操作时，需要调用此接口关闭菜单。 8515 8516**系统能力：** SystemCapability.Web.Webview.Core 8517 8518### copyImage<sup>9+</sup> 8519 8520copyImage(): void 8521 8522WebContextMenuParam有图片内容则复制图片。 8523 8524**系统能力：** SystemCapability.Web.Webview.Core 8525 8526### copy<sup>9+</sup> 8527 8528copy(): void 8529 8530执行与此上下文菜单相关的拷贝文本操作。 8531 8532**系统能力：** SystemCapability.Web.Webview.Core 8533 8534### paste<sup>9+</sup> 8535 8536paste(): void 8537 8538执行与此上下文菜单相关的粘贴操作。 8539 8540> **说明：** 8541> 8542> 需要配置权限：ohos.permission.READ_PASTEBOARD。 8543 8544**系统能力：** SystemCapability.Web.Webview.Core 8545 8546### cut<sup>9+</sup> 8547 8548cut(): void 8549 8550执行与此上下文菜单相关的剪切操作。 8551 8552**系统能力：** SystemCapability.Web.Webview.Core 8553 8554### selectAll<sup>9+</sup> 8555 8556selectAll(): void 8557 8558执行与此上下文菜单相关的全选操作。 8559 8560**系统能力：** SystemCapability.Web.Webview.Core 8561 8562## JsGeolocation 8563 8564Web组件返回授权或拒绝权限功能的对象。示例代码参考[onGeolocationShow事件](#ongeolocationshow)。 8565 8566### constructor 8567 8568constructor() 8569 8570JsGeolocation的构造函数。 8571 8572**系统能力：** SystemCapability.Web.Webview.Core 8573 8574### invoke 8575 8576invoke(origin: string, allow: boolean, retain: boolean): void 8577 8578设置网页地理位置权限状态。 8579 8580**系统能力：** SystemCapability.Web.Webview.Core 8581 8582**参数：** 8583 8584| 参数名 | 类型 | 必填 | 说明 | 8585| ------ | ------- | ---- | ---------------------------------------- | 8586| origin | string | 是 | 指定源的字符串索引。 | 8587| allow | boolean | 是 | 设置的地理位置权限状态。<br>true表示开启地理位置权限，false表示不开启地理位置权限。 | 8588| retain | boolean | 是 | 是否允许将地理位置权限状态保存到系统中。可通过[GeolocationPermissions<sup>9+</sup>](js-apis-webview.md#geolocationpermissions)接口管理保存到系统的地理位置权限。<br>true表示允许，false表示不允许。 | 8589 8590## MessageLevel枚举说明 8591 8592**系统能力：** SystemCapability.Web.Webview.Core 8593 8594| 名称 | 值 | 说明 | 8595| ----- | -- | ---- | 8596| Debug | 1 | 调试级别。 | 8597| Error | 4 | 错误级别。 | 8598| Info | 2 | 消息级别。 | 8599| Log | 5 | 日志级别。 | 8600| Warn | 3 | 警告级别。 | 8601 8602## RenderExitReason<sup>9+</sup>枚举说明 8603 8604onRenderExited接口返回的渲染进程退出的具体原因。 8605 8606**系统能力：** SystemCapability.Web.Webview.Core 8607 8608| 名称 | 值 | 说明 | 8609| -------------------------- | -- | ----------------- | 8610| ProcessAbnormalTermination | 0 | 渲染进程异常退出。 | 8611| ProcessWasKilled | 1 | 收到SIGKILL，或被手动终止。 | 8612| ProcessCrashed | 2 | 渲染进程崩溃退出，如段错误。 | 8613| ProcessOom | 3 | 程序内存不足。 | 8614| ProcessExitUnknown | 4 | 其他原因。 | 8615 8616## MixedMode枚举说明 8617 8618**系统能力：** SystemCapability.Web.Webview.Core 8619 8620| 名称 | 值 | 说明 | 8621| ---------- | -- | ---------------------------------- | 8622| All | 0 | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 | 8623| Compatible | 1 | 混合内容兼容性模式，部分不安全的内容可能被加载。 | 8624| None | 2 | 不允许加载HTTP和HTTPS混合内容。 | 8625 8626## CacheMode枚举说明 8627 8628**系统能力：** SystemCapability.Web.Webview.Core 8629 8630| 名称 | 值 | 说明 | 8631| ------- | -- | ------------------------------------ | 8632| Default<sup>9+</sup> | 0 | 优先使用未过期cache加载资源，无效或无cache时从网络获取。 | 8633| None | 1 | 优先使用cache(含过期)加载资源，无cache时从网络获取。 | 8634| Online | 2 | 强制从网络获取最新资源，不使用任何cache。 | 8635| Only | 3 | 仅使用本地cache加载资源。 | 8636 8637## FileSelectorMode<sup>9+</sup>枚举说明 8638 8639**系统能力：** SystemCapability.Web.Webview.Core 8640 8641| 名称 | 值 | 说明 | 8642| -------------------- | -- | ---------- | 8643| FileOpenMode | 0 | 打开上传单个文件。 | 8644| FileOpenMultipleMode | 1 | 打开上传多个文件。 | 8645| FileOpenFolderMode | 2 | 打开上传文件夹模式。 | 8646| FileSaveMode | 3 | 文件保存模式。 | 8647 8648 ## HitTestType枚举说明 8649 8650 **系统能力：** SystemCapability.Web.Webview.Core 8651 8652| 名称 | 值 | 说明 | 8653| ------------- | -- | ------------------------ | 8654| EditText | 0 | 可编辑的区域。 | 8655| Email | 1 | 电子邮件地址。 | 8656| HttpAnchor | 2 | 超链接，其src为http。 | 8657| HttpAnchorImg | 3 | 带有超链接的图片，其中超链接的src为http。 | 8658| Img | 4 | HTML::img标签。 | 8659| Map | 5 | 地理地址。 | 8660| Phone | 6 | 电话号码。 | 8661| Unknown | 7 | 未知内容。 | 8662 8663 ## OverScrollMode<sup>11+</sup>枚举说明 8664 8665 **系统能力：** SystemCapability.Web.Webview.Core 8666 8667| 名称 | 值 | 说明 | 8668| ------ | -- | ----------- | 8669| NEVER | 0 | Web过滚动模式关闭。 | 8670| ALWAYS | 1 | Web过滚动模式开启。 | 8671 8672## OnContextMenuHideCallback<sup>11+</sup> 8673 8674type OnContextMenuHideCallback = () => void 8675 8676上下文菜单自定义隐藏的回调。 8677 8678**系统能力：** SystemCapability.Web.Webview.Core 8679 8680## SslError<sup>9+</sup>枚举说明 8681 8682onSslErrorEventReceive接口返回的SSL错误的具体原因。 8683 8684**系统能力：** SystemCapability.Web.Webview.Core 8685 8686| 名称 | 值 | 说明 | 8687| ------------ | -- | ----------- | 8688| Invalid | 0 | 一般错误。 | 8689| HostMismatch | 1 | 主机名不匹配。 | 8690| DateInvalid | 2 | 证书日期无效。 | 8691| Untrusted | 3 | 证书颁发机构不受信任。 | 8692 8693## ProtectedResourceType<sup>9+</sup>枚举说明 8694 8695**系统能力：** SystemCapability.Web.Webview.Core 8696 8697| 名称 | 值 | 说明 | 备注 | 8698| --------------------------- | --------------- | ------------- | -------------------------- | 8699| MidiSysex | TYPE_MIDI_SYSEX | MIDI SYSEX资源。 | 目前仅支持权限事件上报，MIDI设备的使用还未支持。 | 8700| VIDEO_CAPTURE<sup>10+</sup> | TYPE_VIDEO_CAPTURE | 视频捕获资源，例如相机。 | | 8701| AUDIO_CAPTURE<sup>10+</sup> | TYPE_AUDIO_CAPTURE | 音频捕获资源，例如麦克风。 | | 8702| SENSOR<sup>12+</sup> | TYPE_SENSOR | 传感器资源，例如加速度传感器。 | | 8703 8704## WebDarkMode<sup>9+</sup>枚举说明 8705 8706**系统能力：** SystemCapability.Web.Webview.Core 8707 8708| 名称 | 值 | 说明 | 8709| ---- | -- | ------------ | 8710| Off | 0 | Web深色模式关闭。 | 8711| On | 1 | Web深色模式开启。 | 8712| Auto | 2 | Web深色模式跟随系统。 | 8713 8714## WebCaptureMode<sup>10+</sup>枚举说明 8715 8716**系统能力：** SystemCapability.Web.Webview.Core 8717 8718| 名称 | 值 | 说明 | 8719| ----------- | -- | ------- | 8720| HOME_SCREEN | 0 | 主屏捕获模式。 | 8721 8722## WebMediaOptions<sup>10+</sup> 8723 8724Web媒体策略的配置。 8725 8726**系统能力：** SystemCapability.Web.Webview.Core 8727 8728| 名称 | 类型 | 必填 | 说明 | 8729| -------------- | ------- | ---- | ---------------------------------------- | 8730| resumeInterval | number | 否 | 被暂停的Web音频能够自动续播的有效期，单位：秒。有效期范围0~60秒，如若超过60秒，按照60s处理，由于近似值原因，该有效期可能存在一秒内的误差。 | 8731| audioExclusive | boolean | 否 | 应用内多个Web实例的音频是否独占。<br>true表示独占，false表示不独占。 | 8732 8733## ScreenCaptureConfig<sup>10+</sup> 8734 8735Web屏幕捕获的配置。 8736 8737**系统能力：** SystemCapability.Web.Webview.Core 8738 8739| 名称 | 类型 | 必填 | 说明 | 8740| ----------- | --------------------------------------- | ---- | ---------- | 8741| captureMode | [WebCaptureMode](#webcapturemode10枚举说明) | 是 | Web屏幕捕获模式。 | 8742 8743## WebLayoutMode<sup>11+</sup>枚举说明 8744 8745**系统能力：** SystemCapability.Web.Webview.Core 8746 8747| 名称 | 值 | 说明 | 8748| ----------- | -- | ------------------ | 8749| NONE | 0 | Web布局跟随系统。 | 8750| FIT_CONTENT | 1 | Web基于页面大小的自适应网页布局。 | 8751 8752## NestedScrollOptionsExt<sup>14+</sup>对象说明 8753 8754通过NestedScrollOptionsExt可以设置上下左右四个方向的嵌套滚动规则。 8755 8756**系统能力：** SystemCapability.Web.Webview.Core 8757 8758| 名称 | 类型 | 必填 | 说明 | 8759| -------------- | ---------------- | ---- | -------------------- | 8760| scrollUp | [NestedScrollMode](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) | 否 | 可滚动组件往上滚动时的嵌套滚动选项。 | 8761| scrollDown | [NestedScrollMode](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) | 否 | 可滚动组件往下滚动时的嵌套滚动选项。 | 8762| scrollLeft | [NestedScrollMode](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) | 否 | 可滚动组件往左滚动时的嵌套滚动选项。 | 8763| scrollRight | [NestedScrollMode](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) | 否 | 可滚动组件往右滚动时的嵌套滚动选项。 | 8764 8765## DataResubmissionHandler<sup>9+</sup> 8766 8767通过DataResubmissionHandler可以重新提交表单数据或取消提交表单数据。 8768 8769### constructor<sup>9+</sup> 8770 8771constructor() 8772 8773DataResubmissionHandler的构造函数。 8774 8775**系统能力：** SystemCapability.Web.Webview.Core 8776 8777### resend<sup>9+</sup> 8778 8779resend(): void 8780 8781重新发送表单数据。 8782 8783**系统能力：** SystemCapability.Web.Webview.Core 8784 8785**示例：** 8786 8787 ```ts 8788 // xxx.ets 8789 import { webview } from '@kit.ArkWeb'; 8790 8791 @Entry 8792 @Component 8793 struct WebComponent { 8794 controller: webview.WebviewController = new webview.WebviewController(); 8795 8796 build() { 8797 Column() { 8798 Web({ src: 'www.example.com', controller: this.controller }) 8799 .onDataResubmitted((event) => { 8800 console.log('onDataResubmitted'); 8801 event.handler.resend(); 8802 }) 8803 } 8804 } 8805 } 8806 ``` 8807 8808### cancel<sup>9+</sup> 8809 8810cancel(): void 8811 8812取消重新发送表单数据。 8813 8814**系统能力：** SystemCapability.Web.Webview.Core 8815 8816**示例：** 8817 8818 ```ts 8819 // xxx.ets 8820 import { webview } from '@kit.ArkWeb'; 8821 8822 @Entry 8823 @Component 8824 struct WebComponent { 8825 controller: webview.WebviewController = new webview.WebviewController(); 8826 8827 build() { 8828 Column() { 8829 Web({ src: 'www.example.com', controller: this.controller }) 8830 .onDataResubmitted((event) => { 8831 console.log('onDataResubmitted'); 8832 event.handler.cancel(); 8833 }) 8834 } 8835 } 8836 } 8837 ``` 8838 8839 ## WebController 8840 8841通过WebController可以控制Web组件各种行为。一个WebController对象只能控制一个Web组件，且必须在Web组件和WebController绑定后，才能调用WebController上的方法。 8842 8843从API version 9开始不再维护，建议使用[WebviewController<sup>9+</sup>](js-apis-webview.md#webviewcontroller)代替。 8844 8845### 创建对象 8846 8847<!--code_no_check--> 8848```ts 8849let webController: WebController = new WebController() 8850``` 8851 8852### constructor 8853 8854constructor() 8855 8856WebController的构造函数。 8857 8858> **说明：** 8859> 8860> 从API version 8开始支持，从API version 9开始废弃。并且不再提供新的接口作为替代。 8861 8862**系统能力：** SystemCapability.Web.Webview.Core 8863 8864### getCookieManager<sup>(deprecated)</sup> 8865 8866getCookieManager(): WebCookie 8867 8868获取Web组件cookie管理对象。 8869 8870从API version 9开始不再维护，建议使用[getCookie](js-apis-webview.md#getcookiedeprecated)代替。 8871 8872**系统能力：** SystemCapability.Web.Webview.Core 8873 8874**返回值：** 8875 8876| 类型 | 说明 | 8877| --------- | ---------------------------------------- | 8878| WebCookie | Web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 | 8879 8880**示例：** 8881 8882 ```ts 8883 // xxx.ets 8884 @Entry 8885 @Component 8886 struct WebComponent { 8887 controller: WebController = new WebController() 8888 8889 build() { 8890 Column() { 8891 Button('getCookieManager') 8892 .onClick(() => { 8893 let cookieManager = this.controller.getCookieManager() 8894 }) 8895 Web({ src: 'www.example.com', controller: this.controller }) 8896 } 8897 } 8898 } 8899 ``` 8900 8901### requestFocus<sup>(deprecated)</sup> 8902 8903requestFocus() 8904 8905使当前web页面获取焦点。 8906 8907从API version 9开始不再维护，建议使用[requestFocus<sup>9+</sup>](js-apis-webview.md#requestfocus)代替。 8908 8909**系统能力：** SystemCapability.Web.Webview.Core 8910 8911**示例：** 8912 8913 ```ts 8914 // xxx.ets 8915 @Entry 8916 @Component 8917 struct WebComponent { 8918 controller: WebController = new WebController() 8919 8920 build() { 8921 Column() { 8922 Button('requestFocus') 8923 .onClick(() => { 8924 this.controller.requestFocus() 8925 }) 8926 Web({ src: 'www.example.com', controller: this.controller }) 8927 } 8928 } 8929 } 8930 ``` 8931 8932### accessBackward<sup>(deprecated)</sup> 8933 8934accessBackward(): boolean 8935 8936当前页面是否可后退，即当前页面是否有返回历史记录。 8937 8938从API version 9开始不再维护，建议使用[accessBackward<sup>9+</sup>](js-apis-webview.md#accessbackward)代替。 8939 8940**系统能力：** SystemCapability.Web.Webview.Core 8941 8942**返回值：** 8943 8944| 类型 | 说明 | 8945| ------- | --------------------- | 8946| boolean | 可以后退返回true,否则返回false。 | 8947 8948**示例：** 8949 8950 ```ts 8951 // xxx.ets 8952 @Entry 8953 @Component 8954 struct WebComponent { 8955 controller: WebController = new WebController() 8956 8957 build() { 8958 Column() { 8959 Button('accessBackward') 8960 .onClick(() => { 8961 let result = this.controller.accessBackward() 8962 console.log('result:' + result) 8963 }) 8964 Web({ src: 'www.example.com', controller: this.controller }) 8965 } 8966 } 8967 } 8968 ``` 8969 8970### accessForward<sup>(deprecated)</sup> 8971 8972accessForward(): boolean 8973 8974当前页面是否可前进，即当前页面是否有前进历史记录。 8975 8976从API version 9开始不再维护，建议使用[accessForward<sup>9+</sup>](js-apis-webview.md#accessforward)代替。 8977 8978**系统能力：** SystemCapability.Web.Webview.Core 8979 8980**返回值：** 8981 8982| 类型 | 说明 | 8983| ------- | --------------------- | 8984| boolean | 可以前进返回true,否则返回false。 | 8985 8986**示例：** 8987 8988 ```ts 8989 // xxx.ets 8990 @Entry 8991 @Component 8992 struct WebComponent { 8993 controller: WebController = new WebController() 8994 8995 build() { 8996 Column() { 8997 Button('accessForward') 8998 .onClick(() => { 8999 let result = this.controller.accessForward() 9000 console.log('result:' + result) 9001 }) 9002 Web({ src: 'www.example.com', controller: this.controller }) 9003 } 9004 } 9005 } 9006 ``` 9007 9008### accessStep<sup>(deprecated)</sup> 9009 9010accessStep(step: number): boolean 9011 9012当前页面是否可前进或者后退给定的step步。 9013 9014从API version 9开始不再维护，建议使用[accessStep<sup>9+</sup>](js-apis-webview.md#accessstep)代替。 9015 9016**系统能力：** SystemCapability.Web.Webview.Core 9017 9018**参数：** 9019 9020| 参数名 | 类型 | 必填 | 说明 | 9021| ---- | ------ | ---- | --------------------- | 9022| step | number | 是 | 要跳转的步数，正数代表前进，负数代表后退。 | 9023 9024**返回值：** 9025 9026| 类型 | 说明 | 9027| ------- | --------- | 9028| boolean | 页面是否前进或后退 | 9029 9030**示例：** 9031 9032 ```ts 9033 // xxx.ets 9034 @Entry 9035 @Component 9036 struct WebComponent { 9037 controller: WebController = new WebController() 9038 @State steps: number = 2 9039 9040 build() { 9041 Column() { 9042 Button('accessStep') 9043 .onClick(() => { 9044 let result = this.controller.accessStep(this.steps) 9045 console.log('result:' + result) 9046 }) 9047 Web({ src: 'www.example.com', controller: this.controller }) 9048 } 9049 } 9050 } 9051 ``` 9052 9053### backward<sup>(deprecated)</sup> 9054 9055backward() 9056 9057按照历史栈，后退一个页面。一般结合accessBackward一起使用。 9058 9059从API version 9开始不再维护，建议使用[backward<sup>9+</sup>](js-apis-webview.md#backward)代替。 9060 9061**系统能力：** SystemCapability.Web.Webview.Core 9062 9063**示例：** 9064 9065 ```ts 9066 // xxx.ets 9067 @Entry 9068 @Component 9069 struct WebComponent { 9070 controller: WebController = new WebController() 9071 9072 build() { 9073 Column() { 9074 Button('backward') 9075 .onClick(() => { 9076 this.controller.backward() 9077 }) 9078 Web({ src: 'www.example.com', controller: this.controller }) 9079 } 9080 } 9081 } 9082 ``` 9083 9084### forward<sup>(deprecated)</sup> 9085 9086forward() 9087 9088按照历史栈，前进一个页面。一般结合accessForward一起使用。 9089 9090从API version 9开始不再维护，建议使用[forward<sup>9+</sup>](js-apis-webview.md#forward)代替。 9091 9092**系统能力：** SystemCapability.Web.Webview.Core 9093 9094**示例：** 9095 9096 ```ts 9097 // xxx.ets 9098 @Entry 9099 @Component 9100 struct WebComponent { 9101 controller: WebController = new WebController() 9102 9103 build() { 9104 Column() { 9105 Button('forward') 9106 .onClick(() => { 9107 this.controller.forward() 9108 }) 9109 Web({ src: 'www.example.com', controller: this.controller }) 9110 } 9111 } 9112 } 9113 ``` 9114 9115### deleteJavaScriptRegister<sup>(deprecated)</sup> 9116 9117deleteJavaScriptRegister(name: string) 9118 9119删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。删除后立即生效，无须调用[refresh](#refreshdeprecated)接口。 9120 9121从API version 9开始不再维护，建议使用[deleteJavaScriptRegister<sup>9+</sup>](js-apis-webview.md#deletejavascriptregister)代替。 9122 9123**系统能力：** SystemCapability.Web.Webview.Core 9124 9125**参数：** 9126 9127| 参数名 | 类型 | 必填 | 说明 | 9128| ---- | ------ | ---- | ---------------------------------------- | 9129| name | string | 是 | 注册对象的名称，可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。 | 9130 9131**示例：** 9132 9133 ```ts 9134 // xxx.ets 9135 @Entry 9136 @Component 9137 struct WebComponent { 9138 controller: WebController = new WebController() 9139 @State name: string = 'Object' 9140 9141 build() { 9142 Column() { 9143 Button('deleteJavaScriptRegister') 9144 .onClick(() => { 9145 this.controller.deleteJavaScriptRegister(this.name) 9146 }) 9147 Web({ src: 'www.example.com', controller: this.controller }) 9148 } 9149 } 9150 } 9151 ``` 9152 9153### getHitTest<sup>(deprecated)</sup> 9154 9155getHitTest(): HitTestType 9156 9157获取当前被点击区域的元素类型。 9158 9159从API version 9开始不再维护，建议使用[getHitTest<sup>9+</sup>](js-apis-webview.md#gethittest)代替。 9160 9161**系统能力：** SystemCapability.Web.Webview.Core 9162 9163**返回值：** 9164 9165| 类型 | 说明 | 9166| ------------------------------- | ----------- | 9167| [HitTestType](#hittesttype枚举说明) | 被点击区域的元素类型。 | 9168 9169**示例：** 9170 9171 ```ts 9172 // xxx.ets 9173 @Entry 9174 @Component 9175 struct WebComponent { 9176 controller: WebController = new WebController() 9177 9178 build() { 9179 Column() { 9180 Button('getHitTest') 9181 .onClick(() => { 9182 let hitType = this.controller.getHitTest() 9183 console.log("hitType: " + hitType) 9184 }) 9185 Web({ src: 'www.example.com', controller: this.controller }) 9186 } 9187 } 9188 } 9189 ``` 9190 9191### loadData<sup>(deprecated)</sup> 9192 9193loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }) 9194 9195baseUrl为空时，通过”data“协议加载指定的一段字符串。 9196 9197当baseUrl为”data“协议时，编码后的data字符串将被Web组件作为”data"协议加载。 9198 9199当baseUrl为“http/https"协议时，编码后的data字符串将被Web组件以类似loadUrl的方式以非编码字符串处理。 9200 9201从API version 9开始不再维护，建议使用[loadData<sup>9+</sup>](js-apis-webview.md#loaddata)代替。 9202 9203**系统能力：** SystemCapability.Web.Webview.Core 9204 9205**参数：** 9206 9207| 参数名 | 类型 | 必填 | 说明 | 9208| ---------- | ------ | ---- | ---------------------------------------- | 9209| data | string | 是 | 按照”Base64“或者”URL"编码后的一段字符串。 | 9210| mimeType | string | 是 | 媒体类型（MIME）。 | 9211| encoding | string | 是 | 编码类型，具体为“Base64"或者”URL编码。 | 9212| baseUrl | string | 否 | 指定的一个URL路径（“http”/“https”/"data"协议），并由Web组件赋值给window.origin。 | 9213| historyUrl | string | 否 | 历史记录URL。非空时，可被历史记录管理，实现前后后退功能。当baseUrl为空时，此属性无效。 | 9214 9215**示例：** 9216 9217 ```ts 9218 // xxx.ets 9219 @Entry 9220 @Component 9221 struct WebComponent { 9222 controller: WebController = new WebController() 9223 9224 build() { 9225 Column() { 9226 Button('loadData') 9227 .onClick(() => { 9228 this.controller.loadData({ 9229 data: "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>", 9230 mimeType: "text/html", 9231 encoding: "UTF-8" 9232 }) 9233 }) 9234 Web({ src: 'www.example.com', controller: this.controller }) 9235 } 9236 } 9237 } 9238 ``` 9239 9240### loadUrl<sup>(deprecated)</sup> 9241 9242loadUrl(options: { url: string | Resource, headers?: Array\<Header\> }) 9243 9244使用指定的http头加载指定的URL。 9245 9246通过loadUrl注入的对象只在当前document有效，即通过loadUrl导航到新的页面会无效。 9247 9248而通过registerJavaScriptProxy注入的对象，在loadUrl导航到新的页面也会有效。 9249 9250从API version 9开始不再维护，建议使用[loadUrl<sup>9+</sup>](js-apis-webview.md#loadurl)代替。 9251 9252**系统能力：** SystemCapability.Web.Webview.Core 9253 9254**参数：** 9255 9256| 参数名 | 类型 | 必填 | 说明 | 9257| ------- | -------------------------- | ---- | -------------- | 9258| url | string \| Resource | 是 | 需要加载的 URL。 | 9259| headers | Array\<[Header](#header)\> | 否 | URL的附加HTTP请求头。默认值：[]。 | 9260 9261**示例：** 9262 9263 ```ts 9264 // xxx.ets 9265 @Entry 9266 @Component 9267 struct WebComponent { 9268 controller: WebController = new WebController() 9269 9270 build() { 9271 Column() { 9272 Button('loadUrl') 9273 .onClick(() => { 9274 this.controller.loadUrl({ url: 'www.example.com' }) 9275 }) 9276 Web({ src: 'www.example.com', controller: this.controller }) 9277 } 9278 } 9279 } 9280 ``` 9281 9282### onActive<sup>(deprecated)</sup> 9283 9284onActive(): void 9285 9286调用此接口通知Web组件进入前台激活状态。 9287 9288从API version 9开始不再维护，建议使用[onActive<sup>9+</sup>](js-apis-webview.md#onactive)代替。 9289 9290**系统能力：** SystemCapability.Web.Webview.Core 9291 9292**示例：** 9293 9294 ```ts 9295 // xxx.ets 9296 @Entry 9297 @Component 9298 struct WebComponent { 9299 controller: WebController = new WebController() 9300 9301 build() { 9302 Column() { 9303 Button('onActive') 9304 .onClick(() => { 9305 this.controller.onActive() 9306 }) 9307 Web({ src: 'www.example.com', controller: this.controller }) 9308 } 9309 } 9310 } 9311 ``` 9312 9313### onInactive<sup>(deprecated)</sup> 9314 9315onInactive(): void 9316 9317调用此接口通知Web组件进入未激活状态。 9318 9319从API version 9开始不再维护，建议使用[onInactive<sup>9+</sup>](js-apis-webview.md#oninactive)代替。 9320 9321**系统能力：** SystemCapability.Web.Webview.Core 9322 9323**示例：** 9324 9325 ```ts 9326 // xxx.ets 9327 @Entry 9328 @Component 9329 struct WebComponent { 9330 controller: WebController = new WebController() 9331 9332 build() { 9333 Column() { 9334 Button('onInactive') 9335 .onClick(() => { 9336 this.controller.onInactive() 9337 }) 9338 Web({ src: 'www.example.com', controller: this.controller }) 9339 } 9340 } 9341 } 9342 ``` 9343 9344### zoom<sup>(deprecated)</sup> 9345 9346zoom(factor: number): void 9347 9348调整当前网页的缩放比例。 9349 9350从API version 9开始不再维护，建议使用[zoom<sup>9+</sup>](js-apis-webview.md#zoom)代替。 9351 9352**系统能力：** SystemCapability.Web.Webview.Core 9353 9354**参数：** 9355 9356| 参数名 | 类型 | 必填 | 说明 | 9357| ------ | ------ | ---- | ------------------------------ | 9358| factor | number | 是 | 基于当前网页所需调整的相对缩放比例，正值为放大，负值为缩小。 | 9359 9360**示例：** 9361 9362 ```ts 9363 // xxx.ets 9364 @Entry 9365 @Component 9366 struct WebComponent { 9367 controller: WebController = new WebController() 9368 @State factor: number = 1 9369 9370 build() { 9371 Column() { 9372 Button('zoom') 9373 .onClick(() => { 9374 this.controller.zoom(this.factor) 9375 }) 9376 Web({ src: 'www.example.com', controller: this.controller }) 9377 } 9378 } 9379 } 9380 ``` 9381 9382### refresh<sup>(deprecated)</sup> 9383 9384refresh() 9385 9386调用此接口通知Web组件刷新网页。 9387 9388从API version 9开始不再维护，建议使用[refresh<sup>9+</sup>](js-apis-webview.md#refresh)代替。 9389 9390**系统能力：** SystemCapability.Web.Webview.Core 9391 9392**示例：** 9393 9394 ```ts 9395 // xxx.ets 9396 @Entry 9397 @Component 9398 struct WebComponent { 9399 controller: WebController = new WebController() 9400 9401 build() { 9402 Column() { 9403 Button('refresh') 9404 .onClick(() => { 9405 this.controller.refresh() 9406 }) 9407 Web({ src: 'www.example.com', controller: this.controller }) 9408 } 9409 } 9410 } 9411 ``` 9412 9413### registerJavaScriptProxy<sup>(deprecated)</sup> 9414 9415registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\<string\> }) 9416 9417注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用[refresh](#refreshdeprecated)接口生效。 9418 9419从API version 9开始不再维护，建议使用[registerJavaScriptProxy<sup>9+</sup>](js-apis-webview.md#registerjavascriptproxy)代替。 9420 9421**系统能力：** SystemCapability.Web.Webview.Core 9422 9423**参数：** 9424 9425| 参数名 | 类型 | 必填 | 说明 | 9426| ---------- | --------------- | ---- | ---------------------------------------- | 9427| object | object | 是 | 参与注册的应用侧JavaScript对象。可以声明方法，也可以声明属性，但是不支持h5直接调用。其中方法的参数和返回类型只能为string，number，boolean | 9428| name | string | 是 | 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。 | 9429| methodList | Array\<string\> | 是 | 参与注册的应用侧JavaScript对象的方法。 | 9430 9431**示例：** 9432 9433 ```ts 9434 // xxx.ets 9435 class TestObj { 9436 constructor() { 9437 } 9438 9439 test(): string { 9440 return "ArkUI Web Component" 9441 } 9442 9443 toString(): void { 9444 console.log('Web Component toString') 9445 } 9446 } 9447 9448 @Entry 9449 @Component 9450 struct Index { 9451 controller: WebController = new WebController() 9452 testObj = new TestObj(); 9453 build() { 9454 Column() { 9455 Row() { 9456 Button('Register JavaScript To Window').onClick(() => { 9457 this.controller.registerJavaScriptProxy({ 9458 object: this.testObj, 9459 name: "objName", 9460 methodList: ["test", "toString"], 9461 }) 9462 }) 9463 } 9464 Web({ src: $rawfile('index.html'), controller: this.controller }) 9465 .javaScriptAccess(true) 9466 } 9467 } 9468 } 9469 ``` 9470 9471 加载的html文件。 9472 ```html 9473 <!-- index.html --> 9474 <!DOCTYPE html> 9475 <html> 9476 <meta charset="utf-8"> 9477 <body> 9478 Hello world! 9479 </body> 9480 <script type="text/javascript"> 9481 function htmlTest() { 9482 str = objName.test("test function") 9483 console.log('objName.test result:'+ str) 9484 } 9485 </script> 9486 </html> 9487 9488 ``` 9489 9490### runJavaScript<sup>(deprecated)</sup> 9491 9492runJavaScript(options: { script: string, callback?: (result: string) => void }) 9493 9494异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。 9495 9496从API version 9开始不再维护，建议使用[runJavaScript<sup>9+</sup>](js-apis-webview.md#runjavascript)代替。 9497 9498**系统能力：** SystemCapability.Web.Webview.Core 9499 9500**参数：** 9501 9502| 参数名 | 类型 | 必填 | 说明 | 9503| -------- | ------------------------ | ---- | ---------------------------------------- | 9504| script | string | 是 | JavaScript脚本。 | 9505| callback | (result: string) => void | 否 | 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。 | 9506 9507**示例：** 9508 9509 ```ts 9510 // xxx.ets 9511 @Entry 9512 @Component 9513 struct WebComponent { 9514 controller: WebController = new WebController() 9515 @State webResult: string = '' 9516 build() { 9517 Column() { 9518 Text(this.webResult).fontSize(20) 9519 Web({ src: $rawfile('index.html'), controller: this.controller }) 9520 .javaScriptAccess(true) 9521 .onPageEnd((event) => { 9522 this.controller.runJavaScript({ 9523 script: 'test()', 9524 callback: (result: string)=> { 9525 this.webResult = result 9526 console.info(`The test() return value is: ${result}`) 9527 }}) 9528 if (event) { 9529 console.info('url: ', event.url) 9530 } 9531 }) 9532 } 9533 } 9534 } 9535 ``` 9536 加载的html文件。 9537 ```html 9538 <!-- index.html --> 9539 <!DOCTYPE html> 9540 <html> 9541 <meta charset="utf-8"> 9542 <body> 9543 Hello world! 9544 </body> 9545 <script type="text/javascript"> 9546 function test() { 9547 console.log('Ark WebComponent') 9548 return "This value is from index.html" 9549 } 9550 </script> 9551 </html> 9552 ``` 9553 9554### stop<sup>(deprecated)</sup> 9555 9556stop() 9557 9558停止页面加载。 9559 9560从API version 9开始不再维护，建议使用[stop<sup>9+</sup>](js-apis-webview.md#stop)代替。 9561 9562**系统能力：** SystemCapability.Web.Webview.Core 9563 9564**示例：** 9565 9566 ```ts 9567 // xxx.ets 9568 @Entry 9569 @Component 9570 struct WebComponent { 9571 controller: WebController = new WebController() 9572 9573 build() { 9574 Column() { 9575 Button('stop') 9576 .onClick(() => { 9577 this.controller.stop() 9578 }) 9579 Web({ src: 'www.example.com', controller: this.controller }) 9580 } 9581 } 9582 } 9583 ``` 9584 9585### clearHistory<sup>(deprecated)</sup> 9586 9587clearHistory(): void 9588 9589删除所有前进后退记录。 9590 9591从API version 9开始不再维护，建议使用[clearHistory<sup>9+</sup>](js-apis-webview.md#clearhistory)代替。 9592 9593**系统能力：** SystemCapability.Web.Webview.Core 9594 9595**示例：** 9596 9597 ```ts 9598 // xxx.ets 9599 @Entry 9600 @Component 9601 struct WebComponent { 9602 controller: WebController = new WebController() 9603 9604 build() { 9605 Column() { 9606 Button('clearHistory') 9607 .onClick(() => { 9608 this.controller.clearHistory() 9609 }) 9610 Web({ src: 'www.example.com', controller: this.controller }) 9611 } 9612 } 9613 } 9614 ``` 9615 9616## WebCookie 9617 9618通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有Web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。 9619 9620### constructor 9621 9622constructor() 9623 9624WebCookie的构造函数。 9625 9626**系统能力：** SystemCapability.Web.Webview.Core 9627 9628### setCookie<sup>(deprecated)</sup> 9629 9630setCookie() 9631 9632设置cookie，该方法为同步方法。设置成功返回true，否则返回false。 9633 9634从API version 9开始不再维护，建议使用[setCookie<sup>9+</sup>](js-apis-webview.md#setcookie)代替。 9635 9636**系统能力：** SystemCapability.Web.Webview.Core 9637 9638### saveCookie<sup>(deprecated)</sup> 9639 9640saveCookie() 9641 9642将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。 9643 9644从API version 9开始不再维护，建议使用[saveCookieAsync<sup>9+</sup>](js-apis-webview.md#savecookieasync)代替。 9645 9646**系统能力：** SystemCapability.Web.Webview.Core 9647 9648## ScriptItem<sup>11+</sup> 9649 9650通过[javaScriptOnDocumentStart](#javascriptondocumentstart11)属性注入到Web组件的ScriptItem对象。 9651 9652**系统能力：** SystemCapability.Web.Webview.Core 9653 9654| 名称 | 类型 | 必填 | 说明 | 9655| ----------- | -------------- | ---- | --------------------- | 9656| script | string | 是 | 需要注入、执行的JavaScript脚本。 | 9657| 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都不生效。 | 9658 9659## WebNavigationType<sup>11+</sup> 9660 9661定义navigation类型。 9662 9663**系统能力：** SystemCapability.Web.Webview.Core 9664 9665| 名称 | 值 | 说明 | 9666| ----------------------------- | -- | ------------ | 9667| UNKNOWN | 0 | 未知类型。 | 9668| MAIN_FRAME_NEW_ENTRY | 1 | 主文档上产生的新的历史节点跳转。 | 9669| MAIN_FRAME_EXISTING_ENTRY | 2 | 主文档上产生的到已有的历史节点的跳转。 | 9670| NAVIGATION_TYPE_NEW_SUBFRAME | 4 | 子文档上产生的用户触发的跳转。 | 9671| NAVIGATION_TYPE_AUTO_SUBFRAME | 5 | 子文档上产生的非用户触发的跳转。 | 9672 9673## LoadCommittedDetails<sup>11+</sup> 9674 9675提供已提交跳转的网页的详细信息。 9676 9677**系统能力：** SystemCapability.Web.Webview.Core 9678 9679| 名称 | 类型 | 必填 | 说明 | 9680| ----------- | ------------------------------------ | ---- | --------------------- | 9681| isMainFrame | boolean | 是 | 是否是主文档。<br>true表示是主文档，false表示不是主文档。 | 9682| isSameDocument | boolean | 是 | 是否在不更改文档的情况下进行的网页跳转。<br>true表示在不更改文档的情况下进行的网页跳转，false表示在更改文档的情况下进行的网页跳转。<br>在同文档跳转的示例：1.参考片段跳转；2.pushState或replaceState触发的跳转；3.同一页面历史跳转。 | 9683| didReplaceEntry | boolean | 是 | 是否提交的新节点替换了已有的节点。<br>true表示提交的新节点替换了已有的节点，false表示提交的新节点未替换已有的节点。<br>另外在一些子文档跳转的场景，虽然没有实际替换已有节点，但是有一些属性发生了变更。 | 9684| navigationType | [WebNavigationType](#webnavigationtype11) | 是 | 网页跳转的类型。 | 9685| url | string | 是 | 当前跳转网页的URL。 | 9686 9687## ThreatType<sup>11+</sup> 9688 9689定义网站风险类型。 9690 9691**系统能力：** SystemCapability.Web.Webview.Core 9692 9693| 名称 | 值 | 说明 | 9694| ---------------- | -- | ----------------------| 9695| THREAT_ILLEGAL | 0 | 非法网站。 | 9696| THREAT_FRAUD | 1 | 欺诈网站。 | 9697| THREAT_RISK | 2 | 存在安全风险的网站。 | 9698| THREAT_WARNING | 3 | 涉嫌包含不健康内容的网站。 | 9699 9700## OnNavigationEntryCommittedCallback<sup>11+</sup> 9701 9702type OnNavigationEntryCommittedCallback = (loadCommittedDetails: [LoadCommittedDetails](#loadcommitteddetails11)) => void 9703 9704导航条目提交时触发的回调。 9705 9706**系统能力：** SystemCapability.Web.Webview.Core 9707 9708**参数：** 9709 9710| 参数名 | 类型 | 必填 | 说明 | 9711| ------ | ------ | ---- | --------------------- | 9712| loadCommittedDetails | [LoadCommittedDetails](#loadcommitteddetails11) | 是 | 提供已提交跳转的网页的详细信息。 | 9713 9714## OnSafeBrowsingCheckResultCallback<sup>11+</sup> 9715 9716type OnSafeBrowsingCheckResultCallback = (threatType: ThreatType) => void 9717 9718网站安全风险检查触发的回调。 9719 9720**系统能力：** SystemCapability.Web.Webview.Core 9721 9722**参数：** 9723 9724| 参数名 | 类型 | 必填 | 说明 | 9725| ------ | ------ | ---- | --------------------- | 9726| threatType | [ThreatType](#threattype11) | 是 | 定义网站threat类型。 | 9727 9728## FullScreenEnterEvent<sup>12+</sup> 9729 9730Web组件进入全屏回调事件的详情。 9731 9732**系统能力：** SystemCapability.Web.Webview.Core 9733 9734| 名称 | 类型 | 必填 | 说明 | 9735| ----------- | ------------------------------------ | ---- | --------------------- | 9736| handler | [FullScreenExitHandler](#fullscreenexithandler9) | 是 | 用于退出全屏模式的函数句柄。 | 9737| videoWidth | number | 否 | 视频的宽度，单位：px。如果进入全屏的是 `<video>` 元素，表示其宽度；如果进入全屏的子元素中包含 `<video>` 元素，表示第一个子视频元素的宽度；其他情况下，为0。 | 9738| videoHeight | number | 否 | 视频的高度，单位：px。如果进入全屏的是 `<video>` 元素，表示其高度；如果进入全屏的子元素中包含 `<video>` 元素，表示第一个子视频元素的高度；其他情况下，为0。 | 9739 9740## OnFullScreenEnterCallback<sup>12+</sup> 9741 9742type OnFullScreenEnterCallback = (event: FullScreenEnterEvent) => void 9743 9744Web组件进入全屏时触发的回调。 9745 9746**系统能力：** SystemCapability.Web.Webview.Core 9747 9748**参数：** 9749 9750| 参数名 | 类型 | 必填 | 说明 | 9751| ------ | ------ | ---- | --------------------- | 9752| event | [FullScreenEnterEvent](#fullscreenenterevent12) | 是 | Web组件进入全屏的回调事件详情。 | 9753 9754## SslErrorEvent<sup>12+</sup> 9755 9756用户加载资源时发生SSL错误时触发的回调详情。 9757 9758**系统能力：** SystemCapability.Web.Webview.Core 9759 9760| 名称 | 类型 | 必填 | 说明 | 9761| ------- | ------------------------------------ | ---- | -------------- | 9762| handler | [SslErrorHandler](#sslerrorhandler9) | 是 | 通知Web组件用户操作行为。 | 9763| error | [SslError](#sslerror9枚举说明) | 是 | 错误码。 | 9764| url | string | 是 | url地址。 | 9765| originalUrl | string | 是 | 请求的原始url地址。 | 9766| referrer | string | 是 | referrer url地址。 | 9767| isFatalError | boolean | 是 | 是否是致命错误。<br>true表示致命错误，false表示非致命错误。 | 9768| isMainFrame | boolean | 是 | 是否是主资源。<br>true表示主资源，false表示非主资源。 | 9769 9770 9771## OnSslErrorEventCallback<sup>12+</sup> 9772 9773type OnSslErrorEventCallback = (sslErrorEvent: SslErrorEvent) => void 9774 9775用户加载资源时发生SSL错误时触发的回调。 9776 9777**系统能力：** SystemCapability.Web.Webview.Core 9778 9779**参数：** 9780 9781| 参数名 | 类型 | 必填 | 说明 | 9782| ------ | ------ | ---- | --------------------- | 9783| sslErrorEvent | [SslErrorEvent](#sslerrorevent12) | 是 | 用户加载资源时发生SSL错误时触发的回调详情。 | 9784 9785## NativeEmbedStatus<sup>11+</sup> 9786 9787定义同层标签生命周期，当加载页面中有同层标签会触发CREATE，同层标签移动或者放大会触发UPDATE，退出页面会触发DESTROY。 9788 9789**系统能力：** SystemCapability.Web.Webview.Core 9790 9791| 名称 | 值 | 说明 | 9792| ----------------------------- | -- | ------------ | 9793| CREATE | 0 | 同层标签创建。 | 9794| UPDATE | 1 | 同层标签更新。 | 9795| DESTROY | 2 | 同层标签销毁。 | 9796| ENTER_BFCACHE<sup>12+</sup> | 3 | 同层标签进入BFCache。 | 9797| LEAVE_BFCACHE<sup>12+</sup> | 4 | 同层标签离开BFCache。 | 9798 9799## NativeEmbedInfo<sup>11+</sup> 9800 9801提供同层标签的详细信息。 9802 9803**系统能力：** SystemCapability.Web.Webview.Core 9804 9805| 名称 | 类型 | 必填 | 说明 | 9806|-------------------| ------------------------------------ | ---- |---------------------------| 9807| id | string | 否 | 同层标签的id信息。 | 9808| type | string | 否 | 同层标签的type信息，统一为小写字符。 | 9809| src | string | 否 | 同层标签的src信息。 | 9810| width | number | 否 | 同层标签的宽，单位为px。 | 9811| height | number | 否 | 同层标签的高，单位为px。 | 9812| url | string | 否 | 同层标签的url信息。 | 9813| tag<sup>12+</sup> | string | 否 | 标签名，统一为大写字符。 | 9814| params<sup>12+</sup> | Map<string, string> | 否 | object标签包含的param标签键值对列表，该map本质为Object类型，请使用Object提供的方法操作该对象。 | 9815| position<sup>12+</sup> | Position | 否 | 同层标签在屏幕坐标系中相对于Web组件的位置信息，此处区别于标准Position，单位为px。 | 9816 9817## NativeEmbedDataInfo<sup>11+</sup> 9818 9819提供同层标签生命周期变化的详细信息。 9820 9821**系统能力：** SystemCapability.Web.Webview.Core 9822 9823| 名称 | 类型 | 必填 | 说明 | 9824| ----------- | ------------------------------------ | ---- | --------------------- | 9825| status | [NativeEmbedStatus](#nativeembedstatus11) | 否 | 同层标签生命周期状态。 | 9826| surfaceId | string | 否 | NativeImage的psurfaceid。 | 9827| embedId | string | 否 | 同层标签的唯一id。 | 9828| info | [NativeEmbedInfo](#nativeembedinfo11) | 否 | 同层标签的详细信息。 | 9829 9830## NativeEmbedTouchInfo<sup>11+</sup> 9831 9832提供手指触摸到同层标签的详细信息。 9833 9834**系统能力：** SystemCapability.Web.Webview.Core 9835 9836| 名称 | 类型 | 必填 | 说明 | 9837| ----------- | ------------------------------------ | ---- | --------------------- | 9838| embedId | string | 否 | 同层标签的唯一id。 | 9839| touchEvent | [TouchEvent](../apis-arkui/arkui-ts/ts-universal-events-touch.md#touchevent对象说明) | 否 | 手指触摸动作信息。 | 9840| result<sup>12+</sup> | [EventResult](#eventresult12) | 否 | 通知Web组件手势事件的消费结果。 | 9841 9842## FirstMeaningfulPaint<sup>12+</sup> 9843 9844提供网页绘制页面主要内容的详细信息。 9845 9846**系统能力：** SystemCapability.Web.Webview.Core 9847 9848| 名称 | 类型 | 必填 | 说明 | 9849| ------------------------ | ------ | ---- | -------------------------------------- | 9850| navigationStartTime | number | 否 | 导航条加载时间，单位以微秒表示。 | 9851| firstMeaningfulPaintTime | number | 否 | 绘制页面主要内容时间，单位以毫秒表示。 | 9852 9853## OnFirstMeaningfulPaintCallback<sup>12+</sup> 9854 9855type OnFirstMeaningfulPaintCallback = (firstMeaningfulPaint: [FirstMeaningfulPaint](#firstmeaningfulpaint12)) => void 9856 9857网页绘制页面度量信息的回调，当网页加载完页面主要内容时会触发该回调。 9858 9859**系统能力：** SystemCapability.Web.Webview.Core 9860 9861**参数：** 9862 9863| 参数名 | 类型 | 必填 | 说明 | 9864| ------ | ------ | ---- | --------------------- | 9865| firstMeaningfulPaint | [FirstMeaningfulPaint](#firstmeaningfulpaint12) | 是 | 绘制页面主要内容度量的详细信息。 | 9866 9867## LargestContentfulPaint<sup>12+</sup> 9868 9869提供网页绘制页面主要内容的详细信息。 9870 9871**系统能力：** SystemCapability.Web.Webview.Core 9872 9873| 名称 | 类型 | 必填 | 说明 | 9874| ------------------------- | ------ | ---- | ---------------------------------------- | 9875| navigationStartTime | number | 否 | 导航条加载时间，单位以微秒表示。 | 9876| largestImagePaintTime | number | 否 | 最大图片加载的时间，单位是以毫秒表示。 | 9877| largestTextPaintTime | number | 否 | 最大文本加载时间，单位是以毫秒表示。 | 9878| largestImageLoadStartTime | number | 否 | 最大图片开始加载时间，单位是以毫秒表示。 | 9879| largestImageLoadEndTime | number | 否 | 最大图片结束记载时间，单位是以毫秒表示。 | 9880| imageBPP | number | 否 | 最大图片像素位数。 | 9881 9882## OnLargestContentfulPaintCallback<sup>12+</sup> 9883 9884type OnLargestContentfulPaintCallback = (largestContentfulPaint: [LargestContentfulPaint](#largestcontentfulpaint12 9885)) => void 9886 9887网页绘制页面最大内容度量信息的回调。 9888 9889**系统能力：** SystemCapability.Web.Webview.Core 9890 9891**参数：** 9892 9893| 参数名 | 类型 | 必填 | 说明 | 9894| ------ | ------ | ---- | --------------------- | 9895| largestContentfulPaint | [LargestContentfulPaint](#largestcontentfulpaint12) | 是 | 网页绘制页面最大内容度量的详细信息。 | 9896 9897## IntelligentTrackingPreventionDetails<sup>12+</sup> 9898 9899提供智能防跟踪拦截的详细信息。 9900 9901**系统能力：** SystemCapability.Web.Webview.Core 9902 9903| 名称 | 类型 | 必填 | 说明 | 9904| ------------- | ------------------------------------| ----- | ------------ | 9905| host | string | 是 | 网站域名。 | 9906| trackerHost | string | 是 | 追踪者域名。 | 9907 9908## OnIntelligentTrackingPreventionCallback<sup>12+</sup> 9909 9910type OnIntelligentTrackingPreventionCallback = (details: IntelligentTrackingPreventionDetails) => void 9911 9912当跟踪者cookie被拦截时触发的回调。 9913 9914**系统能力：** SystemCapability.Web.Webview.Core 9915 9916**参数：** 9917 9918| 参数名 | 类型 | 必填 | 说明 | 9919| ------ | ------ | ---- | --------------------- | 9920| details | [IntelligentTrackingPreventionDetails](#intelligenttrackingpreventiondetails12) | 是 | 提供智能防跟踪拦截的详细信息。 | 9921 9922## OnOverrideUrlLoadingCallback<sup>12+</sup> 9923 9924type OnOverrideUrlLoadingCallback = (webResourceRequest: WebResourceRequest) => boolean 9925 9926onOverrideUrlLoading的回调。 9927 9928**系统能力：** SystemCapability.Web.Webview.Core 9929 9930**参数：** 9931 9932| 参数名 | 类型 | 必填 | 说明 | 9933| ------------------ | ------- | ---- | ------------- | 9934| webResourceRequest | [WebResourceRequest](#webresourcerequest) | 是 | url请求的相关信息。| 9935 9936**返回值：** 9937 9938| 类型 | 说明 | 9939| ------- | ------------------------ | 9940| boolean | 返回true表示阻止此次加载，否则允许此次加载。 | 9941 9942## RenderMode<sup>12+</sup>枚举说明 9943 9944定义Web组件的渲染方式，默认为异步渲染模式。 9945 9946建议使用异步渲染模式，异步渲染模式有更好的性能和更低的功耗。 9947 9948**系统能力：** SystemCapability.Web.Webview.Core 9949 9950| 名称 | 值 | 说明 | 9951| ----------------------------- | -- | ------------ | 9952| ASYNC_RENDER | 0 | Web组件异步渲染模式，ArkWeb组件作为图形surface节点，独立送显，Web组件的宽度最大规格不超过7,680 px（物理像素）。 | 9953| SYNC_RENDER | 1 | Web组件同步渲染模式，ArkWeb组件作为图形canvas节点，跟随系统组件一起送显，可以渲染更长的Web组件内容，Web组件的宽度最大规格不超过500,000 px（物理像素）。 | 9954 9955## NativeMediaPlayerConfig<sup>12+</sup> 9956 9957用于[开启应用接管网页媒体播放功能](#enablenativemediaplayer12)的配置信息。 9958 9959**系统能力：** SystemCapability.Web.Webview.Core 9960 9961| 名称 | 类型 | 必填 | 说明 | 9962|------|------|------|------| 9963| enable | boolean | 是 | 是否开启该功能。<br/> `true` : 开启 <br/> `false` : 关闭(默认值) | 9964| shouldOverlay | boolean | 是 | 开启该功能后， 应用接管网页视频的播放器画面是否覆盖网页内容。<br/> `true` : 是，改变视频图层的高度，使其覆盖网页内容 <br/> `false` : 否(默认值), 不覆盖，跟原视频图层高度一样，嵌入在网页中。 | 9965 9966## RenderProcessNotRespondingReason<sup>12+</sup> 9967 9968触发渲染进程无响应回调的原因。 9969 9970**系统能力：** SystemCapability.Web.Webview.Core 9971 9972| 名称 | 值 | 说明 | 9973| ----------------------------- | -- | ------------ | 9974| INPUT_TIMEOUT | 0 | 发送给渲染进程的input事件响应超时。 | 9975| NAVIGATION_COMMIT_TIMEOUT | 1 | 新的网页加载导航响应超时。 | 9976 9977## RenderProcessNotRespondingData<sup>12+</sup> 9978 9979提供渲染进程无响应的详细信息。 9980 9981**系统能力：** SystemCapability.Web.Webview.Core 9982 9983| 名称 | 类型 | 必填 | 说明 | 9984| ------------------------ | ------ | ---- | -------------------------------------- | 9985| jsStack | string | 是 | 网页的javaScript调用栈信息。 | 9986| pid | number | 是 | 网页的进程id。 | 9987| reason | [RenderProcessNotRespondingReason](#renderprocessnotrespondingreason12) | 是 | 触发渲染进程无响应回调的原因。 | 9988 9989## OnRenderProcessNotRespondingCallback<sup>12+</sup> 9990 9991type OnRenderProcessNotRespondingCallback = (data : RenderProcessNotRespondingData) => void 9992 9993渲染进程无响应时触发的回调。 9994 9995**系统能力：** SystemCapability.Web.Webview.Core 9996 9997**参数：** 9998 9999| 参数名 | 类型 | 必填 | 说明 | 10000| ------ | ------ | ---- | --------------------- | 10001| data | [RenderProcessNotRespondingData](#renderprocessnotrespondingdata12) | 是 | 渲染进程无响应的详细信息。 | 10002 10003## OnRenderProcessRespondingCallback<sup>12+</sup> 10004 10005type OnRenderProcessRespondingCallback = () => void 10006 10007渲染进程由无响应状态变回正常运行状态时触发该回调。 10008 10009**系统能力：** SystemCapability.Web.Webview.Core 10010 10011## ViewportFit<sup>12+</sup> 10012 10013网页meta中viewport-fit配置的视口类型。 10014 10015**系统能力：** SystemCapability.Web.Webview.Core 10016 10017| 名称 | 值 | 说明 | 10018| ----------------------------- | -- | ------------ | 10019| AUTO | 0 | 默认值，整个网页可见。 | 10020| CONTAINS | 1 | 初始布局视口和视觉视口为适应设备显示屏的最大矩形内。 | 10021| COVER | 2| 初始布局视口和视觉视口为设备物理屏幕的外接矩形内。 | 10022 10023## OnViewportFitChangedCallback<sup>12+</sup> 10024 10025type OnViewportFitChangedCallback = (viewportFit: ViewportFit) => void 10026 10027网页meta中viewport-fit配置项更改时触发的回调。 10028 10029**系统能力：** SystemCapability.Web.Webview.Core 10030 10031**参数：** 10032 10033| 参数名 | 类型 | 必填 | 说明 | 10034| ------ | ------ | ---- | --------------------- | 10035| viewportFit | [ViewportFit](#viewportfit12) | 是 | 网页meta中viewport-fit配置的视口类型。 | 10036 10037## ExpandedMenuItemOptions<sup>12+</sup> 10038 10039自定义菜单扩展项。 10040 10041**系统能力：** SystemCapability.Web.Webview.Core 10042 10043| 名称 | 类型 | 必填 | 说明 | 10044| ---------- | -----------------------------------------------------| ------ | ---------------- | 10045| content | [ResourceStr](../apis-arkui/arkui-ts/ts-types.md#resourcestr) | 是 | 显示内容。 | 10046| startIcon | [ResourceStr](../apis-arkui/arkui-ts/ts-types.md#resourcestr) | 否 | 显示图标。 | 10047| action | (selectedText: {plainText: string}) => void | 是 | 选中的文本信息。| 10048 10049## WebKeyboardAvoidMode<sup>12+</sup> 10050 10051软键盘避让的模式。 10052 10053**系统能力：** SystemCapability.Web.Webview.Core 10054 10055| 名称 | 值 | 说明 | 10056| ------------------ | -- | ------------ | 10057| RESIZE_VISUAL | 0 | 软键盘避让时，仅调整可视视口大小，不调整布局视口大小。 | 10058| RESIZE_CONTENT | 1 | 默认值，软键盘避让时，同时调整可视视口和布局视口的大小。 | 10059| OVERLAYS_CONTENT | 2 | 不调整任何视口大小，不会触发软键盘避让。 | 10060 10061## OnPageEndEvent<sup>12+</sup> 10062 10063定义网页加载结束时触发的函数。 10064 10065**系统能力：** SystemCapability.Web.Webview.Core 10066 10067| 名称 | 类型 | 必填 | 说明 | 10068| -------------- | ---- | ---- | ---------------------------------------- | 10069| url | string | 是 | 页面的URL地址。 | 10070 10071## OnPageBeginEvent<sup>12+</sup> 10072 10073定义网页加载开始时触发的函数。 10074 10075**系统能力：** SystemCapability.Web.Webview.Core 10076 10077| 名称 | 类型 | 必填 | 说明 | 10078| -------------- | ---- | ---- | ---------------------------------------- | 10079| url | string | 是 | 页面的URL地址。 | 10080 10081## OnProgressChangeEvent<sup>12+</sup> 10082 10083定义网页加载进度变化时触发该回调。 10084 10085**系统能力：** SystemCapability.Web.Webview.Core 10086 10087| 名称 | 类型 | 必填 | 说明 | 10088| -------------- | ---- | ---- | ---------------------------------------- | 10089| newProgress | number | 是 | 新的加载进度，取值范围为0到100的整数。 | 10090 10091## OnTitleReceiveEvent<sup>12+</sup> 10092 10093定义网页document标题更改时触发该回调。 10094 10095**系统能力：** SystemCapability.Web.Webview.Core 10096 10097| 名称 | 类型 | 必填 | 说明 | 10098| -------------- | ---- | ---- | ---------------------------------------- | 10099| title | string | 是 | document标题内容。 | 10100 10101## OnGeolocationShowEvent<sup>12+</sup> 10102 10103定义通知用户收到地理位置信息获取请求。 10104 10105**系统能力：** SystemCapability.Web.Webview.Core 10106 10107| 名称 | 类型 | 必填 | 说明 | 10108| -------------- | ---- | ---- | ---------------------------------------- | 10109| origin | string | 是 | 指定源的字符串索引。 | 10110| geolocation | [JsGeolocation](#jsgeolocation) | 是 | 通知Web组件用户操作行为。 | 10111 10112## OnAlertEvent<sup>12+</sup> 10113 10114定义网页触发alert()告警弹窗时触发回调。 10115 10116**系统能力：** SystemCapability.Web.Webview.Core 10117 10118| 名称 | 类型 | 必填 | 说明 | 10119| -------------- | ---- | ---- | ---------------------------------------- | 10120| url | string | 是 | 当前显示弹窗所在网页的URL。 | 10121| message | string | 是 | 弹窗中显示的信息。 | 10122| result | [JsResult](#jsresult) | 是 | 通知Web组件用户操作行为。 | 10123 10124## OnBeforeUnloadEvent<sup>12+</sup> 10125 10126定义刷新或关闭场景下，在即将离开当前页面时触发此回调。 10127 10128**系统能力：** SystemCapability.Web.Webview.Core 10129 10130| 名称 | 类型 | 必填 | 说明 | 10131| -------------- | ---- | ---- | ---------------------------------------- | 10132| url | string | 是 | 当前显示弹窗所在网页的URL。 | 10133| message | string | 是 | 弹窗中显示的信息。 | 10134| result | [JsResult](#jsresult) | 是 | 通知Web组件用户操作行为。 | 10135 10136## OnConfirmEvent<sup>12+</sup> 10137 10138定义网页调用confirm()告警时触发此回调。 10139 10140**系统能力：** SystemCapability.Web.Webview.Core 10141 10142| 名称 | 类型 | 必填 | 说明 | 10143| -------------- | ---- | ---- | ---------------------------------------- | 10144| url | string | 是 | 当前显示弹窗所在网页的URL。 | 10145| message | string | 是 | 弹窗中显示的信息。 | 10146| result | [JsResult](#jsresult) | 是 | 通知Web组件用户操作行为。 | 10147 10148## OnPromptEvent<sup>12+</sup> 10149 10150定义网页调用prompt()告警时触发此回调。 10151 10152**系统能力：** SystemCapability.Web.Webview.Core 10153 10154| 名称 | 类型 | 必填 | 说明 | 10155| -------------- | ---- | ---- | ---------------------------------------- | 10156| url | string | 是 | 当前显示弹窗所在网页的URL。 | 10157| message | string | 是 | 弹窗中显示的信息。 | 10158| value | string | 是 | 提示对话框的信息。 | 10159| result | [JsResult](#jsresult) | 是 | 通知Web组件用户操作行为。 | 10160 10161## OnConsoleEvent<sup>12+</sup> 10162 10163定义通知宿主应用JavaScript console消息。 10164 10165**系统能力：** SystemCapability.Web.Webview.Core 10166 10167| 名称 | 类型 | 必填 | 说明 | 10168| -------------- | ---- | ---- | ---------------------------------------- | 10169| message | [ConsoleMessage](#consolemessage) | 是 | 触发的控制台信息。 | 10170 10171## OnErrorReceiveEvent<sup>12+</sup> 10172 10173定义网页加载遇到错误时触发该回调。 10174 10175**系统能力：** SystemCapability.Web.Webview.Core 10176 10177| 名称 | 类型 | 必填 | 说明 | 10178| -------------- | ---- | ---- | ---------------------------------------- | 10179| request | [WebResourceRequest](#webresourcerequest) | 是 | 网页请求的封装信息。 | 10180| error | [WebResourceError](#webresourceerror) | 是 | 网页加载资源错误的封装信息 。 | 10181 10182## OnHttpErrorReceiveEvent<sup>12+</sup> 10183 10184定义网页收到加载资源加载HTTP错误时触发。 10185 10186**系统能力：** SystemCapability.Web.Webview.Core 10187 10188| 名称 | 类型 | 必填 | 说明 | 10189| -------------- | ---- | ---- | ---------------------------------------- | 10190| request | [WebResourceRequest](#webresourcerequest) | 是 | 网页请求的封装信息。 | 10191| response | [WebResourceResponse](#webresourceresponse) | 是 | 资源响应的封装信息。 | 10192 10193## OnDownloadStartEvent<sup>12+</sup> 10194 10195定义通知主应用开始下载一个文件。 10196 10197**系统能力：** SystemCapability.Web.Webview.Core 10198 10199| 名称 | 类型 | 必填 | 说明 | 10200| -------------- | ---- | ---- | ---------------------------------------- | 10201| url | string | 是 | 文件下载的URL。 | 10202| userAgent | string | 是 | 用于下载的用户代理。 | 10203| contentDisposition | string | 是 | 服务器返回的 Content-Disposition响应头，可能为空。 | 10204| mimetype | string | 是 | 服务器返回内容媒体类型（MIME）信息。 | 10205| contentLength | number | 是 | 服务器返回文件的长度。 | 10206 10207## OnRefreshAccessedHistoryEvent<sup>12+</sup> 10208 10209定义网页刷新访问历史记录时触发。 10210 10211**系统能力：** SystemCapability.Web.Webview.Core 10212 10213| 名称 | 类型 | 必填 | 说明 | 10214| -------------- | ---- | ---- | ---------------------------------------- | 10215| url | string | 是 | 访问的url。 | 10216| isRefreshed | boolean | 是 | true表示该页面是被重新加载的（调用[refresh<sup>9+</sup>](js-apis-webview.md#refresh)接口），false表示该页面是新加载的。 | 10217 10218## OnRenderExitedEvent<sup>12+</sup> 10219 10220定义渲染过程退出时触发。 10221 10222**系统能力：** SystemCapability.Web.Webview.Core 10223 10224| 名称 | 类型 | 必填 | 说明 | 10225| -------------- | ---- | ---- | ---------------------------------------- | 10226| renderExitReason | [RenderExitReason](#renderexitreason9枚举说明) | 是 | 渲染进程异常退出的具体原因。 | 10227 10228## OnShowFileSelectorEvent<sup>12+</sup> 10229 10230定义文件选择器结果。 10231 10232**系统能力：** SystemCapability.Web.Webview.Core 10233 10234| 名称 | 类型 | 必填 | 说明 | 10235| -------------- | ---- | ---- | ---------------------------------------- | 10236| result | [FileSelectorResult](#fileselectorresult9) | 是 | 用于通知Web组件文件选择的结果。 | 10237| fileSelector | [FileSelectorParam](#fileselectorparam9) | 是 | 文件选择器的相关信息。 | 10238 10239## OnResourceLoadEvent<sup>12+</sup> 10240 10241定义加载url时触发。 10242 10243**系统能力：** SystemCapability.Web.Webview.Core 10244 10245| 名称 | 类型 | 必填 | 说明 | 10246| -------------- | ---- | ---- | ---------------------------------------- | 10247| url | string | 是 | 所加载的资源文件url信息。 | 10248 10249## OnScaleChangeEvent<sup>12+</sup> 10250 10251定义当前页面显示比例的变化时触发。 10252 10253**系统能力：** SystemCapability.Web.Webview.Core 10254 10255| 名称 | 类型 | 必填 | 说明 | 10256| -------------- | ---- | ---- | ---------------------------------------- | 10257| oldScale | number | 是 | 变化前的显示比例百分比。 | 10258| newScale | number | 是 | 变化后的显示比例百分比。 | 10259 10260## OnHttpAuthRequestEvent<sup>12+</sup> 10261 10262定义通知收到http auth认证请求。 10263 10264**系统能力：** SystemCapability.Web.Webview.Core 10265 10266| 名称 | 类型 | 必填 | 说明 | 10267| -------------- | ---- | ---- | ---------------------------------------- | 10268| handler | [HttpAuthHandler](#httpauthhandler9) | 是 | 通知Web组件用户操作行为。 | 10269| host | string | 是 | HTTP身份验证凭据应用的主机。 | 10270| realm | string | 是 | HTTP身份验证凭据应用的域。 | 10271 10272## OnInterceptRequestEvent<sup>12+</sup> 10273 10274定义当Web组件加载url之前触发。 10275 10276**系统能力：** SystemCapability.Web.Webview.Core 10277 10278| 名称 | 类型 | 必填 | 说明 | 10279| -------------- | ---- | ---- | ---------------------------------------- | 10280| request | [WebResourceRequest](#webresourcerequest) | 是 | url请求的相关信息。 | 10281 10282## OnPermissionRequestEvent<sup>12+</sup> 10283 10284定义通知收到获取权限请求。 10285 10286**系统能力：** SystemCapability.Web.Webview.Core 10287 10288| 名称 | 类型 | 必填 | 说明 | 10289| -------------- | ---- | ---- | ---------------------------------------- | 10290| request | [PermissionRequest](#permissionrequest9) | 是 | 通知Web组件用户操作行为。 | 10291 10292## OnScreenCaptureRequestEvent<sup>12+</sup> 10293 10294定义通知收到屏幕捕获请求。 10295 10296**系统能力：** SystemCapability.Web.Webview.Core 10297 10298| 名称 | 类型 | 必填 | 说明 | 10299| -------------- | ---- | ---- | ---------------------------------------- | 10300| handler | [ScreenCaptureHandler](#screencapturehandler10) | 是 | 通知Web组件用户操作行为。 | 10301 10302## OnContextMenuShowEvent<sup>12+</sup> 10303 10304定义调用时触发的回调，以允许自定义显示上下文菜单。 10305 10306**系统能力：** SystemCapability.Web.Webview.Core 10307 10308| 名称 | 类型 | 必填 | 说明 | 10309| -------------- | ---- | ---- | ---------------------------------------- | 10310| param | [WebContextMenuParam](#webcontextmenuparam9) | 是 | 菜单相关参数。 | 10311| result | [WebContextMenuResult](#webcontextmenuresult9) | 是 | 菜单相应事件传入内核。 | 10312 10313## OnSearchResultReceiveEvent<sup>12+</sup> 10314 10315定义通知调用方网页页内查找的结果。 10316 10317**系统能力：** SystemCapability.Web.Webview.Core 10318 10319| 名称 | 类型 | 必填 | 说明 | 10320| -------------- | ---- | ---- | ---------------------------------------- | 10321| activeMatchOrdinal | number | 是 | 当前匹配的查找项的序号（从0开始）。 | 10322| numberOfMatches | number | 是 | 所有匹配到的关键词的个数。 | 10323| isDoneCounting | boolean | 是 | 当次页内查找操作是否结束。<br>true表示当次页内查找操作结束，false表示当次页内查找操作未结束。<br>该方法可能会回调多次，直到isDoneCounting为true为止。 | 10324 10325## OnScrollEvent<sup>12+</sup> 10326 10327定义滚动条滑动到指定位置时触发。 10328 10329**系统能力：** SystemCapability.Web.Webview.Core 10330 10331| 名称 | 类型 | 必填 | 说明 | 10332| -------------- | ---- | ---- | ---------------------------------------- | 10333| xOffset | number | 是 | 以网页最左端为基准，水平滚动条滚动所在位置。<br>单位：vp。 | 10334| yOffset | number | 是 | 以网页最上端为基准，竖直滚动条滚动所在位置。<br>单位：vp。 | 10335 10336## OnSslErrorEventReceiveEvent<sup>12+</sup> 10337 10338定义网页收到SSL错误时触发。 10339 10340**系统能力：** SystemCapability.Web.Webview.Core 10341 10342| 名称 | 类型 | 必填 | 说明 | 10343| -------------- | ---- | ---- | ---------------------------------------- | 10344| handler | [SslErrorHandler](#sslerrorhandler9) | 是 | 通知Web组件用户操作行为。 | 10345| error | [SslError](#sslerror9枚举说明) | 是 | 错误码。 | 10346| certChainData<sup>15+</sup> | Array<Uint8Array\> | 否 | 证书链数据。 | 10347 10348## OnClientAuthenticationEvent<sup>12+</sup> 10349 10350定义当需要用户提供SSL客户端证书时触发回调。 10351 10352**系统能力：** SystemCapability.Web.Webview.Core 10353 10354| 名称 | 类型 | 必填 | 说明 | 10355| -------------- | ---- | ---- | ---------------------------------------- | 10356| handler | [ClientAuthenticationHandler](#clientauthenticationhandler9) | 是 | 通知Web组件用户操作行为。 | 10357| host | string | 是 | 请求证书服务器的主机名。 | 10358| port | number | 是 | 请求证书服务器的端口号。 | 10359| keyTypes | Array<string\> | 是 | 可接受的非对称秘钥类型。 | 10360| issuers | Array<string\> | 是 | 与私钥匹配的证书可接受颁发者。 | 10361 10362## OnWindowNewEvent<sup>12+</sup> 10363 10364定义网页要求用户创建窗口时触发的回调。 10365 10366**系统能力：** SystemCapability.Web.Webview.Core 10367 10368| 名称 | 类型 | 必填 | 说明 | 10369| -------------- | ---- | ---- | ---------------------------------------- | 10370| isAlert | boolean | 是 | true代表请求创建对话框，false代表新标签页。 | 10371| isUserTrigger | boolean | 是 | true代表用户触发，false代表非用户触发。 | 10372| targetUrl | string | 是 | 目标url。 | 10373| handler | [ControllerHandler](#controllerhandler9) | 是 | 用于设置新建窗口的WebviewController实例。 | 10374 10375## OnTouchIconUrlReceivedEvent<sup>12+</sup> 10376 10377定义设置接收到apple-touch-icon url地址时的回调函数。 10378 10379**系统能力：** SystemCapability.Web.Webview.Core 10380 10381| 名称 | 类型 | 必填 | 说明 | 10382| -------------- | ---- | ---- | ---------------------------------------- | 10383| url | string | 是 | 接收到的apple-touch-icon url地址。 | 10384| precomposed | boolean | 是 | 对应apple-touch-icon是否为预合成。<br>true表示对应apple-touch-icon为预合成，false表示对应apple-touch-icon不是预合成。 | 10385 10386## OnFaviconReceivedEvent<sup>12+</sup> 10387 10388定义应用为当前页面接收到新的favicon时的回调函数。 10389 10390**系统能力：** SystemCapability.Web.Webview.Core 10391 10392| 名称 | 类型 | 必填 | 说明 | 10393| -------------- | ---- | ---- | ---------------------------------------- | 10394| favicon | [PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 接收到的favicon图标的PixelMap对象。 | 10395 10396## OnPageVisibleEvent<sup>12+</sup> 10397 10398定义旧页面不再呈现，新页面即将可见时触发的回调函数。 10399 10400**系统能力：** SystemCapability.Web.Webview.Core 10401 10402| 名称 | 类型 | 必填 | 说明 | 10403| -------------- | ---- | ---- | ---------------------------------------- | 10404| url | string | 是 | 旧页面不再呈现，新页面即将可见时新页面的url地址。 | 10405 10406## OnDataResubmittedEvent<sup>12+</sup> 10407 10408定义网页表单可以重新提交时触发的回调函数。 10409 10410**系统能力：** SystemCapability.Web.Webview.Core 10411 10412| 名称 | 类型 | 必填 | 说明 | 10413| -------------- | ---- | ---- | ---------------------------------------- | 10414| handler | [DataResubmissionHandler](#dataresubmissionhandler9) | 是 | 表单数据重新提交句柄。 | 10415 10416## OnAudioStateChangedEvent<sup>12+</sup> 10417 10418定义网页上的音频播放状态发生改变时的回调函数。 10419 10420**系统能力：** SystemCapability.Web.Webview.Core 10421 10422| 名称 | 类型 | 必填 | 说明 | 10423| -------------- | ---- | ---- | ---------------------------------------- | 10424| playing | boolean | 是 | 当前页面的音频播放状态，true表示正在播放，false表示未播放。 | 10425 10426## OnFirstContentfulPaintEvent<sup>12+</sup> 10427 10428定义网页首次内容绘制回调函数。 10429 10430**系统能力：** SystemCapability.Web.Webview.Core 10431 10432| 名称 | 类型 | 必填 | 说明 | 10433| -------------- | ---- | ---- | ---------------------------------------- | 10434| navigationStartTick | number | 是 | navigation开始的时间，单位以微秒表示。 | 10435| firstContentfulPaintMs | number | 是 | 从navigation开始第一次绘制内容的时间，单位是以毫秒表示。 | 10436 10437## OnLoadInterceptEvent<sup>12+</sup> 10438 10439定义截获资源加载时触发的回调。 10440 10441**系统能力：** SystemCapability.Web.Webview.Core 10442 10443| 名称 | 类型 | 必填 | 说明 | 10444| -------------- | ---- | ---- | ---------------------------------------- | 10445| data | [WebResourceRequest](#webresourcerequest) | 是 | url请求的相关信息。 | 10446 10447## OnOverScrollEvent<sup>12+</sup> 10448 10449定义网页过度滚动时触发的回调。 10450 10451**系统能力：** SystemCapability.Web.Webview.Core 10452 10453| 名称 | 类型 | 必填 | 说明 | 10454| -------------- | ---- | ---- | ---------------------------------------- | 10455| xOffset | number | 是 | 以网页最左端为基准，水平过度滚动的偏移量。<br>单位：vp。 | 10456| yOffset | number | 是 | 以网页最上端为基准，竖直过度滚动的偏移量。<br>单位：vp。 | 10457 10458## JavaScriptProxy<sup>12+</sup> 10459 10460定义要注入的JavaScript对象。 10461 10462**系统能力：** SystemCapability.Web.Webview.Core 10463 10464| 名称 | 类型 | 必填 | 说明 | 10465| -------------- | ---- | ---- | ---------------------------------------- | 10466| object | object | 是 | 参与注册的对象。只能声明方法，不能声明属性。 | 10467| name | string | 是 | 注册对象的名称，与window中调用的对象名一致。 | 10468| methodList | Array\<string\> | 是 | 参与注册的应用侧JavaScript对象的同步方法。 | 10469| controller | [WebController](#webcontroller) \| [WebviewController<sup>9+</sup>](#webviewcontroller9) | 是 | - | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 | 10470| asyncMethodList<sup>12+</sup> | Array\<string\> | 否 | 参与注册的应用侧JavaScript对象的异步方法。异步方法无法获取返回值。 | 10471| permission<sup>12+</sup> | string | 否 | json字符串，默认为空，通过该字符串配置JSBridge的权限管控，可以定义object、method一级的url白名单。<br>示例请参考[前端页面调用应用侧函数](../../web/web-in-page-app-function-invoking.md)。 | 10472 10473## AdsBlockedDetails<sup>12+</sup> 10474 10475发生广告拦截时，广告资源信息。 10476 10477**系统能力：** SystemCapability.Web.Webview.Core 10478 10479| 名称 | 类型 | 必填 | 说明 | 10480| ------- | -------------------------------------------------------------------------------- | ---- | ------------------------- | 10481| url | string | 是 | 发生广告过滤的页面url。 | 10482| adsBlocked | Array\<string\> | 是 | 被过滤的资源的url或dompath标识，被过滤的多个对象url相同则可能出现重复元素。 | 10483 10484## OnAdsBlockedCallback<sup>12+</sup> 10485 10486type OnAdsBlockedCallback = (details: AdsBlockedDetails) => void 10487 10488当页面发生广告过滤时触发此回调。 10489 10490**系统能力：** SystemCapability.Web.Webview.Core 10491 10492**参数：** 10493 10494| 参数名 | 类型 | 必填 | 说明 | 10495| -------------------- | ----------------------------------------------- | ---- | -------------------------------- | 10496| details | [AdsBlockedDetails](#adsblockeddetails12) | 是 | 发生广告拦截时，广告资源信息。 | 10497 10498## NativeEmbedVisibilityInfo<sup>12+</sup> 10499 10500提供同层标签的可见性信息。 10501 10502**系统能力：** SystemCapability.Web.Webview.Core 10503 10504| 名称 | 类型 | 必填 | 说明 | 10505| ------------- | ------------------------------------| ----- | ------------------ | 10506| visibility | boolean | 是 | 可见性。<br>true表示可见，false表示不可见。 | 10507| embedId | string | 是 | 同层渲染标签的唯一id。 | 10508 10509## OnNativeEmbedVisibilityChangeCallback<sup>12+</sup> 10510 10511type OnNativeEmbedVisibilityChangeCallback = (nativeEmbedVisibilityInfo: NativeEmbedVisibilityInfo) => void 10512 10513当同层标签可见性变化时触发该回调。 10514 10515**系统能力：** SystemCapability.Web.Webview.Core 10516 10517**参数：** 10518 10519| 参数名 | 类型 | 必填 | 说明 | 10520| ------ | ------ | ---- | --------------------- | 10521| nativeEmbedVisibilityInfo | [NativeEmbedVisibilityInfo](#nativeembedvisibilityinfo12) | 是 | 提供同层标签的可见性信息。 | 10522 10523## WebElementType<sup>13+</sup>枚举说明 10524 10525网页元素信息。 10526 10527**系统能力：** SystemCapability.Web.Webview.Core 10528 10529**参数：** 10530 10531| 名称 | 值 | 说明 | 10532| --------- | -- | ----------------- | 10533| IMAGE | 1 | 网页元素为图像类型。 | 10534 10535## WebResponseType<sup>13+</sup>枚举说明 10536 10537菜单的响应类型。 10538 10539**系统能力：** SystemCapability.Web.Webview.Core 10540 10541**参数：** 10542 10543| 名称 | 值 | 说明 | 10544| -------------- | -- | ------------------ | 10545| LONG_PRESS | 1 | 通过长按触发菜单弹出。 | 10546 10547## SelectionMenuOptionsExt<sup>13+</sup> 10548 10549自定义菜单扩展项。 10550 10551**系统能力：** SystemCapability.Web.Webview.Core 10552 10553| 名称 | 类型 | 必填 | 说明 | 10554| ---------- | -----------------------------------------------------| ------ | ---------------- | 10555| onAppear | Callback\<void\> | 否 | 自定义选择菜单弹出时回调。 | 10556| onDisappear | Callback\<void\> | 否 | 自定义选择菜单关闭时回调。 | 10557| preview | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | 否 | 自定义选择菜单的预览内容样式, 未配置时无预览内容。| 10558| menuType | [MenuType](../apis-arkui/arkui-ts/ts-text-common.md#menutype13枚举说明) | 否 | 自定义选择菜单类型。<br>默认值：MenuType.SELECTION_MENU | 10559 10560## BlurOnKeyboardHideMode<sup>14+</sup>枚举说明 10561 10562设置手动收起软键盘时Web元素是否失焦。 10563 10564**系统能力：** SystemCapability.Web.Webview.Core 10565 10566**参数：** 10567 10568| 名称 | 值 | 说明 | 10569| ------ | -- | ----------- | 10570| SILENT | 0 | 软键盘收起时web组件失焦功能关闭。 | 10571| BLUR | 1 | 软键盘收起时web组件失焦功能开启。 | 10572 10573## EmbedOptions<sup>16+</sup> 10574 10575Web同层渲染的配置。 10576 10577**系统能力：** SystemCapability.Web.Webview.Core 10578 10579| 名称 | 类型 | 必填 | 说明 | 10580| -------------- | ------- | ---- | ---------------------------------------- | 10581| supportDefaultIntrinsicSize | boolean | 否 | 设置同层渲染元素是否支持固定大小 300 * 150。<br>当H5侧CSS设置了大小时，同层渲染元素大小为CSS大小，否则为固定大小。<br>为true时，固定大小为 300 * 150。<br>为false时，若H5侧CSS未设置大小，则同层渲染元素不渲染。<br>默认值：false<br>单位：px | 10582
