렌더러에서 윈도우 열기

렌더러 내에서 신뢰할 수 있는 콘텐츠나 신뢰할 수 없는 콘텐츠로부터 윈도우를 생성하는 방법을 제어할 수 있다. 렌더러에서 윈도우를 생성하는 방법은 두 가지가 있다:

target=_blank가 지정된 링크를 클릭하거나 폼을 제출
JavaScript에서 window.open() 호출

동일 오리진 콘텐츠의 경우, 새로운 윈도우는 동일 프로세스 내에서 생성된다. 이 경우 부모 윈도우가 자식 윈도우에 직접 접근할 수 있다. 이 기능은 설정 패널과 같은 앱 서브 윈도우를 만들 때 매우 유용하다. 부모 윈도우가 자식 윈도우에 직접 렌더링할 수 있으며, 마치 부모 윈도우 내의 div처럼 다룰 수 있다. 이는 브라우저에서의 동작과 동일하다.

Electron은 이 네이티브 Chrome Window를 내부적으로 BrowserWindow와 연결한다. webContents.setWindowOpenHandler()를 사용하면 메인 프로세스에서 BrowserWindow를 생성할 때 사용할 수 있는 모든 커스텀 기능을 활용할 수 있다.

BrowserWindow 생성자 옵션은 다음과 같은 순서로 우선순위가 결정된다: window.open()의 features 문자열에서 파싱된 옵션, 부모 윈도우에서 상속된 보안 관련 webPreferences, 그리고 webContents.setWindowOpenHandler에서 제공된 옵션. webContents.setWindowOpenHandler는 메인 프로세스에서 호출되므로 최종 결정권과 모든 권한을 갖는다.

`window.open(url[, frameName][, features])`

url string
frameName string (선택 사항)
features string (선택 사항)

반환 값: Window | null

features는 브라우저의 표준 형식을 따르는 쉼표로 구분된 키-값 목록이다. Electron은 편의를 위해 이 목록에서 가능한 경우 BrowserWindowConstructorOptions를 파싱한다. 더 세밀한 제어와 편의성을 원한다면 webContents.setWindowOpenHandler를 사용해 BrowserWindow 생성을 커스터마이징하는 것을 고려해 보자.

features 문자열에서 직접 설정할 수 있는 WebPreferences의 하위 집합은 다음과 같다: zoomFactor, nodeIntegration, preload, javascript, contextIsolation, webviewTag.

예시:

window.open('https://github.com', '_blank', 'top=500,left=200,frame=false,nodeIntegration=no')

참고 사항:

부모 윈도우에서 Node 통합이 비활성화된 경우, 새로 열린 윈도우에서도 항상 비활성화된다.
부모 윈도우에서 컨텍스트 격리가 활성화된 경우, 새로 열린 윈도우에서도 항상 활성화된다.
부모 윈도우에서 JavaScript가 비활성화된 경우, 새로 열린 윈도우에서도 항상 비활성화된다.
features에 제공된 비표준 기능(Chromium이나 Electron에서 처리되지 않는 기능)은 등록된 webContents의 did-create-window 이벤트 핸들러의 options 인자로 전달된다.
frameName은 네이티브 문서에 있는 target의 명세를 따른다.
about:blank를 열 때, 자식 윈도우의 WebPreferences는 부모 윈도우에서 복사되며, Chromium이 이 경우 브라우저 측 네비게이션을 건너뛰기 때문에 이를 재정의할 방법은 없다.

윈도우 생성을 커스터마이징하거나 취소하려면, 메인 프로세스에서 webContents.setWindowOpenHandler()를 사용해 오버라이드 핸들러를 설정할 수 있다. { action: 'deny' }를 반환하면 윈도우 생성이 취소된다. { action: 'allow', overrideBrowserWindowOptions: { ... } }를 반환하면 윈도우를 열고, 생성 시 사용할 BrowserWindowConstructorOptions를 설정할 수 있다. 이 방법은 보안 설정을 결정할 때 렌더러가 메인 프로세스보다 제한된 권한을 가지기 때문에, 기능 문자열을 통해 옵션을 전달하는 것보다 더 강력하다.

action과 overrideBrowserWindowOptions 외에도, outlivesOpener를 다음과 같이 전달할 수 있다: { action: 'allow', outlivesOpener: true, overrideBrowserWindowOptions: { ... } }. true로 설정하면, 새로 생성된 윈도우는 오프너 윈도우가 닫혀도 닫히지 않는다. 기본값은 false이다.

기본 `Window` 예제

// main.js
const mainWindow = new BrowserWindow()

// 이 예제에서는 'about:blank' URL을 가진 윈도우만 생성된다.
// 다른 모든 URL은 차단된다.
mainWindow.webContents.setWindowOpenHandler(({ url }) => {
  if (url === 'about:blank') {
    return {
      action: 'allow',
      overrideBrowserWindowOptions: {
        frame: false,
        fullscreenable: false,
        backgroundColor: 'black',
        webPreferences: {
          preload: 'my-child-window-preload-script.js'
        }
      }
    }
  }
  return { action: 'deny' }
})

// 렌더러 프로세스 (mainWindow)
const childWindow = window.open('', 'modal')
childWindow.document.write('<h1>Hello</h1>')

window.open(url[, frameName][, features])​

기본 Window 예제​

`window.open(url[, frameName][, features])`

기본 `Window` 예제