跳到主要內容

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(選用)- 是否啟用開發人員工具。如果設定為 false,則無法使用 BrowserWindow.webContents.openDevTools() 開啟開發人員工具。預設為 true
      • nodeIntegration boolean(選用)- 是否啟用 Node.js 整合。預設為 false
      • nodeIntegrationInWorker boolean(選用)- 是否在 Web Workers 中啟用 Node.js 整合。預設為 false。有關此內容的更多資訊,請參閱多執行緒
      • nodeIntegrationInSubFrames boolean(選用)- 在子框架(例如 iframes 和子視窗)中啟用 Node.js 支援的實驗性選項。所有預載腳本都會針對每個 iframe 載入,您可以使用 process.isMainFrame 來判斷您是否在主框架中。
      • preload string(選用)- 指定在頁面中執行其他腳本之前將載入的腳本。無論是否開啟 Node.js 整合,此腳本始終可以存取 Node.js API。值應為腳本的絕對檔案路徑。當關閉 Node.js 整合時,預載腳本可以將 Node.js 全域符號重新引入全域範圍。請參閱此處的範例。
      • sandbox boolean(選用)- 如果設定,這將沙箱化與視窗關聯的渲染器,使其與 Chromium 作業系統層級的沙箱相容,並停用 Node.js 引擎。這與 nodeIntegration 選項不同,並且可供預載腳本使用的 API 更為有限。請參閱此處以了解有關該選項的更多資訊。
      • session Session(選用)- 設定頁面使用的會期。除了直接傳遞 Session 物件之外,您也可以選擇改用 partition 選項,該選項接受分割字串。當同時提供 sessionpartition 時,將優先使用 session。預設為預設會期。
      • partition string(選用)- 根據會期的分割字串設定頁面使用的會期。如果 partitionpersist: 開頭,則頁面將使用應用程式中所有具有相同 partition 的頁面都可用的持續會期。如果沒有 persist: 前置詞,則頁面將使用記憶體內會期。透過指定相同的 partition,多個頁面可以共用相同的會期。預設為預設會期。
      • 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(選用)- 當頁面變為背景時,是否限制動畫和計時器。這也會影響頁面可見性 API。當單個 browserWindow 中顯示的至少一個 webContents 已停用 backgroundThrottling 時,將會為整個視窗和它顯示的其他 webContents 繪製和交換框架。預設為 true
      • offscreen 物件 | boolean(選用)- 是否為瀏覽器視窗啟用離螢幕渲染。預設為 false。請參閱離螢幕渲染教學課程以取得更多詳細資訊。
        • useSharedTexture boolean(選用)實驗性 - 是否將 GPU 共用紋理用於加速繪製事件。預設為 false。請參閱離螢幕渲染教學課程以取得更多詳細資訊。
      • contextIsolation 布林值 (選填) - 是否在獨立的 JavaScript 環境中執行 Electron API 和指定的 preload 腳本。預設值為 truepreload 腳本執行的環境將只會存取其專屬的 documentwindow 全域變數,以及其專屬的 JavaScript 內建函式 (ArrayObjectJSON 等),這些對載入的內容都是不可見的。Electron API 將只在 preload 腳本中可用,而不會在載入的頁面中可用。當載入可能不受信任的遠端內容時,應使用此選項,以確保載入的內容無法竄改 preload 腳本和任何正在使用的 Electron API。此選項使用與 Chrome Content Scripts 相同的技術。您可以在開發人員工具中,於「主控台」標籤頂部的下拉式選單中選取「Electron Isolated Context」項目來存取此環境。
      • webviewTag 布林值 (選填) - 是否啟用 <webview> 標籤。預設值為 false注意:<webview> 設定的 preload 腳本在執行時會啟用 Node.js 整合,因此您應確保遠端/不受信任的內容無法建立帶有惡意 preload 腳本的 <webview> 標籤。您可以使用 webContents 上的 will-attach-webview 事件來移除 preload 腳本,並驗證或變更 <webview> 的初始設定。
      • additionalArguments 字串陣列 (選填) - 將附加到此應用程式的渲染器程序中 process.argv 的字串列表。適用於將少量資料傳遞到渲染器程序的預載腳本。
      • safeDialogs 布林值 (選填) - 是否啟用瀏覽器樣式的連續對話框保護。預設值為 false
      • safeDialogsMessage 字串 (選填) - 當觸發連續對話框保護時要顯示的訊息。如果未定義,將使用預設訊息,請注意,目前預設訊息為英文,未進行本地化。
      • disableDialogs 布林值 (選填) - 是否完全停用對話框。會覆寫 safeDialogs。預設值為 false
      • navigateOnDragDrop 布林值 (選填) - 是否將檔案或連結拖放到頁面上會導致導覽。預設值為 false
      • autoplayPolicy 字串 (選填) - 應用於視窗內容的自動播放策略,可以是 no-user-gesture-requireduser-gesture-requireddocument-user-activation-required。預設值為 no-user-gesture-required
      • disableHtmlFullscreenWindowResize 布林值 (選填) - 是否防止在進入 HTML 全螢幕時調整視窗大小。預設值為 false
      • accessibleTitle 字串 (選填) - 僅提供給螢幕閱讀器等輔助工具的替代標題字串。此字串對使用者並非直接可見。
      • spellcheck 布林值 (選填) - 是否啟用內建的拼寫檢查器。預設值為 true
      • enableWebSQL 布林值 (選填) - 是否啟用 WebSQL API。預設值為 true
      • v8CacheOptions 字串 (選填) - 強制執行 blink 使用的 v8 程式碼快取策略。接受的值為
        • none - 停用程式碼快取
        • code - 基於啟發式的程式碼快取
        • bypassHeatCheck - 繞過程式碼快取啟發式,但使用延遲編譯
        • bypassHeatCheckAndEagerCompile - 與上述相同,但編譯是即時的。預設策略為 code
      • enablePreferredSizeMode 布林值 (選填) - 是否啟用偏好大小模式。偏好大小是包含文件版面配置所需的最小大小,而無需捲動。啟用此選項將會在偏好大小變更時,在 WebContents 上發出 preferred-size-changed 事件。預設值為 false
      • transparent 布林值 (選填) - 是否為訪客頁面啟用背景透明度。預設值為 true注意:訪客頁面的文字和背景顏色來自其根元素的 色彩配置。啟用透明度時,文字顏色仍會相應變更,但背景會保持透明。

實例屬性

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

view.webContents 實驗性 已棄用

歷史

此檢視擁有的 WebContents 物件。

實例方法

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

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

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

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

歷史

將檢視調整大小並移動到相對於視窗的指定範圍。

view.getBounds() 實驗性 已棄用

歷史

傳回 矩形

此 BrowserView 實例的 bounds,為 Object

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

歷史
  • color 字串 - 十六進位、RGB、ARGB、HSL、HSLA 或指定的 CSS 顏色格式的顏色。十六進位類型的 Alpha 通道是選填的。

有效 color 值的範例

  • 十六進位
    • #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