メインコンテンツへ飛ぶ

BrowserView

Note The BrowserView class is deprecated, and replaced by the new WebContentsView class.

BrowserView は、BrowserWindow に追加のウェブコンテンツを埋め込むのに使用することができます。 外側のウインドウを基準にして配置される点を除いて、子ウインドウのようなものです。 webview タグの代替となるものです。

クラス: BrowserView

ビューを作成したり、制御したりします。

Note The BrowserView class is deprecated, and replaced by the new WebContentsView class.

プロセス: Main

app モジュールの ready イベントが発生するまでは、このモジュールは使用できません。

サンプル

// メインプロセス
const { app, BrowserView, BrowserWindow } = require('electron')

app.whenReady().then(() => {
const win = new BrowserWindow({ width: 800, height: 600 })

const view = new BrowserView()
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('https://electronjs.org')
})

new BrowserView([options]) Experimental Deprecated

  • options Object (任意)
    • webPreferences WebPreferences (任意) - ウェブページの機能群の設定。
      • devTools boolean (任意) - デベロッパーツールを有効にするかどうか。 false に設定すると、BrowserWindow.webContents.openDevTools() を使ってデベロッパーツールを開くことはできません。 省略値は true です。
      • nodeIntegration boolean (任意) - Node インテグレーションを有効にするかどうか。 省略値は false です。
      • nodeIntegrationInWorker boolean (任意) - WebワーカーでNode統合を有効にするかどうか。 省略値は false です。 これについての詳細は、マルチスレッド を参照してください。
      • nodeIntegrationInSubFrames boolean (任意) - iframe や子ウインドウのようなサブフレーム内で Node.js サポートを有効にする実験的な機能です。 すべてのプリロードは iframe 毎にロードされます。メインフレーム内かそうでないか判断するには process.isMainFrame が使用できます。
      • preload string (任意) - 他のスクリプトがページで実行される前にロードされるスクリプトを指定します。 このスクリプトは、Node統合がオンまたはオフであるかに関係なく常にNode APIにアクセスできます。 値は、スクリプトへの絶対ファイルパスにする必要があります。 Node統合がオフのときでも、プレロードされたスクリプトは、Nodeのグローバルシンボルをグローバルスコープに再導入できます。 ここ の例を参照してください。
      • sandbox boolean (任意) - 設定された場合、ウインドウと関連付けられているレンダラーをサンドボックス化します。これは、ChromiumのOSレベルのサンドボックスと互換性を持ち、Node.jsエンジンを無効化します。 これは nodeIntegration オプションと同じではなく、プレロードスクリプトで利用可能なAPIよりもさらに制限がかかります。 このオプションの詳細については、ここ をお読みください。
      • session Session (任意) - ページで使用されるセッションを設定します。 Session オブジェクトを直接引き渡す代わりに、パーティション文字列を受け付ける partition オプションを使用することを選択することもできます。 sessionpartition の両方が指定されたときは、session が優先されます。 省略値は、既定のセッションです。
      • partition string (任意) - セッションのパーティション文字列に従って、ページで使用されるセッションを設定します。 partitionpersist: 始まりの場合、ページはアプリの全ページで利用可能な永続的なセッションを同じ partition で使用します。 persist: プレフィックスがない場合、ページは、インメモリセッションを使用します。 同じ partition を割り当てることによって、複数のページが同じセッションを共有できます。 省略値は、既定のセッションです。
      • zoomFactor number (任意) - ページの既定のズーム倍率で、3.0300% を表します。 デフォルトは1.0です。
      • javascript boolean (任意) - JavaScript サポートを有効にします。 省略値は true です。
      • webSecurity boolean (任意) - false のとき、同一オリジンポリシー (通常、テスト用Webサイトを使用します) が無効になり、ユーザによって設定されない場合、allowRunningInsecureContenttrue に設定されます。 省略値は true です。
      • allowRunningInsecureContent boolean (任意) - https のページで http の URL からの JavaScript、CSS やプラグインを実行することを許可します。 省略値は false です。
      • images boolean (任意) - 画像のサポートを有効にします。 省略値は true です。
      • imageAnimationPolicy string (任意) - 画像アニメーションの実行方法を指定します。(例: GIF)。 animateanimateOncenoAnimation のいずれかにできます。 デフォルトはanimateです。
      • textAreasAreResizable boolean (任意) - TextArea 要素のサイズを変更可能にします。 省略値は true です。
      • webgl boolean (任意) - WebGL のサポートを有効にします。 省略値は true です。
      • plugins boolean (任意) - プラグインを有効にするかどうか。 省略値は false です。
      • experimentalFeatures boolean (任意) - Chromium の実験的な機能を有効にします。 省略値は false です。
      • scrollBounce boolean (任意) macOS - macOS でスクロールバウンス (ゴムを伸ばすような) 効果を有効にします。 省略値は false です。
      • enableBlinkFeatures string (任意) - CSSVariables,KeyboardEventKey のように , で区切られた有効にする機能の文字列のリスト。 サポートされている機能の文字列の完全なリストは、RuntimeEnabledFeatures.json5 ファイルで確認することができます。
      • disableBlinkFeatures string (任意) - CSSVariables,KeyboardEventKey のように , で区切られた無効にする機能の文字列のリスト。 サポートされている機能の文字列の完全なリストは、RuntimeEnabledFeatures.json5 ファイルで確認することができます。
      • defaultFontFamily Object (任意) - 各フォントファミリーの既定フォントを設定します。
        • standard string (任意) - 省略値は、Times New Roman です。
        • serif string (任意) - 省略値は、Times New Roman です。
        • sansSerif string (任意) - 省略値は、Arial です。
        • monospace string (任意) - 省略値は、Courier New です。
        • cursive string (任意) - 省略値は、Script です。
        • fantasy string (任意) - 省略値は、Impact です。
        • math string (任意) - 省略値は、Latin Modern Math です。
      • defaultFontSize Integer (任意) - 省略値は、16 です。
      • defaultMonospaceFontSize Integer (任意) - 省略値は、13 です。
      • minimumFontSize Integer (任意) - 省略値は、0 です。
      • defaultEncoding string (任意) - 省略値は、ISO-8859-1 です。
      • backgroundThrottling boolean (任意) - ページがバックグラウンドになったとき、アニメーションやタイマーを抑制するかどうか。 これは Page Visibility API にも影響を与えます。 少なくとも 1 つの webContents が 1 つの browserWindow に表示されていて、そのウインドウの backgroundThrottling が無効になっている場合、ウインドウ全体とウインドウによって表示される他の webContents に対して、フレームが描画されて交換されます。 省略値は true です。
      • offscreen boolean (任意) - ブラウザウィンドウでオフスクリーンレンダリングを有効にするかどうか。 省略値は false です。 詳細については、オフスクリーンレンダリングのチュートリアル を参照してください。
      • contextIsolation boolean (任意) - Electron APIと指定された preload スクリプトを別々のJavaScriptコンテキストで実行するかどうか。 省略値は true です。 preload スクリプトが実行されるコンテキストでは、専用の document および window グローバルと、独自の JavaScript ビルドインのセット (Array, Object, JSON など) にのみアクセスできます。これらすべてはロードされたコンテンツからは見えません。 Electron API は preload スクリプトでのみ利用可能で、読み込まれたページでは利用できません。 このオプションは、信頼できない可能性のあるリモートコンテンツをロードする際に使用します。ロードされたコンテンツが preload スクリプトや使用する Electron API を改ざんできないようにするためです。 このオプションは、Chrome のコンテンツスクリプト のものと同じ技術を使用しています。 Console タブの一番上のコンボボックスの中にある 'Electron Isolated Context' という項目を選択することによって、開発者ツールでこのコンテキストにアクセスできます。
      • webviewTag boolean (任意) - <webview> タグ を有効にするかどうか。 省略値は false です。 注: <webview> に設定された preload スクリプトは、実行時にNode統合が有効になるので、潜在的に悪意のある preload スクリプトを含む <webview> タグをリモート/信頼できないコンテンツに作成させないようにする必要があります。 preload スクリプトを除去したり、検証したり、<webview> の初期設定を変更したりするために、webContentswill-attach-webview イベントを使うことができます。
      • additionalArguments string[] (任意) - このアプリケーションのレンダラープロセスで process.argv に追加される文字列のリスト。 小規模なデータをレンダラープロセスのプリロードスクリプトに渡すのに便利です。
      • safeDialogs boolean (任意) - ブラウザによる連続ダイアログ保護を有効にするかどうか。 省略値は false です。
      • safeDialogsMessage string (任意) - 連続したダイアログからの保護が機能したときに表示されるメッセージ。 定義されていなければデフォルトメッセージが使われますが、現在のデフォルトメッセージは英語であり、ローカライズされていないことに注意してください。
      • disableDialogs boolean (任意) - ダイアログを完全に無効化するかどうか。 safeDialogs を上書きします。 省略値は false です。
      • navigateOnDragDrop boolean (任意) - ファイルやリンクをページにドラッグ & ドロップした際にナビゲーションするかどうか。 省略値は false です。
      • autoplayPolicy string (任意) - ウインドウ内のコンテンツに適用される自動再生ポリシーで、no-user-gesture-requireduser-gesture-requireddocument-user-activation-required にできます。 省略値は no-user-gesture-required です。
      • disableHtmlFullscreenWindowResize boolean (任意) - HTML フルスクリーンになった時にウィンドウのサイズ変更を禁止するかどうか。 省略値は false です。
      • accessibleTitle string (任意) - スクリーンリーダーなどのアクセシビリティツールにのみ提供される代替タイトル文字列。 この文字列はユーザに直接表示されません。
      • spellcheck boolean (任意) - 組み込みスペルチェックを有効にするかどうか。 省略値は true です。
      • enableWebSQL boolean (任意) - WebSQL API を有効にするかどうか。 省略値は true です。
      • v8CacheOptions string (任意) - blink が使用する v8 コードキャッシュポリシーを強制します。 以下は取りうる値です。
        • none - コードキャッシュ無効化
        • code - ヒューリスティックベースのコードキャッシュ
        • bypassHeatCheck - ヒューリスティックのコードキャッシュをバイパスしつつ遅延コンパイル
        • bypassHeatCheckAndEagerCompile - 上と同じにしつつ先行コンパイルします。 既定のポリシーは code です。
      • enablePreferredSizeMode boolean (任意) - 優先サイズモードを有効にするかどうか。 優先サイズとは、document のレイアウトをスクロール無しで格納するにあたって必要な最小サイズのことです。 これを有効にすると、優先サイズが変更されたときに WebContentspreferred-size-changedイベントが発生します。 省略値は false です。

