レンダラーからウインドウを開く

レンダラー内での信頼されたもしくは信頼されていないコンテンツからのウインドウ作成を制御する方法がいくつかあります。ウインドウはレンダラーから以下の 2 つの方法で作成できます。

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 は、ブラウザの標準フォーマットに従ったカンマ区切りのキーバリューリストです。 For convenience, Electron will parse a subset of presentational BrowserWindowConstructorOptions out of this list (such as width, height, x, y, show, frame, title, backgroundColor). Because the renderer is untrusted, options that cause the main process to access the filesystem or that are otherwise privileged (such as icon) are ignored. For full control and better ergonomics, use webContents.setWindowOpenHandler to customize the BrowserWindow creation from the main process.

WebPreferences のサブセットは、直接、ネストされずに、次の機能文字列から設定できます: zoomFactor、nodeIntegration、javascript、contextIsolation、および webviewTag。

以下がその例です。

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

注釈:

Node integration は、親ウィンドウで無効になっている場合は、開いた window でも常に無効になります。
コンテキストイソレーションは、親ウィンドウで有効になっている場合は、開いた window で常に有効になります。
JavaScript は、親ウィンドウで無効になっている場合は、開いた window でも常に無効になります。
Features that are not handled by Chromium and not in Electron's allowlist of presentational BrowserWindowConstructorOptions are ignored. The raw features string is still available to the main process via setWindowOpenHandler.
frameName は、ネイティブのドキュメントにある target の仕様に従います。
about:blank を開くとき、子ウィンドウの WebPreferences は親ウィンドウからコピーされ、Chromium がブラウザ側のナビゲーションを省略するためこの場合はオーバーライドできません。

ウインドウの作成をカスタマイズまたはキャンセルするにあたって、メインプロセスから webContents.setWindowOpenHandler() でオーバーライドハンドラーを任意設定できます。 { action: 'deny' } を返すと、ウィンドウはキャンセルされます。 { action: 'allow', overrideBrowserWindowOptions: { ... } } を返すと、ウインドウを開くことと、ウィンドウ作成時に使用する BrowserWindowConstructorOptions の設定を許可します。これは、feature 文字列でオプションを渡すよりも強力であることに注意してください。レンダラーは、セキュリティ設定を決定する権限がメインプロセスよりも制限されているからです。

action と overrideBrowserWindowOptions に加えて、outlivesOpener を次のように渡すことができます。{ action: 'allow', outlivesOpener: true, overrideBrowserWindowOptions: { ... } }。 true に設定すると、これを開いたウインドウが閉じても、新しく作成されたウィンドウは閉じません。デフォルト値はfalseです。

ネイティブの `Window` のサンプル

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

// この例では、URL が `about:blank` であるウインドウのみが作成されます。
// ほかのすべての 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` のサンプル