跳至主要內容

webContents

渲染和控制網頁。

進程:主要

webContents 是一個 EventEmitter。它負責渲染和控制網頁,並且是 BrowserWindow 物件的屬性。以下是如何存取 webContents 物件的範例

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')

const contents = win.webContents
console.log(contents)

可以使用多個事件來監控在 webContents 中發生的導航。

文件導航

webContents 導航到另一個頁面時(而不是頁內導航),將觸發以下事件。

如果在任何可取消的事件上呼叫 event.preventDefault(),則不會觸發後續事件。

頁內導航

頁內導航不會導致頁面重新載入,而是導航到目前頁面中的某個位置。這些事件不可取消。對於頁內導航,將依此順序觸發以下事件

框架導航

will-navigatedid-navigate 事件僅在 mainFrame 導航時觸發。如果您也想觀察 <iframe> 中的導航,請使用 will-frame-navigatedid-frame-navigate 事件。

方法

可以從 webContents 模組存取這些方法

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

webContents.getAllWebContents()

傳回 WebContents[] - 所有 WebContents 實例的陣列。這將包含所有視窗、webview、已開啟的開發人員工具和開發人員工具擴充功能背景頁面的網頁內容。

webContents.getFocusedWebContents()

傳回 WebContents | null - 此應用程式中具有焦點的網頁內容,否則傳回 null

webContents.fromId(id)

  • id 整數

傳回 WebContents | undefined - 具有給定 ID 的 WebContents 實例,如果沒有與給定 ID 關聯的 WebContents,則傳回 undefined

webContents.fromFrame(frame)

  • frame WebFrameMain

傳回 WebContents | undefined - 具有給定 WebFrameMain 的 WebContents 實例,如果沒有與給定 WebFrameMain 關聯的 WebContents,則傳回 undefined

webContents.fromDevToolsTargetId(targetId)

  • targetId 字串 - 與 WebContents 實例關聯的 Chrome 開發人員工具協定 TargetID

傳回 WebContents | undefined - 具有給定 TargetID 的 WebContents 實例,如果沒有與給定 TargetID 關聯的 WebContents,則傳回 undefined

在與 Chrome 開發人員工具協定 通訊時,根據其指定的 TargetID 查找 WebContents 實例會很有用。

async function lookupTargetId (browserWindow) {
const wc = browserWindow.webContents
await wc.debugger.attach('1.3')
const { targetInfo } = await wc.debugger.sendCommand('Target.getTargetInfo')
const { targetId } = targetInfo
const targetWebContents = await wc.fromDevToolsTargetId(targetId)
}

類別:WebContents

渲染和控制 BrowserWindow 實例的內容。

進程:主要
此類別不會從 'electron' 模組匯出。它僅作為 Electron API 中其他方法的傳回值提供。

實例事件

事件:'did-finish-load'

導航完成時發出,即索引標籤的微調器已停止旋轉,並且已分派 onload 事件。

事件:'did-fail-load'

傳回

  • event 事件
  • errorCode 整數
  • errorDescription 字串
  • validatedURL 字串
  • isMainFrame 布林值
  • frameProcessId 整數
  • frameRoutingId 整數

此事件類似於 did-finish-load,但在載入失敗時發出。完整的錯誤代碼清單及其含義可在此處取得。

事件:'did-fail-provisional-load'

傳回

  • event 事件
  • errorCode 整數
  • errorDescription 字串
  • validatedURL 字串
  • isMainFrame 布林值
  • frameProcessId 整數
  • frameRoutingId 整數

此事件類似於 did-fail-load,但在載入被取消時發出(例如,呼叫了 window.stop())。

事件:'did-frame-finish-load'

傳回

  • event 事件
  • isMainFrame 布林值
  • frameProcessId 整數
  • frameRoutingId 整數

當框架完成導航時發出。

事件:'did-start-loading'

對應於索引標籤的微調器開始旋轉的時間點。

事件:'did-stop-loading'

對應於索引標籤的微調器停止旋轉的時間點。

事件:'dom-ready'

當最上層框架中的文件載入時發出。

事件:'page-title-updated'

傳回

  • event 事件
  • title 字串
  • explicitSet 布林值

在導航期間設定頁面標題時觸發。當標題從檔案 URL 合成時,explicitSet 為 false。

事件:'page-favicon-updated'

傳回

  • event 事件
  • favicons 字串[] - URL 陣列。

當頁面接收到圖示 URL 時發出。

事件:'content-bounds-updated'

傳回

  • event 事件
  • bounds Rectangle - 要求的新的內容邊界

當頁面呼叫 window.moveTowindow.resizeTo 或相關 API 時發出。

預設情況下,這會移動視窗。要阻止此行為,請呼叫 event.preventDefault()

事件:'did-create-window'

傳回

  • window BrowserWindow
  • details 物件
    • url 字串 - 已建立視窗的 URL。
    • frameName 字串 - 在 window.open() 呼叫中給予建立視窗的名稱。
    • options BrowserWindowConstructorOptions - 用於建立 BrowserWindow 的選項。它們會依優先順序遞增合併:從 window.open()features 字串剖析的選項、從父視窗繼承的安全相關 webPreferences,以及由 webContents.setWindowOpenHandler 給予的選項。無法識別的選項不會被過濾掉。
    • referrer Referrer - 將傳遞給新視窗的來源網址。根據參照策略,可能導致或不導致傳送 Referer 標頭。
    • postBody PostBody (選用) - 將傳送至新視窗的 POST 資料,以及將設定的適當標頭。如果沒有要傳送的 POST 資料,則值將為 null。僅當視窗是由設定 target=_blank 的表單建立時定義。
    • disposition 字串 - 可以是 defaultforeground-tabbackground-tabnew-windowother

在透過渲染器中的 window.open 成功建立視窗之後發出。如果視窗的建立從 webContents.setWindowOpenHandler 取消,則不會發出。

請參閱 window.open() 以取得更多詳細資訊,以及如何將其與 webContents.setWindowOpenHandler 一起使用。

事件:'will-navigate'

傳回

  • details Event<>
    • url 字串 - 框架正在導覽到的 URL。
    • isSameDocument 布林值 - 此事件不會觸發使用 window.history api 和參考片段導覽的相同文件導覽。此屬性對於此事件始終設定為 false
    • isMainFrame 布林值 - 如果導覽發生在主框架中,則為 True。
    • frame WebFrameMain | null - 要導覽的框架。如果在框架已導覽或被銷毀後存取,則可能為 null
    • initiator WebFrameMain | null (選用) - 啟動導覽的框架,可以是父框架(例如,透過具有框架名稱的 window.open),或者如果導覽不是由框架啟動,則為 null。如果啟動框架在發出事件之前被刪除,則也可能為 null。
  • url 字串 已棄用
  • isInPlace 布林值 已棄用
  • isMainFrame 布林值 已棄用
  • frameProcessId 整數 已棄用
  • frameRoutingId 整數 已棄用

當使用者或頁面想要在主框架上開始導覽時發出。當 window.location 物件變更或使用者點擊頁面中的連結時可能會發生。

當使用 webContents.loadURLwebContents.back 等 API 以程式設計方式啟動導覽時,此事件不會發出。

它也不會為頁內導覽發出,例如點擊錨點連結或更新 window.location.hash。為此目的使用 did-navigate-in-page 事件。

呼叫 event.preventDefault() 將會阻止導覽。

事件:'will-frame-navigate'

傳回

  • details Event<>
    • url 字串 - 框架正在導覽到的 URL。
    • isSameDocument 布林值 - 此事件不會觸發使用 window.history api 和參考片段導覽的相同文件導覽。此屬性對於此事件始終設定為 false
    • isMainFrame 布林值 - 如果導覽發生在主框架中,則為 True。
    • frame WebFrameMain | null - 要導覽的框架。如果在框架已導覽或被銷毀後存取,則可能為 null
    • initiator WebFrameMain | null (選用) - 啟動導覽的框架,可以是父框架(例如,透過具有框架名稱的 window.open),或者如果導覽不是由框架啟動,則為 null。如果啟動框架在發出事件之前被刪除,則也可能為 null。

當使用者或頁面想要在任何框架中開始導覽時發出。當 window.location 物件變更或使用者點擊頁面中的連結時可能會發生。

will-navigate 不同,當主框架或其任何子框架嘗試導覽時,會觸發 will-frame-navigate。當導覽事件來自主框架時,isMainFrame 將為 true

當使用 webContents.loadURLwebContents.back 等 API 以程式設計方式啟動導覽時,此事件不會發出。

它也不會為頁內導覽發出,例如點擊錨點連結或更新 window.location.hash。為此目的使用 did-navigate-in-page 事件。

呼叫 event.preventDefault() 將會阻止導覽。

事件:'did-start-navigation'

