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 (選用)
  • cssOrigin string (選用) - 可以是 '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 (選用) - 預設值為 false。
• callback Function (選用) - 在指令碼執行後呼叫。除非框架暫停（例如顯示強制回應警示），否則執行會是同步的，而且會在方法傳回之前叫用回呼。為了與此方法的舊版本相容，錯誤參數是第二個。
  • 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 (選用) - 預設值為 false。
• callback Function (選用) - 在指令碼執行後呼叫。除非框架暫停（例如顯示強制回應警示），否則執行會是同步的，而且會在方法傳回之前叫用回呼。為了與此方法的舊版本相容，錯誤參數是第二個。
  • 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 (選用) - 隔離世界的安全性來源。
  • csp string (選用) - 隔離世界的內容安全性原則。
  • name string (選用) - 隔離世界的名稱。在開發人員工具中很有用。

設定隔離世界的安全性來源、內容安全性原則和名稱。注意：如果指定 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 字串 - 用於選取框架元素的 CSS 選擇器。

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

webFrame.findFrameByName(name)

• name 字串

回傳 WebFrame - webFrame 的子框架，其名稱為指定的 name。如果沒有該框架，或該框架不在目前的渲染進程中，則會回傳 null。

webFrame.findFrameByRoutingId(routingId)

• routingId 整數 - 一個 Integer，代表目前渲染進程中唯一的框架 ID。路由 ID 可以從 WebFrame 實例（webFrame.routingId）中取得，也會透過框架特定的 WebContents 導航事件傳遞（例如 did-frame-navigate）。

回傳 WebFrame - 具有指定 routingId 的框架，如果找不到則回傳 null。

webFrame.isWordMisspelled(word)

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

回傳 boolean - 如果根據內建的拼字檢查器，該單字拼寫錯誤則回傳 True，否則回傳 False。如果沒有載入字典，則永遠回傳 False。

webFrame.getWordSuggestions(word)

• word 字串 - 拼寫錯誤的單字。

回傳 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。