自定义弹窗内加载h5页面,h5页面再跳转登陆页面,弹窗覆盖在登陆页面

期望的效果是点击弹窗中的链接跳转其他页面后,弹窗不消失,并且页面盖在弹窗上方,现在的效果是新页面在弹窗的下方。

HarmonyOS
9天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

​有一个demo供参考:

EntryAbility中:​

private subWindowStage: window.WindowStage | undefined = undefined  
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {  
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  
  const that: EntryAbility = this  
  this.context.eventHub.on("createWindow", (data: Data) => {  
  if (that.subWindowStage != undefined) {  
  data.subWindowStage = that.subWindowStage  
} else {  
  hilog.info(0x0000, 'testTag', '%{public}s', 'that.subWindowStage == undefined');  
}  
})  
}  
onDestroy(): void {  
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  
}  
  
onWindowStageCreate(windowStage: window.WindowStage): void {  
  // Main window is created, set main page for this ability  
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  
  this.subWindowStage = windowStage  
  
  windowStage.loadContent('pages/Index', (err, data) => {  
  if (err.code) {  
  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');  
  return;  
}  
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');  
});  
}

// 主页面

import web_webview from '@ohos.web.webview';  
import { CommonWindow } from './util_class_dialog/CommonWindow';  
  
@Entry  
@Component  
struct NewPage {  
  dialogController: CustomDialogController = new CustomDialogController({  
    builder: CustomDialogExample(),  
  })  
  
  build() {  
    Column() {  
      Button('自定义弹窗').onClick((event: ClickEvent) => {  
        this.dialogController.open()  
      })  
    }  
    .width('100%')  
    .height('100%')  
    .justifyContent(FlexAlign.Center)  
  }  
}  
  
@CustomDialog  
struct CustomDialogExample {  
  controller: CustomDialogController = new CustomDialogController({  
    builder: CustomDialogExample({}),  
  })  
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();  
  
  testObj = new CommonWindow();  
  build() {  
    Column() {  
      // web组件加载本地index.html页面  
      Web({ src: $rawfile('index.html'), controller: this.webviewController})  
        // 将对象注入到web端  
        .javaScriptProxy({  
          object: this.testObj,  
          name: "testObjName",  
          methodList: ["showWindow"],  
          controller: this.webviewController  
        })  
        .width('100%')  
        .height('100%')  
    }  
  }  
}

// 对象类

import window from '@ohos.window';  
import common from '@ohos.app.ability.common';  
import { BusinessError } from '@ohos.base';  
import { entryName } from './MainPage';  
  
export class CommonWindow {  
  private storage: LocalStorage | null = null;  
  private subWindow: window.Window | null = null;  
  private windowStage1: window.WindowStage | null = null  
  private context: common.UIAbilityContext | null = null;  
  
  private init() {  
    this.context = getContext(this) as common.UIAbilityContext;  
    let data: Data = { subWindowStage: null, storage: null };  
    this.context.eventHub.emit("createWindow", data);  
    this.windowStage1 = data.subWindowStage;  
    this.storage = data.storage;  
    console.log("aboutToAppear end createWindowStage");  
    this.context.eventHub.on("closeWindow", (data: Data) => {  
      this.destroySubWindow();  
    })  
  }  
  
  showWindow() {  
    this.init();  
    if (this.subWindow) {  
      console.log("subWindow is already exist");  
      return;  
    }  
    try {  
      if (!this.windowStage1) {  
        console.error("this.windowStage1 is null");  
        return;  
      }  
      this.windowStage1.createSubWindow('mySubWindow', (err: BusinessError, data) => {  
        const errCode: number = err.code;  
        if (errCode) {  
          console.error('Failed to create the subWindow. Cause: ' + JSON.stringify(err));  
          return;  
        }  
        this.subWindow = (data as window.Window);  
        console.info('Succeeded in creating the subWindow. Data: ' + JSON.stringify(data));  
        if (!this.subWindow) {  
          console.info('Failed to load the content. Cause: windowClass is null');  
        } else {  
          let names: Array<'status' | 'navigation'> = [];  
          this.subWindow.setWindowSystemBarEnable(names);  
          this.subWindow.setWindowTouchable(true);  
          this.loadContent(entryName);  
          this.showSubWindow();  
        }  
      });  
    } catch (exception) {  
      console.error('Failed to create the window. Cause: ' + JSON.stringify(exception));  
    }  
  }  
  private showSubWindow() {  
    if (this.subWindow) {  
      this.subWindow.showWindow((err: BusinessError) => {  
        const errCode: number = err.code;  
        if (errCode) {  
          console.error('Failed to show the window. Cause: ' + JSON.stringify(err));  
          return;  
        }  
        console.info('Succeeded in showing the window.');  
      });  
    } else {  
      console.info('showSubWindow subWindow not created.');  
    }  
  }  
  