傳回

  • details Event<>
    • url 字串 - 框架正在導覽到的 URL。
    • isSameDocument 布林值 - 導覽是否在不變更文件的情況下發生。相同文件導覽的範例包括參考片段導覽、pushState/replaceState 以及相同的頁面歷史記錄導覽。
    • isMainFrame 布林值 - 如果導覽發生在主框架中,則為 True。
    • frame WebFrameMain | null - 要導覽的框架。如果在框架已導覽或被銷毀後存取,則可能為 null
    • initiator WebFrameMain | null (選用) - 啟動導覽的框架,可以是父框架(例如,透過具有框架名稱的 window.open),或者如果導覽不是由框架啟動,則為 null。如果啟動框架在發出事件之前被刪除,則也可能為 null。
  • url 字串 已棄用
  • isInPlace 布林值 已棄用
  • isMainFrame 布林值 已棄用
  • frameProcessId 整數 已棄用
  • frameRoutingId 整數 已棄用

當任何框架(包括主框架)開始導覽時發出。

事件:'will-redirect'

傳回

  • details Event<>
    • url 字串 - 框架正在導覽到的 URL。
    • isSameDocument 布林值 - 導覽是否在不變更文件的情況下發生。相同文件導覽的範例包括參考片段導覽、pushState/replaceState 以及相同的頁面歷史記錄導覽。
    • isMainFrame 布林值 - 如果導覽發生在主框架中,則為 True。
    • frame WebFrameMain | null - 要導覽的框架。如果在框架已導覽或被銷毀後存取,則可能為 null
    • initiator WebFrameMain | null (選用) - 啟動導覽的框架,可以是父框架(例如,透過具有框架名稱的 window.open),或者如果導覽不是由框架啟動,則為 null。如果啟動框架在發出事件之前被刪除,則也可能為 null。
  • url 字串 已棄用
  • isInPlace 布林值 已棄用
  • isMainFrame 布林值 已棄用
  • frameProcessId 整數 已棄用
  • frameRoutingId 整數 已棄用

當導覽期間發生伺服器端重新導向時發出。例如 302 重新導向。

此事件將在 did-start-navigation 之後以及針對相同導覽的 did-redirect-navigation 事件之前發出。

呼叫 event.preventDefault() 將會阻止導覽(不僅是重新導向)。

事件:'did-redirect-navigation'

傳回

  • details Event<>
    • url 字串 - 框架正在導覽到的 URL。
    • isSameDocument 布林值 - 導覽是否在不變更文件的情況下發生。相同文件導覽的範例包括參考片段導覽、pushState/replaceState 以及相同的頁面歷史記錄導覽。
    • isMainFrame 布林值 - 如果導覽發生在主框架中,則為 True。
    • frame WebFrameMain | null - 要導覽的框架。如果在框架已導覽或被銷毀後存取,則可能為 null
    • initiator WebFrameMain | null (選用) - 啟動導覽的框架,可以是父框架(例如,透過具有框架名稱的 window.open),或者如果導覽不是由框架啟動,則為 null。如果啟動框架在發出事件之前被刪除,則也可能為 null。
  • url 字串 已棄用
  • isInPlace 布林值 已棄用
  • isMainFrame 布林值 已棄用
  • frameProcessId 整數 已棄用
  • frameRoutingId 整數 已棄用

當導覽期間發生伺服器端重新導向後發出。例如 302 重新導向。

此事件無法阻止,如果您想阻止重新導向,您應該查看上面的 will-redirect 事件。

事件:'did-navigate'

傳回

  • event 事件
  • url 字串
  • httpResponseCode 整數 - 非 HTTP 導覽為 -1
  • httpStatusText 字串 - 非 HTTP 導覽為空

當完成主框架導覽時發出。

此事件不會為頁內導覽發出,例如點擊錨點連結或更新 window.location.hash。為此目的使用 did-navigate-in-page 事件。

事件:'did-frame-navigate'

傳回

  • event 事件
  • url 字串
  • httpResponseCode 整數 - 非 HTTP 導覽為 -1
  • httpStatusText 字串 - 非 HTTP 導覽為空
  • isMainFrame 布林值
  • frameProcessId 整數
  • frameRoutingId 整數

當完成任何框架導覽時發出。

此事件不會為頁內導覽發出,例如點擊錨點連結或更新 window.location.hash。為此目的使用 did-navigate-in-page 事件。

事件:'did-navigate-in-page'

傳回

  • event 事件
  • url 字串
  • isMainFrame 布林值
  • frameProcessId 整數
  • frameRoutingId 整數

當任何框架中發生頁內導覽時發出。

當發生頁內導覽時,頁面 URL 會變更,但不會導致頁面外部的導覽。發生此情況的範例包括當點擊錨點連結或觸發 DOM hashchange 事件時。

事件:'will-prevent-unload'

傳回

  • event 事件

beforeunload 事件處理常式嘗試取消頁面卸載時發出。

呼叫 event.preventDefault() 將會忽略 beforeunload 事件處理常式,並允許卸載頁面。

const { BrowserWindow, dialog } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
win.webContents.on('will-prevent-unload', (event) => {
const choice = dialog.showMessageBoxSync(win, {
type: 'question',
buttons: ['Leave', 'Stay'],
title: 'Do you want to leave this site?',
message: 'Changes you made may not be saved.',
defaultId: 0,
cancelId: 1
})
const leave = (choice === 0)
if (leave) {
event.preventDefault()
}
})

注意: 這將針對 BrowserView 發出,但將不會被尊重 - 這是因為我們已選擇不將 BrowserView 的生命週期與其擁有的 BrowserWindow 綁定在一起,如果存在的話,每個 規格

事件:'render-process-gone'

傳回

當渲染器進程意外消失時發出。這通常是因為它崩潰或被殺死。

事件:'unresponsive'

當網頁變得無回應時發出。

事件:'responsive'

當無回應的網頁再次變得有回應時發出。

事件:'plugin-crashed'

傳回

  • event 事件
  • name 字串
  • version 字串

當外掛程式進程崩潰時發出。

事件:'destroyed'

webContents 被銷毀時發出。

事件:'input-event'

傳回

當輸入事件傳送到 WebContents 時發出。請參閱 InputEvent 以取得詳細資訊。

事件:'before-input-event'

傳回

在頁面中分派 keydownkeyup 事件之前發出。呼叫 event.preventDefault 將阻止頁面 keydown/keyup 事件和選單捷徑。

若要僅阻止選單捷徑,請使用 setIgnoreMenuShortcuts

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })

win.webContents.on('before-input-event', (event, input) => {
// For example, only enable application menu keyboard shortcuts when
// Ctrl/Cmd are down.
win.webContents.setIgnoreMenuShortcuts(!input.control && !input.meta)
})

事件:'enter-html-full-screen'

當視窗進入由 HTML API 觸發的全螢幕狀態時發出。

事件:'leave-html-full-screen'

當視窗因 HTML API 觸發而離開全螢幕狀態時發出。

事件:'zoom-changed'

傳回

  • event 事件
  • zoomDirection 字串 - 可以是 inout

當使用者使用滑鼠滾輪請求變更縮放比例時發出。

事件:'blur'

WebContents 失去焦點時發出。

事件:'focus'

WebContents 獲得焦點時發出。

請注意,在 macOS 上,擁有焦點意味著 WebContents 是視窗的第一響應者,因此在視窗之間切換焦點不會觸發 WebContentsfocusblur 事件,因為每個視窗的第一響應者並未變更。

WebContentsfocusblur 事件僅應用於偵測同一視窗中不同 WebContentsBrowserView 之間的焦點變更。

事件:'devtools-open-url'

傳回

  • event 事件
  • url 字串 - 被點擊或選取的連結網址。

當在 DevTools 中點擊連結,或在其上下文選單中為連結選擇「在新分頁中開啟」時發出。

事件:'devtools-search-query'

傳回

  • event 事件
  • query 字串 - 要查詢的文字。

當為上下文選單中的文字選擇「搜尋」時發出。

事件:'devtools-opened'

當 DevTools 開啟時發出。

事件:'devtools-closed'

當 DevTools 關閉時發出。

事件:'devtools-focused'

當 DevTools 被聚焦/開啟時發出。

事件:'certificate-error'

傳回

  • event 事件
  • url 字串
  • error 字串 - 錯誤代碼。
  • certificate 憑證
  • callback 函式
    • isTrusted 布林值 - 指示憑證是否可以被視為受信任。
  • isMainFrame 布林值

當無法驗證 urlcertificate 時發出。

其用法與 appcertificate-error 事件 相同。

事件:'select-client-certificate'

傳回

  • event 事件
  • url URL
  • certificateList 憑證[]
  • callback 函式
    • certificate 憑證 - 必須是給定列表中的憑證。

當請求用戶端憑證時發出。

其用法與 appselect-client-certificate 事件 相同。

事件:'login'

傳回

  • event 事件
  • authenticationResponseDetails 物件
    • url URL
  • authInfo 物件
    • isProxy 布林值
    • scheme 字串
    • host 字串
    • port 整數
    • realm 字串
  • callback 函式
    • username 字串 (選用)
    • password 字串 (選用)

