[Electron] 자식창(Child Window)

[Electron] 자식창(Child Window)

---

자식창은 부모창 위에 보여진다.

자식창을 선언 할 때, parent: 부모창를 입력하여 부모의 자식임을 선언한다.

기본적으로 createWindow시 부모창과 자식창 모두 선언해 준다.

아래와 같이 입력하면 앱을 실행할 때 자식창과 부모창 모두 표시된다.

let win;    // 부모
let child;  // 자식

function createWindow() {
  // 부모 창 선언
  win = new BrowserWindow({
    width: 1400,
    height: 1000,
    webPreferences: {
      nodeIntegration: true
    }
  });
  
  // 자식 창 선언
  child = new BrowserWindow({
    parent: win,
    width: 400,
    height: 400
  });

  win.loadFile('main.html');
  child.loadFile('child_main.html');

  win.on('closed', () => {
    win = null
  });
}

app.on('ready', createWindow);

 

만약 특정 시점(때)에만 자식창을 보여주고 싶은 경우, 자식창에 show 옵션을 추가해 주면 된다.

자식창을 show: false로 처음에는 안보이게 한 후, 자식창.show();를 사용하여 자식창을 활성화 할 수 있다.

child = new BrowserWindow({
  parent: win,
  width: 400,
  height: 400,
  show: false
});

// 자식 창 활성화
child.show();

 

자식 창이 활성화 되었을 때, 자식창에만 focus를 갖게 하고 싶은 경우,

다시 말해, 자식 창을 닫기 전까지 부모 창을 조작할 수 없도록 하고 싶은 경우

자식창 옵션에 modal: ture 옵션을 추가해 주면 된다.

child = new BrowserWindow({
  parent: win,
  width: 400,
  height: 400,
  modal: true
});

 

 

 

 

---

[참고] https://electronjs.org/docs/api/browser-window#parent-and-child-windows