1# AtomicServiceWeb 2 3**AtomicServiceWeb** is an advanced web component offering customization to meet specific demands. It shields irrelevant APIs from the native **Web** component and extends functionality through JavaScript capabilities. 4 5> **NOTE** 6> 7> - This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8> - You can preview how this component looks on a real device, but not in DevEco Studio Previewer. 9 10## Required Permissions 11 12**ohos.permission.INTERNET**, required for accessing online web pages. For details about how to apply for a permission, see [Declaring Permissions](../../../security/AccessToken/declare-permissions.md). 13 14## Modules to Import 15 16``` 17import { AtomicServiceWeb } from '@kit.ArkUI'; 18``` 19 20## Child Components 21 22Not supported 23 24## Attributes 25 26The [universal attributes](ts-component-general-attributes.md) are not supported. 27 28## AtomicServiceWeb 29 30``` 31AtomicServiceWeb({ 32 src: ResourceStr, 33 controller: AtomicServiceWebController, 34 navPathStack?: NavPathStack, 35 mixedMode?: MixedMode, 36 darkMode?: WebDarkMode, 37 forceDarkAccess?: boolean, 38 nestedScroll?: NestedScrollOptions | NestedScrollOptionsExt, 39 onMessage?: Callback<OnMessageEvent>, 40 onErrorReceive?: Callback<OnErrorReceiveEvent>, 41 onHttpErrorReceive?: Callback<OnHttpErrorReceiveEvent>, 42 onPageBegin?: Callback<OnPageBeginEvent>, 43 onPageEnd?: Callback<OnPageEndEvent>, 44 onControllerAttached?: Callback<void>, 45 onLoadIntercept?: Callback<OnLoadInterceptEvent, boolean>, 46 onProgressChange?: Callback<OnProgressChangeEvent> 47}) 48``` 49 50**Decorator**: @Component 51 52**Atomic service API**: This API can be used in atomic services since API version 12. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56**Parameters** 57 58| Name | Type | Mandatory| Decorator | Description | 59|----------------------|------------------------------------------------------------------------------------------------------------------|----|-------------|----------------------------------------------------------------------------------------------------------------------| 60| src | [ResourceStr](ts-types.md#resourcestr) | Yes | - | Web page resource address. Accessing network resources requires configuring service domain names in AppGallery Connect, and accessing local resources only supports files within the package (**$rawfile**). Dynamic updating of the address through state variables (for example, @State) is not supported. The loaded web page supports calling system capabilities through the APIs provided by the JS SDK, with the specifics governed by the JS SDK.| 61| controller | [AtomicServiceWebController](#atomicservicewebcontroller) | Yes | @ObjectLink | Controller for controlling the behavior of the **AtomicServiceWeb** component. | 62| navPathStack | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | No | - | Information about the navigation stack. When **NavDestination** serves as the root container of the page, **NavPathStack** corresponding to the **NavDestination** container must be passed to handle page routing. | 63| mixedMode | [MixedMode](../../apis-arkweb/arkts-basic-components-web-e.md#mixedmode) | No | @Prop | Whether to enable loading of HTTP and HTTPS mixed content. By default, this feature is disabled. | 64| darkMode | [WebDarkMode](../../apis-arkweb/arkts-basic-components-web-e.md#webdarkmode9) | No | @Prop | Web dark mode. By default, web dark mode is disabled. | 65| forceDarkAccess | boolean | No | @Prop | Whether to enable forcible dark mode for the web page. This feature is disabled by default. This API is effective only when web dark mode is enabled. | 66| nestedScroll<sup>15+</sup> | [NestedScrollOptions](../../apis-arkui/arkui-ts/ts-container-scrollable-common.md#nestedscrolloptions10) \| [NestedScrollOptionsExt](../../apis-arkweb/arkts-basic-components-web-i.md#nestedscrolloptionsext14) | No | @Prop | Nested scrolling options.<br>**Atomic service API**: This API can be used in atomic services since API version 15. | 67| onMessage | Callback\<[OnMessageEvent](#onmessageevent)\> | No | - | Callback invoked when the HTML5 page sends a message through the **postMessage()** API of the JS SDK, and the **AtomicServiceWeb** component's corresponding page is returned or destroyed. | 68| onErrorReceive | Callback\<[OnErrorReceiveEvent](#onerrorreceiveevent)\> | No | - | Callback invoked when an error occurs during web page loading. For performance reasons, simplify the implementation logic in the callback. This callback is invoked when there is no network connection. | 69| onHttpErrorReceive | Callback\<[OnHttpErrorReceiveEvent](#onhttperrorreceiveevent)\> | No | - | Callback invoked when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading. | 70| onPageBegin | Callback\<[OnPageBeginEvent](#onpagebeginevent)\> | No | - | Callback invoked when the web page starts to be loaded. It is invoked only for the main frame content, and not for the iframe or frameset content. | 71| onPageEnd | Callback\<[OnPageEndEvent](#onpageendevent)\> | No | - | Callback invoked when the web page loading is complete. It is invoked only for the main frame content. | 72| onControllerAttached | Callback\<void\> | No | - | Callback invoked when a controller is attached to the **AtomicServiceWeb** component. | 73| onLoadIntercept | [OnLoadInterceptCallback](#onloadinterceptcallback) | No | - | Callback invoked when the **AtomicServiceWeb** component is about to load the URL. It is used to determine whether to block the loading. By default, the loading is allowed. | 74| onProgressChange | Callback\<[OnProgressChangeEvent](../../apis-arkweb/arkts-basic-components-web-i.md#onprogresschangeevent12)\> | No | - | Callback invoked when the web page loading progress changes. | 75 76## AtomicServiceWebController 77 78Implements an **AtomicServiceWebController** object for controlling the behavior of the **AtomicServiceWeb** component. An **AtomicServiceWebController** can control only one **AtomicServiceWeb** component, and the APIs on the **AtomicServiceWebController** can be called only after it has been bound to the target **AtomicServiceWeb** component. 79 80**Decorator Type**: @Observed 81 82**Atomic service API**: This API can be used in atomic services since API version 12. 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86### getUserAgent 87 88getUserAgent(): string 89 90Obtains the default user agent of this web page. 91 92**Atomic service API**: This API can be used in atomic services since API version 12. 93 94**System capability**: SystemCapability.ArkUI.ArkUI.Full 95 96**Return value** 97 98| Type | Description | 99|--------|---------| 100| string | Default user agent. For details about the specifications and usage scenarios, see [Developing User-Agent](../../../web/web-default-userAgent.md).| 101 102**Error codes** 103 104For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 105 106| ID | Error Message | 107|----------|--------------------------------------------------------------------------------------------------| 108| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 109 110### getCustomUserAgent 111 112getCustomUserAgent(): string 113 114Obtains a custom user agent. 115 116**Atomic service API**: This API can be used in atomic services since API version 12. 117 118**System capability**: SystemCapability.ArkUI.ArkUI.Full 119 120**Return value** 121 122| Type | Description | 123|--------|------------| 124| string | Information about the custom user agent. For details about the specifications and usage scenarios, see [Developing User-Agent](../../../web/web-default-userAgent.md).| 125 126**Error codes** 127 128For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 129 130| ID | Error Message | 131|----------|--------------------------------------------------------------------------------------------------| 132| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 133 134### setCustomUserAgent 135 136setCustomUserAgent(userAgent: string): void 137 138Sets a custom user agent, which will overwrite the default user agent. 139 140Set the user agent in the **onControllerAttached** callback to ensure that it takes effect. For details about the setting, see the example. Avoid setting the user agent in **onLoadIntercept**. Otherwise, the setting may fail occasionally. 141 142> **NOTE** 143> 144>If a URL is set for the **Web** component **src** and **UserAgent** is not set in the **onControllerAttached** callback, calling **setCustomUserAgent** may cause mismatches between the loaded page and the intended user agent. 145 146**Atomic service API**: This API can be used in atomic services since API version 12. 147 148**System capability**: SystemCapability.ArkUI.ArkUI.Full 149 150**Parameters** 151 152| Name | Type | Mandatory| Description | 153|-----------|--------|----|--------------------------------------------------------------------------| 154| userAgent | string | Yes | Information about the custom user agent. It is recommended that you obtain the current default user agent through [getUserAgent](#getuseragent) and then customize the obtained user agent.| 155 156**Error codes** 157 158For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 159 160| ID | Error Message | 161|----------|--------------------------------------------------------------------------------------------------| 162| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | 163| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 164 165### refresh 166 167refresh(): void 168 169Refreshes the web page. 170 171**Atomic service API**: This API can be used in atomic services since API version 12. 172 173**System capability**: SystemCapability.ArkUI.ArkUI.Full 174 175**Error codes** 176 177For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 178 179| ID | Error Message | 180|----------|--------------------------------------------------------------------------------------------------| 181| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 182 183### forward 184 185forward(): void 186 187Moves to the next page based on the history stack. This API is generally used together with [accessForward](#accessforward). 188 189**Atomic service API**: This API can be used in atomic services since API version 12. 190 191**System capability**: SystemCapability.ArkUI.ArkUI.Full 192 193**Error codes** 194 195For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 196 197| ID | Error Message | 198|----------|--------------------------------------------------------------------------------------------------| 199| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 200 201### backward 202 203backward(): void 204 205Moves to the previous page based on the history stack. This API is generally used together with [accessBackward](#accessbackward). 206 207**Atomic service API**: This API can be used in atomic services since API version 12. 208 209**System capability**: SystemCapability.ArkUI.ArkUI.Full 210 211**Error codes** 212 213For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 214 215| ID | Error Message | 216|----------|--------------------------------------------------------------------------------------------------| 217| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 218 219### accessForward 220 221accessForward(): boolean 222 223Checks whether going to the next page can be performed on this page. 224 225**Atomic service API**: This API can be used in atomic services since API version 12. 226 227**System capability**: SystemCapability.ArkUI.ArkUI.Full 228 229**Return value** 230 231| Type | Description | 232|---------|-----------------------| 233| boolean | Returns **true** if going to the next page can be performed on the current page; returns **false** otherwise.| 234 235**Error codes** 236 237For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 238 239| ID | Error Message | 240|----------|--------------------------------------------------------------------------------------------------| 241| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 242 243### accessBackward 244 245accessBackward(): boolean 246 247Checks whether going to the previous page can be performed on this page. 248 249**Atomic service API**: This API can be used in atomic services since API version 12. 250 251**System capability**: SystemCapability.ArkUI.ArkUI.Full 252 253**Return value** 254 255| Type | Description | 256|---------|-----------------------| 257| boolean | Returns **true** if going to the previous page can be performed on the current page; returns **false** otherwise.| 258 259**Error codes** 260 261For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 262 263| ID | Error Message | 264|----------|--------------------------------------------------------------------------------------------------| 265| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 266 267### accessStep 268 269accessStep(step: number): boolean 270 271Checks whether this page can navigate forward or backward by the specified number of steps. 272 273**Atomic service API**: This API can be used in atomic services since API version 12. 274 275**System capability**: SystemCapability.ArkUI.ArkUI.Full 276 277**Parameters** 278 279| Name | Type | Mandatory| Description | 280|------|--------|----|-----------------------| 281| step | number | Yes | Number of the steps to take. A positive number means to go forward, and a negative number means to go backward.| 282 283**Return value** 284 285| Type | Description | 286|---------|-----------| 287| boolean | Whether the page can navigate forward or backward by the specified number of steps. Returns **true** if navigation can be performed on the current page; returns **false** otherwise.| 288 289**Error codes** 290 291For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 292 293| ID | Error Message | 294|----------|--------------------------------------------------------------------------------------------------| 295| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | 296| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 297 298### loadUrl 299 300loadUrl(url: string | Resource, headers?: Array\<WebHeader>): void 301 302Loads a specified URL. 303 304**Atomic service API**: This API can be used in atomic services since API version 12. 305 306**System capability**: SystemCapability.ArkUI.ArkUI.Full 307 308**Parameters** 309 310| Name | Type | Mandatory| Description | 311|---------|---------------------------------|----|:---------------| 312| url | string \| [Resource](../../apis-arkui/arkui-ts/ts-types.md#resource) | Yes | URL to load. | 313| headers | Array\<[WebHeader](#webheader)> | No | Additional HTTP request header of the URL.| 314 315**Error codes** 316 317For details about the error codes, see [Webview Error Codes](../../apis-arkweb/errorcode-webview.md). 318 319| ID | Error Message | 320|----------|--------------------------------------------------------------------------------------------------| 321| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | 322| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 323| 17100002 | Invalid url. | 324| 17100003 | Invalid resource path or file type. | 325 326## WebHeader 327 328Describes the request/response header returned by the **AtomicServiceWeb** component. 329 330**Atomic service API**: This API can be used in atomic services since API version 12. 331 332**System capability**: SystemCapability.ArkUI.ArkUI.Full 333 334| Name | Type | Read-Only| Optional| Description | 335|-------------|--------|----|----|---------------| 336| headerKey | string | No | No | Key of the request/response header. | 337| headerValue | string | No | No | Value of the request/response header.| 338 339## OnMessageEvent 340 341Represents the callback invoked when the page is navigated back or destroyed. 342 343**Atomic service API**: This API can be used in atomic services since API version 12. 344 345**System capability**: SystemCapability.ArkUI.ArkUI.Full 346 347| Name | Type | Mandatory| Description | 348|------|----------|----|-------| 349| data | object[] | Yes | Message list.| 350 351## OnErrorReceiveEvent 352 353Represents the callback invoked when an error occurs during web page loading. 354 355**Atomic service API**: This API can be used in atomic services since API version 12. 356 357**System capability**: SystemCapability.ArkUI.ArkUI.Full 358 359| Name | Type | Mandatory| Description | 360|---------|---------------------------------------------------------------------------------------|----|-----------------| 361| request | [WebResourceRequest](../../apis-arkweb/arkts-basic-components-web-WebResourceRequest.md) | Yes | Encapsulation of a web page request. | 362| error | [WebResourceError](../../apis-arkweb/arkts-basic-components-web-WebResourceError.md) | Yes | Encapsulation of a web page resource loading error.| 363 364## OnHttpErrorReceiveEvent 365 366Represents the callback invoked when an HTTP error occurs during web page resource loading. 367 368**Atomic service API**: This API can be used in atomic services since API version 12. 369 370**System capability**: SystemCapability.ArkUI.ArkUI.Full 371 372| Name | Type | Mandatory| Description | 373|----------|-----------------------------------------------------------------------------------------|----|------------| 374| request | [WebResourceRequest](../../apis-arkweb/arkts-basic-components-web-WebResourceRequest.md) | Yes | Encapsulation of a web page request.| 375| response | [WebResourceResponse](../../apis-arkweb/arkts-basic-components-web-WebResourceResponse.md) | Yes | Encapsulation of a resource response.| 376 377## OnPageBeginEvent 378 379Represents the callback invoked when the web page loading begins. 380 381**Atomic service API**: This API can be used in atomic services since API version 12. 382 383**System capability**: SystemCapability.ArkUI.ArkUI.Full 384 385| Name | Type | Mandatory| Description | 386|-----|--------|----|-----------| 387| url | string | Yes | URL of the page.| 388 389## OnPageEndEvent 390 391Represents the callback invoked when the web page loading ends. 392 393**Atomic service API**: This API can be used in atomic services since API version 12. 394 395**System capability**: SystemCapability.ArkUI.ArkUI.Full 396 397| Name | Type | Mandatory| Description | 398|-----|--------|----|-----------| 399| url | string | Yes | URL of the page.| 400 401## OnLoadInterceptEvent 402 403Represents the event triggered when resource loading is intercepted. 404 405**Atomic service API**: This API can be used in atomic services since API version 12. 406 407**System capability**: SystemCapability.ArkUI.ArkUI.Full 408 409| Name | Type | Mandatory | Description | 410| -------------- | ---- | ---- | ---------------------------------------- | 411| data | [WebResourceRequest](../../apis-arkweb/arkts-basic-components-web-WebResourceRequest.md) | Yes| Encapsulation of a web page request.| 412 413## OnProgressChangeEvent 414 415Represents the callback invoked when the web page loading progress changes. 416 417**Atomic service API**: This API can be used in atomic services since API version 12. 418 419**System capability**: SystemCapability.ArkUI.ArkUI.Full 420 421| Name | Type | Mandatory | Description | 422| -------------- | ---- | ---- | ---------------------------------------- | 423| newProgress | number | Yes| New loading progress. The value is an integer ranging from 0 to 100. | 424 425## OnLoadInterceptCallback 426 427type OnLoadInterceptCallback = (event: OnLoadInterceptEvent) => boolean 428 429Represents the callback invoked when resource loading is intercepted. 430 431**Atomic service API**: This API can be used in atomic services since API version 12. 432 433**System capability**: SystemCapability.ArkUI.ArkUI.Full 434 435**Parameters** 436 437| Name | Type | Mandatory| Description | 438|------|--------|----|-----------------------| 439| event | OnLoadInterceptEvent | Yes | Event triggered when resource loading is intercepted.| 440 441**Return value** 442 443| Type | Description | 444|---------|-----------| 445| boolean | Whether the resource is intercepted.| 446 447## Events 448 449The [universal events](ts-component-general-events.md) are not supported. 450 451## Example 452 453### Example 1 454 455This example loads a local web page: 456 457```ts 458// xxx.ets 459import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 460 461@Entry 462@Component 463struct WebComponent { 464 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 465 466 build() { 467 Column() { 468 AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.controller }) 469 } 470 } 471} 472``` 473 474### Example 2 475 476This example loads an online web page: 477 478```ts 479// xxx.ets 480import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 481 482@Entry 483@Component 484struct WebComponent { 485 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 486 487 build() { 488 Column() { 489 AtomicServiceWeb({ src: 'https://www.example.com', controller: this.controller }) 490 } 491 } 492} 493``` 494 495### Example 3 496 497This example demonstrates how to load a web page within a **NavDestination** container. 498 499```ts 500// xxx.ets 501import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 502 503@Builder 504export function WebComponentBuilder(name: string, param: Object) { 505 WebComponent() 506} 507 508@Component 509struct WebComponent { 510 navPathStack: NavPathStack = new NavPathStack(); 511 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 512 513 build() { 514 NavDestination() { 515 AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.controller, navPathStack: this.navPathStack }) 516 } 517 .onReady((context: NavDestinationContext) => { 518 this.navPathStack = context.pathStack; 519 }) 520 } 521} 522``` 523 524### Example 4 525 526This example sets the **onMessage()** event callback. 527 528```ts 529// xxx.ets 530import { AtomicServiceWeb, AtomicServiceWebController, OnMessageEvent } from '@kit.ArkUI'; 531 532@Entry 533@Component 534struct WebComponent { 535 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 536 537 build() { 538 Column() { 539 AtomicServiceWeb({ 540 src: $rawfile("index.html"), 541 controller: this.controller, 542 // Called when the user clicks Send Message and then Back on an HTML5 page. 543 onMessage: (event: OnMessageEvent) => { 544 console.info(`[AtomicServiceWebLog] onMessage data = ${JSON.stringify(event.data)}`); 545 } 546 }) 547 } 548 } 549} 550``` 551 552```html 553// index.html 554<!DOCTYPE html> 555<html> 556<meta charset="utf-8"> 557<!-- Import the JS SDK file. --> 558<script src="../js/atomicservice-sdk.js" type="text/javascript"></script> 559<body> 560<h1>JS SDK - postMessage()</h1> 561<br/> 562<button type="button" onclick="postMessage({ name: 'Jerry', age: 18 });">Send Message</button> 563<br/> 564<button type="button" onclick="back();">Back</button> 565</body> 566<script type="text/javascript"> 567 function postMessage(data) { 568 // API provided by the JS SDK for sending messages. 569 has.asWeb.postMessage({ 570 data: data, 571 callback: (err, res) => { 572 if (err) { 573 console.error(`[AtomicServiceWebLog H5] postMessage error err. Code: ${err.code}, message: ${err.message}`); 574 } else { 575 console.info(`[AtomicServiceWebLog H5] postMessage success res = ${JSON.stringify(res)}`); 576 } 577 } 578 }); 579 } 580 581 function back() { 582 // Router API provided by the JS SDK for navigation back. 583 has.router.back({ 584 delta: 1 585 }); 586 } 587</script> 588</html> 589``` 590 591### Example 5 592 593This example sets the web page loading event callbacks. 594 595```ts 596// xxx.ets 597import { 598 AtomicServiceWeb, 599 AtomicServiceWebController, 600 OnErrorReceiveEvent, 601 OnHttpErrorReceiveEvent, 602 OnPageBeginEvent, 603 OnPageEndEvent 604} from '@kit.ArkUI'; 605 606@Entry 607@Component 608struct WebComponent { 609 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 610 611 build() { 612 Column() { 613 AtomicServiceWeb({ 614 src: $rawfile('index.html'), 615 controller: this.controller, 616 // Invoked when an error occurs during web page loading. 617 onErrorReceive: (event: OnErrorReceiveEvent) => { 618 console.info(`AtomicServiceWebLog onErrorReceive event = ${JSON.stringify({ 619 requestUrl: event.request?.getRequestUrl(), 620 requestMethod: event.request?.getRequestMethod(), 621 errorCode: event.error?.getErrorCode(), 622 errorInfo: event.error?.getErrorInfo() 623 })}`); 624 }, 625 // Invoked when an HTTP error occurs during web page resource loading. 626 onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => { 627 console.info(`AtomicServiceWebLog onHttpErrorReceive event = ${JSON.stringify({ 628 requestUrl: event.request?.getRequestUrl(), 629 requestMethod: event.request?.getRequestMethod(), 630 responseCode: event.response?.getResponseCode(), 631 responseData: event.response?.getResponseData(), 632 })}`); 633 }, 634 // Invoked when the web page starts to be loaded. 635 onPageBegin: (event: OnPageBeginEvent) => { 636 console.info(`AtomicServiceWebLog onPageBegin event = ${JSON.stringify({ 637 url: event.url 638 })}`); 639 }, 640 // Invoked when loading of the web page is complete. 641 onPageEnd: (event: OnPageEndEvent) => { 642 console.info(`AtomicServiceWebLog onPageEnd event = ${JSON.stringify({ 643 url: event.url 644 })}`); 645 } 646 }) 647 } 648 } 649} 650``` 651 652### Example 6 653 654This example demonstrates how to use **AtomicServiceWeb** and **AtomicServiceWebController**. 655 656```ts 657// xxx.ets 658import { 659 AtomicServiceWeb, 660 AtomicServiceWebController, 661 OnErrorReceiveEvent, 662 OnHttpErrorReceiveEvent, 663 OnPageBeginEvent, 664 OnPageEndEvent, 665 OnMessageEvent, 666 OnLoadInterceptEvent, 667 OnProgressChangeEvent 668} from '@kit.ArkUI'; 669 670@Entry 671@Component 672struct WebComponent { 673 @State darkMode: WebDarkMode = WebDarkMode.On; 674 @State forceDarkAccess: boolean = true; 675 @State mixedMode: MixedMode = MixedMode.None; 676 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 677 @State num: number = 1; 678 679 build() { 680 Column() { 681 Button('accessForward').onClick(() => { 682 console.info(`AtomicServiceWebLog accessForward = ${this.controller.accessForward()}`); 683 }) 684 Button('accessBackward').onClick(() => { 685 console.info(`AtomicServiceWebLog accessBackward = ${this.controller.accessBackward()}`); 686 }) 687 Button('accessStep').onClick(() => { 688 console.info(`AtomicServiceWebLog accessStep = ${this.controller.accessStep(1)}`); 689 }) 690 Button('forward').onClick(() => { 691 console.info(`AtomicServiceWebLog forward = ${this.controller.forward()}`); 692 }) 693 Button('backward').onClick(() => { 694 console.info(`AtomicServiceWebLog backward = ${this.controller.backward()}`); 695 }) 696 Button('refresh').onClick(() => { 697 console.info(`AtomicServiceWebLog refresh = ${this.controller.refresh()}`); 698 }) 699 Button('loadUrl').onClick(() => { 700 console.info(`AtomicServiceWebLog loadUrl = ${this.controller.loadUrl('https://www.baidu.com/')}`); 701 }) 702 Button('Dark Mode').onClick(() => { 703 this.forceDarkAccess = !this.forceDarkAccess; 704 }) 705 Button('mixedMode').onClick(() => { 706 this.mixedMode = this.mixedMode == MixedMode.None ? MixedMode.All : MixedMode.None; 707 }) 708 Button('Click').onClick(() => { 709 console.info(`AtomicServiceWebLog getUserAgent = ${this.controller.getUserAgent()}`); 710 console.info(`AtomicServiceWebLog getCustomUserAgent = ${this.controller.getCustomUserAgent()}`); 711 this.controller.setCustomUserAgent('test' + this.num++); 712 713 console.info(`AtomicServiceWebLog getUserAgent after set = ${this.controller.getUserAgent()}`); 714 console.info(`AtomicServiceWebLog getCustomUserAgent after set = ${this.controller.getCustomUserAgent()}`); 715 }) 716 AtomicServiceWeb({ 717 src: 'https://www.example.com', 718 mixedMode: this.mixedMode, 719 darkMode: this.darkMode, 720 forceDarkAccess: this.forceDarkAccess, 721 controller: this.controller, 722 onControllerAttached: () => { 723 console.info("AtomicServiceWebLog onControllerAttached call back success"); 724 }, 725 onLoadIntercept: (event: OnLoadInterceptEvent) => { 726 console.info("AtomicServiceWebLog onLoadIntercept call back success " + JSON.stringify({ 727 getRequestUrl: event.data.getRequestUrl(), 728 getRequestMethod: event.data.getRequestMethod(), 729 getRequestHeader: event.data.getRequestHeader(), 730 isRequestGesture: event.data.isRequestGesture(), 731 isMainFrame: event.data.isMainFrame(), 732 isRedirect: event.data.isRedirect(), 733 })) 734 return false; 735 }, 736 onProgressChange: (event: OnProgressChangeEvent) => { 737 console.info("AtomicServiceWebLog onProgressChange call back success " + JSON.stringify(event)); 738 }, 739 onMessage: (event: OnMessageEvent) => { 740 console.info("onMessage call back success " + JSON.stringify(event)); 741 }, 742 onPageBegin: (event: OnPageBeginEvent) => { 743 console.info("onPageBegin call back success " + JSON.stringify(event)); 744 }, 745 onPageEnd: (event: OnPageEndEvent) => { 746 console.info("onPageEnd call back success " + JSON.stringify(event)); 747 }, 748 onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => { 749 console.info("onHttpErrorReceive call back success " + JSON.stringify(event)); 750 }, 751 onErrorReceive: (event: OnErrorReceiveEvent) => { 752 console.info("onErrorReceive call back success " + JSON.stringify(event)); 753 } 754 }) 755 } 756 } 757} 758``` 759 760### Example 7 761 762This example shows how to set nested scrolling. 763 764```ts 765import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 766 767@Entry 768@Component 769struct AtomicServiceNestedScroll { 770 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 771 @State mode: string = 'PARALLEL mode (click to switch)'; 772 @State nestedScroll: NestedScrollOptions | NestedScrollOptionsExt = { 773 scrollForward: NestedScrollMode.PARALLEL, 774 scrollBackward: NestedScrollMode.PARALLEL 775 }; 776 777 build() { 778 Scroll() { 779 Column() { 780 Text("Nested Web - Header") 781 .height("15%") 782 .width("100%") 783 .fontSize(30) 784 .backgroundColor(Color.Yellow) 785 Button(this.mode) 786 .margin({ top: 10, bottom: 10 }) 787 .onClick(() => { 788 if (!(this.nestedScroll as NestedScrollOptions).scrollForward) { 789 this.mode = 'SELF_FIRST mode (click to switch)'; 790 this.nestedScroll = { 791 scrollForward: NestedScrollMode.SELF_FIRST, 792 scrollBackward: NestedScrollMode.SELF_FIRST 793 } 794 } else { 795 this.mode = 'PARENT_FIRST mode (click to switch)'; 796 this.nestedScroll = { 797 scrollUp: NestedScrollMode.PARENT_FIRST, 798 scrollDown: NestedScrollMode.PARENT_FIRST 799 } 800 } 801 }) 802 AtomicServiceWeb({ 803 src: 'https://www.example.com', 804 controller: this.controller, 805 nestedScroll: this.nestedScroll 806 }) 807 Text("Nested Web - Footer") 808 .height("15%") 809 .width("100%") 810 .fontSize(30) 811 .backgroundColor(Color.Yellow) 812 } 813 } 814 } 815} 816``` 817<!--no_check-->