webContents 想要執行基本身份驗證時發出。

其用法與 applogin 事件 相同。

事件:'found-in-page'

傳回

  • event 事件
  • result 物件
    • requestId 整數
    • activeMatchOrdinal 整數 - 活動匹配項的位置。
    • matches 整數 - 匹配項的數量。
    • selectionArea 矩形 - 第一個匹配區域的座標。
    • finalUpdate 布林值

webContents.findInPage 請求有結果可用時發出。

事件:'media-started-playing'

當媒體開始播放時發出。

事件:'media-paused'

當媒體暫停或播放完成時發出。

事件:'audio-state-changed'

傳回

  • event 事件<>
    • audible 布林值 - 如果一個或多個框架或子 webContents 正在發出音訊,則為 True。

當媒體變得可聽或聽不到時發出。

事件:'did-change-theme-color'

傳回

  • event 事件
  • color (字串 | null) - 主題顏色格式為 '#rrggbb'。當未設定主題顏色時為 null

當頁面的主題顏色變更時發出。這通常是因為遇到 meta 標籤

<meta name='theme-color' content='#ff0000'>

事件:'update-target-url'

傳回

  • event 事件
  • url 字串

當滑鼠移動到連結上方,或鍵盤將焦點移動到連結時發出。

事件:'cursor-changed'

傳回

  • event 事件
  • type 字串
  • image NativeImage (選用)
  • scale 浮點數 (選用) - 自訂游標的縮放係數。
  • size 大小 (選用) - image 的大小。
  • hotspot (選用) - 自訂游標的熱點座標。

當游標的類型變更時發出。type 參數可以是 pointercrosshairhandtextwaithelpe-resizen-resizene-resizenw-resizes-resizese-resizesw-resizew-resizens-resizeew-resizenesw-resizenwse-resizecol-resizerow-resizem-panningm-panning-verticalm-panning-horizontale-panningn-panningne-panningnw-pannings-panningse-panningsw-panningw-panningmovevertical-textcellcontext-menualiasprogressnodropcopynonenot-allowedzoom-inzoom-outgrabgrabbingcustomnulldrag-drop-nonedrag-drop-movedrag-drop-copydrag-drop-linkns-no-resizeew-no-resizenesw-no-resizenwse-no-resizedefault

如果 type 參數為 custom,則 image 參數將在 NativeImage 中保存自訂游標圖像,而 scalesizehotspot 將保存有關自訂游標的其他資訊。

事件:'context-menu'

傳回

  • event 事件
  • params 物件
    • x 整數 - x 座標。
    • y 整數 - y 座標。
    • frame WebFrameMain | null - 呼叫上下文選單的框架。如果框架在導航或被銷毀後被存取,則可能為 null
    • linkURL 字串 - 包含呼叫上下文選單的節點的連結網址。
    • linkText 字串 - 與連結關聯的文字。如果連結的內容是圖片,則可能為空字串。
    • pageURL 字串 - 呼叫上下文選單的頂層頁面網址。
    • frameURL 字串 - 呼叫上下文選單的子框架網址。
    • srcURL 字串 - 呼叫上下文選單的元素的來源網址。具有來源網址的元素是圖片、音訊和影片。
    • mediaType 字串 - 呼叫上下文選單的節點類型。可以是 noneimageaudiovideocanvasfileplugin
    • hasImageContents 布林值 - 上下文選單是否在具有非空內容的圖片上呼叫。
    • isEditable 布林值 - 上下文是否可編輯。
    • selectionText 字串 - 呼叫上下文選單的選取文字。
    • titleText 字串 - 呼叫上下文選單的選取文字的標題文字。
    • altText 字串 - 呼叫上下文選單的選取文字的替代文字。
    • suggestedFilename 字串 - 當透過上下文選單的「另存連結為」選項儲存檔案時建議使用的檔案名稱。
    • selectionRect 矩形 - 表示選取範圍在文件空間中的座標的矩形。
    • selectionStartOffset 數字 - 選取文字的起始位置。
    • referrerPolicy 參照 - 呼叫選單的框架的參照政策。
    • misspelledWord 字串 - 游標下的拼寫錯誤單字(如果有)。
    • dictionarySuggestions 字串[] - 用於向使用者顯示以取代 misspelledWord 的建議單字陣列。僅當存在拼寫錯誤的單字且啟用拼寫檢查器時才可用。
    • frameCharset 字串 - 呼叫選單的框架的字元編碼。
    • formControlType 字串 - 呼叫上下文選單的來源。可能的值包括 nonebutton-buttonfield-setinput-buttoninput-checkboxinput-colorinput-dateinput-datetime-localinput-emailinput-fileinput-hiddeninput-imageinput-monthinput-numberinput-passwordinput-radioinput-rangeinput-resetinput-searchinput-submitinput-telephoneinput-textinput-timeinput-urlinput-weekoutputreset-buttonselect-listselect-listselect-multipleselect-onesubmit-buttontext-area
    • spellcheckEnabled 布林值 - 如果上下文可編輯,是否啟用拼寫檢查。
    • menuSourceType 字串 - 呼叫上下文選單的輸入來源。可以是 nonemousekeyboardtouchtouchMenulongPresslongTaptouchHandlestylusadjustSelectionadjustSelectionReset
    • mediaFlags 物件 - 呼叫上下文選單的媒體元素的旗標。
      • inError 布林值 - 媒體元素是否當機。
      • isPaused 布林值 - 媒體元素是否暫停。
      • isMuted 布林值 - 媒體元素是否靜音。
      • hasAudio 布林值 - 媒體元素是否有音訊。
      • isLooping 布林值 - 媒體元素是否循環播放。
      • isControlsVisible 布林值 - 媒體元素的控制項是否可見。
      • canToggleControls 布林值 - 媒體元素的控制項是否可切換。
      • canPrint 布林值 - 媒體元素是否可列印。
      • canSave 布林值 - 媒體元素是否可以下載。
      • canShowPictureInPicture 布林值 - 媒體元素是否可以顯示子母畫面。
      • isShowingPictureInPicture boolean - 媒體元素目前是否正以子母畫面模式顯示。
      • canRotate boolean - 媒體元素是否可以旋轉。
      • canLoop boolean - 媒體元素是否可以循環播放。
    • editFlags Object - 這些旗標指示渲染器是否認為它可以執行相應的操作。
      • canUndo boolean - 渲染器是否認為它可以復原。
      • canRedo boolean - 渲染器是否認為它可以重做。
      • canCut boolean - 渲染器是否認為它可以剪下。
      • canCopy boolean - 渲染器是否認為它可以複製。
      • canPaste boolean - 渲染器是否認為它可以貼上。
      • canDelete boolean - 渲染器是否認為它可以刪除。
      • canSelectAll boolean - 渲染器是否認為它可以全選。
      • canEditRichly boolean - 渲染器是否認為它可以進行富文本編輯。

當有新的內容選單需要處理時觸發。

事件:'select-bluetooth-device'

傳回

當呼叫 navigator.bluetooth.requestDevice 時,需要選擇藍牙裝置時觸發。應使用要選擇的裝置的 deviceId 呼叫 callback。將空字串傳遞給 callback 將會取消請求。

如果未為此事件新增事件監聽器,或者在處理此事件時未呼叫 event.preventDefault,則會自動選擇第一個可用的裝置。

由於藍牙的特性,當呼叫 navigator.bluetooth.requestDevice 時,掃描裝置可能需要時間,並且會多次觸發 select-bluetooth-device,直到使用裝置 ID 或空字串呼叫 callback 以取消請求為止。

main.js
const { app, BrowserWindow } = require('electron')

let win = null

app.whenReady().then(() => {
win = new BrowserWindow({ width: 800, height: 600 })
win.webContents.on('select-bluetooth-device', (event, deviceList, callback) => {
event.preventDefault()
const result = deviceList.find((device) => {
return device.deviceName === 'test'
})
if (!result) {
// The device wasn't found so we need to either wait longer (eg until the
// device is turned on) or cancel the request by calling the callback
// with an empty string.
callback('')
} else {
callback(result.deviceId)
}
})
})

事件:'paint'

傳回

  • details Event<>
    • texture OffscreenSharedTexture (選用) 實驗性功能 - 當 webPreferences.offscreen.useSharedTexturetrue 時,幀的 GPU 共用紋理。
  • dirtyRect Rectangle
  • image NativeImage - 整張幀的影像資料。

當產生新幀時觸發。只有變更區域會被傳遞到緩衝區中。

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ webPreferences: { offscreen: true } })
win.webContents.on('paint', (event, dirty, image) => {
// updateBitmap(dirty, image.getBitmap())
})
win.loadURL('https://github.com')

