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

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) ?? '');  
});  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

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%')  
    }  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.

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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.