跳到主要內容

BrowserView

歷史紀錄

注意 BrowserView 類別已棄用,並由新的 WebContentsView 類別取代。

BrowserView 可用於將額外的網頁內容嵌入到 BrowserWindow 中。它就像一個子視窗,只是它的位置是相對於其所屬的視窗。它旨在作為 webview 標籤的替代方案。

類別:BrowserView

歷史紀錄

建立並控制視圖。

注意 BrowserView 類別已棄用,並由新的 WebContentsView 類別取代。

程序:主程序

app 模組發出 ready 事件之前,無法使用此模組。

範例

// In the main process.
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://electron.dev.org.tw')
})

new BrowserView([options]) 實驗性 已棄用

歷史紀錄
  • options 物件 (選用)
    • webPreferences WebPreferences (選用) - 網頁功能設定。
      • devTools boolean (選用) - 是否啟用 DevTools。如果設定為 false,則無法使用 BrowserWindow.webContents.openDevTools() 開啟 DevTools。預設值為 true
      • nodeIntegration boolean (選用) - 是否啟用 Node.js 整合。預設值為 false
      • nodeIntegrationInWorker boolean (選用) - 是否在 Web Workers 中啟用 Node.js 整合。預設值為 false。更多相關資訊請參閱 多執行緒
      • nodeIntegrationInSubFrames boolean (選用) - 實驗性選項,用於在子框架(例如 iframes 和子視窗)中啟用 Node.js 支援。您的所有 preload 都將為每個 iframe 加載,您可以使用 process.isMainFrame 來判斷您是否在主框架中。
      • preload string (選用) - 指定一個腳本,該腳本將在頁面中其他腳本運行之前加載。無論是否開啟 Node.js 整合,此腳本始終可以存取 Node.js API。值應為腳本的絕對檔案路徑。當關閉 Node.js 整合時,preload 腳本可以將 Node.js 全域符號重新引入到全域範圍。請參閱 此處 的範例。
      • sandbox boolean (選用) - 如果設定,這將沙盒化與視窗關聯的渲染器,使其與 Chromium OS 層級的沙盒相容,並停用 Node.js 引擎。這與 nodeIntegration 選項不同,preload 腳本可用的 API 也更有限。請參閱 此處 以了解有關此選項的更多資訊。
      • session Session (選用) - 設定頁面使用的 session。除了直接傳遞 Session 物件之外,您也可以選擇使用 partition 選項,該選項接受分割字串。當同時提供 sessionpartition 時,將優先使用 session。預設值為預設 session。
      • partition string (選用) - 根據 session 的分割字串設定頁面使用的 session。如果 partitionpersist: 開頭,則頁面將使用持久性 session,該 session 可供應用程式中具有相同 partition 的所有頁面使用。如果沒有 persist: 字首,則頁面將使用記憶體內 session。透過指定相同的 partition,多個頁面可以共用相同的 session。預設值為預設 session。
      • zoomFactor number (選用) - 頁面的預設縮放比例,3.0 表示 300%。預設值為 1.0
      • javascript boolean (選用) - 啟用 JavaScript 支援。預設值為 true
      • webSecurity boolean (選用) - 當為 false 時,它將停用同源策略(通常由人們用於測試網站),並且如果使用者未設定此選項,則將 allowRunningInsecureContent 設定為 true。預設值為 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 物件 (選用) - 設定字體系列的預設字體。
        • 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。當單個 browserWindow 中顯示的至少一個 webContents 停用了 backgroundThrottling 時,將為整個視窗及其顯示的其他 webContents 繪製和交換幀。預設值為 true
      • offscreen 物件 | boolean (選用) - 是否為瀏覽器視窗啟用離屏渲染。預設值為 false。請參閱 離屏渲染教學 以了解更多詳細資訊。
        • useSharedTexture boolean (選用) 實驗性 - 是否使用 GPU 共享紋理來加速繪製事件。預設值為 false。請參閱 離屏渲染教學 以了解更多詳細資訊。
      • contextIsolation boolean (選用) - 是否在單獨的 JavaScript 上下文中執行 Electron API 和指定的 preload 腳本。預設值為 truepreload 腳本運行的上下文將僅能存取其專用的 documentwindow 全域變數,以及其自己的 JavaScript 內建物件 (ArrayObjectJSON 等),所有這些對於已載入的內容都是不可見的。Electron API 將僅在 preload 腳本中可用,而不會在已載入的頁面中可用。當載入可能不受信任的遠端內容時,應使用此選項,以確保載入的內容無法竄改 preload 腳本和正在使用的任何 Electron API。此選項使用與 Chrome Content Scripts 相同的技術。您可以在開發人員工具中透過在「Console」標籤頂部的組合框中選擇「Electron Isolated Context」條目來存取此上下文。
      • webviewTag boolean (選用) - 是否啟用 <webview> 標籤。預設值為 false注意:<webview> 配置的 preload 腳本在執行時將啟用 Node.js 整合,因此您應確保遠端/不受信任的內容無法建立具有可能惡意 preload 腳本的 <webview> 標籤。您可以使用 webContents 上的 will-attach-webview 事件來移除 preload 腳本,並驗證或變更 <webview> 的初始設定。
      • additionalArguments string[] (選用) - 將附加到此應用程式渲染程序中 process.argv 的字串列表。適用於將少量資料傳遞到渲染程序 preload 腳本。
      • 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 (選用) - 是否啟用偏好大小模式。偏好大小是包含文件佈局所需的最小大小,而無需滾動。啟用此功能將導致在偏好大小變更時,在 WebContents 上發出 preferred-size-changed 事件。預設值為 false
      • transparent boolean (選用) - 是否為訪客頁面啟用背景透明度。預設值為 true注意: 訪客頁面的文字和背景顏色源自其根元素的 色彩配置。啟用透明度後,文字顏色仍會相應變更,但背景將保持透明。
      • enableDeprecatedPaste boolean (選用) 已棄用 - 是否啟用 paste execCommand。預設值為 false