當使用共用紋理(將 webPreferences.offscreen.useSharedTexture 設定為 true)功能時,您可以將紋理處理程式傳遞到外部渲染管道,而無需在 CPU 和 GPU 記憶體之間複製資料的開銷,並具有 Chromium 的硬體加速支援。此功能對於高效能渲染場景很有幫助。

一次只能存在有限數量的紋理,因此請務必在完成紋理後立即呼叫 texture.release()。透過自行管理紋理生命週期,您可以安全地透過 IPC 將 texture.textureInfo 傳遞給其他處理程序。

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ webPreferences: { offscreen: { useSharedTexture: true } } })
win.webContents.on('paint', async (e, dirty, image) => {
if (e.texture) {
// By managing lifecycle yourself, you can handle the event in async handler or pass the `e.texture.textureInfo`
// to other processes (not `e.texture`, the `e.texture.release` function is not passable through IPC).
await new Promise(resolve => setTimeout(resolve, 50))

// You can send the native texture handle to native code for importing into your rendering pipeline.
// For example: https://github.com/electron/electron/tree/main/spec/fixtures/native-addon/osr-gpu
// importTextureHandle(dirty, e.texture.textureInfo)

// You must call `e.texture.release()` as soon as possible, before the underlying frame pool is drained.
e.texture.release()
}
})
win.loadURL('https://github.com')

事件:'devtools-reload-page'

當開發人員工具視窗指示 webContents 重新載入時觸發

事件:'will-attach-webview'

傳回

  • event 事件
  • webPreferences WebPreferences - 客戶頁面將使用的網頁偏好設定。可以修改此物件以調整客戶頁面的偏好設定。
  • params Record<string, string> - 其他 <webview> 參數,例如 src URL。可以修改此物件以調整客戶頁面的參數。

<webview> 的網頁內容正在附加到此網頁內容時觸發。呼叫 event.preventDefault() 將會銷毀客戶頁面。

此事件可用於在載入 <webview>webContents 之前為其設定 webPreferences,並提供設定無法透過 <webview> 屬性設定的設定的能力。

事件:'did-attach-webview'

傳回

  • event 事件
  • webContents WebContents - <webview> 使用的客戶網頁內容。

<webview> 已附加到此網頁內容時觸發。

事件:'console-message'

傳回

  • event 事件
  • level Integer - 日誌層級,從 0 到 3。依序對應 verboseinfowarningerror
  • message string - 實際的控制台訊息
  • line Integer - 觸發此控制台訊息的來源行號
  • sourceId string

當相關視窗記錄控制台訊息時觸發。

事件:'preload-error'

傳回

  • event 事件
  • preloadPath string
  • error Error

當預載腳本 preloadPath 擲出未處理的例外狀況 error 時觸發。

事件:'ipc-message'

傳回

當渲染器程序透過 ipcRenderer.send() 送出非同步訊息時觸發。

另請參閱 webContents.ipc,它提供一個類似 IpcMain 的介面,用於回應來自此 WebContents 的特定 IPC 訊息。

事件:'ipc-message-sync'

傳回

當渲染器程序透過 ipcRenderer.sendSync() 送出同步訊息時觸發。

另請參閱 webContents.ipc,它提供一個類似 IpcMain 的介面,用於回應來自此 WebContents 的特定 IPC 訊息。

事件:'preferred-size-changed'

傳回

  • event 事件
  • preferredSize Size - 包含文件版面配置所需的最小尺寸,無需滾動。

WebContents 的偏好大小變更時觸發。

只有在 webPreferences 中將 enablePreferredSizeMode 設定為 true 時,才會觸發此事件。

事件:'frame-created'

傳回

  • event 事件
  • details 物件
    • frame WebFrameMain | null - 建立的框架。如果在框架導覽或銷毀後存取,可能會是 null

當頁面中載入 mainFrame<iframe> 或巢狀 <iframe> 時觸發。

實例方法

contents.loadURL(url[, options])

  • url 字串
  • options Object (選用)
    • httpReferrer (string | Referrer) (選用) - HTTP Referrer URL。
    • userAgent string (選用) - 發起請求的使用者代理程式。
    • extraHeaders string (選用) - 以 "\n" 分隔的額外標頭。
    • postData (UploadRawData | UploadFile)[] (選用)
    • baseURLForDataURL string (選用) - 要由 data url 載入的檔案的基礎 URL (帶有結尾路徑分隔符號)。只有在指定的 url 是 data url 且需要載入其他檔案時才需要此設定。

傳回 Promise<void> - 當頁面載入完成時(請參閱 did-finish-load),Promise 會解析,如果頁面載入失敗(請參閱 did-fail-load),Promise 會拒絕。已附加一個 noop 拒絕處理程式,以避免未處理的拒絕錯誤。

在視窗中載入 urlurl 必須包含協定前綴,例如 http://file://。如果載入應該略過 http 快取,請使用 pragma 標頭來達成。

const win = new BrowserWindow()
const options = { extraHeaders: 'pragma: no-cache\n' }
win.webContents.loadURL('https://github.com', options)

contents.loadFile(filePath[, options])

  • filePath string
  • options Object (選用)
    • query Record<string, string> (選用) - 傳遞給 url.format()
    • search string (選用) - 傳遞給 url.format()
    • hash string (選用) - 傳遞給 url.format()

傳回 Promise<void> - 當頁面載入完成時(請參閱 did-finish-load),Promise 會解析,如果頁面載入失敗(請參閱 did-fail-load),Promise 會拒絕。

在視窗中載入給定的檔案,filePath 應該是相對於應用程式根目錄的 HTML 檔案的路徑。例如,像這樣的應用程式結構

| root
| - package.json
| - src
| - main.js
| - index.html

會需要像這樣的程式碼

const win = new BrowserWindow()
win.loadFile('src/index.html')

contents.downloadURL(url[, options])

  • url 字串
  • options Object (選用)
    • headers Record<string, string> (選用) - HTTP 請求標頭。

啟動下載 url 處的資源,而不進行導覽。將會觸發 sessionwill-download 事件。

contents.getURL()

傳回 string - 目前網頁的 URL。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('https://github.com').then(() => {
const currentURL = win.webContents.getURL()
console.log(currentURL)
})

contents.getTitle()

傳回 string - 目前網頁的標題。

contents.isDestroyed()

傳回 boolean - 網頁是否已銷毀。

contents.close([opts])

  • opts Object (選用)
    • waitForBeforeUnload boolean - 如果為 true,則在關閉頁面之前觸發 beforeunload 事件。如果頁面阻止卸載,則 WebContents 將不會關閉。如果頁面要求阻止卸載,將會觸發 will-prevent-unload

關閉頁面,就像網頁內容已呼叫 window.close() 一樣。

如果頁面成功關閉(即頁面未阻止卸載,或者 waitForBeforeUnload 為 false 或未指定),則 WebContents 將會銷毀且不再可用。將會觸發 destroyed 事件。

contents.focus()

將焦點設定在網頁上。

contents.isFocused()

傳回 boolean - 網頁是否有焦點。

contents.isLoading()

傳回 boolean - 網頁是否仍在載入資源。

contents.isLoadingMainFrame()

傳回 boolean - 表示主框架(而不僅是其中的 iframe 或框架)是否仍在載入中。

contents.isWaitingForResponse()

傳回 boolean - 表示網頁是否正在等待來自該網頁主要資源的第一個回應。

contents.stop()

停止任何待處理的導航。

contents.reload()

重新載入目前的網頁。

contents.reloadIgnoringCache()

重新載入目前頁面並忽略快取。

contents.canGoBack() 已棄用

歷史記錄

傳回 boolean - 表示瀏覽器是否可以返回至前一個網頁。

已棄用: 應使用新的 contents.navigationHistory.canGoBack API。

contents.canGoForward() 已棄用

歷史記錄

傳回 boolean - 表示瀏覽器是否可以前進至下一個網頁。

已棄用: 應使用新的 contents.navigationHistory.canGoForward API。

contents.canGoToOffset(offset) 已棄用

歷史記錄
  • offset 整數

傳回 boolean - 表示網頁是否可以前往 offset

已棄用: 應使用新的 contents.navigationHistory.canGoToOffset API。

contents.clearHistory() 已棄用

歷史記錄

清除導航歷史記錄。

已棄用: 應使用新的 contents.navigationHistory.clear API。

contents.goBack() 已棄用

歷史記錄

使瀏覽器返回前一個網頁。

已棄用: 應使用新的 contents.navigationHistory.goBack API。

contents.goForward() 已棄用

歷史記錄

使瀏覽器前進至下一個網頁。

已棄用: 應使用新的 contents.navigationHistory.goForward API。

contents.goToIndex(index) 已棄用

歷史記錄
  • index 整數

將瀏覽器導航至指定的絕對網頁索引。

已棄用: 應使用新的 contents.navigationHistory.goToIndex API。

contents.goToOffset(offset) 已棄用

歷史記錄
  • offset 整數

從「目前條目」導航至指定的偏移量。