  private destroySubWindow() {  
    if (this.subWindow) {  
      this.subWindow.destroyWindow((err) => {  
        const errCode: number = err.code;  
        if (errCode) {  
          console.error('Failed to destroy the window. Cause:' + JSON.stringify(err));  
          return;  
        }  
        this.subWindow = null  
      });  
    } else {  
      console.info('showSubWindow subWindow not created.');  
    }  
  }  
  
  private loadContent(path: string) {  
    if (this.subWindow) {  
      let that = this;  
      let para: Record<string, number> = { 'PropA': 66 };  
      that.storage = new LocalStorage(para);  
      if (that.storage != null && this.subWindow != null) {  
        that.storage.setOrCreate("windowObj", this.subWindow)  
      }  
      this.subWindow.loadContentByName(path, this.storage, (err: BusinessError) => {  
        const errCode: number = err.code;  
        if (errCode) {  
          return;  
        }  
        if (this.subWindow) {  
          this.subWindow.setWindowBackgroundColor('#cc000e03')  
        }  
      });  
    } else {  
      console.info('loadContent subWindow not created.');  
    }  
  }  
}  
  
export interface Data {  
  subWindowStage: window.WindowStage | null,  
  storage: LocalStorage | null  
}  
// 子窗口内容  
import window from '@ohos.window';  
import common from '@ohos.app.ability.common';  
  
export const entryName: string = 'Index2';  
  
@Entry({ routeName: entryName, storage: LocalStorage.getShared() })  
@Component  
export struct MainPage{  
  @LocalStorageLink('PropA') varA: number | undefined = 1;  
  private subWindow: window.Window | undefined;  
  @State message: string = 'Hello World'  
  
  build() {  
    Column() {  
      Text('覆盖在弹窗上的子窗口')  
    }  
    .justifyContent(FlexAlign.Center)  
    .backgroundColor(Color.White)  
    .height('100%')  
    .width('100%')  
    .onClick(() => {  
      let context = getContext(this) as common.UIAbilityContext;  
      context.eventHub.emit("closeWindow", null);  
      if (this.subWindow != null) {  
      }  
    })  
  }  
  
  // 页面生命周期:打开沉浸式  
  onPageShow() {  
    window.getLastWindow(getContext(this), (err, win) => {  
      // 获取当前窗口的属性  
      let prop: window.WindowProperties = win.getWindowProperties();  
      // 打印当前窗口属性  
      console.log(JSON.stringify(prop));  
      win.setWindowLayoutFullScreen(true)  
    })  
  }  
  
  // 页面生命周期:关闭沉浸式  
  onPageHide() {  
    window.getLastWindow(getContext(this), (err, win) => {  
      win.setWindowLayoutFullScreen(false)  
    })  
  }  
  
  aboutToAppear() {  
    this.varA = LocalStorage.getShared().get<number>("PropA");  
    this.subWindow = LocalStorage.getShared().get<window.Window>("windowObj");  
  }  
}
// 本地html  
<!-- index.html -->  
  <!DOCTYPE html>  
  <html style="width:100%;height:100%">  
  <body style="width:100%;height:100%;display: flex;justify-content: center;align-items: center;">  
  <button type="button" onclick="callArkTS()" style="width:300px;height:80px;">Click Me!</button>  
  <p id="demo"></p>  
  <script>  
  function callArkTS() {  
    testObjName.showWindow();  
    console.info('ArkTS Hello World! :' + str);  
  }  
  </script>  
  </body>  
  </html>
分享
微博
QQ
微信
回复
9天前
相关问题
HarmonyOS H5页面加载缓存机制
61浏览 • 1回复 待解决
HarmonyOS h5页面缩放问题
351浏览 • 0回复 待解决
HarmonyOS Web组件加载在线H5页面
52浏览 • 1回复 待解决
如何使H5页面适配多设备?
494浏览 • 1回复 待解决
如何在HarmonyOS中调试h5页面
752浏览 • 1回复 待解决
HarmonyOS h5页面是否可以适配Harmony OS
332浏览 • 1回复 待解决
升级API11后h5页面字体变小了
1715浏览 • 1回复 待解决
HarmonyOS h5返回上一页面时会闪一下
263浏览 • 1回复 待解决