1# AtomicServiceWeb 2 3为开发者提供满足定制化诉求的Web高阶组件，屏蔽原生Web组件中无需关注的接口，并提供JS扩展能力。 4 5> **说明：** 6> 7> - 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> - 示例效果请以真机运行为准，当前IDE预览器不支持。 9 10## 需要权限 11 12访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考[声明权限](../../../security/AccessToken/declare-permissions.md)。 13 14## 导入模块 15 16``` 17import { AtomicServiceWeb } from '@kit.ArkUI'; 18``` 19 20## 子组件 21 22无 23 24## 属性 25 26不支持[通用属性](ts-universal-attributes-size.md) 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 onMessage?: Callback<OnMessageEvent>, 39 onErrorReceive?: Callback<OnErrorReceiveEvent>, 40 onHttpErrorReceive?: Callback<OnHttpErrorReceiveEvent>, 41 onPageBegin?: Callback<OnPageBeginEvent>, 42 onPageEnd?: Callback<OnPageEndEvent>, 43 onControllerAttached?: Callback<void>, 44 onLoadIntercept?: Callback<OnLoadInterceptEvent, boolean>, 45 onProgressChange?: Callback<OnProgressChangeEvent> 46}) 47``` 48 49**装饰器类型：**@Component 50 51**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**参数**： 56 57| 名称 | 类型 | 必填 | 装饰器类型 | 描述 | 58|----------------------|------------------------------------------------------------------------------------------------------------------|----|-------------|----------------------------------------------------------------------------------------------------------------------| 59| src | [ResourceStr](ts-types.md#resourcestr) | 是 | - | 网页资源地址，访问网络资源需要在AGC配置业务域名，访问本地资源仅支持包内文件（$rawfile）。不支持通过状态变量（例如@State）动态更新地址。加载的网页中支持通过JS SDK提供的接口调用系统能力，具体以JS SDK为准。 | 60| controller | [AtomicServiceWebController](#atomicservicewebcontroller) | 是 | @ObjectLink | 通过AtomicServiceWebController可以控制AtomicServiceWeb组件各种行为。 | 61| navPathStack | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | 否 | - | 路由栈信息。当使用NavDestination作为页面的根容器时，需传入NavDestination容器对应的NavPathStack处理页面路由。 | 62| mixedMode | [MixedMode](../../apis-arkweb/ts-basic-components-web.md#mixedmode枚举说明) | 否 | @Prop | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 | 63| darkMode | [WebDarkMode](../../apis-arkweb/ts-basic-components-web.md#webdarkmode9枚举说明) | 否 | @Prop | 设置Web深色模式，默认关闭。 | 64| forceDarkAccess | boolean | 否 | @Prop | 设置网页是否开启强制深色模式。默认关闭。该属性仅在darkMode开启深色模式时生效。 | 65| onMessage | Callback\<[OnMessageEvent](#onmessageevent)\> | 否 | - | H5页面通过JS SDK的postMessage()发送消息后，Web组件对应的页面返回或销毁时，触发该回调。 | 66| onErrorReceive | Callback\<[OnErrorReceiveEvent](#onerrorreceiveevent)\> | 否 | - | 网页加载遇到错误时触发该回调。出于性能考虑，建议此回调中尽量执行简单逻辑。在无网络的情况下，触发此回调。 | 67| onHttpErrorReceive | Callback\<[OnHttpErrorReceiveEvent](#onhttperrorreceiveevent)\> | 否 | - | 网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。 | 68| onPageBegin | Callback\<[OnPageBeginEvent](#onpagebeginevent)\> | 否 | - | 网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。 | 69| onPageEnd | Callback\<[OnPageEndEvent](#onpageendevent)\> | 否 | - | 网页加载完成时触发该回调，且只在主frame触发。 | 70| onControllerAttached | Callback\<void\> | 否 | - | 当Controller成功绑定到Web组件时触发该回调。 | 71| onLoadIntercept | Callback\<[OnLoadInterceptEvent](../../apis-arkweb/ts-basic-components-web.md#onloadinterceptevent12), boolean\> | 否 | - | 当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 | 72| onProgressChange | Callback\<[OnProgressChangeEvent](../../apis-arkweb/ts-basic-components-web.md#onprogresschangeevent12)\> | 否 | - | 网页加载进度变化时触发该回调。 | 73 74## AtomicServiceWebController 75 76通过AtomicServiceWebController可以控制AtomicServiceWeb组件各种行为。一个AtomicServiceWebController对象只能控制一个AtomicServiceWeb组件，且必须在AtomicServiceWeb组件和AtomicServiceWebController绑定后，才能调用AtomicServiceWebController上的方法。 77 78**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82### constructor 83 84constructor() 85 86用于创建 AtomicServiceWebController 对象的构造函数。 87 88**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92### getUserAgent 93 94getUserAgent(): string 95 96获取当前默认用户代理。 97 98**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 99 100**系统能力：** SystemCapability.ArkUI.ArkUI.Full 101 102**返回值：** 103 104| 类型 | 说明 | 105|--------|---------| 106| string | 默认用户代理。 | 107 108**错误码：** 109 110以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md)。 111 112| 错误码ID | 错误信息 | 113|----------|--------------------------------------------------------------------------------------------------| 114| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 115 116### getCustomUserAgent 117 118getCustomUserAgent(): string 119 120获取自定义用户代理。 121 122**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 123 124**系统能力：** SystemCapability.ArkUI.ArkUI.Full 125 126**返回值：** 127 128| 类型 | 说明 | 129|--------|------------| 130| string | 用户自定义代理信息。 | 131 132**错误码：** 133 134以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 135 136| 错误码ID | 错误信息 | 137|----------|--------------------------------------------------------------------------------------------------| 138| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 139 140### setCustomUserAgent 141 142setCustomUserAgent(userAgent: string): void 143 144设置自定义用户代理，会覆盖系统的用户代理。 145 146建议在onControllerAttached回调事件中设置UserAgent，设置方式请参考示例。不建议将UserAgent设置在onLoadIntercept回调事件中，会概率性出现设置失败。 147 148> **说明：** 149> 150>当Web组件src设置了url，且未在onControllerAttached回调事件中设置UserAgent。再调用setCustomUserAgent方法时，可能会出现加载的页面与实际设置UserAgent不符的异常现象。 151 152**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 153 154**系统能力：** SystemCapability.ArkUI.ArkUI.Full 155 156**参数：** 157 158| 参数名 | 类型 | 必填 | 说明 | 159|-----------|--------|----|--------------------------------------------------------------------------| 160| userAgent | string | 是 | 用户自定义代理信息。建议先使用[getUserAgent](#getuseragent)获取当前默认用户代理，在此基础上追加自定义用户代理信息。 | 161 162**错误码：** 163 164以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 165 166| 错误码ID | 错误信息 | 167|----------|--------------------------------------------------------------------------------------------------| 168| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 169 170### refresh 171 172refresh(): void 173 174调用此接口通知AtomicServiceWeb组件刷新网页。 175 176**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 177 178**系统能力：** SystemCapability.ArkUI.ArkUI.Full 179 180**错误码：** 181 182以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 183 184| 错误码ID | 错误信息 | 185|----------|--------------------------------------------------------------------------------------------------| 186| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 187 188### forward 189 190forward(): void 191 192按照历史栈，前进一个页面。一般结合[accessForward](#accessforward)一起使用。 193 194**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 195 196**系统能力：** SystemCapability.ArkUI.ArkUI.Full 197 198**错误码：** 199 200以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 201 202| 错误码ID | 错误信息 | 203|----------|--------------------------------------------------------------------------------------------------| 204| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 205 206### backward 207 208backward(): void 209 210按照历史栈，后退一个页面。一般结合[accessBackward](#accessbackward)一起使用。 211 212**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 213 214**系统能力：** SystemCapability.ArkUI.ArkUI.Full 215 216**错误码：** 217 218以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 219 220| 错误码ID | 错误信息 | 221|----------|--------------------------------------------------------------------------------------------------| 222| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 223 224### accessForward 225 226accessForward(): boolean 227 228当前页面是否可前进，即当前页面是否有前进历史记录。 229 230**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 231 232**系统能力：** SystemCapability.ArkUI.ArkUI.Full 233 234**返回值：** 235 236| 类型 | 说明 | 237|---------|-----------------------| 238| boolean | 可以前进返回true，否则返回false。 | 239 240**错误码：** 241 242以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 243 244| 错误码ID | 错误信息 | 245|----------|--------------------------------------------------------------------------------------------------| 246| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 247 248### accessBackward 249 250accessBackward(): boolean 251 252当前页面是否可后退，即当前页面是否有返回历史记录。 253 254**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 255 256**系统能力：** SystemCapability.ArkUI.ArkUI.Full 257 258**返回值：** 259 260| 类型 | 说明 | 261|---------|-----------------------| 262| boolean | 可以后退返回true，否则返回false。 | 263 264**错误码：** 265 266以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 267 268| 错误码ID | 错误信息 | 269|----------|--------------------------------------------------------------------------------------------------| 270| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 271 272### accessStep 273 274accessStep(step: number): boolean 275 276当前页面是否可前进或者后退给定的step步。 277 278**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 279 280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 281 282**参数：** 283 284| 参数名 | 类型 | 必填 | 说明 | 285|------|--------|----|-----------------------| 286| step | number | 是 | 要跳转的步数，正数代表前进，负数代表后退。 | 287 288**返回值：** 289 290| 类型 | 说明 | 291|---------|-----------| 292| boolean | 页面是否可前进或者后退给定的step步 | 293 294**错误码：** 295 296以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 297 298| 错误码ID | 错误信息 | 299|----------|--------------------------------------------------------------------------------------------------| 300| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 301 302### loadUrl 303 304loadUrl(url: string | Resource, headers?: Array\<WebHeader>): void 305 306加载指定的URL。 307 308**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 309 310**系统能力：** SystemCapability.ArkUI.ArkUI.Full 311 312**参数：** 313 314| 参数名 | 类型 | 必填 | 说明 | 315|---------|---------------------------------|----|:---------------| 316| url | string \| [Resource](../../apis-arkui/arkui-ts/ts-types.md#resource) | 是 | 需要加载的 URL。 | 317| headers | Array\<[WebHeader](#webheader)> | 否 | URL的附加HTTP请求头。 | 318 319**错误码：** 320 321以下错误码的详细介绍请参见[错误码](../../apis-arkweb/errorcode-webview.md). 322 323| 错误码ID | 错误信息 | 324|----------|--------------------------------------------------------------------------------------------------| 325| 17100001 | Init error. The AtomicServiceWebController must be associated with a AtomicServiceWeb component. | 326| 17100002 | Invalid url. | 327| 17100003 | Invalid resource path or file type. | 328 329## WebHeader 330 331Web组件返回的请求/响应头对象。 332 333| 名称 | 类型 | 可读 | 可写 | 说明 | 334|-------------|--------|----|----|---------------| 335| headerKey | string | 是 | 是 | 请求/响应头的key。 | 336| headerValue | string | 是 | 是 | 请求/响应头的value。 | 337 338## OnMessageEvent 339 340定义页面回退或销毁时触发该回调。 341 342**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 343 344**系统能力：** SystemCapability.ArkUI.ArkUI.Full 345 346| 名称 | 类型 | 必填 | 说明 | 347|------|----------|----|-------| 348| data | Object[] | 是 | 消息列表。 | 349 350## OnErrorReceiveEvent 351 352定义网页加载遇到错误时触发该回调。 353 354**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 355 356**系统能力：** SystemCapability.ArkUI.ArkUI.Full 357 358| 名称 | 类型 | 必填 | 说明 | 359|---------|---------------------------------------------------------------------------------------|----|-----------------| 360| request | [WebResourceRequest](../../apis-arkweb/ts-basic-components-web.md#webresourcerequest) | 是 | 网页请求的封装信息。 | 361| error | [WebResourceError](../../apis-arkweb/ts-basic-components-web.md#webresourceerror) | 是 | 网页加载资源错误的封装信息 。 | 362 363## OnHttpErrorReceiveEvent 364 365定义网页收到加载资源加载HTTP错误时触发。 366 367**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 368 369**系统能力：** SystemCapability.ArkUI.ArkUI.Full 370 371| 名称 | 类型 | 必填 | 说明 | 372|----------|-----------------------------------------------------------------------------------------|----|------------| 373| request | [WebResourceRequest](../../apis-arkweb/ts-basic-components-web.md#webresourcerequest) | 是 | 网页请求的封装信息。 | 374| response | [WebResourceResponse](../../apis-arkweb/ts-basic-components-web.md#webresourceresponse) | 是 | 资源响应的封装信息。 | 375 376## OnPageBeginEvent 377 378定义网页加载开始时触发的函数。 379 380**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 381 382**系统能力：** SystemCapability.ArkUI.ArkUI.Full 383 384| 名称 | 类型 | 必填 | 说明 | 385|-----|--------|----|-----------| 386| url | string | 是 | 页面的URL地址。 | 387 388## OnPageEndEvent 389 390定义网页加载结束时触发的函数。 391 392**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 393 394**系统能力：** SystemCapability.ArkUI.ArkUI.Full 395 396| 名称 | 类型 | 必填 | 说明 | 397|-----|--------|----|-----------| 398| url | string | 是 | 页面的URL地址。 | 399 400## 事件 401 402不支持[通用事件](ts-universal-events-click.md) 403 404## 示例 405 406### 示例1 407 408加载本地网页。 409 410```ts 411// xxx.ets 412import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 413 414@Entry 415@Component 416struct WebComponent { 417 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 418 419 build() { 420 Column() { 421 AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.controller }) 422 } 423 } 424} 425``` 426 427### 示例2 428 429加载在线网页。 430 431```ts 432// xxx.ets 433import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 434 435@Entry 436@Component 437struct WebComponent { 438 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 439 440 build() { 441 Column() { 442 AtomicServiceWeb({ src: 'https://www.example.com', controller: this.controller }) 443 } 444 } 445} 446``` 447 448### 示例3 449 450NavDestination容器中加载网页。 451 452```ts 453// xxx.ets 454import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI'; 455 456@Builder 457export function WebComponentBuilder(name: string, param: Object) { 458 WebComponent() 459} 460 461@Component 462struct WebComponent { 463 navPathStack: NavPathStack = new NavPathStack(); 464 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 465 466 build() { 467 NavDestination() { 468 AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.controller, navPathStack: this.navPathStack }) 469 } 470 .onReady((context: NavDestinationContext) => { 471 this.navPathStack = context.pathStack; 472 }) 473 } 474} 475``` 476 477### 示例4 478 479设置onMessage()事件回调。 480 481```ts 482// xxx.ets 483import { AtomicServiceWeb, AtomicServiceWebController, OnMessageEvent } from '@kit.ArkUI'; 484 485@Entry 486@Component 487struct WebComponent { 488 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 489 490 build() { 491 Column() { 492 AtomicServiceWeb({ 493 src: $rawfile("index.html"), 494 controller: this.controller, 495 // H5页面点击“发送消息”后，再点击“返回上一页”，触发该回调 496 onMessage: (event: OnMessageEvent) => { 497 console.log(`[AtomicServiceWebLog] onMessage data=${JSON.stringify(event.data)}`); 498 } 499 }) 500 } 501 } 502} 503``` 504 505```html 506// index.html 507<!DOCTYPE html> 508<html> 509<meta charset="utf-8"> 510<!-- 引入JS SDK文件 --> 511<script src="../js/atomicservice-sdk.js" type="text/javascript"></script> 512<body> 513<h1>JS SDK - postMessage()</h1> 514<br/> 515<button type="button" onclick="postMessage({ name: 'Jerry', age: 18 });">发送消息</button> 516<br/> 517<button type="button" onclick="back();">返回上一页</button> 518</body> 519<script type="text/javascript"> 520 function postMessage(data) { 521 // JS SDK提供的发送消息接口 522 has.asWeb.postMessage({ 523 data: data, 524 callback: (err, res) => { 525 if (err) { 526 console.error('[AtomicServiceWebLog H5] postMessage error err=' + JSON.stringify(err)); 527 } else { 528 console.log('[AtomicServiceWebLog H5] postMessage success res=' + JSON.stringify(res)); 529 } 530 } 531 }); 532 } 533 534 function back() { 535 // JS SDK提供的Router路由回退接口 536 has.router.back({ 537 delta: 1 538 }); 539 } 540</script> 541</html> 542``` 543 544### 示例5 545 546设置网页加载事件回调。 547 548```ts 549// xxx.ets 550import { 551 AtomicServiceWeb, 552 AtomicServiceWebController, 553 OnErrorReceiveEvent, 554 OnHttpErrorReceiveEvent, 555 OnPageBeginEvent, 556 OnPageEndEvent 557} from '@kit.ArkUI'; 558 559@Entry 560@Component 561struct WebComponent { 562 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 563 564 build() { 565 Column() { 566 AtomicServiceWeb({ 567 src: $rawfile('index.html'), 568 controller: this.controller, 569 // 网页加载遇到错误时触发该回调 570 onErrorReceive: (event: OnErrorReceiveEvent) => { 571 console.log(`AtomicServiceWebLog onErrorReceive event=${JSON.stringify({ 572 requestUrl: event.request?.getRequestUrl(), 573 requestMethod: event.request?.getRequestMethod(), 574 errorCode: event.error?.getErrorCode(), 575 errorInfo: event.error?.getErrorInfo() 576 })}`); 577 }, 578 // 网页加载遇到HTTP资源加载错误时触发该回调 579 onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => { 580 console.log(`AtomicServiceWebLog onHttpErrorReceive event=${JSON.stringify({ 581 requestUrl: event.request?.getRequestUrl(), 582 requestMethod: event.request?.getRequestMethod(), 583 responseCode: event.response?.getResponseCode(), 584 responseData: event.response?.getResponseData(), 585 })}`); 586 }, 587 // 页面开始加载，触发该回调 588 onPageBegin: (event: OnPageBeginEvent) => { 589 console.log(`AtomicServiceWebLog onPageBegin event=${JSON.stringify({ 590 url: event.url 591 })}`); 592 }, 593 // 页面加载完成，触发该回调 594 onPageEnd: (event: OnPageEndEvent) => { 595 console.log(`AtomicServiceWebLog onPageEnd event=${JSON.stringify({ 596 url: event.url 597 })}`); 598 } 599 }) 600 } 601 } 602} 603``` 604 605### 示例6 606 607AtomicServiceWeb跟AtomicServiceWebController的使用示例。 608 609```ts 610// xxx.ets 611import { 612 AtomicServiceWeb, 613 AtomicServiceWebController, 614 OnErrorReceiveEvent, 615 OnHttpErrorReceiveEvent, 616 OnPageBeginEvent, 617 OnPageEndEvent, 618 OnMessageEvent, 619 OnLoadInterceptEvent, 620 OnProgressChangeEvent 621} from '@kit.ArkUI'; 622 623@Entry 624@Component 625struct WebComponent { 626 @State darkMode: WebDarkMode = WebDarkMode.On; 627 @State forceDarkAccess: boolean = true; 628 @State mixedMode: MixedMode = MixedMode.None; 629 @State controller: AtomicServiceWebController = new AtomicServiceWebController(); 630 @State num: number = 1; 631 632 build() { 633 Column() { 634 Button('accessForward').onClick(() => { 635 console.log(`AtomicServiceWebLog accessForward = ${this.controller.accessForward()}`); 636 }) 637 Button('accessBackward').onClick(() => { 638 console.log(`AtomicServiceWebLog accessBackward = ${this.controller.accessBackward()}`); 639 }) 640 Button('accessStep').onClick(() => { 641 console.log(`AtomicServiceWebLog accessStep = ${this.controller.accessStep(1)}`); 642 }) 643 Button('forward').onClick(() => { 644 console.log(`AtomicServiceWebLog forward = ${this.controller.forward()}`); 645 }) 646 Button('backward').onClick(() => { 647 console.log(`AtomicServiceWebLog backward = ${this.controller.backward()}`); 648 }) 649 Button('refresh').onClick(() => { 650 console.log(`AtomicServiceWebLog refresh = ${this.controller.refresh()}`); 651 }) 652 Button('loadUrl').onClick(() => { 653 console.log(`AtomicServiceWebLog loadUrl = ${this.controller.loadUrl('https://www.baidu.com/')}`); 654 }) 655 Button('深色模式').onClick(() => { 656 this.forceDarkAccess = !this.forceDarkAccess; 657 }) 658 Button('mixedMode').onClick(() => { 659 this.mixedMode = this.mixedMode == MixedMode.None ? MixedMode.All : MixedMode.None; 660 }) 661 Button('点击').onClick(() => { 662 console.log(`AtomicServiceWebLog getUserAgent = ${this.controller.getUserAgent()}`); 663 console.log(`AtomicServiceWebLog getCustomUserAgent = ${this.controller.getCustomUserAgent()}`); 664 this.controller.setCustomUserAgent('test' + this.num++); 665 666 console.log(`AtomicServiceWebLog getUserAgent after set = ${this.controller.getUserAgent()}`); 667 console.log(`AtomicServiceWebLog getCustomUserAgent after set = ${this.controller.getCustomUserAgent()}`); 668 }) 669 AtomicServiceWeb({ 670 src: 'https://www.example.com', 671 mixedMode: this.mixedMode, 672 darkMode: this.darkMode, 673 forceDarkAccess: this.forceDarkAccess, 674 controller: this.controller, 675 onControllerAttached: () => { 676 console.log("AtomicServiceWebLog onControllerAttached call back success"); 677 }, 678 onLoadIntercept: (event: OnLoadInterceptEvent) => { 679 console.log("AtomicServiceWebLog onLoadIntercept call back success " + JSON.stringify({ 680 getRequestUrl: event.data.getRequestUrl(), 681 getRequestMethod: event.data.getRequestMethod(), 682 getRequestHeader: event.data.getRequestHeader(), 683 isRequestGesture: event.data.isRequestGesture(), 684 isMainFrame: event.data.isMainFrame(), 685 isRedirect: event.data.isRedirect(), 686 })) 687 return false; 688 }, 689 onProgressChange: (event: OnProgressChangeEvent) => { 690 console.log("AtomicServiceWebLog onProgressChange call back success " + JSON.stringify(event)); 691 }, 692 onMessage: (event: OnMessageEvent) => { 693 console.log("onMessage call back success " + JSON.stringify(event)); 694 }, 695 onPageBegin: (event: OnPageBeginEvent) => { 696 console.log("onPageBegin call back success " + JSON.stringify(event)); 697 }, 698 onPageEnd: (event: OnPageEndEvent) => { 699 console.log("onPageEnd call back success " + JSON.stringify(event)); 700 }, 701 onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => { 702 console.log("onHttpErrorReceive call back success " + JSON.stringify(event)); 703 }, 704 onErrorReceive: (event: OnErrorReceiveEvent) => { 705 console.log("onErrorReceive call back success " + JSON.stringify(event)); 706 } 707 }) 708 } 709 } 710} 711```