已棄用: 應使用新的 contents.navigationHistory.goToOffset API。

contents.isCrashed()

傳回 boolean - 表示渲染器進程是否已崩潰。

contents.forcefullyCrashRenderer()

強制終止目前託管此 webContents 的渲染器進程。這將導致發出 render-process-gone 事件,並且 reason=killed || reason=crashed。請注意,某些 webContents 會共用渲染器進程,因此呼叫此方法也可能會使其他 webContents 的主機進程崩潰。

在呼叫此方法後立即呼叫 reload() 將強制在新的進程中發生重新載入。當此進程不穩定或無法使用時,應使用此方法,例如為了從 unresponsive 事件中恢復。

const win = new BrowserWindow()

win.webContents.on('unresponsive', async () => {
const { response } = await dialog.showMessageBox({
message: 'App X has become unresponsive',
title: 'Do you want to try forcefully reloading the app?',
buttons: ['OK', 'Cancel'],
cancelId: 1
})
if (response === 0) {
win.webContents.forcefullyCrashRenderer()
win.webContents.reload()
}
})

contents.setUserAgent(userAgent)

  • userAgent 字串

覆寫此網頁的使用者代理程式。

contents.getUserAgent()

傳回 string - 此網頁的使用者代理程式。

contents.insertCSS(css[, options])

  • css 字串
  • options Object (選用)
    • cssOrigin 字串(選用)- 可以是 'user' 或 'author'。設定插入的樣式表的串聯原點。預設值為 'author'。

傳回 Promise<string> - 一個 promise,解析為插入的 CSS 的金鑰,稍後可用於透過 contents.removeInsertedCSS(key) 移除 CSS。

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

const win = new BrowserWindow()
win.webContents.on('did-finish-load', () => {
win.webContents.insertCSS('html, body { background-color: #f00; }')
})

contents.removeInsertedCSS(key)

  • key 字串

傳回 Promise<void> - 如果移除成功則解析。

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

const win = new BrowserWindow()

win.webContents.on('did-finish-load', async () => {
const key = await win.webContents.insertCSS('html, body { background-color: #f00; }')
win.webContents.removeInsertedCSS(key)
})

contents.executeJavaScript(code[, userGesture])

  • code 字串
  • userGesture boolean(選用)- 預設值為 false

傳回 Promise<any> - 一個 promise,解析為已執行程式碼的結果,如果程式碼的結果是被拒絕的 promise,則會被拒絕。

在頁面中評估 code

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

程式碼執行將暫停,直到網頁停止載入。

const win = new BrowserWindow()

win.webContents.executeJavaScript('fetch("https://jsonplaceholder.typicode.com/users/1").then(resp => resp.json())', true)
.then((result) => {
console.log(result) // Will be the JSON object from the fetch call
})

contents.executeJavaScriptInIsolatedWorld(worldId, scripts[, userGesture])

  • worldId 整數 - 要在其中執行 javascript 的世界的 ID,0 是預設世界,999 是 Electron 的 contextIsolation 功能使用的世界。您可以在此處提供任何整數。
  • scripts WebSource[]
  • userGesture boolean(選用)- 預設值為 false

傳回 Promise<any> - 一個 promise,解析為已執行程式碼的結果,如果程式碼的結果是被拒絕的 promise,則會被拒絕。

類似於 executeJavaScript,但在隔離的內容中評估 scripts

contents.setIgnoreMenuShortcuts(ignore)

  • ignore boolean

當此網頁內容處於焦點時,忽略應用程式選單快速鍵。

contents.setWindowOpenHandler(handler)

  • handler Function<WindowOpenHandlerResponse>

    • details 物件
      • url 字串 - 傳遞至 window.open() 的 URL 的解析版本。例如,使用 window.open('foo') 開啟視窗將產生類似 https://the-origin/the/current/path/foo 的結果。
      • frameName 字串 - 在 window.open() 中提供的視窗名稱
      • features 字串 - 提供給 window.open() 的視窗功能(以逗號分隔的清單)。
      • disposition 字串 - 可以是 defaultforeground-tabbackground-tabnew-windowother
      • referrer Referrer - 將傳遞給新視窗的來源網址。根據參照策略,可能導致或不導致傳送 Referer 標頭。
      • postBody PostBody (選用) - 將傳送至新視窗的 POST 資料,以及將設定的適當標頭。如果沒有要傳送的 POST 資料,則值將為 null。僅當視窗是由設定 target=_blank 的表單建立時定義。

    傳回 WindowOpenHandlerResponse - 當設定為 { action: 'deny' } 時,取消建立新視窗。{ action: 'allow' } 將允許建立新視窗。傳回無法識別的值(例如 null、undefined 或沒有可識別的 'action' 值的物件)將導致主控台錯誤,並且與傳回 {action: 'deny'} 的效果相同。

在渲染器要求建立新視窗之前呼叫,例如,透過 window.open()target="_blank" 的連結、按住 shift 鍵並點擊連結,或提交具有 <form target="_blank"> 的表單。如需更多詳細資訊,以及如何與 did-create-window 搭配使用,請參閱 window.open()

一個範例,說明如何自訂新 BrowserWindow 的建立程序,使其成為附加到主視窗的 BrowserView

const { BrowserView, BrowserWindow } = require('electron')

const mainWindow = new BrowserWindow()

mainWindow.webContents.setWindowOpenHandler((details) => {
return {
action: 'allow',
createWindow: (options) => {
const browserView = new BrowserView(options)
mainWindow.addBrowserView(browserView)
browserView.setBounds({ x: 0, y: 0, width: 640, height: 480 })
return browserView.webContents
}
}
})

contents.setAudioMuted(muted)

  • muted boolean

將目前網頁上的音訊靜音。

contents.isAudioMuted()

傳回 boolean - 表示此頁面是否已靜音。

contents.isCurrentlyAudible()

返回 boolean - 表示目前是否有音訊正在播放。

contents.setZoomFactor(factor)

  • factor Double - 縮放比例,預設值為 1.0。

將縮放比例更改為指定的比例。縮放比例為縮放百分比除以 100,因此 300% = 3.0。

該比例必須大於 0.0。

contents.getZoomFactor()

返回 number - 目前的縮放比例。

contents.setZoomLevel(level)

  • level number - 縮放級別。

將縮放級別更改為指定的級別。原始大小為 0,向上或向下每增加一個級別,代表縮放 20%,分別達到原始大小的 300% 和 50% 的預設限制。其公式為 scale := 1.2 ^ level

注意:Chromium 層級的縮放原則為同源 (same-origin),這表示特定網域的縮放級別會傳播到所有具有相同網域的視窗實例。區分視窗 URL 將使每個視窗的縮放獨立運作。

contents.getZoomLevel()

返回 number - 目前的縮放級別。

contents.setVisualZoomLevelLimits(minimumLevel, maximumLevel)

  • minimumLevel number
  • maximumLevel number

返回 Promise<void>

設定最大和最小的雙指縮放級別。

注意:視覺縮放預設在 Electron 中是停用的。要重新啟用它,請呼叫

const win = new BrowserWindow()
win.webContents.setVisualZoomLevelLimits(1, 3)

contents.undo()

在網頁中執行編輯命令 undo

contents.redo()

在網頁中執行編輯命令 redo

contents.cut()

在網頁中執行編輯命令 cut

contents.copy()

在網頁中執行編輯命令 copy

contents.centerSelection()

將網頁中目前的文字選取範圍置中。

contents.copyImageAt(x, y)

  • x Integer
  • y Integer

將指定位置的圖片複製到剪貼簿。

contents.paste()

在網頁中執行編輯命令 paste

contents.pasteAndMatchStyle()

在網頁中執行編輯命令 pasteAndMatchStyle

contents.delete()

在網頁中執行編輯命令 delete

contents.selectAll()

在網頁中執行編輯命令 selectAll

contents.unselect()

在網頁中執行編輯命令 unselect

contents.scrollToTop()

捲動到目前 webContents 的頂部。

contents.scrollToBottom()

捲動到目前 webContents 的底部。

contents.adjustSelection(options)

  • options Object
    • start Number (optional) - 移動目前選取範圍的起始索引的量。
    • end Number (optional) - 移動目前選取範圍的結束索引的量。

依據指定的量調整焦點框架中目前文字選取範圍的起點和終點。負數會將選取範圍移向文件的開頭,正數則將選取範圍移向文件的結尾。

範例

const win = new BrowserWindow()

// Adjusts the beginning of the selection 1 letter forward,
// and the end of the selection 5 letters forward.
win.webContents.adjustSelection({ start: 1, end: 5 })

// Adjusts the beginning of the selection 2 letters forward,
// and the end of the selection 3 letters backward.
win.webContents.adjustSelection({ start: 2, end: -3 })

呼叫 win.webContents.adjustSelection({ start: 1, end: 5 })

之前

Image Before Text Selection Adjustment

之後

Image After Text Selection Adjustment

