@react-native-ohos/react-native-webview 13.10.6-beta.3 → 13.10.6

package/harmony/rn_webview/src/main/ets/RNCWebView.ets

@@ -1,904 +1,1099 @@
-/**
- * MIT License
- *
- * Copyright (C) 2025 Huawei Device Co., Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { RNComponentContext } from '@rnoh/react-native-openharmony';
-import webview from '@ohos.web.webview';
-import { url as OSUrl } from '@kit.ArkTS';
-import { RNC, TM } from './generated';
-import Logger from './Logger';
-import { BaseOperate } from './WebViewBaseOperate';
-import { deviceInfo } from '@kit.BasicServicesKit';
-import {
-  AlertEvent,
-  CACHE_MODE,
-  JAVASCRIPT_INTERFACE,
-  ONE_HUNDRED,
-  EIGHT,
-  ResultType,
-  RNCWebViewBridge,
-  WebViewEventParams,
-  WebViewNewSource,
-  WebViewOverScrollMode,
-  ZERO,
-  COMMAND_NAME,
-  WebViewDescriptor,
-  REFRESH_OFFSET,
-  MINHEIGHT,
-  WebMediaCapturePermissionGrantType,
-  MenuItem
-} from './Magic';
-
-import { abilityAccessCtrl, bundleManager, Permissions } from '@kit.AbilityKit';
-import { WebViewTurboModule, ShouldStartParams, ShouldOverrideCallbackState } from './WebViewTurboModule';
-import { AnyThreadRNInstance, WorkerTaskRunnable } from '@rnoh/react-native-openharmony/src/main/ets/RNOH';
-import buffer from '@ohos.buffer';
-
-export const TAG = "WebView"
-
-export const WEB_VIEW = "RNCWebView"
-
-@Sendable
-class WorkerRunnable implements WorkerTaskRunnable<ShouldStartParams> {
-  run(rnInstance: AnyThreadRNInstance, params: ShouldStartParams): void {
-    params.lockState = ShouldOverrideCallbackState.UNDECIDED
-    rnInstance.getTurboModule<WebViewTurboModule>(TM.RNCWebViewModule.NAME).setShouldStartParams(params)
-  }
-}
-
-@Component
-export struct RNCWebView {
-  public static readonly NAME = RNC.RNCWebView.NAME
-  ctx!: RNComponentContext
-  tag: number = ZERO
-  source: WebViewNewSource = {
-    uri: "",
-    method: "",
-    body: "",
-    html: "",
-    baseUrl: ""
-  }
-  html: string | undefined = "";
-  url: string | Resource = "";
-  body: string | undefined = "";
-  controller: webview.WebviewController = new webview.WebviewController();
-  schemeHandler: webview.WebSchemeHandler = new webview.WebSchemeHandler();
-  javaScriptEnable: boolean = true;
-  allowFileAccess: boolean = true;
-  forceDark: boolean = true;
-  minFontSize: number = EIGHT;
-  overScrollMode: OverScrollMode = OverScrollMode.NEVER;
-  progress: number = ZERO;
-  cacheMode: number = CacheMode.Default;
-  requestUrl: string = "";
-  bundleName: string = "";
-  messagingEnabled: boolean = false;
-  hasRegisterJavaScriptProxy: boolean = false;
-  controllerAttached: boolean = false;
-  renderMode: RenderMode = RenderMode.SYNC_RENDER;
-  scrollEnabled = true;
-  nestedScroll = NestedScrollMode.SELF_FIRST;
-  headers: Array<webview.WebHeader> = []
-  injectedJavaScriptBeforeContentLoaded: Array<ScriptItem> = [
-    { script: '', scriptRules: ["*"] }
-  ];
-  allowPageStartInProgress = true;
-  @State webviewWidth: number = ZERO
-  @State webviewHeight: number = ZERO
-  @State isRefreshing: boolean = false
-  @State mode: MixedMode = MixedMode.All;
-  private unregisterDescriptorChangesListener?: () => void = undefined
-  private cleanupCommandCallback?: () => void = undefined
-  private eventEmitter: RNC.RNCWebView.EventEmitter | undefined = undefined
-  private cleanUpCallbacks: (() => void)[] = []
-  private descriptorWrapper: WebViewDescriptor = Object() as WebViewDescriptor
-  private webViewBaseOperate: BaseOperate | null = null
-  private shouldInterceptLoad: boolean = true
-  private callLoadTimer: number = -1
-  static readonly SHOULD_OVERRIDE_URL_LOADING_TIMEOUT: number = 250
-  private debounceTimer: number = -1
-  static readonly DEBOUNCE_TIME: number = 100
-  private isFirstDebounce: boolean = true
-
-  aboutToAppear() {
-    try {
-      this.initVariable()
-      this.getBundleName()
-      this.url = this.source.uri as string;
-      this.onDescriptorWrapperChange(this.descriptorWrapper)
-      this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
-        (newDescriptor) => {
-          this.onDescriptorWrapperChange(newDescriptor as WebViewDescriptor)
-        }
-      )
-      BaseOperate.setThirdPartyCookiesEnabled(this.descriptorWrapper.rawProps.thirdPartyCookiesEnabled)
-      webview.WebviewController.setWebDebuggingAccess(this.descriptorWrapper.rawProps.webviewDebuggingEnabled)
-      this.registerCommandCallback()
-      if (this.hasIncognito()) {
-        this.cacheMode = CacheMode.Online;
-      }
-      if (this.source.headers) {
-        this.source.headers.forEach(item => {
-          if (item.name && item.value) {
-            this.headers.push({ headerKey: item.name, headerValue: item.value })
-          }
-        })
-      }
-    } catch (error) {
-      Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
-    }
-
-  }
-
-  hasIncognito(): boolean {
-    return this.descriptorWrapper.rawProps.incognito && this.descriptorWrapper.rawProps.incognito === true
-  }
-
-  createWebViewEvent(type: string): WebViewEventParams {
-    return this.webViewBaseOperate?.createWebViewEvent({ type, progress: this.progress }) as WebViewEventParams;
-  }
-
-  aboutToDisappear() {
-    this.getUIContext().getFocusController().clearFocus()
-    this.cleanupCommandCallback?.()
-    this.unregisterDescriptorChangesListener?.()
-    this.cleanUpCallbacks.forEach(cb => cb())
-    try {
-      if (this.hasIncognito()) {
-        this.webViewBaseOperate?.setIncognito()
-      }
-      this.controller.deleteJavaScriptRegister(JAVASCRIPT_INTERFACE)
-      this.controller.refresh()
-      this.hasRegisterJavaScriptProxy = false
-      this.webViewBaseOperate = null
-    } catch (error) {
-      Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
-    }
-  }
-
-  registerCommandCallback() {
-    this.cleanupCommandCallback = this.ctx.componentCommandReceiver.registerCommandCallback(
-      this.tag,
-      (command: COMMAND_NAME, args: string[]) => this.webViewBaseOperate?.registerCommandCallback(command, args));
-  }
-
-  onLoadingStart() {
-    this.webViewBaseOperate?.emitLoadingStart({ progress: this.progress })
-  }
-
-  onProgressChange(event: OnProgressChangeEvent) {
-    this.progress = event.newProgress
-    // 修复单页面应用切换路由时 onPageBegin 未触发的问题
-    if (this.controller.getUrl() !== this.url && this.progress < ONE_HUNDRED && this.allowPageStartInProgress) {
-      this.allowPageStartInProgress = false;
-      this.onLoadingStart();
-    }
-    this.webViewBaseOperate?.emitProgressChange({ progress: this.progress })
-    if (this.progress === ONE_HUNDRED) {
-      this.allowPageStartInProgress = true;
-    }
-  }
-
-  onLoadingFinish() {
-    this.webViewBaseOperate?.emitLoadingFinish({ progress: this.progress })
-    this.isRefreshing = false
-  }
-
-  runInjectedJavaScript() {
-    let injectedJS = this.descriptorWrapper.rawProps.injectedJavaScript
-    if (this.javaScriptEnable && injectedJS != "" && this.controllerAttached) {
-      try {
-        this.controller.runJavaScript("(function() {\n" + injectedJS + ";\n})();")
-          .then((result) => {
-            Logger.debug(TAG, '[RNOH] result: ' + result);
-          })
-          .catch((error: string | Error) => {
-            Logger.error(TAG, "[RNOH] error: " + error);
-          })
-      } catch (error) {
-        Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
-      }
-    }
-  }
-
-  getJsDialogTitle() {
-    const url = this.controller.getUrl()
-    // 对于 data: URL，只显示 'JavaScript'，类似于 Chrome
-    let title = 'JavaScript';
-    const isDataUrl = (url !== null) && url.startsWith("data:");
-
-
-    if (!isDataUrl) {
-      try {
-        const dialogUrl = OSUrl.URL.parseURL(url);
-        title = `网址为”${dialogUrl.protocol}//${dialogUrl.host}“的网页显示：`;
-      } catch (ex) {
-        title = url;
-      }
-    }
-
-    return title;
-  }
-
-  onJavascriptAlert(event?: AlertEvent) {
-    if (event) {
-      AlertDialog.show({
-        title: this.getJsDialogTitle(),
-        message: event.message,
-        alignment: DialogAlignment.Center,
-        secondaryButton: {
-          value: this.resourceToString($r('app.string.determined')),
-          action: () => event.result.handleConfirm()
-        },
-        cancel: () => event.result.handleCancel(),
-      })
-    }
-    return true
-  }
-
-  onJavascriptConfirm(event?: AlertEvent) {
-    if (event) {
-      AlertDialog.show({
-        title: this.getJsDialogTitle(),
-        message: event.message,
-        alignment: DialogAlignment.Center,
-        secondaryButton: {
-          value: this.resourceToString($r('app.string.determined')),
-          action: () => event.result.handleConfirm()
-        },
-        cancel: () => event.result.handleCancel(),
-        primaryButton: {
-          value: this.resourceToString($r('app.string.cancel')),
-          action: () => event.result.handleCancel()
-        },
-      })
-    }
-    return true
-  }
-
-  ignoreSilentHardwareSwitchMethods(ignoreSilentHardwareSwitch: boolean) {
-    this.webViewBaseOperate?.ignoreSilentHardwareSwitchMethods(ignoreSilentHardwareSwitch)
-  }
-
-  loadHtmlData(html: string = '', url: string = '') {
-    try {
-      this.controller.loadData(
-        html,
-        "text/html",
-        "UTF-8",
-        url,
-        " "
-      );
-    } catch (error) {
-      Logger.error(TAG, "error:" + error)
-    }
-  }
-
-  controllerAttachedInit(): void {
-    this.controllerAttached = true;
-    this.eventEmitter = new RNC.RNCWebView.EventEmitter(this.ctx.rnInstance, this.tag)
-    this.webViewBaseOperate = new BaseOperate(this.eventEmitter, this.controller)
-    this.webViewBaseOperate.setCustomUserAgent(this.descriptorWrapper.rawProps.userAgent,
-      this.descriptorWrapper.rawProps.applicationNameForUserAgent)
-    this.webViewBaseOperate.setFraudulentWebsiteWarningEnabled(this.descriptorWrapper.rawProps.fraudulentWebsiteWarningEnabled)
-
-    let schemeList = this.descriptorWrapper.rawProps.schemeList
-    if(schemeList?.length){
-      schemeList.forEach(scheme=>{
-        this.schemeHandler.onRequestStart((request: webview.WebSchemeHandlerRequest, resourceHandler: webview.WebResourceHandler) => {
-          console.log("[schemeHandler] onRequestStart");
-          return true;
-        })
-        this.schemeHandler.onRequestStop((request: webview.WebSchemeHandlerRequest) => {
-          console.log("[schemeHandler] onRequestStop");
-        });
-        this.controller.setWebSchemeHandler(scheme, this.schemeHandler);
-      })
-    }
-
-    if (!this.hasRegisterJavaScriptProxy && this.descriptorWrapper.rawProps.messagingEnabled) {
-      this.registerJavaScriptProxyOnly()
-    }
-
-    let baseUrl = this.source.baseUrl
-    let uri = this.source.uri
-    if (this.source.html != undefined && this.source.html != "") {
-      this.loadHtmlData(this.source.html, baseUrl)
-    } else if (uri != undefined && uri != "") {
-      if (this.source.method && this.source.method.toUpperCase() === 'POST' && this.source.body) {
-        let postData = buffer.from(this.source.body);
-        let url = uri as string;
-        this.controller.postUrl(url, postData?.buffer);
-      } else {
-        this.controller.loadUrl(uri, this.headers);
-      }
-    } else {
-      this.loadHtmlData()
-    }
-    if (!this.hasRegisterJavaScriptProxy) {
-      this.registerPostMessage()
-    }
-  }
-
-  onPageBegin() {
-    try {
-      if (this.controller.getUrl() === this.url) {
-        this.onLoadingStart();
-      }
-      this.controller.setScrollable(this.scrollEnabled)
-      this.ignoreSilentHardwareSwitchMethods(this.descriptorWrapper.rawProps.ignoreSilentHardwareSwitch)
-    } catch (error) {
-      Logger.debug(TAG,
-        `[RNOH] setignoreSilentHardwareSwitch and setScrollable ErrorCode: ${error.code},  Message: ${error.message}, userAgent: ${this.descriptorWrapper.rawProps.userAgent}`);
-    }
-  }
-
-  getBundleName() {
-    let bundleFlags =
-      bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_HAP_MODULE | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_ABILITY |
-      bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_REQUESTED_PERMISSION;
-
-    try {
-      bundleManager.getBundleInfoForSelf(bundleFlags, (error, data) => {
-        if (error) {
-          Logger.error(TAG,
-            `[RNOH] getBundleInfoForSelf failed ErrorCode: ${error.code},  Message: ${error.message}`);
-        } else {
-          this.bundleName = JSON.stringify(data.name)
-        }
-      });
-    } catch (error) {
-      Logger.error(TAG,
-        `[RNOH] getBundleInfoForSelf failed ErrorCode: ${error.code},  Message: ${error.message}`);
-    }
-  }
-
-  resourceToString(resource: Resource): string {
-    return getContext(this).resourceManager.getStringSync(resource)
-  }
-
-  onLoadFinished() {
-    this.onLoadingFinish()
-  }
-
-  onPageEndExecuteRunInjectedJavaScript(){
-    this.runInjectedJavaScript()
-  }
-
-  onPageEnd() {
-    this.runInjectedJavaScript()
-    this.onLoadingFinish()
-  }
-
-  getPermissionDialogMessage(event: OnPermissionRequestEvent) {
-    let permissionDialogMessage = ''
-    permissionDialogMessage = event.request.getAccessibleResource().toString()
-    switch (permissionDialogMessage) {
-      case ProtectedResourceType.VIDEO_CAPTURE:
-        permissionDialogMessage = this.resourceToString($r('app.string.use_your_camera'))
-        break;
-      case ProtectedResourceType.AUDIO_CAPTURE:
-        permissionDialogMessage = this.resourceToString($r('app.string.use_your_microphone'))
-        break;
-      case ProtectedResourceType.MidiSysex:
-        permissionDialogMessage = this.resourceToString($r('app.string.midi_sysex_resources'))
-        break;
-      case ProtectedResourceType.VIDEO_CAPTURE + "," + ProtectedResourceType.AUDIO_CAPTURE:
-        permissionDialogMessage = this.resourceToString($r('app.string.use_your_camera_and_microphone'))
-        break;
-    }
-    return permissionDialogMessage;
-  }
-  originWhitelistToRegex(originWhitelist: string): string {
-    const matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g;
-    return `^${originWhitelist.replace(matchOperatorsRegex, '\\$&').replace(/\\\*/g, '.*')}`;
-  }
-  extractOrigin(url: string): string {
-    const result = /^[A-Za-z][A-Za-z0-9+\-.]+:(\/\/)?[^/]*/.exec(url);
-    return result === null ? '' : result[0];
-  };
-  passesWhitelist(compiledWhitelist: string[], url: string) {
-    const origin = this.extractOrigin(url);
-    return compiledWhitelist.some((x) => new RegExp(x).test(origin));
-  };
-  compileWhitelist(originWhitelist: string[]): string[] {
-    return ['about:blank', ...(originWhitelist || [])].map(this.originWhitelistToRegex);
-  }
-  onLoadIntercept(event: OnLoadInterceptEvent): boolean {
-    Logger.debug(TAG, `onLoadIntercept start`)
-   let originWhitelistArr = this.descriptorWrapper.rawProps.originWhitelist;
-    let hasOnShouldStartLoadWithRequestEventBool = this.descriptorWrapper.rawProps.hasOnShouldStartLoadWithRequestEvent
-    let urlString =
-      this.webViewBaseOperate?.verifyURLFormat(event.data.getRequestUrl(), this.source.html, this.source.baseUrl) || "";
-
-    if (this.passesWhitelist(this.compileWhitelist(originWhitelistArr), urlString) &&
-      !hasOnShouldStartLoadWithRequestEventBool) {
-      return false
-    }
-    this.webViewBaseOperate?.setLockIdentifier(BaseOperate.generateLockIdentifier())
-
-    const params = new ShouldStartParams();
-    params.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier() || -1
-    this.ctx.runOnWorkerThread(new WorkerRunnable(), params);
-    this.webViewBaseOperate?.emitShouldStartLoadWithRequest(event, this.source.html, this.source.baseUrl)
-    const startTime = Date.now();
-    // 当lockState没变化并且小于超时时间，阻塞进程
-    while (params.lockState === ShouldOverrideCallbackState.UNDECIDED &&
-      Date.now() - startTime < RNCWebView.SHOULD_OVERRIDE_URL_LOADING_TIMEOUT) {
-      // 空循环等待
-    }
-
-    Logger.debug('params.lockState res:' + params.lockState + `, wait time is ${Date.now() - startTime}`);
-    return params.lockState === ShouldOverrideCallbackState.SHOULD_OVERRIDE;
-  }
-
-  onOverrideUrlLoading(event: WebResourceRequest) {
-    this.webViewBaseOperate?.emitShouldStartLoadWithRequestOverrideUrlLoading(event)
-    return false
-  }
-
-  onCreateMenu = (menuItems: Array<TextMenuItem>) => {
-    let customMenuItems = this.descriptorWrapper.rawProps.menuItems
-    if (customMenuItems == undefined) {
-      return menuItems;
-    }  else if (customMenuItems.length == 0) {
-      return [];
-    } else {
-      let menuItemsArray: Array<TextMenuItem> = [];
-      for (let index = 0; index < customMenuItems.length; index++) {
-        let element: MenuItem = customMenuItems[index];
-        let customItem: TextMenuItem = {
-          content: element.label,
-          id: TextMenuItemId.of(element.key)
-        };
-        menuItemsArray.push(customItem)
-      }
-      return menuItemsArray;
-    }
-  }
-
-  onMenuItemClick(menuItem: TextMenuItem): boolean {
-    if (this.descriptorWrapper.rawProps.menuItems != undefined) {
-      this.controller.runJavaScript("(function(){return {selection: window.getSelection().toString()} })()")
-        .then((result: string) => {
-          this.webViewBaseOperate?.customMenuSelection(menuItem, result)
-        })
-        .catch((error: string | Error) => {
-          Logger.info('[RNOH] function onMenuItemClick error: ' + error);
-        })
-      // 禁用系统默认行为
-      return true;
-    }
-    return false;
-  }
-
-  onPermissionRequestAlert(event: OnPermissionRequestEvent){
-    AlertDialog.show({
-      title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
-      message: this.getPermissionDialogMessage(event),
-      alignment: DialogAlignment.Center,
-      primaryButton: {
-        value: $r('app.string.deny'),
-        action: () => {
-          event.request.deny();
-        }
-      },
-      secondaryButton: {
-        value: $r('app.string.on_confirm'),
-        action: () => {
-          event.request.grant(event.request.getAccessibleResource());
-        }
-      },
-      cancel: () => {
-        event.request.deny();
-      }
-    })
-  }
-
-  async handleMediaCapturePermissionGrantType(resources: string[], domain: string) {
-    let permissionList: Array<Permissions> = [];
-    resources.forEach(resource => {
-      switch (resource.toString()) {
-        case 'TYPE_VIDEO_CAPTURE':
-          permissionList.push('ohos.permission.CAMERA');
-          break;
-        case 'TYPE_AUDIO_CAPTURE':
-          permissionList.push('ohos.permission.MICROPHONE');
-          break;
-      }
-    });
-
-    let atManager = abilityAccessCtrl.createAtManager();
-    await atManager.requestPermissionsFromUser(this.ctx.uiAbilityContext, permissionList);
-  }
-
-  build() {
-    Stack() {
-        if ( deviceInfo.sdkApiVersion >= 20) {
-          Web({ src: "", controller: this.controller, renderMode: this.renderMode })
-            .mixedMode(this.mode)
-            .onPermissionRequest(async (event: OnPermissionRequestEvent) => {
-              if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
-                const resources: string[] = event.request.getAccessibleResource();
-                if (resources.indexOf('TYPE_AUDIO_CAPTURE') >= 0 || resources.indexOf('TYPE_VIDEO_CAPTURE') >= 0 ) {
-                  const originUrl = this.webViewBaseOperate?.verifyURLFormat(event.request.getOrigin(), this.source.html,
-                    this.source.baseUrl);
-                  const currentUrl = this.webViewBaseOperate?.verifyURLFormat(this.controller.getUrl(), this.source.html,
-                    this.source.baseUrl);
-                  const originDomain: string = OSUrl.URL.parseURL(originUrl).hostname;
-                  const currentDomain: string = OSUrl.URL.parseURL(currentUrl).hostname;
-                  let mediaCapturePermissionGrantType: string = WebMediaCapturePermissionGrantType.PROMPT
-                  if (this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType != undefined) {
-                    mediaCapturePermissionGrantType = this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType;
-                  }
-                  if (mediaCapturePermissionGrantType != WebMediaCapturePermissionGrantType.DENY) {
-                    await this.handleMediaCapturePermissionGrantType(resources, originDomain)
-                  }
-                  switch (mediaCapturePermissionGrantType) {
-                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_PROMPT:
-                      if (originDomain != currentDomain) {
-                        this.onPermissionRequestAlert(event)
-                      } else {
-                        event.request.grant(resources);
-                      }
-                      break;
-                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_DENY:
-                      if (originDomain != currentDomain) {
-                        event.request.deny();
-                      } else {
-                        event.request.grant(resources);
-                      }
-                      break;
-                    case WebMediaCapturePermissionGrantType.DENY:
-                      event.request.deny();
-                      break;
-                    case WebMediaCapturePermissionGrantType.GRANT:
-                      event.request.grant(resources);
-                      break;
-                    case WebMediaCapturePermissionGrantType.PROMPT:
-                      this.onPermissionRequestAlert(event)
-                      break;
-                  }
-                } else {
-                  this.onPermissionRequestAlert(event)
-                }
-              }
-            })
-            .width(this.webviewWidth)
-            .height(this.webviewHeight)
-            .fileAccess(this.allowFileAccess)
-            .constraintSize({ minHeight: MINHEIGHT })
-            .overScrollMode(this.overScrollMode)
-            .javaScriptAccess(this.javaScriptEnable)
-            .javaScriptOnDocumentStart(this.injectedJavaScriptBeforeContentLoaded)
-            .horizontalScrollBarAccess(this.descriptorWrapper.rawProps.showsHorizontalScrollIndicator)
-            .verticalScrollBarAccess(this.descriptorWrapper.rawProps.showsVerticalScrollIndicator)
-            .overviewModeAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
-            .textZoomRatio(this.descriptorWrapper.rawProps.textZoom)
-            .backgroundColor(BaseOperate.getColorMode(this.ctx.uiAbilityContext,
-              this.descriptorWrapper.rawProps.forceDarkOn) === WebDarkMode.On ? Color.White : Color.Transparent)
-            .darkMode(BaseOperate.getColorMode(this.ctx.uiAbilityContext, this.descriptorWrapper.rawProps.forceDarkOn))
-            .forceDarkAccess(this.forceDark)
-            .cacheMode(this.cacheMode)
-            .minFontSize(this.minFontSize)
-            .domStorageAccess(this.descriptorWrapper.rawProps.domStorageEnabled)
-            .zoomAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
-            .overScrollMode(this.overScrollMode)
-            .onProgressChange((event: OnProgressChangeEvent) => this.onProgressChange(event))
-            .onScroll((event: OnScrollEvent) => this.webViewBaseOperate?.emitScroll(event))
-            .nestedScroll({
-              scrollForward: this.nestedScroll,
-              scrollBackward: this.nestedScroll,
-            })
-            .onLoadStarted(() => this.onPageBegin())
-            .onLoadFinished(() => this.onLoadFinished())
-            .onPageEnd(() => {this.onPageEndExecuteRunInjectedJavaScript()})
-            .onErrorReceive((event: OnErrorReceiveEvent) => this.webViewBaseOperate?.emitLoadingError(event))
-            .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => this.webViewBaseOperate?.emitHttpError(event))
-            .onControllerAttached(() => this.controllerAttachedInit())
-            .onAlert((event: AlertEvent) => this.onJavascriptAlert(event))
-            .onConfirm((event: AlertEvent) => this.onJavascriptConfirm(event))
-            .onDownloadStart((event: OnDownloadStartEvent) => this.webViewBaseOperate?.onDownloadStart(event))
-            .geolocationAccess(this.descriptorWrapper.rawProps.geolocationEnabled)
-            .onGeolocationShow((event) => {
-              if (event && (this.descriptorWrapper.rawProps.geolocationEnabled != undefined)) {
-                event.geolocation.invoke(event.origin, this.descriptorWrapper.rawProps.geolocationEnabled, true);
-              }
-            })
-            .mediaPlayGestureAccess(this.descriptorWrapper.rawProps.mediaPlaybackRequiresUserAction)
-            .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
-            .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
-            .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
-            .editMenuOptions({
-              onCreateMenu: this.onCreateMenu.bind(this),
-              onMenuItemClick: this.onMenuItemClick.bind(this),
-            })
-        } else {
-          Web({ src: "", controller: this.controller, renderMode: this.renderMode })
-            .mixedMode(this.mode)
-            .onPermissionRequest(async (event: OnPermissionRequestEvent) => {
-              if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
-                const resources: string[] = event.request.getAccessibleResource();
-                if (resources.indexOf('TYPE_AUDIO_CAPTURE') >= 0 || resources.indexOf('TYPE_VIDEO_CAPTURE') >= 0 ) {
-                  const originUrl = this.webViewBaseOperate?.verifyURLFormat(event.request.getOrigin(), this.source.html,
-                    this.source.baseUrl);
-                  const currentUrl = this.webViewBaseOperate?.verifyURLFormat(this.controller.getUrl(), this.source.html,
-                    this.source.baseUrl);
-                  const originDomain: string = OSUrl.URL.parseURL(originUrl).hostname;
-                  const currentDomain: string = OSUrl.URL.parseURL(currentUrl).hostname;
-                  let mediaCapturePermissionGrantType: string = WebMediaCapturePermissionGrantType.PROMPT
-                  if (this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType != undefined) {
-                    mediaCapturePermissionGrantType = this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType;
-                  }
-                  if (mediaCapturePermissionGrantType != WebMediaCapturePermissionGrantType.DENY) {
-                    await this.handleMediaCapturePermissionGrantType(resources, originDomain)
-                  }
-                  switch (mediaCapturePermissionGrantType) {
-                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_PROMPT:
-                      if (originDomain != currentDomain) {
-                        this.onPermissionRequestAlert(event)
-                      } else {
-                        event.request.grant(resources);
-                      }
-                      break;
-                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_DENY:
-                      if (originDomain != currentDomain) {
-                        event.request.deny();
-                      } else {
-                        event.request.grant(resources);
-                      }
-                      break;
-                    case WebMediaCapturePermissionGrantType.DENY:
-                      event.request.deny();
-                      break;
-                    case WebMediaCapturePermissionGrantType.GRANT:
-                      event.request.grant(resources);
-                      break;
-                    case WebMediaCapturePermissionGrantType.PROMPT:
-                      this.onPermissionRequestAlert(event)
-                      break;
-                  }
-                } else {
-                  this.onPermissionRequestAlert(event)
-                }
-              }
-            })
-
-            .width(this.webviewWidth)
-            .height(this.webviewHeight)
-            .fileAccess(this.allowFileAccess)
-            .constraintSize({ minHeight: MINHEIGHT })
-            .overScrollMode(this.overScrollMode)
-            .javaScriptAccess(this.javaScriptEnable)
-            .javaScriptOnDocumentStart(this.injectedJavaScriptBeforeContentLoaded)
-            .horizontalScrollBarAccess(this.descriptorWrapper.rawProps.showsHorizontalScrollIndicator)
-            .verticalScrollBarAccess(this.descriptorWrapper.rawProps.showsVerticalScrollIndicator)
-            .overviewModeAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
-            .textZoomRatio(this.descriptorWrapper.rawProps.textZoom)
-            .backgroundColor(BaseOperate.getColorMode(this.ctx.uiAbilityContext,
-              this.descriptorWrapper.rawProps.forceDarkOn) === WebDarkMode.On ? Color.White : Color.Transparent)
-            .darkMode(BaseOperate.getColorMode(this.ctx.uiAbilityContext, this.descriptorWrapper.rawProps.forceDarkOn))
-            .forceDarkAccess(this.forceDark)
-            .cacheMode(this.cacheMode)
-            .minFontSize(this.minFontSize)
-            .domStorageAccess(this.descriptorWrapper.rawProps.domStorageEnabled)
-            .zoomAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
-            .overScrollMode(this.overScrollMode)
-            .onProgressChange((event: OnProgressChangeEvent) => this.onProgressChange(event))
-            .onScroll((event: OnScrollEvent) => this.webViewBaseOperate?.emitScroll(event))
-            .nestedScroll({
-              scrollForward: this.nestedScroll,
-              scrollBackward: this.nestedScroll,
-            })
-            .onPageBegin(() => this.onPageBegin())
-            .onPageEnd(() => this.onPageEnd())
-            .onErrorReceive((event: OnErrorReceiveEvent) => this.webViewBaseOperate?.emitLoadingError(event))
-            .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => this.webViewBaseOperate?.emitHttpError(event))
-            .onControllerAttached(() => this.controllerAttachedInit())
-            .onAlert((event: AlertEvent) => this.onJavascriptAlert(event))
-            .onConfirm((event: AlertEvent) => this.onJavascriptConfirm(event))
-            .onDownloadStart((event: OnDownloadStartEvent) => this.webViewBaseOperate?.onDownloadStart(event))
-            .geolocationAccess(this.descriptorWrapper.rawProps.geolocationEnabled)
-            .onGeolocationShow((event) => {
-              if (event && (this.descriptorWrapper.rawProps.geolocationEnabled != undefined)) {
-                event.geolocation.invoke(event.origin, this.descriptorWrapper.rawProps.geolocationEnabled, true);
-              }
-            })
-            .mediaPlayGestureAccess(this.descriptorWrapper.rawProps.mediaPlaybackRequiresUserAction)
-            .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
-            .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
-            .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
-            .editMenuOptions({
-              onCreateMenu: this.onCreateMenu.bind(this),
-              onMenuItemClick: this.onMenuItemClick.bind(this),
-            })
-          }
-      }
-    .width(this.webviewWidth)
-    .height(this.webviewHeight)
-    .position({
-      x: this.descriptorWrapper.layoutMetrics.frame.origin.x,
-      y: this.descriptorWrapper.layoutMetrics.frame.origin.y
-    })
-  }
-
-  private onDescriptorWrapperChange(descriptorWrapper: WebViewDescriptor) {
-    this.initVariable()
-    this.descriptorWrapper = descriptorWrapper
-    if (this.source.html != "" && this.html != this.source.html) {
-      if (this.controllerAttached) {
-        this.loadHtmlData(this.source.html, this.source.baseUrl)
-        Logger.debug(TAG, "[RNOH] html is update")
-        this.html = this.source.html
-      }
-    } else if (this.source.uri && this.source.method && this.source.method.toUpperCase() === 'POST' && this.source.body && (this.source.uri != this.url || this.body != this.source.body)) {
-      if (this.controllerAttached) {
-        let url = this.source.uri as string;
-        this.url = url;
-        this.body = this.source.body;
-        let postData = buffer.from(this.source.body);
-        this.controller.postUrl(url, postData?.buffer);
-      }
-    } else if (typeof this.url !== typeof this.source.uri 
-      || (typeof this.source.uri === "string" && this.url !== this.source.uri)  
-      || (typeof this.source.uri === "object" && (this.url as Resource)?.params !== this.source.uri?.params)) {
-      if (this.source.uri != "") {
-        Logger.debug(TAG, `[RNOH] newDescriptor props update uri: ` + this.source.uri);
-        if (this.controllerAttached) {
-          this.controller.loadUrl(this.source.uri, this.headers)
-        }
-      } else {
-        this.loadHtmlData()
-      }
-      this.url = this.source.uri as string;
-    }
-    if (this.controllerAttached) {
-      this.controller?.setScrollable(this.descriptorWrapper.rawProps.scrollEnabled)
-    }
-  }
-
-  private initVariable() {
-    this.descriptorWrapper = this.ctx.descriptorRegistry.getDescriptor<WebViewDescriptor>(this.tag)
-    this.javaScriptEnable = this.descriptorWrapper.rawProps.javaScriptEnabled;
-    this.minFontSize =
-      this.descriptorWrapper.rawProps.minimumFontSize ? this.descriptorWrapper.rawProps.minimumFontSize : EIGHT;
-    this.cacheMode =
-      this.descriptorWrapper.rawProps.cacheEnabled ?
-        this.webViewBaseOperate?.transCacheMode(this.descriptorWrapper.rawProps.cacheMode as CACHE_MODE) as number :
-      CacheMode.Online;
-    this.source = {
-      uri: this.descriptorWrapper.rawProps.newSource.uri ?? "",
-      method: this.descriptorWrapper.rawProps.newSource.method ?? "",
-      body: this.descriptorWrapper.rawProps.newSource.body ?? "",
-      html: this.descriptorWrapper.rawProps.newSource.html ?? "",
-      baseUrl: this.descriptorWrapper.rawProps.newSource.baseUrl ?? "",
-      headers: this.descriptorWrapper.rawProps.newSource.headers ?? []
-    }
-    if (this.source.headers) {
-      this.source.headers.forEach(item => {
-        if (item.name && item.value) {
-          this.headers.push({ headerKey: item.name, headerValue: item.value })
-        }
-      })
-    }
-    // 防抖处理webview尺寸设置
-    const newWidth = this.descriptorWrapper.layoutMetrics.frame.size.width
-    const newHeight = this.descriptorWrapper.layoutMetrics.frame.size.height
-
-    if (this.debounceTimer !== -1) {
-      clearTimeout(this.debounceTimer)
-      this.debounceTimer = -1
-    }
-
-    if (this.isFirstDebounce) {
-      this.webviewWidth = newWidth
-      this.webviewHeight = newHeight
-      this.isFirstDebounce = false // 标记为非首次
-    } else {
-      this.debounceTimer = setTimeout(() => {
-        this.webviewWidth = newWidth
-        this.webviewHeight = newHeight
-      }, RNCWebView.DEBOUNCE_TIME)
-    }
-    this.scrollEnabled = this.descriptorWrapper.rawProps.scrollEnabled;
-    // 当禁止滚动时，使用父组件滚动
-    this.nestedScroll = this.scrollEnabled ? NestedScrollMode.SELF_FIRST : NestedScrollMode.PARENT_FIRST;
-    if (this.source.uri && this.source.uri.toString().startsWith("asset://")) {
-      this.source.uri = $rawfile(this.source.uri.toString().replace("asset://", this.ctx.rnInstance.getAssetsDest()));
-    }
-
-    if (this.descriptorWrapper.rawProps.overScrollMode === WebViewOverScrollMode.ALWAYS) {
-      this.overScrollMode = OverScrollMode.ALWAYS
-    } else if (this.descriptorWrapper.rawProps.overScrollMode === WebViewOverScrollMode.NEVER) {
-      this.overScrollMode = OverScrollMode.NEVER
-    }
-
-    this.overScrollMode = this.descriptorWrapper.rawProps.bounces ? OverScrollMode.ALWAYS : OverScrollMode.NEVER;
-
-    if (this.descriptorWrapper.rawProps.injectedJavaScriptBeforeContentLoaded) {
-      this.injectedJavaScriptBeforeContentLoaded = [
-        { script: this.descriptorWrapper.rawProps.injectedJavaScriptBeforeContentLoaded, scriptRules: ["*"] }
-      ];
-    }
-  }
-
-  private registerJavaScriptProxyOnly() {
-    if (this.messagingEnabled == this.descriptorWrapper.rawProps.messagingEnabled && this.hasRegisterJavaScriptProxy) {
-      return;
-    }
-    this.messagingEnabled = this.descriptorWrapper.rawProps.messagingEnabled;
-    if (this.messagingEnabled) {
-      let bridge: RNCWebViewBridge = {
-        postMessage: (data: string) => {
-          Logger.debug(TAG, `[RNOH] bridge postMessage,  ${JSON.stringify(data)}`);
-          if (this.controller != null) {
-            let result: WebViewEventParams = this.createWebViewEvent("onMessage")
-            if (result) {
-              result.data = data.toString()
-              result.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier()
-              this.eventEmitter!.emit("message", result as ResultType);
-            }
-          }
-        }
-      };
-      this.controller.registerJavaScriptProxy(bridge, JAVASCRIPT_INTERFACE, ["postMessage"])
-      this.hasRegisterJavaScriptProxy = true
-      Logger.debug(TAG, "[RNOH] JavaScript Proxy registered without reloading page")
-    }
-  }
-
-  private registerPostMessage() {
-    if (this.messagingEnabled == this.descriptorWrapper.rawProps.messagingEnabled) {
-      return;
-    }
-    this.messagingEnabled = this.descriptorWrapper.rawProps.messagingEnabled;
-    if (this.messagingEnabled) {
-      if (this.hasRegisterJavaScriptProxy) {
-        Logger.debug(TAG, "[RNOH] JavaScript Proxy already registered")
-        return
-      }
-      let bridge: RNCWebViewBridge = {
-        postMessage: (data: string) => {
-          Logger.debug(TAG, `[RNOH] bridge postMessage,  ${JSON.stringify(data)}`);
-          if (this.controller != null) {
-            let result: WebViewEventParams = this.createWebViewEvent("onMessage")
-            if (result) {
-              result.data = data.toString()
-              result.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier()
-              this.eventEmitter!.emit("message", result as ResultType);
-            }
-          }
-        }
-      };
-      this.controller.registerJavaScriptProxy(bridge, JAVASCRIPT_INTERFACE, ["postMessage"])
-      if (this.source.uri && !this.source.html) {
-        this.controller.loadUrl(this.source.uri, this.headers)
-      } else if (this.source.html) {
-        Logger.debug(TAG, "[RNOH] JavaScript Proxy registered, HTML content will use it on next load")
-      } else {
-        this.controller.refresh()
-      }
-      this.hasRegisterJavaScriptProxy = true
-    }
-  }
+/**
+ * MIT License
+ *
+ * Copyright (C) 2025 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { RNComponentContext } from '@rnoh/react-native-openharmony';
+import webview from '@ohos.web.webview';
+import { url as OSUrl } from '@kit.ArkTS';
+import { RNC, TM } from './generated';
+import Logger from './Logger';
+import { BaseOperate } from './WebViewBaseOperate';
+import { deviceInfo } from '@kit.BasicServicesKit';
+import {
+  AlertEvent,
+  CACHE_MODE,
+  JAVASCRIPT_INTERFACE,
+  ONE_HUNDRED,
+  EIGHT,
+  ResultType,
+  RNCWebViewBridge,
+  WebViewEventParams,
+  WebViewNewSource,
+  WebViewOverScrollMode,
+  ZERO,
+  COMMAND_NAME,
+  WebViewDescriptor,
+  REFRESH_OFFSET,
+  MINHEIGHT,
+  WebMediaCapturePermissionGrantType,
+  MenuItem
+} from './Magic';
+
+import { abilityAccessCtrl, bundleManager, Permissions } from '@kit.AbilityKit';
+import { WebViewTurboModule, ShouldStartParams, ShouldOverrideCallbackState } from './WebViewTurboModule';
+import { AnyThreadRNInstance, WorkerTaskRunnable } from '@rnoh/react-native-openharmony/src/main/ets/RNOH';
+import buffer from '@ohos.buffer';
+import { window } from '@kit.ArkUI';
+
+export const TAG = "WebView"
+
+export const WEB_VIEW = "RNCWebView"
+
+@Sendable
+class WorkerRunnable implements WorkerTaskRunnable<ShouldStartParams> {
+  run(rnInstance: AnyThreadRNInstance, params: ShouldStartParams): void {
+    params.lockState = ShouldOverrideCallbackState.UNDECIDED
+    rnInstance.getTurboModule<WebViewTurboModule>(TM.RNCWebViewModule.NAME).setShouldStartParams(params)
+  }
+}
+
+@Component
+export struct RNCWebView {
+  public static readonly NAME = RNC.RNCWebView.NAME
+  ctx!: RNComponentContext
+  tag: number = ZERO
+  source: WebViewNewSource = {
+    uri: "",
+    method: "",
+    body: "",
+    html: "",
+    baseUrl: ""
+  }
+  html: string | undefined = "";
+  url: string | Resource = "";
+  body: string | undefined = "";
+  controller: webview.WebviewController = new webview.WebviewController();
+  schemeHandler: webview.WebSchemeHandler = new webview.WebSchemeHandler();
+  javaScriptEnable: boolean = true;
+  allowFileAccess: boolean = true;
+  forceDark: boolean = true;
+  minFontSize: number = EIGHT;
+  overScrollMode: OverScrollMode = OverScrollMode.NEVER;
+  progress: number = ZERO;
+  cacheMode: number = CacheMode.Default;
+  requestUrl: string = "";
+  bundleName: string = "";
+  messagingEnabled: boolean = false;
+  hasRegisterJavaScriptProxy: boolean = false;
+  controllerAttached: boolean = false;
+  renderMode: RenderMode = RenderMode.SYNC_RENDER;
+  scrollEnabled = true;
+  @State nestedScroll: NestedScrollMode = NestedScrollMode.SELF_FIRST;
+  headers: Array<webview.WebHeader> = []
+  injectedJavaScriptBeforeContentLoaded: Array<ScriptItem> = [
+    { script: '', scriptRules: ["*"] }
+  ];
+  allowPageStartInProgress = true;
+  @State webviewWidth: number = ZERO
+  @State webviewHeight: number = ZERO
+  @State isRefreshing: boolean = false
+  @State isFullScreen: boolean = false
+  @State mode: MixedMode = MixedMode.All;
+  private unregisterDescriptorChangesListener?: () => void = undefined
+  private cleanupCommandCallback?: () => void = undefined
+  private eventEmitter: RNC.RNCWebView.EventEmitter | undefined = undefined
+  private cleanUpCallbacks: (() => void)[] = []
+  private descriptorWrapper: WebViewDescriptor = Object() as WebViewDescriptor
+  private webViewBaseOperate: BaseOperate | null = null
+  private shouldInterceptLoad: boolean = true
+  private callLoadTimer: number = -1
+  static readonly SHOULD_OVERRIDE_URL_LOADING_TIMEOUT: number = 250
+  private debounceTimer: number = -1
+  static readonly DEBOUNCE_TIME: number = 100
+  private isFirstDebounce: boolean = true
+  private initialOrientation: window.Orientation = window.Orientation.PORTRAIT
+  private isOrientationSaved: boolean = false
+  private cachedWindow: window.Window | null = null
+  private allowsFullscreenVideo: boolean = false
+
+  aboutToAppear() {
+    try {
+      this.initVariable()
+      this.saveInitialOrientation()
+      this.getBundleName()
+      this.url = this.source.uri as string;
+      this.onDescriptorWrapperChange(this.descriptorWrapper)
+      this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
+        (newDescriptor) => {
+          this.onDescriptorWrapperChange(newDescriptor as WebViewDescriptor)
+        }
+      )
+      BaseOperate.setThirdPartyCookiesEnabled(this.descriptorWrapper.rawProps.thirdPartyCookiesEnabled)
+      webview.WebviewController.setWebDebuggingAccess(this.descriptorWrapper.rawProps.webviewDebuggingEnabled)
+      this.registerCommandCallback()
+      if (this.hasIncognito()) {
+        this.cacheMode = CacheMode.Online;
+      }
+      if (this.source.headers) {
+        this.source.headers.forEach(item => {
+          if (item.name && item.value) {
+            this.headers.push({ headerKey: item.name, headerValue: item.value })
+          }
+        })
+      }
+    } catch (error) {
+      Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
+    }
+
+  }
+
+  hasIncognito(): boolean {
+    return this.descriptorWrapper.rawProps.incognito && this.descriptorWrapper.rawProps.incognito === true
+  }
+
+  createWebViewEvent(type: string): WebViewEventParams {
+    return this.webViewBaseOperate?.createWebViewEvent({ type, progress: this.progress }) as WebViewEventParams;
+  }
+
+  aboutToDisappear() {
+    // 恢复初始屏幕方向和沉浸式状态，防止全屏状态下组件销毁后状态残留
+    // 无论是否在全屏状态，都尝试恢复窗口状态（handleFullScreenEnter 异步操作可能在组件销毁后才完成）
+    if (this.cachedWindow) {
+      try {
+        this.cachedWindow.setPreferredOrientation(this.initialOrientation);
+        this.cachedWindow.setWindowLayoutFullScreen(false);
+        this.cachedWindow.setWindowSystemBarEnable(['status', 'navigation']);
+        Logger.debug(TAG, '[WebViewFullScreen] Restored window state in aboutToDisappear');
+      } catch (error) {
+        Logger.error(TAG, `[WebViewFullScreen] Failed to restore in aboutToDisappear: ${error.code}`);
+      }
+    }
+    this.isFullScreen = false;
+    this.cachedWindow = null;
+    this.getUIContext().getFocusController().clearFocus()
+    this.cleanupCommandCallback?.()
+    this.unregisterDescriptorChangesListener?.()
+    this.cleanUpCallbacks.forEach(cb => cb())
+    try {
+      if (this.hasIncognito()) {
+        this.webViewBaseOperate?.setIncognito()
+      }
+      this.controller.deleteJavaScriptRegister(JAVASCRIPT_INTERFACE)
+      this.controller.refresh()
+      this.hasRegisterJavaScriptProxy = false
+      this.webViewBaseOperate = null
+    } catch (error) {
+      Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
+    }
+  }
+
+  registerCommandCallback() {
+    this.cleanupCommandCallback = this.ctx.componentCommandReceiver.registerCommandCallback(
+      this.tag,
+      (command: COMMAND_NAME, args: string[]) => this.webViewBaseOperate?.registerCommandCallback(command, args));
+  }
+
+  onLoadingStart() {
+    this.webViewBaseOperate?.emitLoadingStart({ progress: this.progress })
+  }
+
+  onProgressChange(event: OnProgressChangeEvent) {
+    this.progress = event.newProgress
+    // 修复单页面应用切换路由时 onPageBegin 未触发的问题
+    if (this.controller.getUrl() !== this.url && this.progress < ONE_HUNDRED && this.allowPageStartInProgress) {
+      this.allowPageStartInProgress = false;
+      this.onLoadingStart();
+    }
+    this.webViewBaseOperate?.emitProgressChange({ progress: this.progress })
+    if (this.progress === ONE_HUNDRED) {
+      this.allowPageStartInProgress = true;
+    }
+  }
+
+  onLoadingFinish() {
+    this.webViewBaseOperate?.emitLoadingFinish({ progress: this.progress })
+    this.isRefreshing = false
+  }
+
+  runInjectedJavaScript() {
+    let injectedJS = this.descriptorWrapper.rawProps.injectedJavaScript
+    if (this.javaScriptEnable && injectedJS != "" && this.controllerAttached) {
+      try {
+        this.controller.runJavaScript("(function() {\n" + injectedJS + ";\n})();")
+          .then((result) => {
+            Logger.debug(TAG, '[RNOH] result: ' + result);
+          })
+          .catch((error: string | Error) => {
+            Logger.error(TAG, "[RNOH] error: " + error);
+          })
+      } catch (error) {
+        Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
+      }
+    }
+  }
+
+  getJsDialogTitle() {
+    const url = this.controller.getUrl()
+    // 对于 data: URL，只显示 'JavaScript'，类似于 Chrome
+    let title = 'JavaScript';
+    const isDataUrl = (url !== null) && url.startsWith("data:");
+
+
+    if (!isDataUrl) {
+      try {
+        const dialogUrl = OSUrl.URL.parseURL(url);
+        title = `网址为”${dialogUrl.protocol}//${dialogUrl.host}“的网页显示：`;
+      } catch (ex) {
+        title = url;
+      }
+    }
+
+    return title;
+  }
+
+  onJavascriptAlert(event?: AlertEvent) {
+    if (event) {
+      AlertDialog.show({
+        title: this.getJsDialogTitle(),
+        message: event.message,
+        alignment: DialogAlignment.Center,
+        secondaryButton: {
+          value: this.resourceToString($r('app.string.determined')),
+          action: () => event.result.handleConfirm()
+        },
+        cancel: () => event.result.handleCancel(),
+      })
+    }
+    return true
+  }
+
+  onJavascriptConfirm(event?: AlertEvent) {
+    if (event) {
+      AlertDialog.show({
+        title: this.getJsDialogTitle(),
+        message: event.message,
+        alignment: DialogAlignment.Center,
+        secondaryButton: {
+          value: this.resourceToString($r('app.string.determined')),
+          action: () => event.result.handleConfirm()
+        },
+        cancel: () => event.result.handleCancel(),
+        primaryButton: {
+          value: this.resourceToString($r('app.string.cancel')),
+          action: () => event.result.handleCancel()
+        },
+      })
+    }
+    return true
+  }
+
+  ignoreSilentHardwareSwitchMethods(ignoreSilentHardwareSwitch: boolean) {
+    this.webViewBaseOperate?.ignoreSilentHardwareSwitchMethods(ignoreSilentHardwareSwitch)
+  }
+
+  loadHtmlData(html: string = '', url: string = '') {
+    try {
+      this.controller.loadData(
+        html,
+        "text/html",
+        "UTF-8",
+        url,
+        " "
+      );
+    } catch (error) {
+      Logger.error(TAG, "error:" + error)
+    }
+  }
+
+  controllerAttachedInit(): void {
+    this.controllerAttached = true;
+    this.eventEmitter = new RNC.RNCWebView.EventEmitter(this.ctx.rnInstance, this.tag)
+    this.webViewBaseOperate = new BaseOperate(this.eventEmitter, this.controller)
+    this.webViewBaseOperate.setCustomUserAgent(this.descriptorWrapper.rawProps.userAgent,
+      this.descriptorWrapper.rawProps.applicationNameForUserAgent)
+    this.webViewBaseOperate.setFraudulentWebsiteWarningEnabled(this.descriptorWrapper.rawProps.fraudulentWebsiteWarningEnabled)
+
+    let schemeList = this.descriptorWrapper.rawProps.schemeList
+    if(schemeList?.length){
+      schemeList.forEach(scheme=>{
+        this.schemeHandler.onRequestStart((request: webview.WebSchemeHandlerRequest, resourceHandler: webview.WebResourceHandler) => {
+          console.log("[schemeHandler] onRequestStart");
+          return true;
+        })
+        this.schemeHandler.onRequestStop((request: webview.WebSchemeHandlerRequest) => {
+          console.log("[schemeHandler] onRequestStop");
+        });
+        this.controller.setWebSchemeHandler(scheme, this.schemeHandler);
+      })
+    }
+
+    if (!this.hasRegisterJavaScriptProxy && this.descriptorWrapper.rawProps.messagingEnabled) {
+      this.registerJavaScriptProxyOnly()
+    }
+
+    let baseUrl = this.source.baseUrl
+    let uri = this.source.uri
+    if (this.source.html != undefined && this.source.html != "") {
+      this.loadHtmlData(this.source.html, baseUrl)
+    } else if (uri != undefined && uri != "") {
+      if (this.source.method && this.source.method.toUpperCase() === 'POST' && this.source.body) {
+        let postData = buffer.from(this.source.body);
+        let url = uri as string;
+        this.controller.postUrl(url, postData?.buffer);
+      } else {
+        this.controller.loadUrl(uri, this.headers);
+      }
+    } else {
+      this.loadHtmlData()
+    }
+    if (!this.hasRegisterJavaScriptProxy) {
+      this.registerPostMessage()
+    }
+  }
+
+  onPageBegin() {
+    try {
+      if (this.controller.getUrl() === this.url) {
+        this.onLoadingStart();
+      }
+      this.controller.setScrollable(this.scrollEnabled)
+      this.ignoreSilentHardwareSwitchMethods(this.descriptorWrapper.rawProps.ignoreSilentHardwareSwitch)
+    } catch (error) {
+      Logger.debug(TAG,
+        `[RNOH] setignoreSilentHardwareSwitch and setScrollable ErrorCode: ${error.code},  Message: ${error.message}, userAgent: ${this.descriptorWrapper.rawProps.userAgent}`);
+    }
+  }
+
+  getBundleName() {
+    let bundleFlags =
+      bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_HAP_MODULE | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_ABILITY |
+      bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_REQUESTED_PERMISSION;
+
+    try {
+      bundleManager.getBundleInfoForSelf(bundleFlags, (error, data) => {
+        if (error) {
+          Logger.error(TAG,
+            `[RNOH] getBundleInfoForSelf failed ErrorCode: ${error.code},  Message: ${error.message}`);
+        } else {
+          this.bundleName = JSON.stringify(data.name)
+        }
+      });
+    } catch (error) {
+      Logger.error(TAG,
+        `[RNOH] getBundleInfoForSelf failed ErrorCode: ${error.code},  Message: ${error.message}`);
+    }
+  }
+
+  resourceToString(resource: Resource): string {
+    return getContext(this).resourceManager.getStringSync(resource)
+  }
+
+  onLoadFinished() {
+    this.onLoadingFinish()
+  }
+
+  onPageEndExecuteRunInjectedJavaScript(){
+    this.runInjectedJavaScript()
+  }
+
+  onPageEnd() {
+    this.runInjectedJavaScript()
+    this.onLoadingFinish()
+  }
+
+  getPermissionDialogMessage(event: OnPermissionRequestEvent) {
+    let permissionDialogMessage = ''
+    permissionDialogMessage = event.request.getAccessibleResource().toString()
+    switch (permissionDialogMessage) {
+      case ProtectedResourceType.VIDEO_CAPTURE:
+        permissionDialogMessage = this.resourceToString($r('app.string.use_your_camera'))
+        break;
+      case ProtectedResourceType.AUDIO_CAPTURE:
+        permissionDialogMessage = this.resourceToString($r('app.string.use_your_microphone'))
+        break;
+      case ProtectedResourceType.MidiSysex:
+        permissionDialogMessage = this.resourceToString($r('app.string.midi_sysex_resources'))
+        break;
+      case ProtectedResourceType.VIDEO_CAPTURE + "," + ProtectedResourceType.AUDIO_CAPTURE:
+        permissionDialogMessage = this.resourceToString($r('app.string.use_your_camera_and_microphone'))
+        break;
+    }
+    return permissionDialogMessage;
+  }
+  originWhitelistToRegex(originWhitelist: string): string {
+    const matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g;
+    return `^${originWhitelist.replace(matchOperatorsRegex, '\\$&').replace(/\\\*/g, '.*')}`;
+  }
+  extractOrigin(url: string): string {
+    const result = /^[A-Za-z][A-Za-z0-9+\-.]+:(\/\/)?[^/]*/.exec(url);
+    return result === null ? '' : result[0];
+  };
+  passesWhitelist(compiledWhitelist: string[], url: string) {
+    const origin = this.extractOrigin(url);
+    return compiledWhitelist.some((x) => new RegExp(x).test(origin));
+  };
+  compileWhitelist(originWhitelist: string[]): string[] {
+    return ['about:blank', ...(originWhitelist || [])].map(this.originWhitelistToRegex);
+  }
+  onLoadIntercept(event: OnLoadInterceptEvent): boolean {
+    Logger.debug(TAG, `onLoadIntercept start`)
+   let originWhitelistArr = this.descriptorWrapper.rawProps.originWhitelist;
+    let hasOnShouldStartLoadWithRequestEventBool = this.descriptorWrapper.rawProps.hasOnShouldStartLoadWithRequestEvent
+    let urlString =
+      this.webViewBaseOperate?.verifyURLFormat(event.data.getRequestUrl(), this.source.html, this.source.baseUrl) || "";
+
+    if (this.passesWhitelist(this.compileWhitelist(originWhitelistArr), urlString) &&
+      !hasOnShouldStartLoadWithRequestEventBool) {
+      return false
+    }
+    this.webViewBaseOperate?.setLockIdentifier(BaseOperate.generateLockIdentifier())
+
+    const params = new ShouldStartParams();
+    params.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier() || -1
+    this.ctx.runOnWorkerThread(new WorkerRunnable(), params);
+    this.webViewBaseOperate?.emitShouldStartLoadWithRequest(event, this.source.html, this.source.baseUrl)
+    const startTime = Date.now();
+    // 当lockState没变化并且小于超时时间，阻塞进程
+    while (params.lockState === ShouldOverrideCallbackState.UNDECIDED &&
+      Date.now() - startTime < RNCWebView.SHOULD_OVERRIDE_URL_LOADING_TIMEOUT) {
+      // 空循环等待
+    }
+
+    Logger.debug('params.lockState res:' + params.lockState + `, wait time is ${Date.now() - startTime}`);
+    return params.lockState === ShouldOverrideCallbackState.SHOULD_OVERRIDE;
+  }
+
+  onOverrideUrlLoading(event: WebResourceRequest) {
+    this.webViewBaseOperate?.emitShouldStartLoadWithRequestOverrideUrlLoading(event)
+    return false
+  }
+
+  onCreateMenu = (menuItems: Array<TextMenuItem>) => {
+    let customMenuItems = this.descriptorWrapper.rawProps.menuItems
+    if (customMenuItems == undefined) {
+      return menuItems;
+    }  else if (customMenuItems.length == 0) {
+      return [];
+    } else {
+      let menuItemsArray: Array<TextMenuItem> = [];
+      for (let index = 0; index < customMenuItems.length; index++) {
+        let element: MenuItem = customMenuItems[index];
+        let customItem: TextMenuItem = {
+          content: element.label,
+          id: TextMenuItemId.of(element.key)
+        };
+        menuItemsArray.push(customItem)
+      }
+      return menuItemsArray;
+    }
+  }
+
+  onMenuItemClick(menuItem: TextMenuItem): boolean {
+    if (this.descriptorWrapper.rawProps.menuItems != undefined) {
+      this.controller.runJavaScript("(function(){return {selection: window.getSelection().toString()} })()")
+        .then((result: string) => {
+          this.webViewBaseOperate?.customMenuSelection(menuItem, result)
+        })
+        .catch((error: string | Error) => {
+          Logger.info('[RNOH] function onMenuItemClick error: ' + error);
+        })
+      // 禁用系统默认行为
+      return true;
+    }
+    return false;
+  }
+
+  onPermissionRequestAlert(event: OnPermissionRequestEvent){
+    AlertDialog.show({
+      title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
+      message: this.getPermissionDialogMessage(event),
+      alignment: DialogAlignment.Center,
+      primaryButton: {
+        value: $r('app.string.deny'),
+        action: () => {
+          event.request.deny();
+        }
+      },
+      secondaryButton: {
+        value: $r('app.string.on_confirm'),
+        action: () => {
+          event.request.grant(event.request.getAccessibleResource());
+        }
+      },
+      cancel: () => {
+        event.request.deny();
+      }
+    })
+  }
+
+  async handleMediaCapturePermissionGrantType(resources: string[], domain: string) {
+    let permissionList: Array<Permissions> = [];
+    resources.forEach(resource => {
+      switch (resource.toString()) {
+        case 'TYPE_VIDEO_CAPTURE':
+          permissionList.push('ohos.permission.CAMERA');
+          break;
+        case 'TYPE_AUDIO_CAPTURE':
+          permissionList.push('ohos.permission.MICROPHONE');
+          break;
+      }
+    });
+
+    let atManager = abilityAccessCtrl.createAtManager();
+    await atManager.requestPermissionsFromUser(this.ctx.uiAbilityContext, permissionList);
+  }
+
+  private async getWindow(): Promise<window.Window | null> {
+    try {
+      const win = await window.getLastWindow(getContext(this));
+      if (win) {
+        this.cachedWindow = win;
+      }
+      return win;
+    } catch (error) {
+      console.error(TAG, `[WebViewFullScreenTest] getWindow Errorcode: ${error.code}`);
+      return null;
+    }
+  }
+
+  private async saveInitialOrientation() {
+    const win = await this.getWindow();
+    if (win) {
+      try {
+        const orientation = win.getPreferredOrientation();
+        this.initialOrientation = orientation;
+        this.isOrientationSaved = true;
+        console.debug(TAG, `[WebViewFullScreenTest] Saved initial orientation: ${orientation}`);
+      } catch (error) {
+        console.error(TAG, `[WebViewFullScreenTest] saveInitialOrientation Errorcode: ${error.code}`);
+      }
+    }
+  }
+
+  private async setOrientation(orientation: window.Orientation): Promise<boolean> {
+    const win = await this.getWindow();
+    if (win) {
+      try {
+        await win.setPreferredOrientation(orientation);
+        console.debug(TAG, `[WebViewFullScreenTest] Set orientation to: ${orientation}`);
+        return true;
+      } catch (error) {
+        console.error(TAG, `[WebViewFullScreenTest] setOrientation Errorcode: ${error.code}`);
+        return false;
+      }
+    }
+    return false;
+  }
+
+  // 处理全屏进入（带状态保护和异步串行）
+  private async handleFullScreenEnter() {
+    if (this.isFullScreen) {
+      Logger.debug(TAG, '[WebViewFullScreen] Already in full screen, skipping');
+      return;
+    }
+    if (!this.isOrientationSaved) {
+      Logger.warn(TAG, '[WebViewFullScreen] Initial orientation not saved yet, skipping full screen enter');
+      return;
+    }
+    try {
+      // 阶段1：设置方向
+      const orientationResult = await this.setOrientation(window.Orientation.AUTO_ROTATION);
+      if (!orientationResult) {
+        Logger.error(TAG, '[WebViewFullScreen] Failed to set orientation, aborting full screen enter');
+        return;
+      }
+      // 阶段2：设置沉浸式模式
+      const immersiveResult = await this.enterImmersiveMode();
+      if (!immersiveResult) {
+        Logger.error(TAG, '[WebViewFullScreen] Failed to enter immersive mode, rolling back');
+        // 回滚沉浸式模式（即使部分失败也要尝试恢复）
+        await this.exitImmersiveMode();
+        // 回滚方向设置
+        await this.setOrientation(this.initialOrientation);
+        return;
+      }
+      // 阶段3：所有操作成功，设置状态
+      this.isFullScreen = true;
+    } catch (error) {
+      Logger.error(TAG, `[WebViewFullScreen] Enter full screen failed: ${error}`);
+      // 异常时回滚所有操作
+      await this.exitImmersiveMode();
+      await this.setOrientation(this.initialOrientation);
+    }
+  }
+
+  // 处理全屏退出（带状态保护和异步串行）
+  private async handleFullScreenExit() {
+    if (!this.isFullScreen) {
+      Logger.debug(TAG, '[WebViewFullScreen] Not in full screen, skipping');
+      return;
+    }
+    try {
+      // 阶段1：恢复方向
+      const orientationResult = await this.setOrientation(this.initialOrientation);
+      if (!orientationResult) {
+        Logger.error(TAG, '[WebViewFullScreen] Failed to restore orientation, keeping full screen state');
+        return;
+      }
+      // 方向已恢复，清除 isFullScreen 让 UI 恢复原始布局
+      this.isFullScreen = false;
+      // 阶段2：退出沉浸式模式
+      const immersiveResult = await this.exitImmersiveMode();
+      if (!immersiveResult) {
+        Logger.error(TAG, '[WebViewFullScreen] Failed to exit immersive mode after restoring orientation');
+        // 沉浸式模式退出失败，但方向已恢复，isFullScreen 已清除，避免重复触发循环
+      }
+    } catch (error) {
+      Logger.error(TAG, `[WebViewFullScreen] Exit full screen failed: ${error}`);
+      // 异常时也应清除状态，避免卡死
+      this.isFullScreen = false;
+    }
+  }
+
+  // 进入沉浸式全屏模式（隐藏系统栏）
+  private async enterImmersiveMode(): Promise<boolean> {
+    const win = await this.getWindow();
+    if (win) {
+      try {
+        // 设置窗口为全屏布局模式，内容延伸到系统栏下方
+        await win.setWindowLayoutFullScreen(true);
+        // 隐藏系统导航栏和状态栏
+        await win.setWindowSystemBarEnable([]);
+        Logger.debug(TAG, '[WebViewFullScreen] Entered immersive mode');
+        return true;
+      } catch (error) {
+        console.error(TAG, `[WebViewFullScreen] enterImmersiveMode Errorcode: ${error.code}`);
+        return false;
+      }
+    }
+    return false;
+  }
+
+  // 退出沉浸式全屏模式（恢复系统栏）
+  private async exitImmersiveMode(): Promise<boolean> {
+    const win = await this.getWindow();
+    if (win) {
+      try {
+        // 关闭全屏布局模式
+        await win.setWindowLayoutFullScreen(false);
+        // 恢复显示系统导航栏和状态栏（默认显示所有系统栏）
+        await win.setWindowSystemBarEnable(['status', 'navigation']);
+        Logger.debug(TAG, '[WebViewFullScreen] Exited immersive mode');
+        return true;
+      } catch (error) {
+        console.error(TAG, `[WebViewFullScreen] exitImmersiveMode Errorcode: ${error.code}`);
+        return false;
+      }
+    }
+    return false;
+  }
+
+  build() {
+    Stack() {
+        if ( deviceInfo.sdkApiVersion >= 20) {
+          Web({ src: "", controller: this.controller, renderMode: this.renderMode })
+            .mixedMode(this.mode)
+            .onPermissionRequest(async (event: OnPermissionRequestEvent) => {
+              if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
+                const resources: string[] = event.request.getAccessibleResource();
+                if (resources.indexOf('TYPE_AUDIO_CAPTURE') >= 0 || resources.indexOf('TYPE_VIDEO_CAPTURE') >= 0 ) {
+                  const originUrl = this.webViewBaseOperate?.verifyURLFormat(event.request.getOrigin(), this.source.html,
+                    this.source.baseUrl);
+                  const currentUrl = this.webViewBaseOperate?.verifyURLFormat(this.controller.getUrl(), this.source.html,
+                    this.source.baseUrl);
+                  const originDomain: string = OSUrl.URL.parseURL(originUrl).hostname;
+                  const currentDomain: string = OSUrl.URL.parseURL(currentUrl).hostname;
+                  let mediaCapturePermissionGrantType: string = WebMediaCapturePermissionGrantType.PROMPT
+                  if (this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType != undefined) {
+                    mediaCapturePermissionGrantType = this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType;
+                  }
+                  if (mediaCapturePermissionGrantType != WebMediaCapturePermissionGrantType.DENY) {
+                    await this.handleMediaCapturePermissionGrantType(resources, originDomain)
+                  }
+                  switch (mediaCapturePermissionGrantType) {
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_PROMPT:
+                      if (originDomain != currentDomain) {
+                        this.onPermissionRequestAlert(event)
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_DENY:
+                      if (originDomain != currentDomain) {
+                        event.request.deny();
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.DENY:
+                      event.request.deny();
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT:
+                      event.request.grant(resources);
+                      break;
+                    case WebMediaCapturePermissionGrantType.PROMPT:
+                      this.onPermissionRequestAlert(event)
+                      break;
+                  }
+                } else {
+                  this.onPermissionRequestAlert(event)
+                }
+              }
+            })
+            .width(this.isFullScreen ? "100%" : this.webviewWidth)
+            .height(this.isFullScreen ? "100%" : this.webviewHeight)
+            .fileAccess(this.allowFileAccess)
+            .constraintSize({ minHeight: MINHEIGHT })
+            .overScrollMode(this.overScrollMode)
+            .javaScriptAccess(this.javaScriptEnable)
+            .javaScriptOnDocumentStart(this.injectedJavaScriptBeforeContentLoaded)
+            .horizontalScrollBarAccess(this.descriptorWrapper.rawProps.showsHorizontalScrollIndicator)
+            .verticalScrollBarAccess(this.descriptorWrapper.rawProps.showsVerticalScrollIndicator)
+            .overviewModeAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
+            .textZoomRatio(this.descriptorWrapper.rawProps.textZoom)
+            .backgroundColor(BaseOperate.getColorMode(this.ctx.uiAbilityContext,
+              this.descriptorWrapper.rawProps.forceDarkOn) === WebDarkMode.On ? Color.Black : Color.Transparent)
+            .darkMode(BaseOperate.getColorMode(this.ctx.uiAbilityContext, this.descriptorWrapper.rawProps.forceDarkOn))
+            .forceDarkAccess(this.forceDark)
+            .cacheMode(this.cacheMode)
+            .minFontSize(this.minFontSize)
+            .domStorageAccess(this.descriptorWrapper.rawProps.domStorageEnabled)
+            .zoomAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
+            .overScrollMode(this.overScrollMode)
+            .onProgressChange((event: OnProgressChangeEvent) => this.onProgressChange(event))
+            .onScroll((event: OnScrollEvent) => this.webViewBaseOperate?.emitScroll(event))
+            .nestedScroll({
+              scrollForward: this.nestedScroll,
+              scrollBackward: this.nestedScroll,
+            })
+            .onLoadStarted(() => this.onPageBegin())
+            .onLoadFinished(() => this.onLoadFinished())
+            .onPageEnd(() => {this.onPageEndExecuteRunInjectedJavaScript()})
+            .onErrorReceive((event: OnErrorReceiveEvent) => this.webViewBaseOperate?.emitLoadingError(event))
+            .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => this.webViewBaseOperate?.emitHttpError(event))
+            .onControllerAttached(() => this.controllerAttachedInit())
+            .onAlert((event: AlertEvent) => this.onJavascriptAlert(event))
+            .onConfirm((event: AlertEvent) => this.onJavascriptConfirm(event))
+            .onDownloadStart((event: OnDownloadStartEvent) => this.webViewBaseOperate?.onDownloadStart(event))
+            .geolocationAccess(this.descriptorWrapper.rawProps.geolocationEnabled)
+            .onGeolocationShow((event) => {
+              if (event && (this.descriptorWrapper.rawProps.geolocationEnabled != undefined)) {
+                event.geolocation.invoke(event.origin, this.descriptorWrapper.rawProps.geolocationEnabled, true);
+              }
+            })
+            .mediaPlayGestureAccess(this.descriptorWrapper.rawProps.mediaPlaybackRequiresUserAction)
+            .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
+            .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
+            .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
+            .onFullScreenEnter(async () => {
+              Logger.debug(TAG, '[WebViewFullScreen] onFullScreenEnter called');
+              if (this.allowsFullscreenVideo) {
+                await this.handleFullScreenEnter();
+              } else {
+                Logger.debug(TAG, '[WebViewFullScreen] Fullscreen video disabled by allowsFullscreenVideo');
+              }
+            })
+            .onFullScreenExit(async () => {
+              Logger.debug(TAG, '[WebViewFullScreen] onFullScreenExit called');
+              await this.handleFullScreenExit();
+            })
+            .editMenuOptions({
+              onCreateMenu: this.onCreateMenu.bind(this),
+              onMenuItemClick: this.onMenuItemClick.bind(this),
+            })
+        } else {
+          Web({ src: "", controller: this.controller, renderMode: this.renderMode })
+            .mixedMode(this.mode)
+            .onPermissionRequest(async (event: OnPermissionRequestEvent) => {
+              if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
+                const resources: string[] = event.request.getAccessibleResource();
+                if (resources.indexOf('TYPE_AUDIO_CAPTURE') >= 0 || resources.indexOf('TYPE_VIDEO_CAPTURE') >= 0 ) {
+                  const originUrl = this.webViewBaseOperate?.verifyURLFormat(event.request.getOrigin(), this.source.html,
+                    this.source.baseUrl);
+                  const currentUrl = this.webViewBaseOperate?.verifyURLFormat(this.controller.getUrl(), this.source.html,
+                    this.source.baseUrl);
+                  const originDomain: string = OSUrl.URL.parseURL(originUrl).hostname;
+                  const currentDomain: string = OSUrl.URL.parseURL(currentUrl).hostname;
+                  let mediaCapturePermissionGrantType: string = WebMediaCapturePermissionGrantType.PROMPT
+                  if (this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType != undefined) {
+                    mediaCapturePermissionGrantType = this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType;
+                  }
+                  if (mediaCapturePermissionGrantType != WebMediaCapturePermissionGrantType.DENY) {
+                    await this.handleMediaCapturePermissionGrantType(resources, originDomain)
+                  }
+                  switch (mediaCapturePermissionGrantType) {
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_PROMPT:
+                      if (originDomain != currentDomain) {
+                        this.onPermissionRequestAlert(event)
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_DENY:
+                      if (originDomain != currentDomain) {
+                        event.request.deny();
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.DENY:
+                      event.request.deny();
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT:
+                      event.request.grant(resources);
+                      break;
+                    case WebMediaCapturePermissionGrantType.PROMPT:
+                      this.onPermissionRequestAlert(event)
+                      break;
+                  }
+                } else {
+                  this.onPermissionRequestAlert(event)
+                }
+              }
+            })
+
+            .width(this.isFullScreen ? "100%" : this.webviewWidth)
+            .height(this.isFullScreen ? "100%" : this.webviewHeight)
+            .fileAccess(this.allowFileAccess)
+            .constraintSize({ minHeight: MINHEIGHT })
+            .overScrollMode(this.overScrollMode)
+            .javaScriptAccess(this.javaScriptEnable)
+            .javaScriptOnDocumentStart(this.injectedJavaScriptBeforeContentLoaded)
+            .horizontalScrollBarAccess(this.descriptorWrapper.rawProps.showsHorizontalScrollIndicator)
+            .verticalScrollBarAccess(this.descriptorWrapper.rawProps.showsVerticalScrollIndicator)
+            .overviewModeAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
+            .textZoomRatio(this.descriptorWrapper.rawProps.textZoom)
+            .backgroundColor(BaseOperate.getColorMode(this.ctx.uiAbilityContext,
+              this.descriptorWrapper.rawProps.forceDarkOn) === WebDarkMode.On ? Color.Black : Color.Transparent)
+            .darkMode(BaseOperate.getColorMode(this.ctx.uiAbilityContext, this.descriptorWrapper.rawProps.forceDarkOn))
+            .forceDarkAccess(this.forceDark)
+            .cacheMode(this.cacheMode)
+            .minFontSize(this.minFontSize)
+            .domStorageAccess(this.descriptorWrapper.rawProps.domStorageEnabled)
+            .zoomAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
+            .overScrollMode(this.overScrollMode)
+            .onProgressChange((event: OnProgressChangeEvent) => this.onProgressChange(event))
+            .onScroll((event: OnScrollEvent) => this.webViewBaseOperate?.emitScroll(event))
+            .nestedScroll({
+              scrollForward: this.nestedScroll,
+              scrollBackward: this.nestedScroll,
+            })
+            .onPageBegin(() => this.onPageBegin())
+            .onPageEnd(() => this.onPageEnd())
+            .onErrorReceive((event: OnErrorReceiveEvent) => this.webViewBaseOperate?.emitLoadingError(event))
+            .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => this.webViewBaseOperate?.emitHttpError(event))
+            .onControllerAttached(() => this.controllerAttachedInit())
+            .onAlert((event: AlertEvent) => this.onJavascriptAlert(event))
+            .onConfirm((event: AlertEvent) => this.onJavascriptConfirm(event))
+            .onDownloadStart((event: OnDownloadStartEvent) => this.webViewBaseOperate?.onDownloadStart(event))
+            .geolocationAccess(this.descriptorWrapper.rawProps.geolocationEnabled)
+            .onGeolocationShow((event) => {
+              if (event && (this.descriptorWrapper.rawProps.geolocationEnabled != undefined)) {
+                event.geolocation.invoke(event.origin, this.descriptorWrapper.rawProps.geolocationEnabled, true);
+              }
+            })
+            .mediaPlayGestureAccess(this.descriptorWrapper.rawProps.mediaPlaybackRequiresUserAction)
+            .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
+            .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
+            .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
+            .onFullScreenEnter(async () => {
+              Logger.debug(TAG, '[WebViewFullScreen] onFullScreenEnter called');
+              if (this.allowsFullscreenVideo) {
+                await this.handleFullScreenEnter();
+              } else {
+                Logger.debug(TAG, '[WebViewFullScreen] Fullscreen video disabled by allowsFullscreenVideo');
+              }
+            })
+            .onFullScreenExit(async () => {
+              Logger.debug(TAG, '[WebViewFullScreen] onFullScreenExit called');
+              await this.handleFullScreenExit();
+            })
+            .editMenuOptions({
+              onCreateMenu: this.onCreateMenu.bind(this),
+              onMenuItemClick: this.onMenuItemClick.bind(this),
+            })
+          }
+      }
+    .width(this.isFullScreen ? "100%" : this.webviewWidth)
+    .height(this.isFullScreen ? "100%" : this.webviewHeight)
+    .position(this.isFullScreen ? undefined : {
+      x: this.descriptorWrapper.layoutMetrics.frame.origin.x,
+      y: this.descriptorWrapper.layoutMetrics.frame.origin.y
+    })
+  }
+
+  private onDescriptorWrapperChange(descriptorWrapper: WebViewDescriptor) {
+    this.initVariable()
+    this.descriptorWrapper = descriptorWrapper
+    if (this.source.html != "" && this.html != this.source.html) {
+      if (this.controllerAttached) {
+        this.loadHtmlData(this.source.html, this.source.baseUrl)
+        Logger.debug(TAG, "[RNOH] html is update")
+        this.html = this.source.html
+      }
+    } else if (this.source.uri && this.source.method && this.source.method.toUpperCase() === 'POST' && this.source.body && (this.source.uri != this.url || this.body != this.source.body)) {
+      if (this.controllerAttached) {
+        let url = this.source.uri as string;
+        this.url = url;
+        this.body = this.source.body;
+        let postData = buffer.from(this.source.body);
+        this.controller.postUrl(url, postData?.buffer);
+      }
+    } else if (typeof this.url !== typeof this.source.uri 
+      || (typeof this.source.uri === "string" && this.url !== this.source.uri)  
+      || (typeof this.source.uri === "object" && ( this.url as Resource )?.params !== this.source.uri?.params)) {
+      if (this.source.uri != "") {
+        Logger.debug(TAG, `[RNOH] newDescriptor props update uri: ` + this.source.uri);
+        if (this.controllerAttached) {
+          this.controller.loadUrl(this.source.uri, this.headers)
+        }
+      } else {
+        this.loadHtmlData()
+      }
+      this.url = this.source.uri as string;
+    }
+    if (this.controllerAttached) {
+      this.controller?.setScrollable(this.descriptorWrapper.rawProps.scrollEnabled)
+    }
+  }
+
+  private initVariable() {
+    this.descriptorWrapper = this.ctx.descriptorRegistry.getDescriptor<WebViewDescriptor>(this.tag)
+    this.javaScriptEnable = this.descriptorWrapper.rawProps.javaScriptEnabled;
+    this.minFontSize =
+      this.descriptorWrapper.rawProps.minimumFontSize ? this.descriptorWrapper.rawProps.minimumFontSize : EIGHT;
+    this.cacheMode =
+      this.descriptorWrapper.rawProps.cacheEnabled ?
+        this.webViewBaseOperate?.transCacheMode(this.descriptorWrapper.rawProps.cacheMode as CACHE_MODE) as number :
+      CacheMode.Online;
+    this.source = {
+      uri: this.descriptorWrapper.rawProps.newSource.uri ?? "",
+      method: this.descriptorWrapper.rawProps.newSource.method ?? "",
+      body: this.descriptorWrapper.rawProps.newSource.body ?? "",
+      html: this.descriptorWrapper.rawProps.newSource.html ?? "",
+      baseUrl: this.descriptorWrapper.rawProps.newSource.baseUrl ?? "",
+      headers: this.descriptorWrapper.rawProps.newSource.headers ?? []
+    }
+    if (this.source.headers) {
+      this.source.headers.forEach(item => {
+        if (item.name && item.value) {
+          this.headers.push({ headerKey: item.name, headerValue: item.value })
+        }
+      })
+    }
+    // 防抖处理webview尺寸设置
+    const newWidth = this.descriptorWrapper.layoutMetrics.frame.size.width
+    const newHeight = this.descriptorWrapper.layoutMetrics.frame.size.height
+
+    if (this.debounceTimer !== -1) {
+      clearTimeout(this.debounceTimer)
+      this.debounceTimer = -1
+    }
+
+    if (this.isFirstDebounce) {
+      this.webviewWidth = newWidth
+      this.webviewHeight = newHeight
+      this.isFirstDebounce = false // 标记为非首次
+    } else {
+      this.debounceTimer = setTimeout(() => {
+        this.webviewWidth = newWidth
+        this.webviewHeight = newHeight
+      }, RNCWebView.DEBOUNCE_TIME)
+    }
+    this.scrollEnabled = this.descriptorWrapper.rawProps.scrollEnabled;
+    // 当禁止滚动时，使用父组件滚动
+    this.nestedScroll = this.scrollEnabled ? NestedScrollMode.SELF_FIRST : NestedScrollMode.PARENT_FIRST;
+    if (this.source.uri && this.source.uri.toString().startsWith("asset://")) {
+      this.source.uri = $rawfile(this.source.uri.toString().replace("asset://", this.ctx.rnInstance.getAssetsDest()));
+    }
+
+    if (this.descriptorWrapper.rawProps.overScrollMode === WebViewOverScrollMode.ALWAYS) {
+      this.overScrollMode = OverScrollMode.ALWAYS
+    } else if (this.descriptorWrapper.rawProps.overScrollMode === WebViewOverScrollMode.NEVER) {
+      this.overScrollMode = OverScrollMode.NEVER
+    }
+
+    this.overScrollMode = this.descriptorWrapper.rawProps.bounces ? OverScrollMode.ALWAYS : OverScrollMode.NEVER;
+
+    if (this.descriptorWrapper.rawProps.injectedJavaScriptBeforeContentLoaded) {
+      this.injectedJavaScriptBeforeContentLoaded = [
+        { script: this.descriptorWrapper.rawProps.injectedJavaScriptBeforeContentLoaded, scriptRules: ["*"] }
+      ];
+    }
+    
+    const renderModeStr = this.descriptorWrapper.rawProps.renderMode || "SYNC_RENDER"
+    this.renderMode = (renderModeStr === "ASYNC_RENDER") ? RenderMode.ASYNC_RENDER : RenderMode.SYNC_RENDER
+    this.allowsFullscreenVideo = this.descriptorWrapper.rawProps.allowsFullscreenVideo ?? false;
+
+  }
+
+  private registerJavaScriptProxyOnly() {
+    if (this.messagingEnabled == this.descriptorWrapper.rawProps.messagingEnabled && this.hasRegisterJavaScriptProxy) {
+      return;
+    }
+    this.messagingEnabled = this.descriptorWrapper.rawProps.messagingEnabled;
+    if (this.messagingEnabled) {
+      let bridge: RNCWebViewBridge = {
+        postMessage: (data: string) => {
+          Logger.debug(TAG, `[RNOH] bridge postMessage,  ${JSON.stringify(data)}`);
+          if (this.controller != null) {
+            let result: WebViewEventParams = this.createWebViewEvent("onMessage")
+            if (result) {
+              result.data = data.toString()
+              result.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier()
+              this.eventEmitter!.emit("message", result as ResultType);
+            }
+          }
+        }
+      };
+      this.controller.registerJavaScriptProxy(bridge, JAVASCRIPT_INTERFACE, ["postMessage"])
+      this.hasRegisterJavaScriptProxy = true
+      Logger.debug(TAG, "[RNOH] JavaScript Proxy registered without reloading page")
+    }
+  }
+
+  private registerPostMessage() {
+    if (this.messagingEnabled == this.descriptorWrapper.rawProps.messagingEnabled) {
+      return;
+    }
+    this.messagingEnabled = this.descriptorWrapper.rawProps.messagingEnabled;
+    if (this.messagingEnabled) {
+      if (this.hasRegisterJavaScriptProxy) {
+        Logger.debug(TAG, "[RNOH] JavaScript Proxy already registered")
+        return
+      }
+      let bridge: RNCWebViewBridge = {
+        postMessage: (data: string) => {
+          Logger.debug(TAG, `[RNOH] bridge postMessage,  ${JSON.stringify(data)}`);
+          if (this.controller != null) {
+            let result: WebViewEventParams = this.createWebViewEvent("onMessage")
+            if (result) {
+              result.data = data.toString()
+              result.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier()
+              this.eventEmitter!.emit("message", result as ResultType);
+            }
+          }
+        }
+      };
+      this.controller.registerJavaScriptProxy(bridge, JAVASCRIPT_INTERFACE, ["postMessage"])
+      if (this.source.uri && !this.source.html) {
+        this.controller.loadUrl(this.source.uri, this.headers)
+      } else if (this.source.html) {
+        Logger.debug(TAG, "[RNOH] JavaScript Proxy registered, HTML content will use it on next load")
+      } else {
+        this.controller.refresh()
+      }
+      this.hasRegisterJavaScriptProxy = true
+    }
+  }
 }