インスタンスプロパティ

new BrowserView で作成されたオブジェクトは、以下のプロパティを持っています。

view.webContents Experimental Deprecated

このビューによって保持されている WebContents オブジェクト。

インスタンスメソッド

new BrowserView で作成されたオブジェクトは、次のインスタンスメソッドを持っています。

view.setAutoResize(options) Experimental Deprecated

  • options Object
    • width boolean (任意) - true の場合、ビューの横幅はウインドウと一緒に伸び縮みします。 省略値は false です。
    • height boolean (任意) - true の場合、ビューの高さはウインドウと一緒に伸び縮みします。 省略値は false です。
    • horizontal boolean (任意) - true の場合、ビューの x 位置と幅はウィンドウに比例して増減します。 省略値は false です。
    • vertical boolean (任意) - true の場合、ビューの y 位置と高さはウィンドウに比例して増減します。 省略値は false です。

view.setBounds(bounds) Experimental Deprecated

ウインドウを基準に指定された境界までビューをリサイズしたり、移動させたりします。

view.getBounds() Experimental Deprecated

戻り値 Rectangle

Object としてのこの BrowserView インスタンスの bounds

view.setBackgroundColor(color) Experimental Deprecated

  • color string - 16進数、RGB、ARGB、HSL、HSLA、または名前付き CSS カラーフォーマットの色。 16 進数タイプの場合のアルファチャンネルは任意です。

有効な color の値の例を示します。

  • Hex
    • #fff (RGB)
    • #ffff (ARGB)
    • #ffffff (RRGGBB)
    • #ffffffff (AARRGGBB)
  • RGB
    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
      • e.g. rgb(255, 255, 255)
  • RGBA
    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
      • e.g. rgba(255, 255, 255, 1.0)
  • HSL
    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
      • e.g. hsl(200, 20%, 50%)
  • HSLA
    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
      • e.g. hsla(200, 20%, 50%, 0.5)
  • 色の名前
    • 選択肢は SkParseColor.cpp に列挙してあります。
    • CSS カラーモジュールレベル 3 のキーワードと似ていますが、大文字と小文字を区別します。
      • 例: bluevioletred

Note: Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBAA or RGB.