本文へスキップ

レンダラーからのウィンドウの開く

レンダラー内の信頼できるコンテンツまたは信頼できないコンテンツからウィンドウを作成する方法を制御するには、いくつかの方法があります。ウィンドウは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 文字列
  • frameName 文字列(オプション)
  • features 文字列(オプション)

Window | null を返します

featuresは、ブラウザの標準形式に従った、コンマ区切りのキーバリューリストです。Electronは便宜上、このリストから可能な限り`BrowserWindowConstructorOptions`を解析します。完全な制御とより良い使いやすさのために、`webContents.setWindowOpenHandler`を使用して`BrowserWindow`の作成をカスタマイズすることを検討してください。

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

例:

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

備考

  • 親ウィンドウで無効になっている場合、開かれた`window`ではノード統合は常に無効になります。
  • 親ウィンドウで有効になっている場合、開かれた`window`ではコンテキスト分離は常に有効になります。
  • 親ウィンドウで無効になっている場合、開かれた`window`ではJavaScriptは常に無効になります。
  • `features`で指定された非標準機能(ChromiumまたはElectronで処理されないもの)は、登録されている任意の`webContents`の`did-create-window`イベントハンドラーに`options`引数で渡されます。
  • `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()

// In this example, only windows with the `about:blank` url will be created.
// All other urls will be blocked.
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' }
})
// renderer process (mainWindow)
const childWindow = window.open('', 'modal')
childWindow.document.write('<h1>Hello</h1>')