1# 属性 2<!--Kit: ArkWeb--> 3<!--Subsystem: Web--> 4<!--Owner: @yp99ustc; @aohui; @zourongchun--> 5<!--Designer: @LongLie; @yaomingliu; @zhufenghao--> 6<!--Tester: @ghiker--> 7<!--Adviser: @HelloCrease--> 8 9通用属性仅支持[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#clip12)、[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#id)、[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#touchabledeprecated)、[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)、[position](../apis-arkui/arkui-ts/ts-universal-attributes-location.md#position)。 10 11> **说明：** 12> 13> - 该组件首批接口从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> - 示例效果请以真机运行为准，当前DevEco Studio预览器不支持。 16 17## domStorageAccess 18 19domStorageAccess(domStorageAccess: boolean) 20 21设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 22 23**系统能力：** SystemCapability.Web.Webview.Core 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ---------------- | ------- | ---- | ------------------------------------ | 29| domStorageAccess | boolean | 是 | 设置是否开启文档对象模型存储接口（DOM Storage API）权限。<br>true表示开启文档对象模型存储接口权限，false表示不开启文档对象模型存储接口权限。<br>默认值：false。 | 30 31> **说明：** 32> 33> - 网页中使用到文档对象模型存储接口（DOM Storage API），需将其设置为true，才可正常加载网页。 34 35**示例：** 36 37 ```ts 38 // xxx.ets 39 import { webview } from '@kit.ArkWeb'; 40 41 @Entry 42 @Component 43 struct WebComponent { 44 controller: webview.WebviewController = new webview.WebviewController(); 45 46 build() { 47 Column() { 48 Web({ src: 'www.example.com', controller: this.controller }) 49 .domStorageAccess(true) 50 } 51 } 52 } 53 ``` 54 55## fileAccess 56 57fileAccess(fileAccess: boolean) 58 59设置是否开启应用中文件系统的访问。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中的文件不受该属性影响而被限制访问。 60 61**系统能力：** SystemCapability.Web.Webview.Core 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| ---------- | ------- | ---- | ---------------------- | 67| fileAccess | boolean | 是 | 设置是否开启应用中文件系统的访问。<br>true表示开启应用中文件系统的访问。false表示不开启应用中文件系统的访问。<br>API version 11及以前：默认值：true。<br>API version 12及以后：默认值：false，同时，当fileAccess为false的时候，仅只读资源目录`/data/storage/el1/bundle/entry/resources/resfile`里面的资源依然可以通过file协议访问，不受fileAccess管控。 | 68 69**示例：** 70 71 ```ts 72 // xxx.ets 73 import { webview } from '@kit.ArkWeb'; 74 75 @Entry 76 @Component 77 struct WebComponent { 78 controller: webview.WebviewController = new webview.WebviewController(); 79 80 build() { 81 Column() { 82 Web({ src: 'www.example.com', controller: this.controller }) 83 .fileAccess(true) 84 } 85 } 86 } 87 ``` 88 89## imageAccess 90 91imageAccess(imageAccess: boolean) 92 93设置是否允许自动加载图片资源。 94 95**系统能力：** SystemCapability.Web.Webview.Core 96 97**参数：** 98 99| 参数名 | 类型 | 必填 | 说明 | 100| ----------- | ------- | ---- | --------------- | 101| imageAccess | boolean | 是 | 设置是否允许自动加载图片资源。<br>true表示设置允许自动加载图片资源，false表示设置不允许自动加载图片资源。<br>默认值：true。<br>传入undefined与null时为false。 | 102 103**示例：** 104 ```ts 105 // xxx.ets 106 import { webview } from '@kit.ArkWeb'; 107 108 @Entry 109 @Component 110 struct WebComponent { 111 controller: webview.WebviewController = new webview.WebviewController(); 112 113 build() { 114 Column() { 115 Web({ src: 'www.example.com', controller: this.controller }) 116 .imageAccess(true) 117 } 118 } 119 } 120 ``` 121 122## javaScriptProxy 123 124javaScriptProxy(javaScriptProxy: JavaScriptProxy) 125 126将javaScriptProxy中的ArkTS对象注册到Web组件中，该对象将使用JavaScriptProxy中指定的名称注册到网页的所有框架中，包括所有iframe，这使得JavaScript可以调用javaScriptProxy中ArkTS对象的方法。 127 128> **说明：** 129> 130> javaScriptProxy接口需要和deleteJavaScriptRegister接口配合使用，防止内存泄漏。 131> javaScriptProxy对象的所有参数不支持更新。 132> 注册javaScriptProxy对象时，同步与异步列表请至少选择一项不为空，可同时注册两类方法。 133> 此接口只支持注册一个对象，若需要注册多个对象请使用[registerJavaScriptProxy<sup>9+</sup>](./arkts-apis-webview-WebviewController.md#registerjavascriptproxy)。 134 135**系统能力：** SystemCapability.Web.Webview.Core 136 137**参数：** 138 139| 参数名 | 类型 | 必填 | 说明 | 140| ---------- | ---------------------------------------- | ---- |---------------------------------------- | 141| javaScriptProxy | [JavaScriptProxy](./arkts-basic-components-web-i.md#javascriptproxy12) | 是 | 参与注册的对象。只能声明方法，不能声明属性。 | 142 143**示例：** 144 145 ```ts 146 // xxx.ets 147 import { webview } from '@kit.ArkWeb'; 148 import { BusinessError } from '@kit.BasicServicesKit'; 149 150 class TestObj { 151 constructor() { 152 } 153 154 test(data1: string, data2: string, data3: string): string { 155 console.info("data1:" + data1); 156 console.info("data2:" + data2); 157 console.info("data3:" + data3); 158 return "AceString"; 159 } 160 161 asyncTest(data: string): void { 162 console.info("async data:" + data); 163 } 164 165 toString(): void { 166 console.info('toString' + "interface instead."); 167 } 168 } 169 170 @Entry 171 @Component 172 struct WebComponent { 173 controller: webview.WebviewController = new webview.WebviewController(); 174 testObj = new TestObj(); 175 build() { 176 Column() { 177 Button('deleteJavaScriptRegister') 178 .onClick(() => { 179 try { 180 this.controller.deleteJavaScriptRegister("objName"); 181 } catch (error) { 182 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 183 } 184 }) 185 Web({ src: 'www.example.com', controller: this.controller }) 186 .javaScriptAccess(true) 187 .javaScriptProxy({ 188 object: this.testObj, 189 name: "objName", 190 methodList: ["test", "toString"], 191 asyncMethodList: ["asyncTest"], 192 controller: this.controller, 193 }) 194 } 195 } 196 } 197 ``` 198 199## javaScriptAccess 200 201javaScriptAccess(javaScriptAccess: boolean) 202 203设置是否允许执行JavaScript脚本。 204 205**系统能力：** SystemCapability.Web.Webview.Core 206 207**参数：** 208 209| 参数名 | 类型 | 必填 | 说明 | 210| ---------------- | ------- | ---- | ------------------- | 211| javaScriptAccess | boolean | 是 | 是否允许执行JavaScript脚本。<br>true表示允许执行JavaScript脚本，false表示不允许执行JavaScript脚本。<br>传入undefined或null时不允许执行JavaScript脚本。 | 212 213**示例：** 214 215 ```ts 216 // xxx.ets 217 import { webview } from '@kit.ArkWeb'; 218 219 @Entry 220 @Component 221 struct WebComponent { 222 controller: webview.WebviewController = new webview.WebviewController(); 223 build() { 224 Column() { 225 Web({ src: 'www.example.com', controller: this.controller }) 226 .javaScriptAccess(true) 227 } 228 } 229 } 230 ``` 231 232## overScrollMode<sup>11+</sup> 233 234overScrollMode(mode: OverScrollMode) 235 236设置Web过滚动模式。当过滚动模式开启时，当用户在Web根页面上滑动到边缘时，Web会通过弹性动画弹回界面，根页面上的内部页面不会触发回弹。 237 238**系统能力：** SystemCapability.Web.Webview.Core 239 240**参数：** 241 242| 参数名 | 类型 | 必填 | 说明 | 243| ---- | --------------------------------------- | ---- | ------------------ | 244| mode | [OverScrollMode](./arkts-basic-components-web-e.md#overscrollmode11) | 是 | 设置Web的过滚动模式为关闭或开启。<br>默认值：`OverScrollMode.NEVER`，表示关闭过滚动模式。 | 245 246**示例：** 247 248 ```ts 249 // xxx.ets 250 import { webview } from '@kit.ArkWeb'; 251 252 @Entry 253 @Component 254 struct WebComponent { 255 controller: webview.WebviewController = new webview.WebviewController(); 256 @State mode: OverScrollMode = OverScrollMode.ALWAYS; 257 build() { 258 Column() { 259 Web({ src: 'www.example.com', controller: this.controller }) 260 .overScrollMode(this.mode) 261 } 262 } 263 } 264 ``` 265 266## mixedMode 267 268mixedMode(mixedMode: MixedMode) 269 270设定当安全源尝试从非安全源加载资源时的行为。 271 272**系统能力：** SystemCapability.Web.Webview.Core 273 274**参数：** 275 276| 参数名 | 类型 | 必填 | 说明 | 277| --------- | --------------------------- | ---- | --------- | 278| mixedMode | [MixedMode](./arkts-basic-components-web-e.md#mixedmode) | 是 | 要设置的混合内容模式。 | 279 280**示例：** 281 282 ```ts 283 // xxx.ets 284 import { webview } from '@kit.ArkWeb'; 285 286 @Entry 287 @Component 288 struct WebComponent { 289 controller: webview.WebviewController = new webview.WebviewController(); 290 @State mode: MixedMode = MixedMode.All; 291 build() { 292 Column() { 293 Web({ src: 'www.example.com', controller: this.controller }) 294 .mixedMode(this.mode) 295 } 296 } 297 } 298 ``` 299 300## onlineImageAccess 301 302onlineImageAccess(onlineImageAccess: boolean) 303 304设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源）。 305 306**系统能力：** SystemCapability.Web.Webview.Core 307 308**参数：** 309 310| 参数名 | 类型 | 必填 | 说明 | 311| ----------------- | ------- | ---- | ---------------- | 312| onlineImageAccess | boolean | 是 | 设置是否允许从网络加载图片资源。<br>true表示设置允许从网络加载图片资源，false表示设置不允许从网络加载图片资源。<br>默认值：true。<br>传入undefined与null时为false。 | 313 314**示例：** 315 316 ```ts 317 // xxx.ets 318 import { webview } from '@kit.ArkWeb'; 319 320 @Entry 321 @Component 322 struct WebComponent { 323 controller: webview.WebviewController = new webview.WebviewController(); 324 325 build() { 326 Column() { 327 Web({ src: 'www.example.com', controller: this.controller }) 328 .onlineImageAccess(true) 329 } 330 } 331 } 332 ``` 333 334## zoomAccess 335 336zoomAccess(zoomAccess: boolean) 337 338设置是否支持手势进行缩放。 339 340**系统能力：** SystemCapability.Web.Webview.Core 341 342**参数：** 343 344| 参数名 | 类型 | 必填 | 说明 | 345| ---------- | ------- | ---- | ------------- | 346| zoomAccess | boolean | 是 | 设置是否支持手势进行缩放。<br>true表示设置支持手势进行缩放，false表示设置不支持手势进行缩放。<br>默认值：true。<br>传入undefined与null时为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 .zoomAccess(true) 363 } 364 } 365 } 366 ``` 367 368## overviewModeAccess 369 370overviewModeAccess(overviewModeAccess: boolean) 371 372设置是否使用概览模式加载网页，即缩小内容以适应屏幕宽度。 373 374**系统能力：** SystemCapability.Web.Webview.Core 375 376**设备行为差异：** 该接口在PC/2in1设备中无效果，在其他设备中可正常调用。 377 378**参数：** 379 380| 参数名 | 类型 | 必填 | 说明 | 381| ------------------ | ------- | ---- | --------------- | 382| overviewModeAccess | boolean | 是 | 设置是否使用概览模式加载网页。<br>true表示设置使用概览模式加载网页，false表示设置不使用概览模式加载网页。<br>默认值：true。<br>传入undefined与null时为false。 | 383 384**示例：** 385 386 ```ts 387 // xxx.ets 388 import { webview } from '@kit.ArkWeb'; 389 390 @Entry 391 @Component 392 struct WebComponent { 393 controller: webview.WebviewController = new webview.WebviewController(); 394 395 build() { 396 Column() { 397 Web({ src: 'www.example.com', controller: this.controller }) 398 .overviewModeAccess(true) 399 } 400 } 401 } 402 ``` 403 404## databaseAccess 405 406databaseAccess(databaseAccess: boolean) 407 408设置是否开启数据库存储API权限。 409 410**系统能力：** SystemCapability.Web.Webview.Core 411 412**参数：** 413 414| 参数名 | 类型 | 必填 | 说明 | 415| -------------- | ------- | ---- | ----------------- | 416| databaseAccess | boolean | 是 | 设置是否开启数据库存储API权限。<br>true表示设置开启数据库存储API权限，false表示设置不开启数据库存储API权限。<br>默认值：false。 | 417 418**示例：** 419 420 ```ts 421 // xxx.ets 422 import { webview } from '@kit.ArkWeb'; 423 424 @Entry 425 @Component 426 struct WebComponent { 427 controller: webview.WebviewController = new webview.WebviewController(); 428 429 build() { 430 Column() { 431 Web({ src: 'www.example.com', controller: this.controller }) 432 .databaseAccess(true) 433 } 434 } 435 } 436 ``` 437 438## geolocationAccess 439 440geolocationAccess(geolocationAccess: boolean) 441 442设置是否开启获取地理位置权限。具体使用方式参考[管理位置权限](../../web/web-geolocation-permission.md)。 443 444**系统能力：** SystemCapability.Web.Webview.Core 445 446**参数：** 447 448| 参数名 | 类型 | 必填 | 说明 | 449| ----------------- | ------- | ---- | --------------- | 450| geolocationAccess | boolean | 是 | 设置是否开启获取地理位置权限。<br>true表示设置开启获取地理位置权限，false表示设置不开启获取地理位置权限。<br>默认值：true。<br>传入undefined与null时为false。 | 451 452**示例：** 453 454 ```ts 455 // xxx.ets 456 import { webview } from '@kit.ArkWeb'; 457 458 @Entry 459 @Component 460 struct WebComponent { 461 controller: webview.WebviewController = new webview.WebviewController(); 462 463 build() { 464 Column() { 465 Web({ src: 'www.example.com', controller: this.controller }) 466 .geolocationAccess(true) 467 } 468 } 469 } 470 ``` 471 472## mediaPlayGestureAccess<sup>9+</sup> 473 474mediaPlayGestureAccess(access: boolean) 475 476设置有声视频的自动播放是否需要用户手动点击，静音视频播放不受该接口管控。 477 478**系统能力：** SystemCapability.Web.Webview.Core 479 480**参数：** 481 482| 参数名 | 类型 | 必填 | 说明 | 483| ------ | ------- | ---- | ------------------- | 484| access | boolean | 是 | 设置有声视频的自动播放是否需要用户手动点击。<br>true表示设置有声视频的自动播放需要用户手动点击，false表示设置有声视频的自动播放不需要用户手动点击，能自动播放。<br>默认值：true。<br>传入undefined与null时为false。 | 485 486**示例：** 487 488 ```ts 489 // xxx.ets 490 import { webview } from '@kit.ArkWeb'; 491 492 @Entry 493 @Component 494 struct WebComponent { 495 controller: webview.WebviewController = new webview.WebviewController(); 496 @State access: boolean = true; 497 498 build() { 499 Column() { 500 Web({ src: $rawfile('index.html'), controller: this.controller }) 501 .mediaPlayGestureAccess(this.access) 502 } 503 } 504 } 505 ``` 506 507加载的html文件。 508 ```html 509 <!--index.html--> 510 <!DOCTYPE html> 511 <html> 512 <head> 513 <title>视频播放页面</title> 514 </head> 515 <body> 516 <h1>视频播放</h1> 517 <video id="testVideo" controls autoplay> 518 // 需要在video标签中配置autoplay属性，允许视频自动播放 519 // 在resources的rawfile目录放置任意一个mp4媒体文件，并将其命名为example.mp4 520 <source src="example.mp4" type="video/mp4"> 521 </video> 522 </body> 523 </html> 524 ``` 525 526## multiWindowAccess<sup>9+</sup> 527 528multiWindowAccess(multiWindow: boolean) 529 530设置是否开启多窗口权限。 531使能多窗口权限时，需要实现onWindowNew事件，示例代码参考[onWindowNew事件](./arkts-basic-components-web-events.md#onwindownew9)。 532 533**系统能力：** SystemCapability.Web.Webview.Core 534 535**参数：** 536 537| 参数名 | 类型 | 必填 | 说明 | 538| ----------- | ------- | ---- | ------------ | 539| multiWindow | boolean | 是 | 设置是否开启多窗口权限。<br>true表示设置开启多窗口权限，false表示设置不开启多窗口权限。<br>默认值：false。 | 540 541## horizontalScrollBarAccess<sup>9+</sup> 542 543horizontalScrollBarAccess(horizontalScrollBar: boolean) 544 545设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。 546 547> **说明：** 548> 549> - 通过@State变量控制横向滚动条的隐藏/显示后，需要调用[controller.refresh()](./arkts-apis-webview-WebviewController.md#refresh)生效。 550> - 通过@State变量频繁动态改变时，建议切换开关变量和Web组件一一对应。 551 552**系统能力：** SystemCapability.Web.Webview.Core 553 554**参数：** 555 556| 参数名 | 类型 | 必填 | 说明 | 557| ------------------- | ------- | ---- | ------------ | 558| horizontalScrollBar | boolean | 是 | 设置是否显示横向滚动条。<br>true表示设置显示横向滚动条，false表示设置不显示横向滚动条。<br>默认值：true。<br>传入undefined与null时为false。 | 559 560**示例：** 561 562 ```ts 563 // xxx.ets 564 import { webview } from '@kit.ArkWeb'; 565 import { BusinessError } from '@kit.BasicServicesKit'; 566 567 @Entry 568 @Component 569 struct WebComponent { 570 controller: webview.WebviewController = new webview.WebviewController(); 571 @State isShow: boolean = true; 572 @State btnMsg: string ="隐藏滚动条"; 573 574 build() { 575 Column() { 576 // 通过@State变量改变横向滚动条的隐藏/显示后，需调用this.controller.refresh()后生效 577 Button('refresh') 578 .onClick(() => { 579 if(this.isShow){ 580 this.isShow = false; 581 this.btnMsg="显示滚动条"; 582 }else{ 583 this.isShow = true; 584 this.btnMsg="隐藏滚动条"; 585 } 586 try { 587 this.controller.refresh(); 588 } catch (error) { 589 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 590 } 591 }).height("10%").width("40%") 592 Web({ src: $rawfile('index.html'), controller: this.controller }).height("90%") 593 .horizontalScrollBarAccess(this.isShow) 594 } 595 } 596 } 597 ``` 598 599 加载的html文件。 600 ```html 601 <!--index.html--> 602 <!DOCTYPE html> 603 <html> 604 <head> 605 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0"> 606 <title>Demo</title> 607 <style> 608 body { 609 width:3000px; 610 height:6000px; 611 padding-right:170px; 612 padding-left:170px; 613 border:5px solid blueviolet; 614 } 615 </style> 616 </head> 617 <body> 618 Scroll Test 619 </body> 620 </html> 621 ``` 622 623## verticalScrollBarAccess<sup>9+</sup> 624 625verticalScrollBarAccess(verticalScrollBar: boolean) 626 627设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。 628 629> **说明：** 630> 631> - 通过@State变量控制纵向滚动条的隐藏/显示后，需要调用controller.refresh()生效。 632> - 通过@State变量频繁动态改变时，建议切换开关变量和Web组件一一对应。 633 634**系统能力：** SystemCapability.Web.Webview.Core 635 636**参数：** 637 638| 参数名 | 类型 | 必填 | 说明 | 639| ----------------- | ------- | ---- | ------------ | 640| verticalScrollBar | boolean | 是 | 设置是否显示纵向滚动条。<br>true表示设置显示纵向滚动条，false表示设置不显示纵向滚动条。<br>默认值：true。<br>传入undefined与null时为false。 | 641 642**示例：** 643 644 ```ts 645 // xxx.ets 646 import { webview } from '@kit.ArkWeb'; 647 import { BusinessError } from '@kit.BasicServicesKit'; 648 649 @Entry 650 @Component 651 struct WebComponent { 652 controller: webview.WebviewController = new webview.WebviewController(); 653 @State isShow: boolean = true; 654 @State btnMsg: string ="隐藏滚动条"; 655 656 build() { 657 Column() { 658 // 通过@State变量改变纵向滚动条的隐藏/显示后，需调用this.controller.refresh()后生效 659 Button(this.btnMsg) 660 .onClick(() => { 661 if(this.isShow){ 662 this.isShow = false; 663 this.btnMsg="显示滚动条"; 664 }else{ 665 this.isShow = true; 666 this.btnMsg="隐藏滚动条"; 667 } 668 try { 669 this.controller.refresh(); 670 } catch (error) { 671 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 672 } 673 }).height("10%").width("40%") 674 Web({ src: $rawfile('index.html'), controller: this.controller }).height("90%") 675 .verticalScrollBarAccess(this.isShow) 676 } 677 } 678 } 679 ``` 680 681 加载的html文件。 682 ```html 683 <!--index.html--> 684 <!DOCTYPE html> 685 <html> 686 <head> 687 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0"> 688 <title>Demo</title> 689 <style> 690 body { 691 width:3000px; 692 height:6000px; 693 padding-right:170px; 694 padding-left:170px; 695 border:5px solid blueviolet; 696 } 697 </style> 698 </head> 699 <body> 700 Scroll Test 701 </body> 702 </html> 703 ``` 704 705## cacheMode 706 707cacheMode(cacheMode: CacheMode) 708 709设置缓存模式。 710 711**系统能力：** SystemCapability.Web.Webview.Core 712 713**参数：** 714 715| 参数名 | 类型 | 必填 | 说明 | 716| --------- | --------------------------- | ---- | --------- | 717| cacheMode | [CacheMode](./arkts-basic-components-web-e.md#cachemode) | 是 | 要设置的缓存模式。 | 718 719**示例：** 720 721 ```ts 722 // xxx.ets 723 import { webview } from '@kit.ArkWeb'; 724 725 @Entry 726 @Component 727 struct WebComponent { 728 controller: webview.WebviewController = new webview.WebviewController(); 729 @State mode: CacheMode = CacheMode.None; 730 731 build() { 732 Column() { 733 Web({ src: 'www.example.com', controller: this.controller }) 734 .cacheMode(this.mode) 735 } 736 } 737 } 738 ``` 739 740## copyOptions<sup>11+</sup> 741 742copyOptions(value: CopyOptions) 743 744设置剪贴板复制范围选项。 745 746**系统能力：** SystemCapability.Web.Webview.Core 747 748**参数：** 749 750| 参数名 | 类型 | 必填 | 说明 | 751| --------- | --------------------------- | ---- | --------- | 752| value | [CopyOptions](../apis-arkui/arkui-ts/ts-appendix-enums.md#copyoptions9) | 是 | 要设置的剪贴板复制范围选项。<br>默认值：`CopyOptions.LocalDevice`。 | 753 754**示例：** 755 756 ```ts 757// xxx.ets 758import { webview } from '@kit.ArkWeb'; 759 760@Entry 761@Component 762struct WebComponent { 763 controller: webview.WebviewController = new webview.WebviewController(); 764 765 build() { 766 Column() { 767 Web({ src: 'www.example.com', controller: this.controller }) 768 .copyOptions(CopyOptions.None) 769 } 770 } 771} 772 ``` 773 774## textZoomRatio<sup>9+</sup> 775 776textZoomRatio(textZoomRatio: number) 777 778设置页面的文本缩放百分比。 779 780**系统能力：** SystemCapability.Web.Webview.Core 781 782**参数：** 783 784| 参数名 | 类型 | 必填 | 说明 | 785| ------------- | ------ | ---- | -------------------------------- | 786| textZoomRatio | number | 是 | 要设置的页面的文本缩放百分比。<br>取值为整数，范围为(0, 2147483647]。<br>默认值：100。 | 787 788**示例：** 789 790 ```ts 791 // xxx.ets 792 import { webview } from '@kit.ArkWeb'; 793 794 @Entry 795 @Component 796 struct WebComponent { 797 controller: webview.WebviewController = new webview.WebviewController(); 798 @State ratio: number = 150; 799 800 build() { 801 Column() { 802 Web({ src: 'www.example.com', controller: this.controller }) 803 .textZoomRatio(this.ratio) 804 } 805 } 806 } 807 ``` 808 809## initialScale<sup>9+</sup> 810 811initialScale(percent: number) 812 813设置整体页面的缩放百分比。 814 815**系统能力：** SystemCapability.Web.Webview.Core 816 817**参数：** 818 819| 参数名 | 类型 | 必填 | 说明 | 820| ------- | ------ | ---- | ----------------------------- | 821| percent | number | 是 | 要设置的整体页面的缩放百分比。<br>取值范围：(0, 1000]。<br>默认值：100。 | 822 823**示例：** 824 825 ```ts 826 // xxx.ets 827 import { webview } from '@kit.ArkWeb'; 828 829 @Entry 830 @Component 831 struct WebComponent { 832 controller: webview.WebviewController = new webview.WebviewController(); 833 @State percent: number = 100; 834 835 build() { 836 Column() { 837 Web({ src: 'www.example.com', controller: this.controller }) 838 .initialScale(this.percent) 839 } 840 } 841 } 842 ``` 843 844## blockNetwork<sup>9+</sup> 845 846blockNetwork(block: boolean) 847 848设置Web组件是否阻止从网络加载资源。 849 850**系统能力：** SystemCapability.Web.Webview.Core 851 852**参数：** 853 854| 参数名 | 类型 | 必填 | 说明 | 855| ----- | ------- | ---- | ------------------- | 856| block | boolean | 是 | 设置Web组件是否允许从网络加载资源。<br>true表示不允许从网络加载资源，false表示允许从网络加载资源。<br>传入undefined或null时不允许从网络加载资源。 | 857 858**示例：** 859 860 ```ts 861 // xxx.ets 862 import { webview } from '@kit.ArkWeb'; 863 864 @Entry 865 @Component 866 struct WebComponent { 867 controller: webview.WebviewController = new webview.WebviewController(); 868 @State block: boolean = true; 869 870 build() { 871 Column() { 872 Web({ src: 'www.example.com', controller: this.controller }) 873 .blockNetwork(this.block) 874 } 875 } 876 } 877 ``` 878 879## defaultFixedFontSize<sup>9+</sup> 880 881defaultFixedFontSize(size: number) 882 883设置网页的默认等宽字体大小。 884 885**系统能力：** SystemCapability.Web.Webview.Core 886 887**参数：** 888 889| 参数名 | 类型 | 必填 | 说明 | 890| ---- | ------ | ---- | ---------------------------------------- | 891| size | number | 是 | 设置网页的默认等宽字体大小，单位px。<br>输入值的范围为[-2^31, 2^31-1]，实际渲染时超过72px的值按照72px进行渲染，低于1px的值按照1px进行渲染。<br>默认值：13。 | 892 893**示例：** 894 895 ```ts 896 // xxx.ets 897 import { webview } from '@kit.ArkWeb'; 898 899 @Entry 900 @Component 901 struct WebComponent { 902 controller: webview.WebviewController = new webview.WebviewController(); 903 @State fontSize: number = 16; 904 905 build() { 906 Column() { 907 Web({ src: 'www.example.com', controller: this.controller }) 908 .defaultFixedFontSize(this.fontSize) 909 } 910 } 911 } 912 ``` 913 914## defaultFontSize<sup>9+</sup> 915 916defaultFontSize(size: number) 917 918设置网页的默认字体大小。 919 920**系统能力：** SystemCapability.Web.Webview.Core 921 922**参数：** 923 924| 参数名 | 类型 | 必填 | 说明 | 925| ---- | ------ | ---- | ---------------------------------------- | 926| size | number | 是 | 设置网页的默认字体大小，单位px。<br>输入值的范围为[-2^31, 2^31-1]，实际渲染时超过72px的值按照72px进行渲染，低于1px的值按照1px进行渲染。<br>默认值：16。 | 927 928**示例：** 929 930 ```ts 931 // xxx.ets 932 import { webview } from '@kit.ArkWeb'; 933 934 @Entry 935 @Component 936 struct WebComponent { 937 controller: webview.WebviewController = new webview.WebviewController(); 938 @State fontSize: number = 13; 939 940 build() { 941 Column() { 942 Web({ src: 'www.example.com', controller: this.controller }) 943 .defaultFontSize(this.fontSize) 944 } 945 } 946 } 947 ``` 948 949## minFontSize<sup>9+</sup> 950 951minFontSize(size: number) 952 953设置网页字体大小最小值。 954 955**系统能力：** SystemCapability.Web.Webview.Core 956 957**参数：** 958 959| 参数名 | 类型 | 必填 | 说明 | 960| ---- | ------ | ---- | ---------------------------------------- | 961| size | number | 是 | 设置网页字体大小最小值，单位px。<br>输入值的范围为[-2^31, 2^31-1]，实际渲染时超过72px的值按照72px进行渲染，低于1px的值按照1px进行渲染。<br>默认值：8。 | 962 963**示例：** 964 965 ```ts 966 // xxx.ets 967 import { webview } from '@kit.ArkWeb'; 968 969 @Entry 970 @Component 971 struct WebComponent { 972 controller: webview.WebviewController = new webview.WebviewController(); 973 @State fontSize: number = 13; 974 975 build() { 976 Column() { 977 Web({ src: 'www.example.com', controller: this.controller }) 978 .minFontSize(this.fontSize) 979 } 980 } 981 } 982 ``` 983 984## minLogicalFontSize<sup>9+</sup> 985 986minLogicalFontSize(size: number) 987 988设置网页逻辑字体大小最小值。 989 990**系统能力：** SystemCapability.Web.Webview.Core 991 992**参数：** 993 994| 参数名 | 类型 | 必填 | 说明 | 995| ---- | ------ | ---- | ---------------------------------------- | 996| size | number | 是 | 设置网页逻辑字体大小最小值，单位px。<br>输入值的范围为[-2^31, 2^31-1]，实际渲染时超过72px的值按照72px进行渲染，低于1px的值按照1px进行渲染。<br>默认值：8。 | 997 998**示例：** 999 1000 ```ts 1001 // xxx.ets 1002 import { webview } from '@kit.ArkWeb'; 1003 1004 @Entry 1005 @Component 1006 struct WebComponent { 1007 controller: webview.WebviewController = new webview.WebviewController(); 1008 @State fontSize: number = 13; 1009 1010 build() { 1011 Column() { 1012 Web({ src: 'www.example.com', controller: this.controller }) 1013 .minLogicalFontSize(this.fontSize) 1014 } 1015 } 1016 } 1017 ``` 1018 1019## webFixedFont<sup>9+</sup> 1020 1021webFixedFont(family: string) 1022 1023设置网页的fixed font字体库。 1024 1025**系统能力：** SystemCapability.Web.Webview.Core 1026 1027**参数：** 1028 1029| 参数名 | 类型 | 必填 | 说明 | 1030| ------ | ------ | ---- | ------------------------ | 1031| family | string | 是 | 设置网页的fixed font字体库。<br>默认值：monospace。 | 1032 1033**示例：** 1034 1035 ```ts 1036 // xxx.ets 1037 import { webview } from '@kit.ArkWeb'; 1038 1039 @Entry 1040 @Component 1041 struct WebComponent { 1042 controller: webview.WebviewController = new webview.WebviewController(); 1043 @State family: string = "monospace"; 1044 1045 build() { 1046 Column() { 1047 Web({ src: 'www.example.com', controller: this.controller }) 1048 .webFixedFont(this.family) 1049 } 1050 } 1051 } 1052 ``` 1053 1054## webSansSerifFont<sup>9+</sup> 1055 1056webSansSerifFont(family: string) 1057 1058设置网页的sans-serif font字体库。 1059 1060**系统能力：** SystemCapability.Web.Webview.Core 1061 1062**参数：** 1063 1064| 参数名 | 类型 | 必填 | 说明 | 1065| ------ | ------ | ---- | ------------------------ | 1066| family | string | 是 | 设置网页的sans-serif font字体库。<br>默认值：sans-serif。 | 1067 1068**示例：** 1069 1070 ```ts 1071 // xxx.ets 1072 import { webview } from '@kit.ArkWeb'; 1073 1074 @Entry 1075 @Component 1076 struct WebComponent { 1077 controller: webview.WebviewController = new webview.WebviewController(); 1078 @State family: string = "sans-serif"; 1079 1080 build() { 1081 Column() { 1082 Web({ src: 'www.example.com', controller: this.controller }) 1083 .webSansSerifFont(this.family) 1084 } 1085 } 1086 } 1087 ``` 1088 1089## webSerifFont<sup>9+</sup> 1090 1091webSerifFont(family: string) 1092 1093设置网页的serif font字体库。 1094 1095**系统能力：** SystemCapability.Web.Webview.Core 1096 1097**参数：** 1098 1099| 参数名 | 类型 | 必填 | 说明 | 1100| ------ | ------ | ---- | ------------------------ | 1101| family | string | 是 | 设置网页的serif font字体库。<br>默认值：serif。 | 1102 1103**示例：** 1104 1105 ```ts 1106 // xxx.ets 1107 import { webview } from '@kit.ArkWeb'; 1108 1109 @Entry 1110 @Component 1111 struct WebComponent { 1112 controller: webview.WebviewController = new webview.WebviewController(); 1113 @State family: string = "serif"; 1114 1115 build() { 1116 Column() { 1117 Web({ src: 'www.example.com', controller: this.controller }) 1118 .webSerifFont(this.family) 1119 } 1120 } 1121 } 1122 ``` 1123 1124## webStandardFont<sup>9+</sup> 1125 1126webStandardFont(family: string) 1127 1128设置网页的standard font字体库。 1129 1130**系统能力：** SystemCapability.Web.Webview.Core 1131 1132**参数：** 1133 1134| 参数名 | 类型 | 必填 | 说明 | 1135| ------ | ------ | ---- | ---------------------- | 1136| family | string | 是 | 设置网页的standard font字体库。<br>默认值：sans-serif。 | 1137 1138**示例：** 1139 1140 ```ts 1141 // xxx.ets 1142 import { webview } from '@kit.ArkWeb'; 1143 1144 @Entry 1145 @Component 1146 struct WebComponent { 1147 controller: webview.WebviewController = new webview.WebviewController(); 1148 @State family: string = "sans-serif"; 1149 1150 build() { 1151 Column() { 1152 Web({ src: 'www.example.com', controller: this.controller }) 1153 .webStandardFont(this.family) 1154 } 1155 } 1156 } 1157 ``` 1158 1159## webFantasyFont<sup>9+</sup> 1160 1161webFantasyFont(family: string) 1162 1163设置网页的fantasy font字体库。 1164 1165**系统能力：** SystemCapability.Web.Webview.Core 1166 1167**参数：** 1168 1169| 参数名 | 类型 | 必填 | 说明 | 1170| ------ | ------ | ---- | ------------------------ | 1171| family | string | 是 | 设置网页的fantasy font字体库。<br>默认值：fantasy。 | 1172 1173**示例：** 1174 1175 ```ts 1176 // xxx.ets 1177 import { webview } from '@kit.ArkWeb'; 1178 @Entry 1179 @Component 1180 struct WebComponent { 1181 controller: webview.WebviewController = new webview.WebviewController(); 1182 @State family: string = "fantasy"; 1183 1184 build() { 1185 Column() { 1186 Web({ src: 'www.example.com', controller: this.controller }) 1187 .webFantasyFont(this.family) 1188 } 1189 } 1190 } 1191 ``` 1192 1193## webCursiveFont<sup>9+</sup> 1194 1195webCursiveFont(family: string) 1196 1197设置网页的cursive font字体库。 1198 1199**系统能力：** SystemCapability.Web.Webview.Core 1200 1201**参数：** 1202 1203| 参数名 | 类型 | 必填 | 说明 | 1204| ------ | ------ | ---- | ------------------------ | 1205| family | string | 是 | 设置网页的cursive font字体库。<br>默认值：cursive。 | 1206 1207**示例：** 1208 1209 ```ts 1210 // xxx.ets 1211 import { webview } from '@kit.ArkWeb'; 1212 1213 @Entry 1214 @Component 1215 struct WebComponent { 1216 controller: webview.WebviewController = new webview.WebviewController(); 1217 @State family: string = "cursive"; 1218 1219 build() { 1220 Column() { 1221 Web({ src: 'www.example.com', controller: this.controller }) 1222 .webCursiveFont(this.family) 1223 } 1224 } 1225 } 1226 ``` 1227 1228## darkMode<sup>9+</sup> 1229 1230darkMode(mode: WebDarkMode) 1231 1232设置Web深色模式。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合[forceDarkAccess](#forcedarkaccess9)使用。深色模式具体用法可参考[Web深色模式适配](../../web/web-set-dark-mode.md)。 1233 1234**系统能力：** SystemCapability.Web.Webview.Core 1235 1236**参数：** 1237 1238| 参数名 | 类型 | 必填 | 说明 | 1239| ---- | -------------------------------- | ---- | ------------------------ | 1240| mode | [WebDarkMode](./arkts-basic-components-web-e.md#webdarkmode9) | 是 | 设置Web的深色模式为关闭、开启或跟随系统。<br>默认值：`WebDarkMode.Off`。 | 1241 1242**示例：** 1243 1244 ```ts 1245 // xxx.ets 1246 import { webview } from '@kit.ArkWeb'; 1247 1248 @Entry 1249 @Component 1250 struct WebComponent { 1251 controller: webview.WebviewController = new webview.WebviewController(); 1252 @State mode: WebDarkMode = WebDarkMode.On; 1253 1254 build() { 1255 Column() { 1256 Web({ src: 'www.example.com', controller: this.controller }) 1257 .darkMode(this.mode) 1258 } 1259 } 1260 } 1261 ``` 1262 1263## forceDarkAccess<sup>9+</sup> 1264 1265forceDarkAccess(access: boolean) 1266 1267设置网页是否开启强制深色模式。该属性仅在[darkMode](#darkmode9)开启深色模式时生效。 1268 1269**系统能力：** SystemCapability.Web.Webview.Core 1270 1271**参数：** 1272 1273| 参数名 | 类型 | 必填 | 说明 | 1274| ------ | ------- | ---- | --------------- | 1275| access | boolean | 是 | 设置网页是否开启强制深色模式。<br>true表示设置网页开启强制深色模式，false表示设置网页不开启强制深色模式。<br>默认值：false。 | 1276 1277**示例：** 1278 1279 ```ts 1280 // xxx.ets 1281 import { webview } from '@kit.ArkWeb'; 1282 1283 @Entry 1284 @Component 1285 struct WebComponent { 1286 controller: webview.WebviewController = new webview.WebviewController(); 1287 @State mode: WebDarkMode = WebDarkMode.On; 1288 @State access: boolean = true; 1289 1290 build() { 1291 Column() { 1292 Web({ src: 'www.example.com', controller: this.controller }) 1293 .darkMode(this.mode) 1294 .forceDarkAccess(this.access) 1295 } 1296 } 1297 } 1298 ``` 1299 1300## pinchSmooth<sup>9+</sup> 1301 1302pinchSmooth(isEnabled: boolean) 1303 1304设置网页是否开启捏合流畅模式。 1305 1306**系统能力：** SystemCapability.Web.Webview.Core 1307 1308**参数：** 1309 1310| 参数名 | 类型 | 必填 | 说明 | 1311| --------- | ------- | ---- | ------------- | 1312| isEnabled | boolean | 是 | 网页是否开启捏合流畅模式。<br>true表示设置网页开启捏合流畅模式，false表示设置网页不开启捏合流畅模式。<br>默认值：false。 | 1313 1314**示例：** 1315 1316 ```ts 1317 // xxx.ets 1318 import { webview } from '@kit.ArkWeb'; 1319 1320 @Entry 1321 @Component 1322 struct WebComponent { 1323 controller: webview.WebviewController = new webview.WebviewController(); 1324 1325 build() { 1326 Column() { 1327 Web({ src: 'www.example.com', controller: this.controller }) 1328 .pinchSmooth(true) 1329 } 1330 } 1331 } 1332 ``` 1333 1334## allowWindowOpenMethod<sup>10+</sup> 1335 1336allowWindowOpenMethod(flag: boolean) 1337 1338设置网页是否可以通过JavaScript自动打开新窗口。 1339 1340> **说明：** 1341> 1342> - 该属性仅在[javaScriptAccess](#javascriptaccess)开启时生效。 1343> - 该属性在[multiWindowAccess](#multiwindowaccess9)开启时打开新窗口，关闭时打开本地窗口。 1344> - 该属性的默认值与系统属性`persist.web.allowWindowOpenMethod.enabled`保持一致，如果未设置系统属性则默认值为false。 1345> - 通过`hdc shell param get persist.web.allowWindowOpenMethod.enabled` 检查是否开启系统属性`persist.web.allowWindowOpenMethod.enabled`。若属性值为1代表开启系统属性；若属性值为0或不存在，代表未开启系统属性，可通过命令`hdc shell param set persist.web.allowWindowOpenMethod.enabled 1` 开启系统属性。 1346 1347**系统能力：** SystemCapability.Web.Webview.Core 1348 1349**参数：** 1350 1351| 参数名 | 类型 | 必填 | 说明 | 1352| ---- | ------- | ---- | ------------------------- | 1353| flag | boolean | 是 | <br>true表示网页可以通过JavaScript自动打开新窗口，该属性为false时，用户行为仍可通过JavaScript自动打开新窗口，但非用户行为不能通过JavaScript自动打开新窗口。<br>此处的用户行为是指，在用户对Web组件进行点击等操作后，同时在5秒内请求打开新窗口（window.open）的行为。<br>默认值与系统属性关联，当系统属性`persist.web.allowWindowOpenMethod.enabled`为true时，默认值为true，如果未设置系统属性则默认值为false。 | 1354 1355**示例：** 1356 1357 ```ts 1358 // xxx.ets 1359import { webview } from '@kit.ArkWeb'; 1360 1361// 在同一界面有两个Web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。 1362@CustomDialog 1363struct NewWebViewComp { 1364 controller?: CustomDialogController; 1365 webviewController1: webview.WebviewController = new webview.WebviewController(); 1366 1367 build() { 1368 Column() { 1369 Web({ src: "", controller: this.webviewController1 }) 1370 .javaScriptAccess(true) 1371 .multiWindowAccess(false) 1372 .onWindowExit(() => { 1373 console.info("NewWebViewComp onWindowExit"); 1374 if (this.controller) { 1375 this.controller.close(); 1376 } 1377 }) 1378 .onActivateContent(() => { 1379 //该Web需要展示到前台，建议应用在这里进行tab或window切换的动作 1380 console.info("NewWebViewComp onActivateContent") 1381 }) 1382 } 1383 } 1384} 1385 1386@Entry 1387@Component 1388struct WebComponent { 1389 controller: webview.WebviewController = new webview.WebviewController(); 1390 dialogController: CustomDialogController | null = null; 1391 1392 build() { 1393 Column() { 1394 Web({ src: $rawfile("index.html"), controller: this.controller }) 1395 .javaScriptAccess(true) 1396 // 需要使能multiWindowAccess 1397 .multiWindowAccess(true) 1398 .allowWindowOpenMethod(true) 1399 .onWindowNew((event) => { 1400 if (this.dialogController) { 1401 this.dialogController.close() 1402 } 1403 let popController: webview.WebviewController = new webview.WebviewController(); 1404 this.dialogController = new CustomDialogController({ 1405 builder: NewWebViewComp({ webviewController1: popController }), 1406 // isModal设置为false，防止新窗口被销毁而无法触发onActivateContent回调 1407 isModal: false 1408 }) 1409 this.dialogController.open(); 1410 // 将新窗口对应WebviewController返回给Web内核。 1411 // 若不调用event.handler.setWebController接口，会造成render进程阻塞。 1412 // 如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。 1413 event.handler.setWebController(popController); 1414 }) 1415 } 1416 } 1417} 1418 ``` 1419**HTML示例：** 1420 1421```html 1422<!-- index.html --> 1423<!DOCTYPE html> 1424<html> 1425<body> 1426<div> 1427 <button type="button" onclick="delayOpenwindow(5000)">delayOpenwindow_5s</button> 1428</div> 1429 1430<script> 1431 function openwindowAll(){ 1432 open("https://www.example.com","_blank","height=400,width=600,top=100,left=100,scrollbars=no") 1433 } 1434 function delayOpenwindow(t){ 1435 setTimeout(openwindowAll, t); 1436 } 1437</script> 1438</body> 1439</html> 1440``` 1441 1442## mediaOptions<sup>10+</sup> 1443 1444mediaOptions(options: WebMediaOptions) 1445 1446设置Web媒体播放的策略，其中包括：Web中的音频在重新获焦后能够自动续播的有效期、应用内多个Web实例的音频是否独占。 1447 1448> **说明：** 1449> 1450> - 同一Web实例中的多个音频均视为同一音频。 1451> - 该媒体播放策略将同时管控有声视频。 1452> - 建议为所有Web组件设置相同的[audioExclusive](./arkts-basic-components-web-i.md#webmediaoptions10)值。 1453> - 音视频互相打断在应用内和应用间生效，续播只在应用间生效。 1454 1455**系统能力：** SystemCapability.Web.Webview.Core 1456 1457**参数：** 1458 1459| 参数名 | 类型 | 必填 | 说明 | 1460| ------- | ------------------------------------- | ---- | ---------------------------------------- | 1461| options | [WebMediaOptions](./arkts-basic-components-web-i.md#webmediaoptions10) | 是 | 设置Web的媒体策略。<br>属性参数更新后需重新播放音频方可生效。<br>默认值：`{resumeInterval: 0, audioExclusive: true}` | 1462 1463**示例：** 1464 1465 ```ts 1466 // xxx.ets 1467 import { webview } from '@kit.ArkWeb'; 1468 1469 @Entry 1470 @Component 1471 struct WebComponent { 1472 controller: webview.WebviewController = new webview.WebviewController(); 1473 @State options: WebMediaOptions = {resumeInterval: 10, audioExclusive: true}; 1474 1475 build() { 1476 Column() { 1477 Web({ src: 'www.example.com', controller: this.controller }) 1478 .mediaOptions(this.options) 1479 } 1480 } 1481 } 1482 ``` 1483 1484## javaScriptOnDocumentStart<sup>11+</sup> 1485 1486javaScriptOnDocumentStart(scripts: Array\<ScriptItem>) 1487 1488将JavaScript脚本注入到Web组件中，当指定页面或者文档开始加载时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1489 1490> **说明：** 1491> 1492> - 网页文档根元素（HTML Element）创建后、但尚未加载任何其他内容之前注入脚本。 1493> 1494> - 该脚本按照字典序执行，非数组本身顺序，若需数组本身顺序，建议使用[runJavaScriptOnDocumentStart](#runjavascriptondocumentstart15)接口。 1495> 1496> - 不建议与[runJavaScriptOnDocumentStart](#runjavascriptondocumentstart15)同时使用。 1497> 1498> - 内容相同的脚本多次注入时将被静默去重，不展示，不提醒，使用首次注入时的scriptRules。 1499 1500**系统能力：** SystemCapability.Web.Webview.Core 1501 1502**参数：** 1503 1504| 参数名 | 类型 | 必填 | 说明 | 1505| ------- | ----------------------------------- | ---- | ------------------ | 1506| scripts | Array\<[ScriptItem](./arkts-basic-components-web-i.md#scriptitem11)> | 是 | 需要注入的ScriptItem数组。 | 1507 1508**ets示例：** 1509 1510 ```ts 1511 // xxx.ets 1512 import { webview } from '@kit.ArkWeb'; 1513 1514 @Entry 1515 @Component 1516 struct Index { 1517 controller: webview.WebviewController = new webview.WebviewController(); 1518 private localStorage: string = 1519 "if (typeof(Storage) !== 'undefined') {" + 1520 " localStorage.setItem('color', 'Red');" + 1521 "}"; 1522 @State scripts: Array<ScriptItem> = [ 1523 { script: this.localStorage, scriptRules: ["*"] } 1524 ]; 1525 1526 build() { 1527 Column({ space: 20 }) { 1528 Web({ src: $rawfile('index.html'), controller: this.controller }) 1529 .javaScriptAccess(true) 1530 .domStorageAccess(true) 1531 .backgroundColor(Color.Grey) 1532 .javaScriptOnDocumentStart(this.scripts) 1533 .width('100%') 1534 .height('100%') 1535 } 1536 } 1537 } 1538 ``` 1539**HTML示例：** 1540 1541```html 1542<!-- index.html --> 1543<!DOCTYPE html> 1544<html> 1545 <head> 1546 <meta charset="utf-8"> 1547 </head> 1548 <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 1549 Hello world! 1550 <div id="result"></div> 1551 </body> 1552 <script type="text/javascript"> 1553 function bodyOnLoadLocalStorage() { 1554 if (typeof(Storage) !== 'undefined') { 1555 document.getElementById('result').innerHTML = localStorage.getItem('color'); 1556 } else { 1557 document.getElementById('result').innerHTML = 'Your browser does not support localStorage.'; 1558 } 1559 } 1560 </script> 1561</html> 1562``` 1563 1564## javaScriptOnDocumentEnd<sup>11+</sup> 1565 1566javaScriptOnDocumentEnd(scripts: Array\<ScriptItem>) 1567 1568将JavaScript脚本注入到Web组件中，当指定页面或者文档加载完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1569 1570> **说明：** 1571> 1572> - 该脚本将在页面的任何JavaScript代码之后运行，并且DOM树此时已经加载、渲染完毕。 1573> 1574> - 该脚本按照字典序执行，非数组本身顺序。 1575> 1576> - 不建议与[runJavaScriptOnDocumentEnd](#runjavascriptondocumentend15)同时使用。 1577> 1578> - 内容相同的脚本多次注入时将被静默去重，不展示，不提醒，使用首次注入时的scriptRules。 1579 1580**系统能力：** SystemCapability.Web.Webview.Core 1581 1582**参数：** 1583 1584| 参数名 | 类型 | 必填 | 说明 | 1585| ------- | ----------------------------------- | ---- | ------------------ | 1586| scripts | Array\<[ScriptItem](./arkts-basic-components-web-i.md#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 1587 1588**示例：** 1589 1590 ```ts 1591// xxx.ets 1592import { webview } from '@kit.ArkWeb'; 1593 1594@Entry 1595@Component 1596struct Index { 1597 controller: webview.WebviewController = new webview.WebviewController(); 1598 private jsStr: string = 1599 "window.document.getElementById(\"result\").innerHTML = 'this is msg from javaScriptOnDocumentEnd'"; 1600 @State scripts: Array<ScriptItem> = [ 1601 { script: this.jsStr, scriptRules: ["*"] } 1602 ]; 1603 1604 build() { 1605 Column({ space: 20 }) { 1606 Web({ src: $rawfile('index.html'), controller: this.controller }) 1607 .javaScriptAccess(true) 1608 .domStorageAccess(true) 1609 .backgroundColor(Color.Grey) 1610 .javaScriptOnDocumentEnd(this.scripts) 1611 .width('100%') 1612 .height('100%') 1613 } 1614 } 1615} 1616 ``` 1617 1618```html 1619<!--index.html--> 1620<!DOCTYPE html> 1621<html> 1622<head> 1623 <meta charset="utf-8"> 1624</head> 1625<body style="font-size: 30px;"> 1626Hello world! 1627<div id="result">test msg</div> 1628</body> 1629</html> 1630``` 1631 1632## runJavaScriptOnDocumentStart<sup>15+</sup> 1633 1634runJavaScriptOnDocumentStart(scripts: Array\<ScriptItem>) 1635 1636将JavaScript脚本注入到Web组件中，当指定页面或者文档开始加载时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1637 1638> **说明：** 1639> 1640> - 网页文档根元素（HTML Element）创建后、但尚未加载任何其他内容之前注入脚本。 1641> 1642> - 该脚本按照数组本身顺序执行。 1643> 1644> - 不建议与[javaScriptOnDocumentStart](#javascriptondocumentstart11)同时使用。 1645> 1646> - 内容相同的脚本多次注入时将被静默去重，不展示，不提醒，使用首次注入时的scriptRules。 1647 1648**系统能力：** SystemCapability.Web.Webview.Core 1649 1650**参数：** 1651 1652| 参数名 | 类型 | 必填 | 说明 | 1653| ------- | ----------------------------------- | ---- | ------------------ | 1654| scripts | Array\<[ScriptItem](./arkts-basic-components-web-i.md#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 1655 1656**ets示例：** 1657 1658 ```ts 1659 // xxx.ets 1660 import { webview } from '@kit.ArkWeb'; 1661 1662 @Entry 1663 @Component 1664 struct Index { 1665 controller: webview.WebviewController = new webview.WebviewController(); 1666 private localStorage: string = 1667 "if (typeof(Storage) !== 'undefined') {" + 1668 " localStorage.setItem('color', 'Red');" + 1669 "}"; 1670 @State scripts: Array<ScriptItem> = [ 1671 { script: this.localStorage, scriptRules: ["*"] } 1672 ]; 1673 1674 build() { 1675 Column({ space: 20 }) { 1676 Web({ src: $rawfile('index.html'), controller: this.controller }) 1677 .javaScriptAccess(true) 1678 .domStorageAccess(true) 1679 .backgroundColor(Color.Grey) 1680 .runJavaScriptOnDocumentStart(this.scripts) 1681 .width('100%') 1682 .height('100%') 1683 } 1684 } 1685 } 1686 ``` 1687**HTML示例：** 1688 1689```html 1690<!-- index.html --> 1691<!DOCTYPE html> 1692<html> 1693 <head> 1694 <meta charset="utf-8"> 1695 </head> 1696 <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 1697 Hello world! 1698 <div id="result"></div> 1699 </body> 1700 <script type="text/javascript"> 1701 function bodyOnLoadLocalStorage() { 1702 if (typeof(Storage) !== 'undefined') { 1703 document.getElementById('result').innerHTML = localStorage.getItem('color'); 1704 } else { 1705 document.getElementById('result').innerHTML = 'Your browser does not support localStorage.'; 1706 } 1707 } 1708 </script> 1709</html> 1710``` 1711 1712## runJavaScriptOnDocumentEnd<sup>15+</sup> 1713 1714runJavaScriptOnDocumentEnd(scripts: Array\<ScriptItem>) 1715 1716将JavaScript脚本注入到Web组件中，当指定页面或者文档加载完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1717 1718> **说明：** 1719> 1720> - 该脚本将在页面的任何JavaScript代码之后运行，并且DOM树此时已经加载、渲染完毕。 1721> 1722> - 该脚本按照数组本身顺序执行。 1723> 1724> - 不建议与[javaScriptOnDocumentEnd](#javascriptondocumentend11)同时使用。 1725> 1726> - 内容相同的脚本多次注入时将被静默去重，不展示，不提醒，使用首次注入时的scriptRules。 1727 1728**系统能力：** SystemCapability.Web.Webview.Core 1729 1730**参数：** 1731 1732| 参数名 | 类型 | 必填 | 说明 | 1733| ------- | ----------------------------------- | ---- | ------------------ | 1734| scripts | Array\<[ScriptItem](./arkts-basic-components-web-i.md#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 1735 1736**示例：** 1737 1738 ```ts 1739// xxx.ets 1740import { webview } from '@kit.ArkWeb'; 1741 1742@Entry 1743@Component 1744struct Index { 1745 controller: webview.WebviewController = new webview.WebviewController(); 1746 private jsStr: string = 1747 "window.document.getElementById(\"result\").innerHTML = 'this is msg from runJavaScriptOnDocumentEnd'"; 1748 @State scripts: Array<ScriptItem> = [ 1749 { script: this.jsStr, scriptRules: ["*"] } 1750 ]; 1751 1752 build() { 1753 Column({ space: 20 }) { 1754 Web({ src: $rawfile('index.html'), controller: this.controller }) 1755 .javaScriptAccess(true) 1756 .domStorageAccess(true) 1757 .backgroundColor(Color.Grey) 1758 .runJavaScriptOnDocumentEnd(this.scripts) 1759 .width('100%') 1760 .height('100%') 1761 } 1762 } 1763} 1764 ``` 1765 1766```html 1767<!--index.html--> 1768<!DOCTYPE html> 1769<html> 1770<head> 1771 <meta charset="utf-8"> 1772</head> 1773<body style="font-size: 30px;"> 1774Hello world! 1775<div id="result">test msg</div> 1776</body> 1777</html> 1778``` 1779 1780## runJavaScriptOnHeadEnd<sup>15+</sup> 1781 1782runJavaScriptOnHeadEnd(scripts: Array\<ScriptItem>) 1783 1784将JavaScript脚本注入到Web组件中，当页面DOM树head标签解析完成时，该脚本将在其来源与scriptRules匹配的任何页面中执行。 1785 1786> **说明：** 1787> 1788> - 该脚本按照数组本身顺序执行。 1789> 1790> - 内容相同的脚本多次注入时将被静默去重，不展示，不提醒，使用首次注入时的scriptRules。 1791 1792**系统能力：** SystemCapability.Web.Webview.Core 1793 1794**参数：** 1795 1796| 参数名 | 类型 | 必填 | 说明 | 1797| ------- | ----------------------------------- | ---- | ------------------ | 1798| scripts | Array\<[ScriptItem](./arkts-basic-components-web-i.md#scriptitem11)> | 是 | 需要注入的ScriptItem数组 | 1799 1800**示例：** 1801 1802 ```ts 1803// xxx.ets 1804import { webview } from '@kit.ArkWeb'; 1805 1806@Entry 1807@Component 1808struct Index { 1809 controller: webview.WebviewController = new webview.WebviewController(); 1810 private jsStr: string = 1811 "window.document.getElementById(\"result\").innerHTML = 'this is msg from runJavaScriptOnHeadEnd'"; 1812 @State scripts: Array<ScriptItem> = [ 1813 { script: this.jsStr, scriptRules: ["*"] } 1814 ]; 1815 1816 build() { 1817 Column({ space: 20 }) { 1818 Web({ src: $rawfile('index.html'), controller: this.controller }) 1819 .javaScriptAccess(true) 1820 .domStorageAccess(true) 1821 .backgroundColor(Color.Grey) 1822 .runJavaScriptOnHeadEnd(this.scripts) 1823 .width('100%') 1824 .height('100%') 1825 } 1826 } 1827} 1828 ``` 1829 1830```html 1831<!--index.html--> 1832<!DOCTYPE html> 1833<html> 1834<head> 1835 <meta charset="utf-8"> 1836</head> 1837<body style="font-size: 30px;"> 1838Hello world! 1839<div id="result">test msg</div> 1840</body> 1841</html> 1842``` 1843 1844## layoutMode<sup>11+</sup> 1845 1846layoutMode(mode: WebLayoutMode) 1847 1848设置Web布局模式。常见问题请参考[Web组件大小自适应页面内容布局](../../web/web-fit-content.md)。 1849 1850> **说明：** 1851> 1852> 目前只支持两种Web布局模式，分别为Web布局跟随系统（`WebLayoutMode.NONE`）和Web组件高度基于前端页面高度的自适应网页布局（`WebLayoutMode.FIT_CONTENT`）。 1853> 1854> Web组件高度基于前端页面自适应布局有如下限制： 1855> - 如果Web组件宽或长度超过7680px，请在Web组件创建的时候指定`RenderMode.SYNC_RENDER`模式，否则会整个白屏。 1856> - Web组件创建后不支持动态切换layoutMode模式。 1857> - Web组件宽高规格：指定`RenderMode.ASYNC_RENDER`模式时，分别不超过7680px。 1858> - 频繁更改页面宽高会触发Web组件重新布局，影响体验。 1859> - 不支持瀑布流网页（下拉到底部加载更多）。 1860> - 不支持宽度自适应，仅支持高度自适应。 1861> - 由于高度自适应网页高度，您无法通过修改组件高度属性来修改组件高度。 1862 1863**系统能力：** SystemCapability.Web.Webview.Core 1864 1865**参数：** 1866 1867| 参数名 | 类型 | 必填 | 说明 | 1868| ---- | ------------------------------------- | ---- | --------------------- | 1869| mode | [WebLayoutMode](./arkts-basic-components-web-e.md#weblayoutmode11) | 是 | 设置web布局模式，跟随系统或自适应布局。<br>默认值：`WebLayoutMode.NONE。` | 1870 1871**示例：** 1872 1873 1、指明layoutMode为`WebLayoutMode.FIT_CONTENT`模式，为避免默认渲染模式下(`RenderMode.ASYNC_RENDER`)视口高度超过7680px导致页面渲染出错，需要显式指明渲染模式(`RenderMode.SYNC_RENDER`)。 1874 ```ts 1875 // xxx.ets 1876 import { webview } from '@kit.ArkWeb'; 1877 1878 @Entry 1879 @Component 1880 struct WebComponent { 1881 controller: webview.WebviewController = new webview.WebviewController(); 1882 mode: WebLayoutMode = WebLayoutMode.FIT_CONTENT; 1883 1884 build() { 1885 Column() { 1886 Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER }) 1887 .layoutMode(this.mode) 1888 } 1889 } 1890 } 1891 ``` 1892 1893 2、指明layoutMode为`WebLayoutMode.FIT_CONTENT`模式，为避免嵌套滚动场景下，Web滚动到边缘时会优先触发过滚动的过界回弹效果影响用户体验，建议指定[overScrollMode](#overscrollmode11)为`OverScrollMode.NEVER`。 1894 ```ts 1895 // xxx.ets 1896 import { webview } from '@kit.ArkWeb'; 1897 1898 @Entry 1899 @Component 1900 struct WebComponent { 1901 controller: webview.WebviewController = new webview.WebviewController(); 1902 layoutMode: WebLayoutMode = WebLayoutMode.FIT_CONTENT; 1903 @State overScrollMode: OverScrollMode = OverScrollMode.NEVER; 1904 1905 build() { 1906 Column() { 1907 Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER }) 1908 .layoutMode(this.layoutMode) 1909 .overScrollMode(this.overScrollMode) 1910 } 1911 } 1912 } 1913 ``` 1914 1915## nestedScroll<sup>11+</sup> 1916 1917nestedScroll(value: NestedScrollOptions | NestedScrollOptionsExt) 1918 1919调用以设置嵌套滚动选项。 1920 1921> **说明：** 1922> 1923> - 可以设置上下左右四个方向，或者设置向前、向后两个方向的嵌套滚动模式，实现与父组件的滚动联动。 1924> - 支持嵌套滚动的容器：[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)。 1925> - 支持嵌套滚动的输入事件：使用手势、鼠标、触控板。 1926> - 嵌套滚动场景下，由于Web滚动到边缘时会优先触发过滚动的过界回弹效果，建议设置[overScrollMode](#overscrollmode11)为`OverScrollMode.NEVER`，避免影响此场景的用户体验。 1927 1928**系统能力：** SystemCapability.Web.Webview.Core 1929 1930**参数：** 1931 1932| 参数名 | 类型 | 必填 | 说明 | 1933| ----- | ---------------------------------------- | ---- | ---------------- | 1934| value | [NestedScrollOptions](../apis-arkui/arkui-ts/ts-container-scrollable-common.md#nestedscrolloptions10对象说明) \| [NestedScrollOptionsExt](./arkts-basic-components-web-i.md#nestedscrolloptionsext14)<sup>14+</sup> | 是 | 可滚动组件滚动时的嵌套滚动选项。<br> value为NestedScrollOptions（向前、向后两个方向）类型时，scrollForward、scrollBackward默认滚动选项为[NestedScrollMode.SELF_FIRST](../apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10)。 <br> value为NestedScrollOptionsExt（上下左右四个方向）类型时，scrollUp、scrollDown、scrollLeft、scrollRight默认滚动选项为NestedScrollMode.SELF_FIRST。 1935 1936**示例：** 1937 1938 ```ts 1939 // xxx.ets 1940 import { webview } from '@kit.ArkWeb'; 1941 @Entry 1942 @Component 1943 struct WebComponent { 1944 controller: webview.WebviewController = new webview.WebviewController(); 1945 1946 build() { 1947 Column() { 1948 Web({ src: 'www.example.com', controller: this.controller }) 1949 .nestedScroll({ 1950 scrollForward: NestedScrollMode.SELF_FIRST, 1951 scrollBackward: NestedScrollMode.SELF_FIRST, 1952 }) 1953 } 1954 } 1955 } 1956 ``` 1957 ```ts 1958 // xxx.ets 1959 import { webview } from '@kit.ArkWeb'; 1960 @Entry 1961 @Component 1962 struct WebComponent { 1963 controller: webview.WebviewController = new webview.WebviewController() 1964 build() { 1965 Scroll(){ 1966 Column() { 1967 Text("嵌套Web") 1968 .height("25%") 1969 .width("100%") 1970 .fontSize(30) 1971 .backgroundColor(Color.Yellow) 1972 Web({ src: $rawfile('index.html'), 1973 controller: this.controller }) 1974 .nestedScroll({ 1975 scrollUp: NestedScrollMode.SELF_FIRST, 1976 scrollDown: NestedScrollMode.PARENT_FIRST, 1977 scrollLeft: NestedScrollMode.SELF_FIRST, 1978 scrollRight: NestedScrollMode.SELF_FIRST, 1979 }) 1980 } 1981 } 1982 } 1983 } 1984 ``` 1985 加载的html文件。 1986 ```html 1987 <!-- index.html --> 1988 <!DOCTYPE html> 1989 <html> 1990 <head> 1991 <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0"> 1992 <style> 1993 .blue { 1994 background-color: lightblue; 1995 } 1996 .green { 1997 background-color: lightgreen; 1998 } 1999 .blue, .green { 2000 font-size:16px; 2001 height:200px; 2002 text-align: center; /* 水平居中 */ 2003 line-height: 200px; /* 垂直居中（值等于容器高度） */ 2004 } 2005 </style> 2006 </head> 2007 <body> 2008 <div class="blue" >webArea</div> 2009 <div class="green">webArea</div> 2010 <div class="blue">webArea</div> 2011 <div class="green">webArea</div> 2012 <div class="blue">webArea</div> 2013 <div class="green">webArea</div> 2014 <div class="blue">webArea</div> 2015 </body> 2016 </html> 2017 ``` 2018 2019## bypassVsyncCondition<sup>20+</sup> 2020 2021bypassVsyncCondition(condition: WebBypassVsyncCondition) 2022 2023当开发者调用scrollBy接口进行页面滚动时，可以通过bypassVsyncCondition接口设置渲染流程跳过vsync（垂直同步）调度，直接触发绘制。 2024 2025**系统能力：** SystemCapability.Web.Webview.Core 2026 2027**参数：** 2028 2029| 参数名 | 类型 | 必填 | 说明 | 2030| ---- | ------------------------------------- | ---- | --------------------- | 2031| condition | [WebBypassVsyncCondition](./arkts-basic-components-web-e.md#webbypassvsynccondition20) | 是 | 触发渲染流程跳过vsync调度的条件。 | 2032 2033**示例：** 2034 2035 ```ts 2036 // xxx.ets 2037 import { webview } from '@kit.ArkWeb'; 2038 2039 @Entry 2040 @Component 2041 struct WebComponent { 2042 controller: webview.WebviewController = new webview.WebviewController(); 2043 condition: WebBypassVsyncCondition = WebBypassVsyncCondition.SCROLLBY_FROM_ZERO_OFFSET; 2044 2045 build() { 2046 Column() { 2047 Button('scrollBy') 2048 .onClick(() => { 2049 this.controller.scrollBy(0, 5); 2050 }) 2051 Web({ src: 'www.example.com', controller: this.controller }) 2052 .bypassVsyncCondition(this.condition) 2053 } 2054 } 2055 } 2056 ``` 2057 2058## enableNativeEmbedMode<sup>11+</sup> 2059 2060enableNativeEmbedMode(mode: boolean) 2061 2062设置是否开启同层渲染功能。 2063 2064**系统能力：** SystemCapability.Web.Webview.Core 2065 2066**参数：** 2067 2068| 参数名 | 类型 | 必填 | 说明 | 2069| ----- | ---------------------------------------- | ---- | ---------------- | 2070| mode | boolean | 是 | 是否开启同层渲染功能。<br>true表示开启同层渲染功能，false表示不开启同层渲染功能。 | 2071 2072**示例：** 2073 2074 ```ts 2075 // xxx.ets 2076 import { webview } from '@kit.ArkWeb'; 2077 @Entry 2078 @Component 2079 struct WebComponent { 2080 controller: webview.WebviewController = new webview.WebviewController(); 2081 2082 build() { 2083 Column() { 2084 Web({ src: 'www.example.com', controller: this.controller }) 2085 .enableNativeEmbedMode(true) 2086 } 2087 } 2088 } 2089 ``` 2090## forceDisplayScrollBar<sup>14+</sup> 2091 2092forceDisplayScrollBar(enabled: boolean) 2093 2094 2095设置滚动条是否常驻。在常驻状态下，当页面大小超过一页时，滚动条出现且不消失。 2096 2097全量展开模式下不支持滚动条常驻，即layoutMode为WebLayoutMode.FIT_CONTENT模式时，参数enabled为false。 2098 2099**系统能力：** SystemCapability.Web.Webview.Core 2100 2101**参数：** 2102 2103| 参数名 | 类型 | 必填 | 说明 | 2104| ------- | -------- | ---- | ------------------ | 2105| enabled | boolean | 是 | 滚动条是否常驻。<br>true表示滚动条常驻，false表示滚动条不常驻。<br>默认值：false。 | 2106 2107 2108**示例：** 2109 2110 ```ts 2111 // xxx.ets 2112 import { webview } from '@kit.ArkWeb'; 2113 2114 @Entry 2115 @Component 2116 struct WebComponent { 2117 controller: webview.WebviewController = new webview.WebviewController(); 2118 2119 build() { 2120 Column() { 2121 Web({ src: $rawfile('index.html'), controller: this.controller }) 2122 .forceDisplayScrollBar(true) 2123 } 2124 } 2125 } 2126 ``` 2127 2128 加载的html文件。 2129 ```html 2130 <!--index.html--> 2131 <!DOCTYPE html> 2132 <html> 2133 <head> 2134 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2135 <title>Demo</title> 2136 <style> 2137 body { 2138 width:2560px; 2139 height:2560px; 2140 padding-right:170px; 2141 padding-left:170px; 2142 border:5px solid blueviolet; 2143 } 2144 </style> 2145 </head> 2146 <body> 2147 Scroll Test 2148 </body> 2149 </html> 2150 ``` 2151## registerNativeEmbedRule<sup>12+</sup> 2152 2153registerNativeEmbedRule(tag: string, type: string) 2154 2155注册使用同层渲染的HTML标签名和类型。标签名仅支持使用<object\>和<embed\>。标签类型只能使用ASCII可显示字符。 2156 2157若指定类型与W3C定义的<object\>或<embed\>标准类型重合，ArkWeb内核将其识别为非同层标签。 2158 2159本接口同样受enableNativeEmbedMode接口控制，在未使能同层渲染时本接口无效。在不使用本接口的情况下，ArkWeb内核默认将"native/"前缀类型的<embed\>标签识别为同层标签。 2160 2161**系统能力：** SystemCapability.Web.Webview.Core 2162 2163**参数：** 2164 2165| 参数名 | 类型 | 必填 | 说明 | 2166|------|--------| ---- |------------------| 2167| tag | string | 是 | 标签名。 | 2168| type | string | 是 | 标签类型，内核使用前缀匹配此参数。 | 2169 2170**示例：** 2171 2172 ```ts 2173 // xxx.ets 2174 import { webview } from '@kit.ArkWeb'; 2175 2176 @Entry 2177 @Component 2178 struct WebComponent { 2179 controller: webview.WebviewController = new webview.WebviewController(); 2180 2181 build() { 2182 Column() { 2183 Web({ src: 'www.example.com', controller: this.controller }) 2184 .enableNativeEmbedMode(true) 2185 .registerNativeEmbedRule("object", "application/view") 2186 } 2187 } 2188 } 2189 ``` 2190## defaultTextEncodingFormat<sup>12+</sup> 2191 2192defaultTextEncodingFormat(textEncodingFormat: string) 2193 2194设置网页的默认字符编码。 2195 2196**系统能力：** SystemCapability.Web.Webview.Core 2197 2198**参数：** 2199 2200| 参数名 | 类型 | 必填 | 说明 | 2201| ---- | ------ | ---- | ---------------------------------------- | 2202| textEncodingFormat | string | 是 | 默认字符编码。默认值："UTF-8"。 | 2203 2204 **示例：** 2205 2206 ```ts 2207 // xxx.ets 2208 import { webview } from '@kit.ArkWeb'; 2209 2210 @Entry 2211 @Component 2212 struct WebComponent { 2213 controller: webview.WebviewController = new webview.WebviewController(); 2214 2215 build() { 2216 Column() { 2217 Web({ src: $rawfile('index.html'), controller: this.controller }) 2218 // 设置高 2219 .height(500) 2220 .defaultTextEncodingFormat("UTF-8") 2221 .javaScriptAccess(true) 2222 } 2223 } 2224 } 2225 ``` 2226 加载的html文件。 2227 ```html 2228 <!--index.html--> 2229 <!DOCTYPE html> 2230 <html> 2231 <head> 2232 <meta name="viewport" content="width=device-width" /> 2233 <title>My test html5 page</title> 2234 </head> 2235 <body> 2236 <p>hello world, 你好世界!</p> 2237 </body> 2238 </html> 2239 ``` 2240## metaViewport<sup>12+</sup> 2241 2242metaViewport(enabled: boolean) 2243 2244设置meta标签的viewport属性是否可用。 2245 2246> **说明：** 2247> 2248> - 当前通过User-Agent中是否含有"Mobile"字段来判断是否开启前端HTML页面中meta标签的viewport属性。当User-Agent中不含有"Mobile"字段时，meta标签中viewport属性默认关闭，此时可通过显性设置metaViewport属性为true来覆盖关闭状态。 2249 2250**系统能力：** SystemCapability.Web.Webview.Core 2251 2252**设备行为差异：** 该接口在Phone、Wearable、TV设备中可正常调用，在PC/2in1设备中无效果，在Tablet设备中，设置为true或false均会解析meta标签viewport-fit属性。当`viewport-fit=cover`时，可通过CSS属性获取安全区域大小。 2253 2254**参数：** 2255 2256| 参数名 | 类型 | 必填 | 说明 | 2257| ------ | -------- | ---- | -------------------------------- | 2258| enabled | boolean | 是 | 是否支持meta标签的viewport属性。<br>true表示支持meta标签的viewport属性，将解析viewport属性，并根据viewport属性布局。<br>false表示不支持meta标签的viewport属性，将不解析viewport属性，进行默认布局。<br>默认值：true。 | 2259 2260**示例：** 2261 2262 ```ts 2263// xxx.ets 2264import { webview } from '@kit.ArkWeb'; 2265 2266@Entry 2267@Component 2268struct WebComponent { 2269 controller: webview.WebviewController = new webview.WebviewController(); 2270 2271 build() { 2272 Column() { 2273 Web({ src: $rawfile('index.html'), controller: this.controller }) 2274 .metaViewport(true) 2275 } 2276 } 2277} 2278 ``` 2279加载的html文件。 2280```html 2281<!--index.html--> 2282<!DOCTYPE html> 2283<html> 2284<head> 2285 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2286</head> 2287<body> 2288 <p>hello world, 你好世界!</p> 2289</body> 2290</html> 2291``` 2292 2293## textAutosizing<sup>12+</sup> 2294 2295textAutosizing(textAutosizing: boolean) 2296 2297设置Web组件是否开启文本字体大小自动调整。 2298 2299文本字体大小自动调整生效后，对于字号过小的文本将自动加大字号至16px~32px，避免屏幕较小（默认视口宽度 < 980px）的设备因为缺少移动端适配出现字体过小的可读性问题。 2300 2301> **说明：** 2302> 2303> - 文本字体大小自动调整生效需要满足的前置条件： 2304> - 1. 设备形态为：Phone、Tablet、Wearable、TV。 2305> - 2. Web组件视口宽度 < 980px。 2306> - 3. 页面文本量大，页面文本的字号*字符数 ≥ 3920。 2307> - 4. 前端无metaViewport设置，或metaViewport设置中无"width"和"initial-scale"属性。 2308 2309**系统能力：** SystemCapability.Web.Webview.Core 2310 2311**设备行为差异：** 该接口在PC/2in1设备中无效果，在其他设备中可正常调用。 2312 2313**参数：** 2314 2315| 参数名 | 类型 | 必填 | 说明 | 2316| ---- | ------ | ---- | ---------------------------------------- | 2317| textAutosizing | boolean | 是 | 文本自动调整大小。<br>true表示文本自动调整大小，false表示文本不自动调整大小。<br>默认值：true。 | 2318 2319 **示例：** 2320 2321 ```ts 2322 // xxx.ets 2323 import { webview } from '@kit.ArkWeb'; 2324 2325 @Entry 2326 @Component 2327 struct WebComponent { 2328 controller: webview.WebviewController = new webview.WebviewController(); 2329 2330 build() { 2331 Column() { 2332 Web({ src: 'www.example.com', controller: this.controller }) 2333 .textAutosizing(false) 2334 } 2335 } 2336 } 2337 ``` 2338## enableNativeMediaPlayer<sup>12+</sup> 2339 2340enableNativeMediaPlayer(config: NativeMediaPlayerConfig) 2341 2342开启[应用接管网页媒体播放功能](../../web/app-takeovers-web-media.md)。 2343 2344**系统能力：** SystemCapability.Web.Webview.Core 2345 2346**参数：** 2347 2348| 参数名 | 类型 | 必填 | 说明 | 2349| ---- | ------ | ---- | ---------------------| 2350| config | [NativeMediaPlayerConfig](./arkts-basic-components-web-i.md#nativemediaplayerconfig12) | 是 | enable: 是否开启该功能。<br/> shouldOverlay: 该功能开启后， 应用接管网页视频的播放器画面是否覆盖网页内容。<br>默认值：`{enable: false, shouldOverlay: false}`。| 2351 2352 **示例：** 2353 2354 ```ts 2355 // xxx.ets 2356 import { webview } from '@kit.ArkWeb'; 2357 2358 @Entry 2359 @Component 2360 struct WebComponent { 2361 controller: webview.WebviewController = new webview.WebviewController(); 2362 2363 build() { 2364 Column() { 2365 Web({ src: 'www.example.com', controller: this.controller }) 2366 .enableNativeMediaPlayer({enable: true, shouldOverlay: false}) 2367 } 2368 } 2369 } 2370 ``` 2371 2372## onAdsBlocked<sup>12+</sup> 2373 2374onAdsBlocked(callback: OnAdsBlockedCallback) 2375 2376一个页面发生广告过滤后，通过此回调接口通知过滤的详细信息。由于页面可能随时发生变化并不断产生网络请求，为了减少通知频次、降低对页面加载过程的影响，仅在页面加载完成时进行首次通知，此后发生的过滤将间隔1秒钟上报，无广告过滤则无通知。 2377 2378**系统能力：** SystemCapability.Web.Webview.Core 2379 2380**参数：** 2381 2382| 参数名 | 类型 | 必填 | 说明 | 2383| ------ | ------ | ---- | --------------------- | 2384| callback | [OnAdsBlockedCallback](./arkts-basic-components-web-t.md#onadsblockedcallback12) | 是 | 广告过滤的回调。 | 2385 2386**示例：** 2387 2388 ```ts 2389 // xxx.ets 2390 import { webview } from '@kit.ArkWeb'; 2391 2392 @Entry 2393 @Component 2394 struct WebComponent { 2395 @State totalAdsBlockCounts: number = 0; 2396 controller: webview.WebviewController = new webview.WebviewController(); 2397 2398 build() { 2399 Column() { 2400 Web({ src: 'https://www.example.com', controller: this.controller }) 2401 .onAdsBlocked((details: AdsBlockedDetails) => { 2402 if (details) { 2403 console.info(' Blocked ' + details.adsBlocked.length + ' in ' + details.url); 2404 let adList: Array<string> = Array.from(new Set(details.adsBlocked)); 2405 this.totalAdsBlockCounts += adList.length; 2406 console.info('Total blocked counts :' + this.totalAdsBlockCounts); 2407 } 2408 }) 2409 } 2410 } 2411 } 2412 ``` 2413 2414## keyboardAvoidMode<sup>12+</sup> 2415 2416keyboardAvoidMode(mode: WebKeyboardAvoidMode) 2417 2418Web组件自定义软件键盘避让模式。 2419 2420当UIContext设置的键盘避让模式为[KeyboardAvoidMode.RESIZE](../apis-arkui/arkts-apis-uicontext-e.md#keyboardavoidmode11)模式时，该接口功能不生效。 2421 2422**系统能力：** SystemCapability.Web.Webview.Core 2423 2424**参数：** 2425 2426| 参数名 | 类型 | 必填 | 说明 | 2427| ------------------- | ------------------------------ | ------ | ------------- | 2428| mode | [WebKeyboardAvoidMode](./arkts-basic-components-web-e.md#webkeyboardavoidmode12) | 是 | Web软键盘避让模式。<br>嵌套滚动场景下不推荐使用web软键盘避让，包括RESIZE_VISUAL与RESIZE_CONTENT。<br>默认值：`WebKeyboardAvoidMode.RESIZE_CONTENT`避让行为。| 2429 2430**示例：** 2431 2432 ```ts 2433 // xxx.ets 2434 import { webview } from '@kit.ArkWeb'; 2435 2436 @Entry 2437 @Component 2438 struct WebComponent { 2439 controller: webview.WebviewController = new webview.WebviewController(); 2440 @State avoidMode: WebKeyboardAvoidMode = WebKeyboardAvoidMode.RESIZE_VISUAL; 2441 2442 build() { 2443 Column() { 2444 Web({ src: $rawfile("index.html"), controller: this.controller }) 2445 .keyboardAvoidMode(this.avoidMode) 2446 } 2447 } 2448 } 2449 ``` 2450 2451 加载的html文件。 2452 ```html 2453 <!--index.html--> 2454 <!DOCTYPE html> 2455 <html> 2456 <head> 2457 <title>测试网页</title> 2458 </head> 2459 <body> 2460 <input type="text" placeholder="Text"> 2461 </body> 2462 </html> 2463 ``` 2464 2465## editMenuOptions<sup>12+</sup> 2466 2467editMenuOptions(editMenu: EditMenuOptions) 2468 2469Web组件自定义文本选择菜单。 2470 2471用户可以通过该属性设置自定义的文本菜单。 2472 2473在[onCreateMenu](../apis-arkui/arkui-ts/ts-text-common.md#oncreatemenu12)中，可以修改、增加、删除菜单选项，如果希望不显示文本菜单，需要返回空数组。 2474 2475在[onMenuItemClick](../apis-arkui/arkui-ts/ts-text-common.md#onmenuitemclick12)中，可以自定义菜单选项的回调函数。该函数在菜单选项被点击后触发，并根据返回值决定是否执行系统默认的回调。返回true不执行系统回调，返回false继续执行系统回调。 2476 2477在[onPrepareMenu<sup>20+</sup>](../apis-arkui/arkui-ts/ts-text-common.md#onpreparemenu20)中，当文本选择区域变化后显示菜单之前触发该回调，可在该回调中进行修改、增加、删除菜单选项，实现动态更新菜单。 2478 2479本接口在与[selectionMenuOptions<sup>(deprecated)</sup>](#selectionmenuoptionsdeprecated)同时使用时，会使selectionMenuOptions<sup>(deprecated)</sup>不生效。 2480 2481**系统能力：** SystemCapability.Web.Webview.Core 2482 2483**参数：** 2484 2485| 参数名 | 类型 | 必填 | 说明 | 2486| ------------------- | ------------------------------ | ------ | ------------- | 2487| 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、TRANSLATE、SEARCH、AI_WRITER七项。<br>onMenuItemClick函数中textRange参数在web中无意义，传入值为-1。| 2488 2489**示例** 2490 2491```ts 2492// xxx.ets 2493import { webview } from '@kit.ArkWeb'; 2494 2495let selectText:string = ''; 2496class TestClass { 2497 setSelectText(param: String) { 2498 selectText = param.toString(); 2499 } 2500} 2501 2502@Entry 2503@Component 2504struct WebComponent { 2505 controller: webview.WebviewController = new webview.WebviewController(); 2506 @State testObj: TestClass = new TestClass(); 2507 2508 onCreateMenu(menuItems: Array<TextMenuItem>): Array<TextMenuItem> { 2509 let items = menuItems.filter((menuItem) => { 2510 // 过滤用户需要的系统按键 2511 return ( 2512 menuItem.id.equals(TextMenuItemId.CUT) || 2513 menuItem.id.equals(TextMenuItemId.COPY) || 2514 menuItem.id.equals((TextMenuItemId.PASTE)) || 2515 menuItem.id.equals((TextMenuItemId.TRANSLATE)) || 2516 menuItem.id.equals((TextMenuItemId.SEARCH)) || 2517 menuItem.id.equals((TextMenuItemId.AI_WRITER)) 2518 ) 2519 }); 2520 let customItem1: TextMenuItem = { 2521 content: 'customItem1', 2522 id: TextMenuItemId.of('customItem1'), 2523 icon: $r('app.media.icon') 2524 }; 2525 let customItem2: TextMenuItem = { 2526 content: $r('app.string.customItem2'), 2527 id: TextMenuItemId.of('customItem2'), 2528 icon: $r('app.media.icon') 2529 }; 2530 items.push(customItem1);// 在选项列表后添加新选项 2531 items.unshift(customItem2);// 在选项列表前添加选项 2532 2533 return items; 2534 } 2535 2536 onMenuItemClick(menuItem: TextMenuItem, textRange: TextRange): boolean { 2537 if (menuItem.id.equals(TextMenuItemId.CUT)) { 2538 // 用户自定义行为 2539 console.info("拦截 id：CUT") 2540 return true; // 返回true不执行系统回调 2541 } else if (menuItem.id.equals(TextMenuItemId.COPY)) { 2542 // 用户自定义行为 2543 console.info("不拦截 id：COPY") 2544 return false; // 返回false执行系统回调 2545 } else if (menuItem.id.equals(TextMenuItemId.of('customItem1'))) { 2546 // 用户自定义行为 2547 console.info("拦截 id：customItem1") 2548 return true;// 用户自定义菜单选项返回true时点击后不关闭菜单，返回false时关闭菜单 2549 } else if (menuItem.id.equals((TextMenuItemId.of($r('app.string.customItem2'))))){ 2550 // 用户自定义行为 2551 console.info("拦截 id：app.string.customItem2") 2552 return true; 2553 } 2554 return false;// 返回默认值false 2555 } 2556 2557 onPrepareMenu = (menuItems: Array<TextMenuItem>) => { 2558 let item1: TextMenuItem = { 2559 content: 'prepare1', 2560 id: TextMenuItemId.of('prepareMenu1'), 2561 }; 2562 let item2: TextMenuItem = { 2563 content: 'prepare2' + selectText, 2564 id: TextMenuItemId.of('prepareMenu2'), 2565 }; 2566 menuItems.push(item1);// 在选项列表后添加新选项 2567 menuItems.unshift(item2);// 在选项列表前添加选项 2568 2569 return menuItems; 2570 } 2571 2572 @State EditMenuOptions: EditMenuOptions = 2573 { onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick, onPrepareMenu:this.onPrepareMenu } 2574 2575 build() { 2576 Column() { 2577 Web({ src: $rawfile("index.html"), controller: this.controller }) 2578 .editMenuOptions(this.EditMenuOptions) 2579 .javaScriptProxy({ 2580 object: this.testObj, 2581 name: "testObjName", 2582 methodList: ["setSelectText"], 2583 controller: this.controller, 2584 }) 2585 } 2586 } 2587} 2588``` 2589 2590 加载的html文件。 2591```html 2592<!--index.html--> 2593<!DOCTYPE html> 2594<html> 2595 <head> 2596 <title>测试网页</title> 2597 </head> 2598 <body> 2599 <h1>editMenuOptions Demo</h1> 2600 <span>edit menu options</span> 2601 <script> 2602 function callArkTS() { 2603 let str = testObjName.test(); 2604 document.getElementById("demo").innerHTML = str; 2605 } 2606 2607 document.addEventListener('selectionchange', () => { 2608 var selection = window.getSelection(); 2609 if (selection.rangeCount > 0) { 2610 var selectedText = selection.toString(); 2611 testObjName.setSelectText(selectedText); 2612 } 2613 callArkTS(); 2614 }); 2615 </script> 2616 </body> 2617</html> 2618``` 2619 2620## enableHapticFeedback<sup>13+</sup> 2621 2622enableHapticFeedback(enabled: boolean) 2623 2624设置Web组件长按文本选择是否开启振动。需配置"ohos.permission.VIBRATE"。 2625 2626**系统能力：** SystemCapability.Web.Webview.Core 2627 2628**参数：** 2629 2630| 参数名 | 类型 | 必填 | 说明 | 2631| --------- | --------- | ------ | ------------- | 2632| enabled | boolean | 是 | 是否开启振动。<br>true表示开启振动，false表示不开启振动。<br>默认值：true。<br>传入undefined与null时为false。 | 2633 2634**示例：** 2635 2636```ts 2637// xxx.ets 2638import { webview } from '@kit.ArkWeb'; 2639 2640@Entry 2641@Component 2642struct WebComponent { 2643 controller: webview.WebviewController = new webview.WebviewController(); 2644 2645 build() { 2646 Column() { 2647 Web({ src: $rawfile("index.html"), controller: this.controller }) 2648 .enableHapticFeedback(true) 2649 } 2650 } 2651} 2652``` 2653 2654 加载的html文件。 2655```html 2656<!--index.html--> 2657<!DOCTYPE html> 2658<html> 2659 <head> 2660 <title>测试网页</title> 2661 </head> 2662 <body> 2663 <h1>enableHapticFeedback Demo</h1> 2664 <span>enable haptic feedback</span> 2665 </body> 2666</html> 2667``` 2668 2669## bindSelectionMenu<sup>13+</sup> 2670 2671bindSelectionMenu(elementType: WebElementType, content: CustomBuilder, responseType: WebResponseType, options?: SelectionMenuOptionsExt) 2672 2673设置自定义选择菜单。 2674 2675**系统能力：** SystemCapability.Web.Webview.Core 2676 2677**参数：** 2678 2679| 参数名 | 类型 | 必填 | 说明 | 2680| ------------ | ------------------------------- | ---- | ----------------------------------- | 2681| elementType | [WebElementType](./arkts-basic-components-web-e.md#webelementtype13) | 是 | 菜单的类型。 | 2682| content | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | 是 | 菜单的内容。 | 2683| responseType | [WebResponseType](./arkts-basic-components-web-e.md#webresponsetype13) | 是 | 菜单的响应类型。 | 2684| options | [SelectionMenuOptionsExt](./arkts-basic-components-web-i.md#selectionmenuoptionsext13) | 否 | 菜单的选项。| 2685 2686**示例：** 2687 2688```ts 2689// xxx.ets 2690import { webview } from '@kit.ArkWeb'; 2691 2692interface PreviewBuilderParam { 2693 previewImage: Resource | string | undefined; 2694 width: number; 2695 height: number; 2696} 2697 2698@Builder function PreviewBuilderGlobal($$: PreviewBuilderParam) { 2699 Column() { 2700 Image($$.previewImage) 2701 .objectFit(ImageFit.Fill) 2702 .autoResize(true) 2703 }.width($$.width).height($$.height) 2704} 2705 2706@Entry 2707@Component 2708struct WebComponent { 2709 controller: webview.WebviewController = new webview.WebviewController(); 2710 2711 private result: WebContextMenuResult | undefined = undefined; 2712 @State previewImage: Resource | string | undefined = undefined; 2713 @State previewWidth: number = 0; 2714 @State previewHeight: number = 0; 2715 uiContext: UIContext = this.getUIContext(); 2716 2717 @Builder 2718 MenuBuilder() { 2719 Menu() { 2720 MenuItem({ content: '复制', }) 2721 .onClick(() => { 2722 this.result?.copy(); 2723 this.result?.closeContextMenu(); 2724 }) 2725 MenuItem({ content: '全选', }) 2726 .onClick(() => { 2727 this.result?.selectAll(); 2728 this.result?.closeContextMenu(); 2729 }) 2730 } 2731 } 2732 build() { 2733 Column() { 2734 Web({ src: $rawfile("index.html"), controller: this.controller }) 2735 .bindSelectionMenu(WebElementType.IMAGE, this.MenuBuilder, WebResponseType.LONG_PRESS, 2736 { 2737 onAppear: () => {}, 2738 onDisappear: () => { 2739 this.result?.closeContextMenu(); 2740 }, 2741 preview: PreviewBuilderGlobal({ 2742 previewImage: this.previewImage, 2743 width: this.previewWidth, 2744 height: this.previewHeight 2745 }), 2746 menuType: MenuType.PREVIEW_MENU 2747 }) 2748 .onContextMenuShow((event) => { 2749 if (event) { 2750 this.result = event.result; 2751 if (event.param.getLinkUrl()) { 2752 return false; 2753 } 2754 this.previewWidth = this.uiContext!.px2vp(event.param.getPreviewWidth()); 2755 this.previewHeight = this.uiContext!.px2vp(event.param.getPreviewHeight()); 2756 if (event.param.getSourceUrl().indexOf("resource://rawfile/") == 0) { 2757 this.previewImage = $rawfile(event.param.getSourceUrl().substr(19)); 2758 } else { 2759 this.previewImage = event.param.getSourceUrl(); 2760 } 2761 return true; 2762 } 2763 return false; 2764 }) 2765 } 2766 } 2767} 2768``` 2769 2770 加载的html文件。 2771```html 2772<!--index.html--> 2773<!DOCTYPE html> 2774<html> 2775 <head> 2776 <title>测试网页</title> 2777 </head> 2778 <body> 2779 <h1>bindSelectionMenu Demo</h1> 2780 <!--img.png为html同目录下图片--> 2781 <img src="./img.png" > 2782 </body> 2783</html> 2784``` 2785 2786## blurOnKeyboardHideMode<sup>14+</sup> 2787 2788blurOnKeyboardHideMode(mode: BlurOnKeyboardHideMode) 2789 2790设置当软键盘收起时Web元素失焦模式。 2791 2792**系统能力：** SystemCapability.Web.Webview.Core 2793 2794**参数：** 2795 2796| 参数名 | 类型 | 必填 | 说明 | 2797| ---- | --------------------------------------- | ---- | ------------------ | 2798| mode | [BlurOnKeyboardHideMode](./arkts-basic-components-web-e.md#bluronkeyboardhidemode14) | 是 | 设置当软键盘收起时Web元素失焦关闭或开启。默认值：`BlurOnKeyboardHideMode.SILENT`。 | 2799 2800**示例：** 2801 2802 ```ts 2803 // xxx.ets 2804 import { webview } from '@kit.ArkWeb'; 2805 2806 @Entry 2807 @Component 2808 struct WebComponent { 2809 controller: webview.WebviewController = new webview.WebviewController(); 2810 @State blurMode: BlurOnKeyboardHideMode = BlurOnKeyboardHideMode.BLUR; 2811 build() { 2812 Column() { 2813 Web({ src: $rawfile("index.html"), controller: this.controller }) 2814 .blurOnKeyboardHideMode(this.blurMode) 2815 } 2816 } 2817 } 2818 ``` 2819 2820 加载的html文件。 2821```html 2822<!--index.html--> 2823<!DOCTYPE html> 2824<html> 2825 <head> 2826 <title>测试网页</title> 2827 </head> 2828 <body> 2829 <h1>blurOnKeyboardHideMode Demo</h1> 2830 <input type="text" id="input_a"> 2831 <script> 2832 const inputElement = document.getElementById('input_a'); 2833 inputElement.addEventListener('blur', function() { 2834 console.info('Input has lost focus'); 2835 }); 2836 </script> 2837 </body> 2838</html> 2839``` 2840 2841## enableFollowSystemFontWeight<sup>18+</sup> 2842 2843enableFollowSystemFontWeight(follow: boolean) 2844 2845设置Web组件是否开启字重跟随系统设置变化。 2846 2847> **说明：** 2848> 2849> 目前该能力只支持前端文本元素跟随变化，暂不支持canvas元素、内嵌docx和pdf格式中的文本跟随变化。 2850 2851**系统能力：** SystemCapability.Web.Webview.Core 2852 2853**参数：** 2854 2855| 参数名 | 类型 | 必填 | 说明 | 2856| ------------ | ------------------------------- | ---- | ----------------------------------- | 2857| follow | boolean | 是 | 设置Web组件是否开启字重跟随系统设置变化。<br>true表示字重跟随系统设置中的字体粗细变化，系统设置改变时字重跟随变化。false表示字重不再跟随系统设置中的字体粗细变化，系统设置改变时维持当前字重不变。 | 2858 2859**示例：** 2860 2861 ```ts 2862 // xxx.ets 2863 import { webview } from '@kit.ArkWeb'; 2864 2865 @Entry 2866 @Component 2867 struct WebComponent { 2868 controller: webview.WebviewController = new webview.WebviewController(); 2869 build() { 2870 Column() { 2871 Web({ src: "www.example.com", controller: this.controller }) 2872 .enableFollowSystemFontWeight(true) 2873 } 2874 } 2875 } 2876 ``` 2877 2878## optimizeParserBudget<sup>15+</sup> 2879 2880optimizeParserBudget(optimizeParserBudget: boolean) 2881 2882设置是否开启分段解析HTML优化。 2883 2884ArkWeb内核在解析HTML文档结构时采取分段解析策略，旨在避免过多占用主线程资源，并使网页具有渐进式加载能力。ArkWeb内核默认使用解析时间作为分段点，当单次解析时间超过阈值时，会中断解析，随后进行布局和渲染操作。 2885 2886开启优化后，ArkWeb内核将不仅检查解析时间是否超出限制，还会额外判断解析的Token（HTML文档的最小解析单位，例如`<div>`、`attr="xxx"`等）数量是否超过内核规定的阈值，并下调此阈值。当页面的FCP(First Contentful Paint 首次内容绘制）触发时会恢复成默认的中断判断逻辑。这将使得网页在FCP到来之前的解析操作更频繁，从而提高首帧内容被提前解析完成并进入渲染阶段的可能性，同时有效缩减首帧渲染的工作量，最终实现FCP时间提前。 2887 2888由于页面的FCP触发时会恢复成默认分段解析逻辑，因此分段解析HTML优化仅对每个Web组件加载的首个页面生效。 2889 2890**系统能力：** SystemCapability.Web.Webview.Core 2891 2892**参数：** 2893 2894| 参数名 | 类型 | 必填 | 说明 | 2895| ---------- | ------- | ---- | ---------------------- | 2896| optimizeParserBudget | boolean | 是 | 设置开启分段解析HTML优化。<br>true表示使用解析个数代替解析时间作为HTML分段解析的分段点，并减少每段解析的个数上限。false表示使用解析时间作为HTML分段解析的分段点。<br>默认值：false。 | 2897 2898 2899**示例：** 2900 2901 ```ts 2902 // xxx.ets 2903 import { webview } from '@kit.ArkWeb'; 2904 2905 @Entry 2906 @Component 2907 struct WebComponent { 2908 controller: webview.WebviewController = new webview.WebviewController() 2909 build() { 2910 Column() { 2911 Web({ src: 'www.example.com', controller: this.controller }) 2912 .optimizeParserBudget(true) 2913 } 2914 } 2915 } 2916 ``` 2917 2918## enableWebAVSession<sup>18+</sup> 2919 2920enableWebAVSession(enabled: boolean) 2921 2922设置是否支持应用对接到播控中心。 2923 2924**系统能力：** SystemCapability.Web.Webview.Core 2925 2926**参数：** 2927 2928| 参数名 | 类型 | 必填 | 说明 | 2929| ------- | -------- | ---- | ------------------ | 2930| enabled | boolean | 是 | 设置是否支持应用对接到播控中心。<br>true表示支持应用对接到播控中心，false表示不支持应用对接到播控中心。<br>默认值：true。 | 2931 2932**示例：** 2933 2934 ```ts 2935 // xxx.ets 2936 import { webview } from '@kit.ArkWeb'; 2937 2938 @Entry 2939 @Component 2940 struct WebComponent { 2941 controller: webview.WebviewController = new webview.WebviewController(); 2942 build() { 2943 Column() { 2944 Web({ src: $rawfile('index.html'), controller: this.controller }) 2945 .enableWebAVSession(true) 2946 } 2947 } 2948 } 2949 ``` 2950 2951 加载的html文件。 2952 ```html 2953 <!--index.html--> 2954 <!DOCTYPE html> 2955 <html> 2956 <head> 2957 <title>视频播放页面</title> 2958 </head> 2959 <body> 2960 <h1>视频播放</h1> 2961 <video id="testVideo" controls> 2962 <!--在resources的rawfile目录中放置任意一个mp4媒体文件，并将其命名为example.mp4--> 2963 <source src="example.mp4" type="video/mp4"> 2964 </video> 2965 </body> 2966 </html> 2967 ``` 2968 2969## nativeEmbedOptions<sup>16+</sup> 2970 2971nativeEmbedOptions(options?: EmbedOptions) 2972 2973设置同层渲染相关配置，该属性仅在[enableNativeEmbedMode](#enablenativeembedmode11)开启时生效，不支持动态修改。 2974 2975**系统能力：** SystemCapability.Web.Webview.Core 2976 2977**参数：** 2978 2979| 参数名 | 类型 | 必填 | 说明 | 2980| ------------ | ------------------------------- | ---- | ----------------------------------- | 2981| options | [EmbedOptions](./arkts-basic-components-web-i.md#embedoptions16) | 否 | 同层渲染相关配置，默认值：`{supportDefaultIntrinsicSize: false}`。 | 2982 2983**示例：** 2984 2985 ```ts 2986 // xxx.ets 2987 import { webview } from '@kit.ArkWeb'; 2988 2989 @Entry 2990 @Component 2991 struct WebComponent { 2992 controller: webview.WebviewController = new webview.WebviewController(); 2993 options: EmbedOptions = {supportDefaultIntrinsicSize: true}; 2994 2995 build() { 2996 Column() { 2997 Web({ src: $rawfile("index.html"), controller: this.controller }) 2998 .enableNativeEmbedMode(true) 2999 .nativeEmbedOptions(this.options) 3000 } 3001 } 3002 } 3003 ``` 3004加载的html文件 3005 ```html 3006 <!-- index.html --> 3007 <!DOCTYPE html> 3008 <html> 3009 <head> 3010 <title>同层渲染固定大小测试html</title> 3011 </head> 3012 <body> 3013 <div> 3014 <embed id="input" type = "native/view" style = "background-color:red"/> 3015 </div> 3016 </body> 3017 </html> 3018 ``` 3019## enableDataDetector<sup>20+</sup> 3020 3021enableDataDetector(enable: boolean) 3022 3023设置是否识别网页文本特殊实体，如邮件、电话、网址等。该接口依赖设备底层具备文本识别能力，否则设置无效。 3024 3025当enableDataDetector设置为true，同时不设置[dataDetectorConfig](#datadetectorconfig20)属性时，默认识别所有类型的实体，所识别实体的color和decoration会被更改为如下样式： 3026<!--code_no_check--> 3027```ts 3028color: '#ff0a59f7', 3029decoration:{ 3030 type: TextDecorationType.Underline, 3031 color: '#ff0a59f7', 3032 style: TextDecorationStyle.SOLID 3033} 3034``` 3035 3036当enableDataDetector设置为true且[copyOptions](#copyoptions11)设置为CopyOptions.LocalDevice时，AI菜单功能将被激活。此时，在网页中选中文本后，文本选择菜单能够展示对应的AI菜单项，包括[TextMenuItemId](../apis-arkui/arkui-ts/ts-text-common.md#textmenuitemid12)中的url（打开连接）、email（新建邮件）、phoneNumber（呼叫）、address（导航至该位置）、dateTime（新建日程提醒）。 3037 3038AI菜单生效时，需在选中范围内，包括一个完整的AI实体，才能展示对应的选项。该菜单项与[TextMenuItemId](../apis-arkui/arkui-ts/ts-text-common.md#textmenuitemid12)中的askAI菜单项不同时出现。 3039 3040示例使用场景详见[使用Web组件的智能分词能力](../../web/web-data-detector.md)。 3041 3042**系统能力：** SystemCapability.Web.Webview.Core 3043 3044**参数：** 3045 3046| 参数名 | 类型 | 必填 | 说明 | 3047| ------ | ------- | ---- | --------------------------------- | 3048| enable | boolean | 是 | 是否启用Web文本识别，true表示启用，false表示不启用。<br/>默认值：false | 3049 3050> **说明：** 3051> 3052> 动态更新enableDataDetector的启用状态不会即时影响当前页面，需通过刷新页面来使新配置生效。 3053 3054**示例：** 3055 3056 ```ts 3057 // xxx.ets 3058 import { webview } from '@kit.ArkWeb'; 3059 3060 @Entry 3061 @Component 3062 struct WebComponent { 3063 controller: webview.WebviewController = new webview.WebviewController(); 3064 3065 build() { 3066 Column() { 3067 Web({ src: $rawfile("index.html"), controller: this.controller }) 3068 .enableDataDetector(true) 3069 } 3070 } 3071 } 3072 ``` 3073加载的html文件 3074 ```html 3075 <!-- index.html --> 3076 <!DOCTYPE html> 3077 <html> 3078 <head> 3079 <title>enableDataDetector示例</title> 3080 </head> 3081 <body> 3082 <p> 电话：400-123-4567 </p> 3083 <p> 邮箱：example@example.com </p> 3084 </body> 3085 </html> 3086 ``` 3087 3088## dataDetectorConfig<sup>20+</sup> 3089 3090dataDetectorConfig(config: TextDataDetectorConfig) 3091 3092设置文本识别配置。 3093 3094需配合[enableDataDetector](#enabledatadetector20)一起使用，设置enableDataDetector为true时，dataDetectorConfig的配置才能生效。 3095 3096当两个实体A、B重叠时，按以下规则保留实体： 3097 30981. 若A ⊂ B，则保留B，反之则保留A。 3099 31002. 当A ⊄ B且B ⊄ A时，若A.start < B.start，则保留A，反之则保留B。 3101 3102 3103**系统能力：** SystemCapability.Web.Webview.Core 3104 3105**参数：** 3106 3107| 参数名 | 类型 | 必填 | 说明 | 3108| ------ | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 3109| config | [TextDataDetectorConfig](../apis-arkui/arkui-ts/ts-text-common.md#textdatadetectorconfig11对象说明) | 是 | 文本识别配置。| 3110 3111> **说明：** 3112> 3113> TextDataDetectorConfig中的onDetectResultUpdate在Web组件中不支持，设置的回调不会调用。 3114> 3115> [copyOptions](#copyoptions11)设置为CopyOptions.None时，TextDataDetectorConfig中的enablePreviewMenu配置项无效。 3116> 3117> 动态更新TextDataDetectorConfig的配置不会即时影响当前页面，需通过刷新页面来使新配置生效。 3118 3119**示例：** 3120 3121 ```ts 3122 // xxx.ets 3123 import { webview } from '@kit.ArkWeb'; 3124 3125 @Entry 3126 @Component 3127 struct WebComponent { 3128 controller: webview.WebviewController = new webview.WebviewController(); 3129 3130 build() { 3131 Column() { 3132 Web({ src: $rawfile("index.html"), controller: this.controller }) 3133 .enableDataDetector(true) 3134 .dataDetectorConfig({ 3135 types: [ 3136 TextDataDetectorType.PHONE_NUMBER, 3137 TextDataDetectorType.EMAIL 3138 ], 3139 color: Color.Red, 3140 decoration: { 3141 type: TextDecorationType.LineThrough, 3142 color: Color.Green, 3143 style: TextDecorationStyle.WAVY 3144 } 3145 }) 3146 } 3147 } 3148 } 3149 ``` 3150加载的html文件 3151 ```html 3152 <!-- index.html --> 3153 <!DOCTYPE html> 3154 <html> 3155 <head> 3156 <title>dataDetectorConfig示例</title> 3157 </head> 3158 <body> 3159 <p> 电话：400-123-4567 </p> 3160 <p> 邮箱：12345678901@example.com </p> 3161 <p> 网址：www.example.com（此项不识别）</p> 3162 </body> 3163 </html> 3164 ``` 3165 3166## gestureFocusMode<sup>20+</sup> 3167 3168gestureFocusMode(mode: GestureFocusMode) 3169 3170设置Web组件手势获焦模式。 3171 3172**系统能力：** SystemCapability.Web.Webview.Core 3173 3174**参数：** 3175 3176| 参数名 | 类型 | 必填 | 说明 | 3177| ------------------- | ------------------------------ | ------ | ------------- | 3178| mode | [GestureFocusMode](./arkts-basic-components-web-e.md#gesturefocusmode20) | 是 | 设置Web组件手势获焦模式。<br>默认值：`GestureFocusMode.DEFAULT`，表示手势按下时，任何手势均会使Web组件获焦。| 3179 3180**示例：** 3181 3182 ```ts 3183 // xxx.ets 3184 import { webview } from '@kit.ArkWeb'; 3185 3186 @Entry 3187 @Component 3188 struct WebComponent { 3189 controller: webview.WebviewController = new webview.WebviewController(); 3190 @State mode: GestureFocusMode = GestureFocusMode.DEFAULT; 3191 build() { 3192 Column() { 3193 Web({ src: $rawfile("index.html"), controller: this.controller }) 3194 .gestureFocusMode(this.mode) 3195 } 3196 } 3197 } 3198 ``` 3199 3200 加载的html文件。 3201 ```html 3202 <!--index.html--> 3203 <!DOCTYPE html> 3204 <html> 3205 <head> 3206 <title>测试网页</title> 3207 </head> 3208 <body> 3209 <input type="text" placeholder="Text"> 3210 </body> 3211 </html> 3212 ``` 3213 3214## password<sup>(deprecated)</sup> 3215 3216password(password: boolean) 3217 3218设置是否应保存密码。该接口为空接口。 3219 3220> **说明：** 3221> 3222> 从API version 10开始废弃，并且不再提供新的接口作为替代。 3223 3224**系统能力：** SystemCapability.Web.Webview.Core 3225 3226**参数：** 3227 3228| 参数名 | 类型 | 必填 | 说明 | 3229| ------------ | ------ | ---- | -------------------------------- | 3230| password | boolean | 是 | 设置为true时，表示允许Web保存密码。<br>设置为false时，表示不允许Web保存密码。<br>默认值：false。 | 3231 3232## textZoomAtio<sup>(deprecated)</sup> 3233 3234textZoomAtio(textZoomAtio: number) 3235 3236设置页面的文本缩放百分比。 3237 3238**系统能力：** SystemCapability.Web.Webview.Core 3239 3240从API version 9开始不再维护，建议使用[textZoomRatio<sup>9+</sup>](#textzoomratio9)代替。 3241 3242**参数：** 3243 3244| 参数名 | 类型 | 必填 | 说明 | 3245| ------------ | ------ | ---- | -------------------------------- | 3246| textZoomAtio | number | 是 | 要设置的页面的文本缩放百分比。<br>取值范围为正整数。<br>默认值：100。 | 3247 3248**示例：** 3249 3250 ```ts 3251 // xxx.ets 3252 @Entry 3253 @Component 3254 struct WebComponent { 3255 controller: WebController = new WebController() 3256 @State ratio: number = 150 3257 build() { 3258 Column() { 3259 Web({ src: 'www.example.com', controller: this.controller }) 3260 .textZoomAtio(this.ratio) 3261 } 3262 } 3263 } 3264 ``` 3265 3266## userAgent<sup>(deprecated)</sup> 3267 3268userAgent(userAgent: string) 3269 3270设置用户代理。 3271 3272> **说明：** 3273> 3274> 从API version 8开始支持，从API version 10开始废弃。建议使用[setCustomUserAgent](./arkts-apis-webview-WebviewController.md#setcustomuseragent10)<sup>10+</sup>替代。 3275 3276**系统能力：** SystemCapability.Web.Webview.Core 3277 3278**参数：** 3279 3280| 参数名 | 类型 | 必填 | 说明 | 3281| --------- | ------ | ---- | --------- | 3282| userAgent | string | 是 | 要设置的用户代理。 | 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 @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'; 3295 3296 build() { 3297 Column() { 3298 Web({ src: 'www.example.com', controller: this.controller }) 3299 .userAgent(this.userAgent) 3300 } 3301 } 3302 } 3303 ``` 3304 3305## tableData<sup>(deprecated)</sup> 3306 3307tableData(tableData: boolean) 3308 3309设置是否应保存表单数据。该接口为空接口。 3310 3311> **说明：** 3312> 3313> 从API version 10开始废弃，并且不再提供新的接口作为替代。 3314 3315**系统能力：** SystemCapability.Web.Webview.Core 3316 3317**参数：** 3318 3319| 参数名 | 类型 | 必填 | 说明 | 3320| ------------ | ------ | ---- | -------------------------------- | 3321| tableData | boolean | 是 | 设置为true时，表示允许Web保存表单数据。<br>设置为false时，表示不允许Web保存表单数据。<br>默认值：false。 | 3322 3323## wideViewModeAccess<sup>(deprecated)</sup> 3324 3325wideViewModeAccess(wideViewModeAccess: boolean) 3326 3327设置Web是否支持html中meta标签的viewport属性。该接口为空接口。 3328 3329> **说明：** 3330> 3331> 从API version 10开始废弃，并且不再提供新的接口作为替代。 3332 3333**系统能力：** SystemCapability.Web.Webview.Core 3334 3335## selectionMenuOptions<sup>(deprecated)</sup> 3336 3337selectionMenuOptions(expandedMenuOptions: Array\<ExpandedMenuItemOptions>) 3338 3339Web组件自定义菜单扩展项接口，允许用户设置扩展项的文本内容、图标、回调方法。 3340 3341该接口只支持选中纯文本，当选中内容包含图片及其他非文本内容时，action信息中会显示乱码。 3342 3343> **说明：** 3344> 3345> 从API version 12开始支持，从API version 20开始废弃。建议使用[editMenuOptions<sup>12+</sup>](#editmenuoptions12)替代。 3346 3347**系统能力：** SystemCapability.Web.Webview.Core 3348 3349**参数：** 3350 3351| 参数名 | 类型 | 必填 | 说明 | 3352| ------------------- | ---------------------------------------------------------- | ---- | ------------- | 3353| expandedMenuOptions | Array<[ExpandedMenuItemOptions](./arkts-basic-components-web-i.md#expandedmenuitemoptions12)> | 是 | 扩展菜单选项。<br/>菜单项数量，及菜单的content大小、startIcon图标尺寸，与ArkUI [Menu](../apis-arkui/arkui-ts/ts-basic-components-menu.md)组件保持一致。| 3354 3355**示例：** 3356 3357 ```ts 3358 // xxx.ets 3359 import { webview } from '@kit.ArkWeb'; 3360 3361 @Entry 3362 @Component 3363 struct WebComponent { 3364 controller: webview.WebviewController = new webview.WebviewController(); 3365 @State menuOptionArray: Array<ExpandedMenuItemOptions> = [ 3366 {content: 'Apple', startIcon: $r('app.media.icon'), action: (selectedText) => { 3367 console.info('select info ' + selectedText.toString()); 3368 }}, 3369 {content: '香蕉', startIcon: $r('app.media.icon'), action: (selectedText) => { 3370 console.info('select info ' + selectedText.toString()); 3371 }} 3372 ]; 3373 3374 build() { 3375 Column() { 3376 Web({ src: $rawfile("index.html"), controller: this.controller }) 3377 .selectionMenuOptions(this.menuOptionArray) 3378 } 3379 } 3380 } 3381 ``` 3382 3383 加载的html文件。 3384 ```html 3385 <!--index.html--> 3386 <!DOCTYPE html> 3387 <html> 3388 <head> 3389 <title>测试网页</title> 3390 </head> 3391 <body> 3392 <h1>selectionMenuOptions Demo</h1> 3393 <span>selection menu options</span> 3394 </body> 3395 </html> 3396 ``` 3397
