webFrame

自訂目前網頁的渲染方式。

程序： 渲染器

Electron 模組的 webFrame 輸出是 WebFrame 類別的實例，代表目前的框架。子框架可以透過某些屬性和方法 (例如 webFrame.firstChild) 取得。

將目前頁面縮放至 200% 的範例。

const { webFrame } = require('electron')

webFrame.setZoomFactor(2)

方法

WebFrame 類別具有以下實例方法

webFrame.setZoomFactor(factor)

• factor Double - 縮放係數；預設值為 1.0。

將縮放係數變更為指定的係數。縮放係數是縮放百分比除以 100，因此 300% = 3.0。

係數必須大於 0.0。

webFrame.getZoomFactor()

傳回 number - 目前的縮放係數。

webFrame.setZoomLevel(level)

• level number - 縮放層級。

將縮放層級變更為指定的層級。原始大小為 0，而向上或向下每個增量分別代表放大或縮小原始大小的 20%，預設限制為原始大小的 300% 和 50%。

注意：Chromium 層級的縮放原則是同源，表示特定網域的縮放層級會在具有相同網域的所有視窗實例之間傳播。區分視窗 URL 將使縮放功能適用於每個視窗。

webFrame.getZoomLevel()

傳回 number - 目前的縮放層級。

webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)

• minimumLevel number
• maximumLevel number

設定最大和最小捏合縮放層級。

注意：視覺縮放預設在 Electron 中停用。若要重新啟用，請呼叫

webFrame.setVisualZoomLevelLimits(1, 3)

注意：視覺縮放僅適用於捏合縮放行為。Cmd+/-/0 縮放快捷鍵由應用程式選單中的 'zoomIn'、'zoomOut' 和 'resetZoom' MenuItem 角色控制。若要停用快捷鍵，請手動定義選單，並從定義中省略縮放角色。

webFrame.setSpellCheckProvider(language, provider)

• language string
• provider Object
  • spellCheck Function
    • words string[]
    • callback Function
      • misspeltWords string[]

為輸入欄位和文字區域設定拼字檢查提供者。

如果您想要使用此方法，您必須在建構視窗時停用內建拼字檢查器。

const mainWindow = new BrowserWindow({
  webPreferences: {
    spellcheck: false
  }
})

provider 必須是一個物件，其中包含一個 spellCheck 方法，該方法接受單獨單字的陣列以進行拼字檢查。spellCheck 函數會非同步執行，並在完成時使用拼錯單字的陣列呼叫 callback 函數。

使用 node-spellchecker 作為提供者的範例

const { webFrame } = require('electron')
const spellChecker = require('spellchecker')
webFrame.setSpellCheckProvider('en-US', {
  spellCheck (words, callback) {
    setTimeout(() => {
      const misspelled = words.filter(x => spellchecker.isMisspelled(x))
      callback(misspelled)
    }, 0)
  }
})

webFrame.insertCSS(css[, options])

• css string
• options Object (optional)
  • cssOrigin string (optional) - 可以是 'user' 或 'author'。設定插入樣式表的級聯來源。預設值為 'author'。

傳回 string - 插入 CSS 的金鑰，稍後可用於透過 webFrame.removeInsertedCSS(key) 移除 CSS。

將 CSS 注入到目前的網頁中，並傳回插入樣式表的唯一金鑰。

webFrame.removeInsertedCSS(key)

• key string

從目前的網頁中移除插入的 CSS。樣式表由其金鑰識別，該金鑰是從 webFrame.insertCSS(css) 傳回的。

webFrame.insertText(text)

• text string

將 text 插入到焦點元素。

webFrame.executeJavaScript(code[, userGesture, callback])

• code string
• userGesture boolean (optional) - 預設值為 false。
• callback Function (optional) - 在腳本執行後呼叫。除非框架暫停 (例如顯示模式警示)，否則執行將會同步，並且會在方法傳回之前調用回呼。為了與此方法的舊版本相容，錯誤參數是第二個。
  • result Any
  • error Error

傳回 Promise<any> - 一個 Promise，它會解析為已執行程式碼的結果，如果執行拋出錯誤或導致 Promise 被拒絕，則會被拒絕。

在頁面中評估 code。

在瀏覽器視窗中，某些 HTML API (例如 requestFullScreen) 只能由使用者的手勢調用。將 userGesture 設定為 true 將移除此限制。

webFrame.executeJavaScriptInIsolatedWorld(worldId, scripts[, userGesture, callback])

• worldId Integer - 要在其中執行 javascript 的世界 ID，0 是預設的主要世界 (內容在其中執行)，999 是 Electron 的 contextIsolation 功能使用的世界。接受範圍在 1..536870911 之間的值。
• scripts WebSource[]
• userGesture boolean (optional) - 預設值為 false。
• callback Function (optional) - 在腳本執行後呼叫。除非框架暫停 (例如顯示模式警示)，否則執行將會同步，並且會在方法傳回之前調用回呼。為了與此方法的舊版本相容，錯誤參數是第二個。
  • result Any
  • error Error

