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
導航到另一個頁面時(而不是頁內導航),將觸發以下事件。
did-start-navigation
will-frame-navigate
will-navigate
(僅在主框架導航時觸發)will-redirect
(僅在導航期間發生重新導向時觸發)did-redirect-navigation
(僅在導航期間發生重新導向時觸發)did-frame-navigate
did-navigate
(僅在主框架導航時觸發)
如果在任何可取消的事件上呼叫 event.preventDefault()
,則不會觸發後續事件。
頁內導航
頁內導航不會導致頁面重新載入,而是導航到目前頁面中的某個位置。這些事件不可取消。對於頁內導航,將依此順序觸發以下事件
框架導航
will-navigate
和 did-navigate
事件僅在 mainFrame 導航時觸發。如果您也想觀察 <iframe>
中的導航,請使用 will-frame-navigate
和 did-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.moveTo
、window.resizeTo
或相關 API 時發出。
預設情況下,這會移動視窗。要阻止此行為,請呼叫 event.preventDefault()
。
事件:'did-create-window'
傳回
window
BrowserWindowdetails
物件url
字串 - 已建立視窗的 URL。frameName
字串 - 在window.open()
呼叫中給予建立視窗的名稱。referrer
Referrer - 將傳遞給新視窗的來源網址。根據參照策略,可能導致或不導致傳送Referer
標頭。postBody
PostBody (選用) - 將傳送至新視窗的 POST 資料,以及將設定的適當標頭。如果沒有要傳送的 POST 資料,則值將為null
。僅當視窗是由設定target=_blank
的表單建立時定義。disposition
字串 - 可以是default
、foreground-tab
、background-tab
、new-window
或other
。
在透過渲染器中的 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.loadURL
和 webContents.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.loadURL
和 webContents.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 導覽為 -1httpStatusText
字串 - 非 HTTP 導覽為空
當完成主框架導覽時發出。
此事件不會為頁內導覽發出,例如點擊錨點連結或更新 window.location.hash
。為此目的使用 did-navigate-in-page
事件。
事件:'did-frame-navigate'
傳回
event
事件url
字串httpResponseCode
整數 - 非 HTTP 導覽為 -1httpStatusText
字串 - 非 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'
傳回
event
事件details
RenderProcessGoneDetails
當渲染器進程意外消失時發出。這通常是因為它崩潰或被殺死。
事件:'unresponsive'
當網頁變得無回應時發出。
事件:'responsive'
當無回應的網頁再次變得有回應時發出。
事件:'plugin-crashed'
傳回
event
事件name
字串version
字串
當外掛程式進程崩潰時發出。
事件:'destroyed'
當 webContents
被銷毀時發出。
事件:'input-event'
傳回
event
事件inputEvent
InputEvent
當輸入事件傳送到 WebContents 時發出。請參閱 InputEvent 以取得詳細資訊。
事件:'before-input-event'
傳回
event
事件input
物件 - 輸入屬性。type
字串 -keyUp
或keyDown
。key
字串 - 等同於 KeyboardEvent.key。code
字串 - 等同於 KeyboardEvent.code。isAutoRepeat
布林值 - 等同於 KeyboardEvent.repeat。isComposing
布林值 - 等同於 KeyboardEvent.isComposing。shift
布林值 - 等同於 KeyboardEvent.shiftKey。control
布林值 - 等同於 KeyboardEvent.controlKey。alt
布林值 - 等同於 KeyboardEvent.altKey。meta
布林值 - 等同於 KeyboardEvent.metaKey。location
數字 - 等同於 KeyboardEvent.location。modifiers
字串陣列 - 請參閱 InputEvent.modifiers。
在頁面中分派 keydown
和 keyup
事件之前發出。呼叫 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
字串 - 可以是in
或out
。
當使用者使用滑鼠滾輪請求變更縮放比例時發出。
事件:'blur'
當 WebContents
失去焦點時發出。
事件:'focus'
當 WebContents
獲得焦點時發出。
請注意,在 macOS 上,擁有焦點意味著 WebContents
是視窗的第一響應者,因此在視窗之間切換焦點不會觸發 WebContents
的 focus
和 blur
事件,因為每個視窗的第一響應者並未變更。
WebContents
的 focus
和 blur
事件僅應用於偵測同一視窗中不同 WebContents
和 BrowserView
之間的焦點變更。
事件:'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
布林值
當無法驗證 url
的 certificate
時發出。
其用法與 app
的 certificate-error
事件 相同。
事件:'select-client-certificate'
傳回
當請求用戶端憑證時發出。
其用法與 app
的 select-client-certificate
事件 相同。
事件:'login'
傳回
event
事件authenticationResponseDetails
物件url
URL
authInfo
物件isProxy
布林值scheme
字串host
字串port
整數realm
字串
callback
函式username
字串 (選用)password
字串 (選用)
當 webContents
想要執行基本身份驗證時發出。
其用法與 app
的 login
事件 相同。
事件:'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
參數可以是 pointer
、crosshair
、hand
、text
、wait
、help
、e-resize
、n-resize
、ne-resize
、nw-resize
、s-resize
、se-resize
、sw-resize
、w-resize
、ns-resize
、ew-resize
、nesw-resize
、nwse-resize
、col-resize
、row-resize
、m-panning
、m-panning-vertical
、m-panning-horizontal
、e-panning
、n-panning
、ne-panning
、nw-panning
、s-panning
、se-panning
、sw-panning
、w-panning
、move
、vertical-text
、cell
、context-menu
、alias
、progress
、nodrop
、copy
、none
、not-allowed
、zoom-in
、zoom-out
、grab
、grabbing
、custom
、null
、drag-drop-none
、drag-drop-move
、drag-drop-copy
、drag-drop-link
、ns-no-resize
、ew-no-resize
、nesw-no-resize
、nwse-no-resize
或 default
。
如果 type
參數為 custom
,則 image
參數將在 NativeImage
中保存自訂游標圖像,而 scale
、size
和 hotspot
將保存有關自訂游標的其他資訊。
事件:'context-menu'
傳回
event
事件params
物件x
整數 - x 座標。y
整數 - y 座標。frame
WebFrameMain | null - 呼叫上下文選單的框架。如果框架在導航或被銷毀後被存取,則可能為null
。linkURL
字串 - 包含呼叫上下文選單的節點的連結網址。linkText
字串 - 與連結關聯的文字。如果連結的內容是圖片,則可能為空字串。pageURL
字串 - 呼叫上下文選單的頂層頁面網址。frameURL
字串 - 呼叫上下文選單的子框架網址。srcURL
字串 - 呼叫上下文選單的元素的來源網址。具有來源網址的元素是圖片、音訊和影片。mediaType
字串 - 呼叫上下文選單的節點類型。可以是none
、image
、audio
、video
、canvas
、file
或plugin
。hasImageContents
布林值 - 上下文選單是否在具有非空內容的圖片上呼叫。isEditable
布林值 - 上下文是否可編輯。selectionText
字串 - 呼叫上下文選單的選取文字。titleText
字串 - 呼叫上下文選單的選取文字的標題文字。altText
字串 - 呼叫上下文選單的選取文字的替代文字。suggestedFilename
字串 - 當透過上下文選單的「另存連結為」選項儲存檔案時建議使用的檔案名稱。selectionRect
矩形 - 表示選取範圍在文件空間中的座標的矩形。selectionStartOffset
數字 - 選取文字的起始位置。referrerPolicy
參照 - 呼叫選單的框架的參照政策。misspelledWord
字串 - 游標下的拼寫錯誤單字(如果有)。dictionarySuggestions
字串[] - 用於向使用者顯示以取代misspelledWord
的建議單字陣列。僅當存在拼寫錯誤的單字且啟用拼寫檢查器時才可用。frameCharset
字串 - 呼叫選單的框架的字元編碼。formControlType
字串 - 呼叫上下文選單的來源。可能的值包括none
、button-button
、field-set
、input-button
、input-checkbox
、input-color
、input-date
、input-datetime-local
、input-email
、input-file
、input-hidden
、input-image
、input-month
、input-number
、input-password
、input-radio
、input-range
、input-reset
、input-search
、input-submit
、input-telephone
、input-text
、input-time
、input-url
、input-week
、output
、reset-button
、select-list
、select-list
、select-multiple
、select-one
、submit-button
和text-area
。spellcheckEnabled
布林值 - 如果上下文可編輯,是否啟用拼寫檢查。menuSourceType
字串 - 呼叫上下文選單的輸入來源。可以是none
、mouse
、keyboard
、touch
、touchMenu
、longPress
、longTap
、touchHandle
、stylus
、adjustSelection
或adjustSelectionReset
。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'
傳回
event
事件devices
BluetoothDevice[]callback
函式deviceId
string
當呼叫 navigator.bluetooth.requestDevice
時,需要選擇藍牙裝置時觸發。應使用要選擇的裝置的 deviceId
呼叫 callback
。將空字串傳遞給 callback
將會取消請求。
如果未為此事件新增事件監聽器,或者在處理此事件時未呼叫 event.preventDefault
,則會自動選擇第一個可用的裝置。
由於藍牙的特性,當呼叫 navigator.bluetooth.requestDevice
時,掃描裝置可能需要時間,並且會多次觸發 select-bluetooth-device
,直到使用裝置 ID 或空字串呼叫 callback
以取消請求為止。
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.useSharedTexture
為true
時,幀的 GPU 共用紋理。
dirtyRect
Rectangleimage
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。依序對應verbose
、info
、warning
和error
。message
string - 實際的控制台訊息line
Integer - 觸發此控制台訊息的來源行號sourceId
string
當相關視窗記錄控制台訊息時觸發。
事件:'preload-error'
傳回
event
事件preloadPath
stringerror
Error
當預載腳本 preloadPath
擲出未處理的例外狀況 error
時觸發。
事件:'ipc-message'
傳回
event
IpcMainEventchannel
string...args
any[]
當渲染器程序透過 ipcRenderer.send()
送出非同步訊息時觸發。
另請參閱 webContents.ipc
,它提供一個類似 IpcMain
的介面,用於回應來自此 WebContents 的特定 IPC 訊息。
事件:'ipc-message-sync'
傳回
event
IpcMainEventchannel
string...args
any[]
當渲染器程序透過 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
字串
傳回 Promise<void>
- 當頁面載入完成時(請參閱 did-finish-load
),Promise 會解析,如果頁面載入失敗(請參閱 did-fail-load
),Promise 會拒絕。已附加一個 noop 拒絕處理程式,以避免未處理的拒絕錯誤。
在視窗中載入 url
。url
必須包含協定前綴,例如 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
傳回 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
字串
啟動下載 url
處的資源,而不進行導覽。將會觸發 session
的 will-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
字串
傳回 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
字串 - 可以是default
、foreground-tab
、background-tab
、new-window
或other
。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
numbermaximumLevel
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
Integery
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)
依據指定的量調整焦點框架中目前文字選取範圍的起點和終點。負數會將選取範圍移向文件的開頭,正數則將選取範圍移向文件的結尾。
範例
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 })
之前