contents.replace(text)

  • text string

在網頁中執行編輯命令 replace

contents.replaceMisspelling(text)

  • text string

在網頁中執行編輯命令 replaceMisspelling

contents.insertText(text)

  • text string

返回 Promise<void>

text 插入到焦點元素。

contents.findInPage(text[, options])

  • text string - 要搜尋的內容,不能為空。
  • options Object (選用)
    • forward boolean (optional) - 是否向前或向後搜尋,預設為 true
    • findNext boolean (optional) - 是否要以此請求開始新的文字搜尋會期。初始請求應為 true,後續請求應為 false。預設為 false
    • matchCase boolean (optional) - 搜尋是否應區分大小寫,預設為 false

返回 Integer - 用於該請求的請求 ID。

開始請求以尋找網頁中所有符合 text 的內容。請求的結果可以透過訂閱 found-in-page 事件來取得。

contents.stopFindInPage(action)

  • action string - 指定結束 webContents.findInPage 請求時要採取的動作。
    • clearSelection - 清除選取範圍。
    • keepSelection - 將選取範圍轉換為一般的選取範圍。
    • activateSelection - 聚焦並點擊選取節點。

使用提供的 action 停止任何 findInPage 針對 webContents 的請求。

const win = new BrowserWindow()
win.webContents.on('found-in-page', (event, result) => {
if (result.finalUpdate) win.webContents.stopFindInPage('clearSelection')
})

const requestId = win.webContents.findInPage('api')
console.log(requestId)

contents.capturePage([rect, opts])

  • rect Rectangle (optional) - 要擷取之頁面的區域。
  • opts Object (選用)
    • stayHidden boolean (optional) - 保持頁面隱藏,而不是顯示。預設為 false
    • stayAwake boolean (optional) - 保持系統喚醒,而不是允許其進入睡眠。預設為 false

返回 Promise<NativeImage> - 解析為 NativeImage

rect 內擷取頁面的快照。省略 rect 將擷取整個可見頁面。當瀏覽器視窗隱藏且擷取計數器不為零時,頁面會被視為可見。如果您希望頁面保持隱藏,則應確保將 stayHidden 設定為 true。

contents.isBeingCaptured()

返回 boolean - 表示此頁面是否正在被擷取。當擷取計數器大於 0 時,它會返回 true。

contents.getPrintersAsync()

取得系統印表機清單。

返回 Promise<PrinterInfo[]> - 解析為 PrinterInfo[]

contents.print([options], [callback])

  • options Object (選用)
    • silent boolean (optional) - 不詢問使用者列印設定。預設為 false
    • printBackground boolean (optional) - 列印網頁的背景顏色和圖片。預設為 false
    • deviceName string (optional) - 設定要使用的印表機裝置名稱。必須是系統定義的名稱,而不是「友善」名稱,例如 'Brother_QL_820NWB' 而不是 'Brother QL-820NWB'。
    • color boolean (optional) - 設定要列印的網頁是彩色還是灰階。預設為 true
    • margins Object (optional)
      • marginType string (optional) - 可以是 defaultnoneprintableAreacustom。如果選擇 custom,您還需要指定 topbottomleftright
      • top number (optional) - 列印網頁的頂部邊距,以像素為單位。
      • bottom number (optional) - 列印網頁的底部邊距,以像素為單位。
      • left number (optional) - 列印網頁的左側邊距,以像素為單位。
      • right number (optional) - 列印網頁的右側邊距,以像素為單位。
    • landscape boolean (optional) - 網頁是否應以橫向模式列印。預設為 false
    • scaleFactor number (optional) - 網頁的縮放比例。
    • pagesPerSheet number (選用) - 每張紙列印的頁數。
    • collate boolean (選用) - 是否應整理網頁。
    • copies number (選用) - 要列印的網頁份數。
    • pageRanges Object[] (選用) - 要列印的頁面範圍。在 macOS 上,僅會採用一個範圍。
      • from number - 要列印的第一頁索引 (從 0 開始)。
      • to number - 要列印的最後一頁索引 (包含) (從 0 開始)。
    • duplexMode string (選用) - 設定列印網頁的雙面模式。可以是 simplexshortEdgelongEdge
    • dpi Record<string, number> (選用)
      • horizontal number (選用) - 水平 dpi。
      • vertical number (選用) - 垂直 dpi。
    • header string (選用) - 要列印為頁首的字串。
    • footer string (選用) - 要列印為頁尾的字串。
    • pageSize string | Size (選用) - 指定列印文件的大小。可以是 A0A1A2A3A4A5A6LegalLetterTabloid 或包含 heightwidth 的物件。
  • callback Function (選用)
    • success boolean - 指示列印呼叫是否成功。
    • failureReason string - 如果列印失敗時回呼的錯誤描述。

當傳遞自訂的 pageSize 時,Chromium 會嘗試驗證平台特定的 width_micronsheight_microns 最小值。寬度和高度都必須至少為 353 微米,但在某些作業系統上可能會更高。

列印視窗的網頁。當 silent 設定為 true 時,如果 deviceName 為空,Electron 會選取系統的預設印表機和預設的列印設定。

使用 page-break-before: always; CSS 樣式來強制列印到新頁面。

使用範例

const win = new BrowserWindow()
const options = {
silent: true,
deviceName: 'My-Printer',
pageRanges: [{
from: 0,
to: 1
}]
}
win.webContents.print(options, (success, errorType) => {
if (!success) console.log(errorType)
})

contents.printToPDF(options)

  • options Object
    • landscape boolean (選用) - 紙張方向。true 表示橫向,false 表示直向。預設為 false。
    • displayHeaderFooter boolean (選用) - 是否顯示頁首和頁尾。預設為 false。
    • printBackground boolean (選用) - 是否列印背景圖形。預設為 false。
    • scale number (選用) - 網頁渲染的縮放比例。預設為 1。
    • pageSize string | Size (選用) - 指定產生的 PDF 的頁面大小。可以是 A0A1A2A3A4A5A6LegalLetterTabloidLedger 或包含以英吋為單位的 heightwidth 的物件。預設為 Letter
    • margins Object (optional)
      • top number (選用) - 上邊距,以英吋為單位。預設為 1 公分 (~0.4 英吋)。
      • bottom number (選用) - 下邊距,以英吋為單位。預設為 1 公分 (~0.4 英吋)。
      • left number (選用) - 左邊距,以英吋為單位。預設為 1 公分 (~0.4 英吋)。
      • right number (選用) - 右邊距,以英吋為單位。預設為 1 公分 (~0.4 英吋)。
    • pageRanges string (選用) - 要列印的頁面範圍,例如 '1-5, 8, 11-13'。預設為空字串,表示列印所有頁面。
    • headerTemplate string (選用) - 列印頁首的 HTML 範本。應為有效的 HTML 標記,其中使用以下類別將列印值插入其中:date (格式化的列印日期)、title (文件標題)、url (文件位置)、pageNumber (目前頁碼) 和 totalPages (文件中的總頁數)。例如,<span class=title></span> 將產生一個包含標題的 span。
    • footerTemplate string (選用) - 列印頁尾的 HTML 範本。應使用與 headerTemplate 相同的格式。
    • preferCSSPageSize boolean (選用) - 是否優先使用由 css 定義的頁面大小。預設為 false,在這種情況下,內容將縮放以適合紙張大小。
    • generateTaggedPDF boolean (選用) 實驗性 - 是否產生已標記 (可存取) 的 PDF。預設為 false。由於此屬性為實驗性質,產生的 PDF 可能不會完全符合 PDF/UA 和 WCAG 標準。
    • generateDocumentOutline boolean (選用) 實驗性 - 是否從內容標頭產生 PDF 文件大綱。預設為 false。

傳回 Promise<Buffer> - 使用產生的 PDF 資料解析。

將視窗的網頁列印為 PDF。

如果在網頁中使用 @page CSS at-rule,則 landscape 將會被忽略。

webContents.printToPDF 的範例

const { app, BrowserWindow } = require('electron')
const fs = require('node:fs')
const path = require('node:path')
const os = require('node:os')

app.whenReady().then(() => {
const win = new BrowserWindow()
win.loadURL('https://github.com')

win.webContents.on('did-finish-load', () => {
// Use default printing options
const pdfPath = path.join(os.homedir(), 'Desktop', 'temp.pdf')
win.webContents.printToPDF({}).then(data => {
fs.writeFile(pdfPath, data, (error) => {
if (error) throw error
console.log(`Wrote PDF successfully to ${pdfPath}`)
})
}).catch(error => {
console.log(`Failed to write PDF to ${pdfPath}: `, error)
})
})
})

請參閱 Page.printToPdf 以取得更多資訊。

contents.addWorkSpace(path)

  • path string

將指定的路徑新增至 DevTools 工作區。必須在 DevTools 建立後使用

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.webContents.on('devtools-opened', () => {
win.webContents.addWorkSpace(__dirname)
})