實例屬性

使用 new BrowserView 建立的物件具有以下屬性

view.webContents 實驗性 已棄用

歷史紀錄

此視圖擁有的 WebContents 物件。

實例方法

使用 new BrowserView 建立的物件具有以下實例方法

view.setAutoResize(options) 實驗性 已棄用

歷史紀錄
  • options 物件
    • width boolean (選用) - 如果為 true,則視圖的寬度將隨著視窗一起成長和縮小。預設值為 false
    • height boolean (選用) - 如果為 true,則視圖的高度將隨著視窗一起成長和縮小。預設值為 false
    • horizontal boolean (選用) - 如果為 true,則視圖的 x 位置和寬度將與視窗成比例地成長和縮小。預設值為 false
    • vertical boolean (選用) - 如果為 true,則視圖的 y 位置和高度將與視窗成比例地成長和縮小。預設值為 false

view.setBounds(bounds) 實驗性 已棄用

歷史紀錄

調整大小並將視圖移動到相對於視窗提供的邊界。

view.getBounds() 實驗性 已棄用

歷史紀錄

傳回 Rectangle

此 BrowserView 實例的 bounds 作為 Object

view.setBackgroundColor(color) 實驗性 已棄用

歷史紀錄
  • color string - 以 Hex、RGB、ARGB、HSL、HSLA 或具名 CSS 顏色格式表示的顏色。十六進位類型 Alpha 通道為選用。

有效 color 值的範例

  • Hex
    • #fff (RGB)
    • #ffff (ARGB)
    • #ffffff (RRGGBB)
    • #ffffffff (AARRGGBB)
  • RGB
    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
      • 例如:rgb(255, 255, 255)
  • RGBA
    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
      • 例如:rgba(255, 255, 255, 1.0)
  • HSL
    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
      • 例如:hsl(200, 20%, 50%)
  • HSLA
    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
      • 例如:hsla(200, 20%, 50%, 0.5)
  • 顏色名稱
    • 選項列於 SkParseColor.cpp
    • 類似於 CSS Color Module Level 3 關鍵字,但區分大小寫。
      • 例如:bluevioletred

注意: 帶有 Alpha 通道的十六進位格式採用 AARRGGBBARGB而非 RRGGBBAARGB