之後

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 - 要搜尋的內容,不能為空。
返回 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])
callback
Function (選用)success
boolean - 指示列印呼叫是否成功。failureReason
string - 如果列印失敗時回呼的錯誤描述。
當傳遞自訂的 pageSize
時,Chromium 會嘗試驗證平台特定的 width_microns
和 height_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)
傳回 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,包括 BrowserWindow
、BrowserView
和 <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 的範例
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])
開啟 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 在 undocked
或 detach
模式下開啟時,才會顯示此標題。
contents.setDevToolsTitle(title)
title
字串
將 DevTools 視窗的標題變更為 title
。僅當 DevTools 在 undocked
或 detach
模式下開啟時,才會顯示此標題。
contents.toggleDevTools()
切換開發人員工具。
contents.inspectElement(x, y)
x
Integery
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
stringmessage
anytransfer
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)
inputEvent
MouseInputEvent | MouseWheelInputEvent | KeyboardInputEvent
將輸入 event
傳送到頁面。注意: 包含內容的 BrowserWindow
需要被聚焦,sendInputEvent()
才能運作。
contents.beginFrameSubscription([onlyDirty ,]callback)
onlyDirty
boolean (選用) - 預設值為false
。callback
函式image
NativeImagedirtyRect
Rectangle
開始訂閱呈現事件和捕獲的框架,當有呈現事件時,將使用 callback(image, dirtyRect)
呼叫 callback
。
image
是 NativeImage 的實例,用於儲存捕獲的框架。
dirtyRect
是一個具有 x
、y
、width
、height
屬性的物件,用於描述頁面的哪些部分被重新繪製。如果將 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
搭配使用,使用 tab
的 chromeMediaSource
。此識別碼僅限於註冊的網頁內容,且僅有效 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
- 網頁內容的類型。可以是 backgroundPage
、window
、browserView
、remote
、webview
或 offscreen
。
contents.setImageAnimationPolicy(policy)
policy
string - 可以是animate
、animateOnce
或noAnimation
。
設定此網頁內容的影像動畫原則。此原則僅影響新影像,目前正在動畫的現有影像不受影響。這是 Chromium 中已知的限制,您可以使用 img.src = img.src
強制重新計算影像動畫,這不會導致網路流量,但會更新動畫原則。
這對應於 Chromium 中的 animationPolicy 無障礙功能。
實例屬性
contents.ipc
唯讀
一個 IpcMain
,其範圍僅限於從此 WebContents 傳送的 IPC 訊息。
使用 ipcRenderer.send
、ipcRenderer.sendSync
或 ipcRenderer.postMessage
傳送的 IPC 訊息將以下列順序傳遞
contents.on('ipc-message')
contents.mainFrame.on(channel)
contents.ipc.on(channel)
ipcMain.on(channel)
使用 invoke
註冊的處理常式將以下列順序檢查。將呼叫定義的第一個處理常式,其餘的將被忽略。
contents.mainFrame.handle(channel)
contents.handle(channel)
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 的框架。