contents.removeWorkSpace(path)

  • path string

從 DevTools 工作區移除指定的路徑。

contents.setDevToolsWebContents(devToolsWebContents)

  • devToolsWebContents WebContents

使用 devToolsWebContents 作為目標 WebContents 來顯示 devtools。

devToolsWebContents 不得執行任何導覽,並且在呼叫後不得用於其他用途。

依預設,Electron 會透過建立具有原生檢視的內部 WebContents 來管理 devtools,開發人員對此的控制權非常有限。透過 setDevToolsWebContents 方法,開發人員可以使用任何 WebContents 來在其中顯示 devtools,包括 BrowserWindowBrowserView<webview> 標籤。

請注意,關閉 devtools 不會銷毀 devToolsWebContents,銷毀 devToolsWebContents 是呼叫者的責任。

<webview> 標籤中顯示 devtools 的範例

<html>
<head>
<style type="text/css">
* { margin: 0; }
#browser { height: 70%; }
#devtools { height: 30%; }
</style>
</head>
<body>
<webview id="browser" src="https://github.com"></webview>
<webview id="devtools" src="about:blank"></webview>
<script>
const { ipcRenderer } = require('electron')
const emittedOnce = (element, eventName) => new Promise(resolve => {
element.addEventListener(eventName, event => resolve(event), { once: true })
})
const browserView = document.getElementById('browser')
const devtoolsView = document.getElementById('devtools')
const browserReady = emittedOnce(browserView, 'dom-ready')
const devtoolsReady = emittedOnce(devtoolsView, 'dom-ready')
Promise.all([browserReady, devtoolsReady]).then(() => {
const targetId = browserView.getWebContentsId()
const devtoolsId = devtoolsView.getWebContentsId()
ipcRenderer.send('open-devtools', targetId, devtoolsId)
})
</script>
</body>
</html>
// Main process
const { ipcMain, webContents } = require('electron')
ipcMain.on('open-devtools', (event, targetContentsId, devtoolsContentsId) => {
const target = webContents.fromId(targetContentsId)
const devtools = webContents.fromId(devtoolsContentsId)
target.setDevToolsWebContents(devtools)
target.openDevTools()
})

BrowserWindow 中顯示 devtools 的範例

main.js
const { app, BrowserWindow } = require('electron')

let win = null
let devtools = null

app.whenReady().then(() => {
win = new BrowserWindow()
devtools = new BrowserWindow()
win.loadURL('https://github.com')
win.webContents.setDevToolsWebContents(devtools.webContents)
win.webContents.openDevTools({ mode: 'detach' })
})

contents.openDevTools([options])

  • options Object (選用)
    • mode string - 使用指定的停駐狀態開啟 devtools,可以是 leftrightbottomundockeddetach。預設為上次使用的停駐狀態。在 undocked 模式下,可以停靠回來。在 detach 模式下則無法。
    • activate boolean (選用) - 是否將開啟的 devtools 視窗帶到前景。預設為 true
    • title string (選用) - DevTools 視窗的標題 (僅在 undockeddetach 模式下)。

開啟 devtools。

contents<webview> 標籤時,mode 預設為 detach,明確傳遞空的 mode 可以強制使用上次使用的停駐狀態。

在 Windows 上,如果啟用 Windows 控制項覆蓋,Devtools 將以 mode: 'detach' 開啟。

contents.closeDevTools()

關閉 devtools。

contents.isDevToolsOpened()

傳回 boolean - devtools 是否已開啟。

contents.isDevToolsFocused()

傳回 boolean - devtools 檢視是否已聚焦。

contents.getDevToolsTitle()

傳回 string - DevTools 視窗的目前標題。僅當 DevTools 在 undockeddetach 模式下開啟時,才會顯示此標題。

contents.setDevToolsTitle(title)

  • title 字串

將 DevTools 視窗的標題變更為 title。僅當 DevTools 在 undockeddetach 模式下開啟時,才會顯示此標題。

contents.toggleDevTools()

切換開發人員工具。

contents.inspectElement(x, y)

  • x Integer
  • y Integer

開始檢查位置 (x, y) 的元素。

contents.inspectSharedWorker()

開啟共用 worker 環境的開發人員工具。

contents.inspectSharedWorkerById(workerId)

  • workerId string

根據其 ID 檢查共用 worker。

contents.getAllSharedWorkers()

傳回 SharedWorkerInfo[] - 關於所有共用 Worker 的資訊。

contents.inspectServiceWorker()

開啟 service worker 環境的開發人員工具。

contents.send(channel, ...args)

  • channel string
  • ...args any[]

透過 channel 向渲染器程序傳送非同步訊息,以及引數。引數將使用 結構化複製演算法進行序列化,就像 postMessage 一樣,因此不會包含原型鏈。傳送函式、Promise、符號、WeakMap 或 WeakSet 將會擲回例外。

警告

傳送非標準的 JavaScript 類型,例如 DOM 物件或特殊的 Electron 物件,將會拋出例外。

如需進一步閱讀,請參考 Electron 的 IPC 指南

contents.sendToFrame(frameId, channel, ...args)

  • frameId Integer | [number, number] - 要傳送的框架 ID,或如果框架與主框架位於不同的進程中,則為 [processId, frameId] 的配對。
  • channel string
  • ...args any[]

透過 channel 將非同步訊息連同參數傳送至渲染器進程中的特定框架。參數將使用 結構化複製演算法進行序列化,就像 postMessage 一樣,因此不會包含原型鏈。傳送函數、Promise、符號、WeakMap 或 WeakSet 將會拋出例外。

注意: 傳送非標準的 JavaScript 類型,例如 DOM 物件或特殊的 Electron 物件,將會拋出例外。

渲染器進程可以透過使用 ipcRenderer 模組監聽 channel 來處理訊息。

如果您想要取得給定渲染器上下文的 frameId,您應該使用 webFrame.routingId 值。例如:

// In a renderer process
console.log('My frameId is:', require('electron').webFrame.routingId)

您也可以從主進程中所有傳入的 IPC 訊息讀取 frameId

// In the main process
ipcMain.on('ping', (event) => {
console.info('Message came from frameId:', event.frameId)
})

contents.postMessage(channel, message, [transfer])

  • channel string
  • message any
  • transfer MessagePortMain[] (選用)

將訊息傳送至渲染器進程,可選地傳輸零個或多個 MessagePortMain 物件的所有權。

傳輸的 MessagePortMain 物件將透過存取發出事件的 ports 屬性在渲染器進程中可用。當它們到達渲染器時,它們將會是原生的 DOM MessagePort 物件。

例如:

// Main process
const win = new BrowserWindow()
const { port1, port2 } = new MessageChannelMain()
win.webContents.postMessage('port', { message: 'hello' }, [port1])

// Renderer process
ipcRenderer.on('port', (e, msg) => {
const [port] = e.ports
// ...
})

contents.enableDeviceEmulation(parameters)

  • parameters 物件
    • screenPosition string - 指定要模擬的螢幕類型 (預設值:desktop)
      • desktop - 桌上型電腦螢幕類型。
      • mobile - 行動裝置螢幕類型。
    • screenSize Size - 設定模擬的螢幕大小 (screenPosition == mobile)。
    • viewPosition Point - 將視圖定位在螢幕上 (screenPosition == mobile) (預設值:{ x: 0, y: 0 })。
    • deviceScaleFactor Integer - 設定裝置縮放比例 (如果為零,則預設為原始裝置縮放比例) (預設值:0)。
    • viewSize Size - 設定模擬的視圖大小 (空值表示不覆寫)
    • scale Float - 模擬視圖在可用空間內的縮放比例 (不在符合視圖模式中) (預設值:1)。

使用給定的參數啟用裝置模擬。

contents.disableDeviceEmulation()

停用 webContents.enableDeviceEmulation 啟用的裝置模擬。

contents.sendInputEvent(inputEvent)

將輸入 event 傳送到頁面。注意: 包含內容的 BrowserWindow 需要被聚焦,sendInputEvent() 才能運作。

contents.beginFrameSubscription([onlyDirty ,]callback)

  • onlyDirty boolean (選用) - 預設值為 false
  • callback 函式

開始訂閱呈現事件和捕獲的框架,當有呈現事件時,將使用 callback(image, dirtyRect) 呼叫 callback

imageNativeImage 的實例,用於儲存捕獲的框架。

dirtyRect 是一個具有 xywidthheight 屬性的物件,用於描述頁面的哪些部分被重新繪製。如果將 onlyDirty 設定為 true,則 image 將僅包含重新繪製的區域。onlyDirty 預設值為 false

contents.endFrameSubscription()

結束訂閱框架呈現事件。

contents.startDrag(item)

  • item 物件
    • file string - 要拖曳的檔案路徑。
    • files string[] (選用) - 要拖曳的檔案路徑。(files 將覆寫 file 欄位)
    • icon NativeImage | string - 圖片在 macOS 上必須為非空值。