傳回 Promise<any> - 一個 Promise，它會解析為已執行程式碼的結果，如果執行無法開始，則會被拒絕。

運作方式類似於 executeJavaScript，但在隔離的內容中評估 scripts。

請注意，當腳本執行失敗時，傳回的 Promise 不會拒絕，並且 result 將會是 undefined。這是因為 Chromium 不會將隔離世界的錯誤分派到外部世界。

webFrame.setIsolatedWorldInfo(worldId, info)

• worldId Integer - 要在其中執行 javascript 的世界 ID，0 是預設世界，999 是 Electron 的 contextIsolation 功能使用的世界。Chrome 擴充功能保留 [1 << 20, 1 << 29) 範圍內的 ID。您可以在此處提供任何整數。
• info Object
  • securityOrigin string (optional) - 隔離世界的安全性來源。
  • csp string (optional) - 隔離世界的內容安全性原則。
  • name string (optional) - 隔離世界的名稱。在開發人員工具中很有用。

設定隔離世界的安全性來源、內容安全性原則和名稱。注意：如果指定了 csp，則也必須指定 securityOrigin。

webFrame.getResourceUsage()

傳回 Object

• images MemoryUsageDetails
• scripts MemoryUsageDetails
• cssStyleSheets MemoryUsageDetails
• xslStyleSheets MemoryUsageDetails
• fonts MemoryUsageDetails
• other MemoryUsageDetails

傳回一個物件，描述 Blink 內部記憶體快取的用量資訊。

const { webFrame } = require('electron')
console.log(webFrame.getResourceUsage())

這將產生

{
  images: {
    count: 22,
    size: 2549,
    liveSize: 2542
  },
  cssStyleSheets: { /* same with "images" */ },
  xslStyleSheets: { /* same with "images" */ },
  fonts: { /* same with "images" */ },
  other: { /* same with "images" */ }
}

webFrame.clearCache()

嘗試釋放不再使用的記憶體 (例如先前導航中的影像)。

請注意，盲目呼叫此方法可能會使 Electron 變慢，因為它必須重新填滿這些清空的快取，只有當您的應用程式中發生某個事件，使您認為您的頁面實際上使用的記憶體更少時 (亦即，您已從一個超重頁面導航到一個幾乎空白的頁面，並打算停留在該處)，您才應該呼叫它。

webFrame.getFrameForSelector(selector)

• selector string - 框架元素的 CSS 選擇器。

傳回 WebFrame - 由 selector 選取的 webFrame 文件中的框架元素，如果 selector 未選取框架，或框架不在目前的渲染器程序中，則會傳回 null。

webFrame.findFrameByName(name)

• name string

傳回 WebFrame - 具有提供的 name 的 webFrame 子框架，如果沒有此框架，或框架不在目前的渲染器程序中，則會傳回 null。

webFrame.findFrameByRoutingId(routingId)

• routingId Integer - 代表目前渲染器程序中唯一框架 ID 的 Integer。路由 ID 可以從 WebFrame 實例 (webFrame.routingId) 取得，並且也由框架特定的 WebContents 導航事件 (例如 did-frame-navigate) 傳遞

傳回具有提供的 routingId 的 WebFrame，如果找不到則傳回 null。

webFrame.isWordMisspelled(word)

• word string - 要進行拼字檢查的單字。

傳回 boolean - 如果根據內建拼字檢查器單字拼字錯誤，則為 True，否則為 false。如果未載入字典，則始終傳回 false。

webFrame.getWordSuggestions(word)

• word string - 拼錯的單字。

傳回 string[] - 給定單字的建議單字清單。如果單字拼字正確，則結果將為空。

屬性

webFrame.top 唯讀

一個 WebFrame | null，代表 webFrame 所屬的框架階層中的頂層框架，如果頂層框架不在目前的渲染器程序中，則該屬性將為 null。

webFrame.opener 唯讀

一個 WebFrame | null，代表開啟 webFrame 的框架，如果沒有開啟器或開啟器不在目前的渲染器程序中，則該屬性將為 null。

webFrame.parent 唯讀

一個 WebFrame | null，代表 webFrame 的父框架，如果 webFrame 是頂層框架或父框架不在目前的渲染器程序中，則該屬性將為 null。

webFrame.firstChild 唯讀

一個 WebFrame | null，代表 webFrame 的第一個子框架，如果 webFrame 沒有子框架，或第一個子框架不在目前的渲染器程序中，則該屬性將為 null。

webFrame.nextSibling 唯讀

一個 WebFrame | null，代表下一個同層級框架，如果 webFrame 是其父框架中的最後一個框架，或下一個同層級框架不在目前的渲染器程序中，則該屬性將為 null。

webFrame.routingId 唯讀

一個 Integer，代表目前渲染器程序中唯一的框架 ID。指向相同底層框架的不同 WebFrame 實例將具有相同的 routingId。