item 設定為當前拖放操作的拖曳項目,file 是要拖曳的檔案的絕對路徑,icon 是拖曳時顯示在游標下的圖片。

contents.savePage(fullPath, saveType)

  • fullPath string - 絕對檔案路徑。
  • saveType string - 指定儲存類型。
    • HTMLOnly - 僅儲存頁面的 HTML。
    • HTMLComplete - 儲存完整的 HTML 頁面。
    • MHTML - 將完整的 HTML 頁面儲存為 MHTML。

返回 Promise<void> - 如果頁面已儲存,則解析。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

win.loadURL('https://github.com')

win.webContents.on('did-finish-load', async () => {
win.webContents.savePage('/tmp/test.html', 'HTMLComplete').then(() => {
console.log('Page was saved successfully.')
}).catch(err => {
console.log(err)
})
})

contents.showDefinitionForSelection() macOS

顯示彈出式字典,在頁面上搜尋選取的單字。

contents.isOffscreen()

返回 boolean - 指示是否啟用離屏渲染

contents.startPainting()

如果啟用離屏渲染且未繪製,則開始繪製。

contents.stopPainting()

如果啟用離屏渲染且正在繪製,則停止繪製。

contents.isPainting()

返回 boolean - 如果啟用離屏渲染,則返回它目前是否正在繪製。

contents.setFrameRate(fps)

  • fps Integer

如果啟用離屏渲染,則將影格速率設定為指定的數字。只接受 1 到 240 之間的值。

contents.getFrameRate()

返回 Integer - 如果啟用離屏渲染,則返回當前影格速率。

contents.invalidate()

排程此網頁內容所在的視窗的完整重繪。

如果啟用離屏渲染,則使影格無效,並透過 'paint' 事件產生新的影格。

contents.getWebRTCIPHandlingPolicy()

返回 string - 返回 WebRTC IP 處理原則。

contents.setWebRTCIPHandlingPolicy(policy)

  • policy string - 指定 WebRTC IP 處理原則。
    • default - 公開使用者的公用和本機 IP。這是預設行為。當使用此原則時,WebRTC 有權枚舉所有介面並將它們綁定以探索公用介面。
    • default_public_interface_only - 公開使用者的公用 IP,但不公開使用者的本機 IP。當使用此原則時,WebRTC 應僅使用 http 使用的預設路由。這不會公開任何本機位址。
    • default_public_and_private_interfaces - 公開使用者的公用和本機 IP。當使用此原則時,WebRTC 應僅使用 http 使用的預設路由。這也會公開相關聯的預設私有位址。預設路由是多宿主端點上由作業系統選擇的路由。
    • disable_non_proxied_udp - 不公開公用或本機 IP。當使用此原則時,WebRTC 應僅使用 TCP 來聯絡對等點或伺服器,除非代理伺服器支援 UDP。

設定 WebRTC IP 處理原則可讓您控制透過 WebRTC 公開哪些 IP。請參閱 BrowserLeaks 以瞭解更多詳細資訊。

contents.getWebRTCUDPPortRange()

返回 Object

  • min Integer - WebRTC 應使用的最小 UDP 連接埠號碼。
  • max Integer - WebRTC 應使用的最大 UDP 連接埠號碼。

預設情況下,此值為 { min: 0, max: 0 },這表示不會對 UDP 連接埠範圍施加任何限制。

contents.setWebRTCUDPPortRange(udpPortRange)

  • udpPortRange 物件
    • min Integer - WebRTC 應使用的最小 UDP 連接埠號碼。
    • max Integer - WebRTC 應使用的最大 UDP 連接埠號碼。

設定 WebRTC UDP 連接埠範圍允許您限制 WebRTC 使用的 UDP 連接埠範圍。預設情況下,連接埠範圍不受限制。注意:若要重設為不受限制的連接埠範圍,此值應設為 { min: 0, max: 0 }

contents.getMediaSourceId(requestWebContents)

  • requestWebContents WebContents - 將註冊 ID 的網頁內容。

傳回 string - 網頁內容串流的識別碼。此識別碼可與 navigator.mediaDevices.getUserMedia 搭配使用,使用 tabchromeMediaSource。此識別碼僅限於註冊的網頁內容,且僅有效 10 秒。

contents.getOSProcessId()

傳回 Integer - 相關渲染器程序的作業系統 pid

contents.getProcessId()

傳回 Integer - 相關渲染器的 Chromium 內部 pid。可以與 frame 特定導覽事件 (例如 did-frame-navigate) 傳遞的 frameProcessId 進行比較。

contents.takeHeapSnapshot(filePath)

  • filePath string - 輸出檔案的路徑。

傳回 Promise<void> - 指示是否已成功建立快照。

擷取 V8 堆積快照並將其儲存至 filePath

contents.getBackgroundThrottling()

傳回 boolean - 當頁面移至背景時,此 WebContents 是否會節流動畫和計時器。這也會影響頁面可見性 API。

contents.setBackgroundThrottling(allowed)

歷史記錄
  • allowed boolean

控制當頁面移至背景時,此 WebContents 是否會節流動畫和計時器。這也會影響頁面可見性 API。

contents.getType()

傳回 string - 網頁內容的類型。可以是 backgroundPagewindowbrowserViewremotewebviewoffscreen

contents.setImageAnimationPolicy(policy)

  • policy string - 可以是 animateanimateOncenoAnimation

設定此網頁內容的影像動畫原則。此原則僅影響影像,目前正在動畫的現有影像不受影響。這是 Chromium 中已知的限制,您可以使用 img.src = img.src 強制重新計算影像動畫,這不會導致網路流量,但會更新動畫原則。

這對應於 Chromium 中的 animationPolicy 無障礙功能。

實例屬性

contents.ipc 唯讀

一個 IpcMain,其範圍僅限於從此 WebContents 傳送的 IPC 訊息。

使用 ipcRenderer.sendipcRenderer.sendSyncipcRenderer.postMessage 傳送的 IPC 訊息將以下列順序傳遞

  1. contents.on('ipc-message')
  2. contents.mainFrame.on(channel)
  3. contents.ipc.on(channel)
  4. ipcMain.on(channel)

使用 invoke 註冊的處理常式將以下列順序檢查。將呼叫定義的第一個處理常式,其餘的將被忽略。

  1. contents.mainFrame.handle(channel)
  2. contents.handle(channel)
  3. ipcMain.handle(channel)

在 WebContents 上註冊的處理常式或事件接聽程式將接收從任何框架傳送的 IPC 訊息,包括子框架。在大多數情況下,只有主框架可以傳送 IPC 訊息。但是,如果啟用 nodeIntegrationInSubFrames 選項,子框架也可以傳送 IPC 訊息。在這種情況下,處理常式應檢查 IPC 事件的 senderFrame 屬性,以確保訊息來自預期的框架。或者,使用 WebFrameMain.ipc 介面,直接在適當的框架上註冊處理常式。

contents.audioMuted

一個 boolean 屬性,決定此頁面是否已靜音。

contents.userAgent

一個 string 屬性,決定此網頁的使用者代理。

contents.zoomLevel

一個 number 屬性,決定此網頁內容的縮放層級。

原始大小為 0,向上或向下遞增分別表示放大或縮小 20%,預設限制分別為原始大小的 300% 和 50%。此公式為 scale := 1.2 ^ level

contents.zoomFactor

一個 number 屬性,決定此網頁內容的縮放係數。

縮放係數是縮放百分比除以 100,因此 300% = 3.0。

contents.frameRate

一個 Integer 屬性,將網頁內容的影格速率設定為指定數字。僅接受 1 到 240 之間的值。

僅在啟用離螢幕渲染時適用。

contents.id 唯讀

一個 Integer,表示此 WebContents 的唯一 ID。每個 ID 在整個 Electron 應用程式的所有 WebContents 執行個體中都是唯一的。

contents.session 唯讀

此網頁內容使用的 Session

contents.navigationHistory 唯讀

此網頁內容使用的 NavigationHistory

contents.hostWebContents 唯讀

一個 WebContents 執行個體,可能擁有此 WebContents

contents.devToolsWebContents 唯讀

一個 WebContents | null 屬性,表示與給定 WebContents 關聯的 DevTools WebContents

注意:使用者永遠不應儲存此物件,因為當 DevTools 關閉時,它可能會變成 null

contents.debugger 唯讀

此網頁內容的 Debugger 執行個體。

contents.backgroundThrottling

歷史記錄

一個 boolean 屬性,決定當頁面移至背景時,此 WebContents 是否會節流動畫和計時器。這也會影響頁面可見性 API。

contents.mainFrame 唯讀

一個 WebFrameMain 屬性,表示頁面框架階層的頂層框架。

contents.opener 唯讀

一個 WebFrameMain 屬性,表示使用 open() 或導覽具有 target 屬性的連結來開啟此 WebContents 的框架。