此快速參考備(bei)忘單提供了 Electron v21 API 說明和使用示例
是一個(ge)使用 JavaScript、HTML 和(he) CSS 構建桌面應用程序的框架
安裝
mkdir my-app && cd my-app
npm init
在項目根目錄會生成 package.json
{
"name": "my-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}
安裝依賴包
npm install --save-dev electron
添加開(kai)發模式打(da)開(kai)您的應用命令
"scripts": {
"start": "electron ."
}
運行命令,啟(qi)動應用(yong)程序
npm start
入口都是 main
文(wen)件(jian)。這個(ge)文(wen)件(jian)控(kong)制了(le)主進程,它運行在(zai)一個(ge)完整的Node.js環境中
創建 index.html
頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- //developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
窗口中打開您的頁面
const {
app,
BrowserWindow
} = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
});
win.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
const win = new BrowserWindow({
frame: false
})
const win = new BrowserWindow({
titleBarStyle: 'hidden'
})
const win = new BrowserWindow({
titleBarStyle: 'customButtonsOnHover'
})
創建(jian)一個(ge)名(ming)為(wei) preload.js 的新腳本如下
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
在創建窗口方法中傳遞 preload
參數
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld(
'versions', {
// 能暴露的不僅僅是函(han)數,我們(men)還可以暴露變量
node:
() => process.versions.node,
chrome:
() => process.versions.chrome,
electron:
() => process.versions.electron,
}
);
通過 preload.js
腳本將 versions
這一全局變(bian)量暴露給渲染器
const myWindow = new BrowserWindow({
webPreferences: {
spellcheck: true
}
})
設(she)置拼寫檢查(cha)器以檢查(cha)英語(yu) 和(he) 法語(yu)
myWindow.session
.setSpellCheckerLanguages([
'en-US', 'fr'
])
const { app } = require('electron');
app.on('session-created', (session) => {
console.log(session);
})
// 立即(ji)重啟當前實(shi)例(li)并向新的實(shi)例(li)添加(jia)新的命(ming)令行參數的示例(li)
app.relaunch({
args: process.argv.slice(1).concat(['--relaunch']);
})
app.exit(0);
:- | :- |
---|---|
quit | 嘗試關閉所有窗口 |
exit | 使用 exitCode 立即退出 |
relaunch | 當前實例退出,重啟應用 |
isReady | 已完成初始化返回 boolean |
whenReady | 初始化完成 |
focus | 獲得焦點/激活的 app |
hide | 隱藏所有的應用窗口,不是最小化 |
isHidden (mac) | 所有窗口是否都被隱藏 |
show (mac) | 顯示隱藏后的應用程序窗口 |
setAppLogsPath | 設置或創建一個您的應用程序日志目錄 |
getAppPath | 獲取當前應用程序目錄 |
getPath(name) | 與 name 關聯的目錄或文件的路徑 |
getFileIcon | 一個 NativeImage 類型的應用圖標 |
setPath(name) | 重寫 name 的路徑特定文件夾或文件 |
getVersion | 應用程序的版本號 |
getName | 應用程序的名稱 |
setName | 設置當前應用程序的名字 |
getLocale | 當前應用程序區域 |
getLocaleCountryCode | 獲取雙字母 國家代碼 |
getSystemLocale | 當前系統語言環境 |
addRecentDocument (win/mac) | 最近打開的文件列表添加新路徑 |
clearRecentDocuments (win/mac) | 清空最近打開的文檔列表 |
setAsDefaultProtocolClient | 設置協議(URI scheme)默認處理程序 |
removeAsDefaultProtocolClient | 移除默認處理器 |
isDefaultProtocolClient | 可執行程序是否是協議 |
getApplicationNameForProtocol | 返回默認處理器的應用程序名稱 |
getApplicationInfoForProtocol (win/mac) | 返回包含應用程序名稱 |
setUserTasks (win) | 添加 tasks 到Jump List的Tasks類別 |
getJumpListSettings (win) | 獲取跳轉列表 |
setJumpList (win) | 設置跳轉列表 |
requestSingleInstanceLock | 返回應用程序實例是否成功取了鎖 |
hasSingleInstanceLock | 返回應用實例當前是否持有單例鎖 |
releaseSingleInstanceLock | 釋放所有創建的鎖 |
setUserActivity (mac) | 創建 NSUserActivity 并將其設置為當前活動 |
getCurrentActivityType (mac) | 正在運行的 activity 的類型 |
invalidateCurrentActivity (mac) | 使當前的Handoff用戶活動無效 |
resignCurrentActivity (mac) | 將當前 Handoff 用戶活動標記為非活動,但不使其失效 |
updateCurrentActivity (mac) | 將項目從 用戶信息 合并到其當前 用戶信息 字典中 |
setAppUserModelId (win) | 改變當前應用的 Application User Model ID 為 id |
setActivationPolicy (mac) | 為給定應用設置激活策略 |
importCertificate (linux) | 將 pkcs12 格式的證書導入到平臺證書庫 |
configureHostResolver | 配置主機解析器 (DNS 和 DNS-over-HTTPS) |
disableHardwareAcceleration | 禁用當前應用程序的硬件加速 |
disableDomainBlockingFor3DAPIs | GPU 進程頻繁崩潰,在每個域的基礎上重新啟動,禁用該行為 |
getAppMetrics | 返回 |
getGPUFeatureStatus | 返回 |
getGPUInfo | GPU 信息 |
setBadgeCount (mac/linux) | 應用設置計數器角標 |
getBadgeCount (mac/linux) | 獲取計數器(badge)顯示的當前值 |
isUnityRunning (linux) | 前桌面環境是否為 Unity 啟動器 |
getLoginItemSettings (mac/win) | 為 openAtLogin 設置相同的參數已確保正確的設置 |
setLoginItemSettings (mac/win) | 傳遞指定應用程序名稱的參數 |
isAccessibilitySupportEnabled (mac/win) | 是否開啟了輔助功能 |
setAccessibilitySupportEnabled (mac/win) | 啟用或禁用訪問權限樹視圖 |
showAboutPanel | 顯示程序的"關于"面板選項 |
setAboutPanelOptions | 設置 "關于" 面板選項 |
isEmojiPanelSupported | 當前操作系統是否支持本地 emoji 選擇器 |
showEmojiPanel (mac/win) | 打開系統自身的emjio選取器 |
startAccessingSecurityScopedResource (mac) | 開始訪問安全范圍內的資源 |
enableSandbox | 在應用程序上啟用完全沙盒模式 |
isInApplicationsFolder (mac) | 是否從系統應用程序文件夾運行 |
moveToApplicationsFolder (mac) | |
isSecureKeyboardEntryEnabled (mac) | 是否已啟用安全鍵盤輸入 |
setSecureKeyboardEntryEnabled (mac) | 在應用中啟用安全鍵盤輸入 |
const { app } = require('electron');
let myWindow = null;
const additionalData = { myKey: 'myValue' };
const gotTheLock = app.requestSingleInstanceLock(additionalData);
if (!gotTheLock) {
app.quit();
} else {
app.on(
'second-instance',
(event, commandLine, workingDirectory, additionalData) => {
// 輸出從第二個實例中接收到的數據(ju)
console.log(additionalData);
// 有人試圖運行第二個實(shi)例(li),我們(men)應該關注我們(men)的(de)窗口
if (myWindow) {
if (myWindow.isMinimized()) myWindow.restore();
myWindow.focus();
}
}
)
// 創(chuang)建 myWindow, 加載應用的其余部分, etc...
app.whenReady().then(() => {
myWindow = createWindow();
})
}
:- | :- |
---|---|
will-finish-launching | 基礎的啟動的時候被觸發 |
ready | 完成初始化時,觸發一次 |
window-all-closed | 在程序關閉窗口前發信號 |
before-quit | 當所有窗口被關閉后觸發,應用程序將退出 |
will-quit | 所有窗口被關閉后觸發,應用程序將退出 |
quit | 在應用程序退出時觸發 |
open-file (mac) | 在應用中打開一個文件時觸發 |
open-url (mac) | 應用中打開一個 URL 時觸發 |
activate (mac) | 當應用被激活時觸發 |
did-become-active (mac) | 不同設備的活動想要恢復時在切換期間觸發 |
continue-activity (mac) | 不同設備的活動通過 Handoff 想要恢復時觸發 |
will-continue-activity (mac) | 恢復來自不同設備的活動之前在切換期間觸發 |
continue-activity-error (mac) | 不同設備的活動無法恢復時在切換期間觸發 |
activity-was-continued (mac) | 活動在另一個設備上成功恢復后切換期間觸發 |
update-activity-state (mac) | 當即將在另一臺設備上恢復切換時觸發 |
new-window-for-tab (mac) | 用戶點擊原生的 macOS 新標簽按鈕時觸發 |
browser-window-blur | 當 browserWindow 變得模糊時觸發 |
browser-window-focus | 當 browserWindow 獲得焦點時觸發 |
browser-window-created | 創建新的 browserWindow 時觸發 |
web-contents-created | 創建新的 webContents 時觸發 |
certificate-error | 當對 url 的 certificate 證書驗證失敗觸發 |
select-client-certificate | 當一個客戶證書被請求的時候發出 |
login | 當 webContents 要進行基本身份驗證時觸發 |
gpu-info-update | 每當有 GPU 信息更新時觸發 |
gpu-process-crashed | 當 gpu 進程崩潰或關閉(殺死)時觸發 |
renderer-process-crashed | 渲染器進程崩潰或關閉(殺死)時觸發 |
render-process-gone | 渲染器進程意外消失時觸發 |
child-process-gone | 子進程意外消失時觸發 |
accessibility-support-changed | 當 Chrome 的輔助功能狀態改變時觸發 |
session-created | 創建了一個新的 session 后被觸發 |
second-instance | 在你的應用程序的首個實例中觸發 |
:- | :- |
---|---|
accessibilitySupportEnabled (mac/win) | 是否開啟了輔助功能 |
applicationMenu | 傳遞 Menu 來給此屬性賦值 |
badgeCount (mac/linux) | 返回應用角標計數的 Integer 屬性 |
commandLine | Chromium 使用的命令行參數 |
dock (mac/只讀) | 用戶dock中對應用圖標進行操作 |
isPackaged (只讀) | 應用是否已經打包 |
name | 當前應用程序的名稱 |
userAgentFallback | 全局回退的用戶代理字符串 |
runningUnderRosettaTranslation | 提示下載應用程序的 arm64 版本 |
runningUnderARM64Translation (mac/win) | 前應用正在使用 ARM64 運行環境 |
:- | :- |
---|---|
width 整數 | 窗口的寬度(以像素為單位)。默認值 (800) |
height 整數 | 窗口的高度(以像素為單位)。默認值 (600) |
x 整數 (可選) | 窗口相對于屏幕左側偏移量。默認值窗口居中 |
y 整數 (可選) | 窗口相對于屏幕頂端偏移量。默認值窗口居中 |
useContentSize boolean | (寬) 和 (高) 設置為web頁面的尺寸。默認值 (false) |
center boolean | 窗口是否在屏幕居中。默認值 (false) |
minHeight 整數 | 窗口的最小高度。默認值 (0) |
maxWidth 整數 | 窗口的最大寬度。默認值不限 |
maxHeight 整數 | 窗口的最大高度。默認值不限 |
resizable boolean | 窗口大小是否可調整。默認值 (true) |
movable boolean (win/mac) | 窗口是否可移動。默認值 (true) |
minimizable boolean (win/mac) | 窗口是否可最小化。默認值 (true) |
maximizable boolean (win/mac) | 窗口是否最大化。默認值 (true) |
closable boolean (win/mac) | 窗口是否可關閉。默認值 (true) |
focusable boolean | 窗口是否可以聚焦. 默認值 (true)。在 Windows 中設置 (focusable: false) 也意味著設置了 (skipTaskbar: true) 在 Linux 中設置 (focusable: false) 時窗口停止與 wm 交互, 并且窗口將始終置頂 |
alwaysOnTop boolean | 窗口是否永遠在別的窗口的上面。默認值 (false) |
fullscreen boolean | 窗口是否全屏。為 (false) 時 macOS 上按鈕將被隱藏或禁用。默認值 (false) |
fullscreenable boolean | 窗口是否可以進入全屏狀態。macOS上,最大化/縮放按鈕是否可用 默認值 (true) |
simpleFullscreen boolean (mac) | 在 macOS 上使用 pre-Lion 全屏。默認值 (false) |
skipTaskbar boolean (win/mac) | 是否在任務欄中顯示窗口。默認值 (false) |
kiosk boolean | 窗口是否進入kiosk模式。默認值 (false) |
title string | 默認窗口標題 默認為 ("Electron") 。如果由 (loadURL()) 加載的HTML文件中含有標簽 (<title>) ,此屬性將被忽略 |
icon NativeImage/string | 窗口圖標。在 Windows 上推薦使用 (ICO) 圖標來獲得最佳的視覺效果, 默認使用可執行文件的圖標 |
show boolean | 窗口是否在創建時顯示。默認值 (true) |
paintWhenInitiallyHidden boolean | 當 (show) 為 (false) 并且渲染器剛剛被創建時,它是否應激活。為了讓 (document.visibilityState) 在 (show: false) 的情況下第一次加載時正確地工作,你應該把這個設置成 (false)。設置為 (false) 將會導致 (ready-to-show) 事件不觸發。默認值 (true) |
frame boolean | 設置為 (false) 時可以創建一個無邊框窗口,默認值 (true) |
parent BrowserWindow | 指定父窗口 默認值 (null) |
modal boolean | 當前是否為模態窗口。只有當窗口是子窗口時才起作用。默認值 (false) |
acceptFirstMouse boolean (mac) | 點擊 非活動窗口是否會穿透到 web contents。默認值 (false) |
disableAutoHideCursor boolean | 是否在打字時隱藏光標。默認值 (false) |
autoHideMenuBar boolean | 自動隱藏菜單欄,除非按了_(Alt)_鍵。默認值 (false) |
enableLargerThanScreen boolean (mac) | 使窗口尺寸可大于屏幕的大小。其他操作系統默認允許大于屏幕的窗口。默認值 (false) |
backgroundColor string | 窗口背景色,格式為 Hex, RGB, RGBA, HSL, HSLA 或 CSS 命名顏色。如果 (transparent) 設置為 (true),則支持 #AARRGGBB 格式的透明。默認值 (#FFF)(白色) |
hasShadow boolean | 窗口是否有陰影. 默認值 (true) |
opacity number (win/mac) | 設置窗口的初始透明度,在 0.0(全透明)和 1.0(完全不透明)之間 。 目前僅在 Windows 和 macOS上實現。 |
darkTheme boolean | 強制窗口使用深色主題,只在部分GTK+3桌面環境下有效。 默認值 (false). |
transparent boolean | 使窗口 透明。 默認值 (false). 在Windows上,僅在無邊框窗口下起作用。 |
type string | 窗口的類型, 默認為普通窗口. 更多信息見下文 |
visualEffectState string (mac) | 在 macOS 上指定外觀應如何響應窗口活動狀態。 必須與 (vibrancy) 屬性一起使用。 可能的值有 |
visualEffectState.followWindow | 當窗口處于激活狀態時,后臺應自動顯示為激活狀態,當窗口處于非激活狀態時,后臺應自動顯示為非激活狀態。 默認為該值。 |
visualEffectState.active | 后臺應一直顯示為激活狀態。 |
visualEffectState.inactive | 后臺應一直顯示為非激活狀態。 |
titleBarStyle string (win/mac) | 窗口標題欄樣式。默認值 (default) |
titleBarStyle.default | 分別返回 mac 或者 win 的標準標題欄 |
titleBarStyle.hidden | 在一個隱藏的標題欄和一個全尺寸大小的內容窗口中取得結果。 在 macOS 內, 窗口將一直擁有位于左上的標準窗口控制器 (“traffic lights”)。 在 Windows上,當與 (titleBarOverlay: true) 合并時,它將激活窗口控件疊加(詳情請參閱 (titleBarOverlay)),否則將不會顯示窗口控件。 |
titleBarStyle.hiddenInset (mac) | 隱藏標題欄,使用窗口邊緣稍微小的紅綠燈按鈕替代。 |
titleBarStyle.customButtonsOnHover (mac) | 隱藏的標題欄的全尺寸的內容窗口, 紅綠燈按鈕在鼠標懸停在窗口左上方時顯示。**注意:**此選項目前是實驗性的。 |
trafficLightPosition Point (mac) | 在無邊框窗口中設置燈綠燈按鈕位置。 |
roundedCorners boolean (mac) | 無邊框窗口在 macOS 上,是否應該有圓角。 默認值為 (true)。 屬性設置為 (false) ,將阻止窗口是可全屏的。 |
fullscreenWindowTitle | titleBarStyle 設置為 (hiddenInset) 時,在 macOS 全屏模式下標題欄顯示標題。默認值為 (false). |
thickFrame boolean | 對 Windows 上的無框窗口使用 (WS_THICKFRAME) 樣式,會增加標準窗口框架。 設置為 (false) 時將移除窗口的陰影和動畫. 默認值為 (true)。 |
vibrancy string (mac) | 為窗口添加一種類型的動態效果,僅 macOS。 可以是 (appearance-based),(light),(dark),(titlebar),(selection),(menu),(popover),(sidebar),(medium-light),(ultra-dark),(header),(sheet),(window),(hud),(fullscreen-ui),(tooltip),(content),(under-window) 或 (under-page)。 請注意 (appearance-based),(light),(dark),(medium-light) 和 (ultra-dark) 已棄用,在 macOS Catalina (10.15) 中已經移除。 |
zoomToPageWidth boolean (mac) | 在 macOS 上控制,當按住 option 點擊工具欄綠色紅綠燈按鈕或點擊窗口 > 放大菜單項的行為。 如果為 (true),窗口為將會縮放到適合寬度,若為 (false) 將會放大到屏幕寬度。 這也會影響,直接調用 (maximize()) 的行為。 默認值為 (false). |
tabbingIdentifier string (mac) | 選項卡組名稱,允許在原生選擇卡中打開窗口,macOS 10.12+ 支持。 Windows 中,有相同選項卡標識的將會組合在一起。 這會添加一個原生新增選項卡按鈕到你窗口的選項卡欄,同時 (app) 和窗口允許接收 (new-window-for-tab) 事件。 |
webPreferences Object | 網頁功能設置。 |
webPreferences.devTools boolean | 是否開啟 DevTools. 如果設置為 (false), 則無法使用 (BrowserWindow.webContents.openDevTools ()) 打開 DevTools。 默認值為 (true)。 |
webPreferences.nodeIntegration boolean | 是否啟用Node integration. 默認值為 (false). |
webPreferences.nodeIntegrationInWorker boolean | 是否在Web工作器中啟用了Node集成. 默認值為 (false). 更多內容參見 |
webPreferences.nodeIntegrationInSubFrames boolean 實驗性 | 是否允許在子頁面(iframe)或子窗口(child window)中集成Node.js; 預先加載的腳本會被注入到每一個iframe,你可以用 (process.isMainFrame) 來判斷當前是否處于主框架(main frame)中。 |
webPreferences.preload string | 在頁面運行其他腳本之前預先加載指定的腳本 無論頁面是否集成Node, 此腳本都可以訪問所有Node API 腳本路徑為文件的絕對路徑。 當 node integration 關閉時, 預加載的腳本將從全局范圍重新引入node的全局引用標志 |
webPreferences.sandbox boolean | 如果設置該參數, 沙箱的渲染器將與窗口關聯, 使它與Chromium OS-level 的沙箱兼容, 并禁用 Node. js 引擎。 它與 (nodeIntegration) 的選項不同,且預加載腳本的 API 也有限制。 |
webPreferences.session | 設置頁面的 session 而不是直接忽略 Session 對象, 也可用 (partition) 選項來代替,它接受一個 partition 字符串. 同時設置了_(session)_ 和 _(partition)_時, (session) 的優先級更高. 默認使用默認的 session. |
webPreferences.partition | string (optional) - 通過 session 的 partition 字符串來設置界面session. 如果 (partition) 以 (persist:)開頭, 該頁面將使用持續的 session,并在所有頁面生效,且使用同一個(partition). 如果沒有 (persist:) 前綴, 頁面將使用 in-memory session. 通過分配相同的 (partition), 多個頁可以共享同一會話。 默認使用默認的 session. |
webPreferences.zoomFactor number | 頁面的默認縮放系數, (3.0) 表示 (300%)。 默認值為 (1.0). |
webPreferences.javascript boolean | 是否啟用 JavaScript 支持。 默認值為 (true)。 |
webPreferences.webSecurity boolean | 當設置為 (false), 它將禁用同源策略 (通常用來測試網站), 如果此選項不是由開發者設置的,還會把 _(allowRunningInsecureContent)_設置為 (true). 默認值為 (true) |
webPreferences.allowRunningInsecureContent boolean | 允許一個 https 頁面運行來自http url的JavaScript, CSS 或 plugins。 默認值為 (false) |
webPreferences.images boolean | 允許加載圖片。 默認值為 (true) |
webPreferences.imageAnimationPolicy string | 指定如何運行圖像動畫 (比如: GIF等). 可以是 (animate), (animateOnce) 或 (noAnimation)。默認值為 (animate) |
webPreferences.textAreasAreResizable boolean | 允許調整 TextArea 元素大小。 默認值為 (true) |
webPreferences.webgl boolean | 啟用 WebGL 支持。 默認值為 (true) |
webPreferences.plugins boolean | 是否應該啟用插件。 默認值為 (false) |
webPreferences.experimentalFeatures boolean | 啟用 Chromium 的實驗功能。 默認值為 (false) |
webPreferences.scrollBounce boolean (mac) | 啟用滾動回彈(橡皮筋)效果。 默認值為 (false) |
webPreferences.enableBlinkFeatures string | 以 (逗號) 分隔的需要啟用的特性列表,譬如 (CSSVariables,KeyboardEventKey) 在 文件中查看被支持的所有特性 |
webPreferences.disableBlinkFeatures string | 以 (,) 分隔的禁用特性列表, 如 (CSSVariables,KeyboardEventKey) 在 文件中查看被支持的所有特性 |
defaultFontFamily Object | 為 font-family 設置默認字體 |
defaultFontFamily.standard string | 默認值為 (Times New Roman) |
defaultFontFamily.serif string | 默認值為 (Times New Roman) |
defaultFontFamily.sansSerif string | 默認值為 (Arial) |
defaultFontFamily.monospace string | 默認值為 (Courier New) |
defaultFontFamily.cursive string | 默認值為 (Script) |
defaultFontFamily.fantasy string | 默認值為 (Impact) |
defaultFontSize Integer | 默認值為 (16) |
defaultMonospaceFontSize Integer | 默認值為 (13) |
minimumFontSize Integer | 默認值為 (0) |
defaultEncoding string | 默認值為 (ISO-8859-1) |
backgroundThrottling boolean | 是否在頁面成為背景時限制動畫和計時器。 這也會影響到 。默認值為 (true) |
offscreen boolean | 是否繪制和渲染可視區域外的窗口。默認值為 (false)。更多詳情, 請參見 |
contextIsolation boolean | 是否在獨立 JavaScript 環境中運行 Electron API和指定的_(preload)_ 腳本。默認為 (true)。 (預加載)腳本所運行的上下文環境只能訪問其自身專用的 (文檔) 和全局 (窗口),其自身一系列內置的JavaScript ((Array), (Object), (JSON), 等等) 也是如此,這些對于已加載的內容都是不可見的。 Electron API 將只在_(預加載)腳本中可用,在已加載頁面中不可用。 這個選項應被用于加載可能不被信任的遠程內容時來確保加載的內容無法篡改(預加載)_腳本和任何正在使用的Electron api。 該選項使用的是與相同的技術。你可以在開發者工具Console選項卡內頂部組合框中選擇 'Electron Isolated Context'條目來訪問這個上下文 |
webviewTag boolean | 是否啟用 標簽。默認值為 (false)。注意: 為 (< webview>) 配置的 (preload) 腳本在執行時將啟用節點集成, 因此應確保遠程或不受信任的內容無法創建惡意的 (preload) 腳本 。 可以使用 上的 (will-attach-webview) 事件對 (preload) 腳本進行剝離, 并驗證或更改 (<webview>) 的初始設置 |
additionalArguments string[] | strin一個將被附加到當前應用程序的渲染器進程中_(process.argv)_的字符串列表。可用于將少量的數據傳遞到渲染器進程預加載腳本中。 |
safeDialogs boolean | 是否啟用瀏覽器樣式的持續對話框保護。 默認值為 (false) |
safeDialogsMessage string | 當持續對話框保護被觸發時顯示的消息。 如果沒有定義,那么將使用缺省的消息。注意:當前缺省消息是英文,并沒有本地化 |
disableDialogs boolean | 是否完全禁用對話框。 覆蓋 (safeDialogs)。 默認值為 (false) |
navigateOnDragDrop boolean | 將文件或鏈接拖放到頁面上時是否觸發頁面跳轉。 默認值為 (false) |
autoplayPolicy string | 窗口中內容要使用的自動播放策略,值可以是 (no-user-gesture-required), (user-gesture-required), (document-user-activation-required)。默認為 (no-user-gesture-required) |
disableHtmlFullscreenWindowResize boolean | 是否阻止窗口在進入 HTML 全屏時調整大小。默認值為 (false) |
accessibleTitle string | 僅提供給如屏幕讀取器等輔助工具的替代標題字符串。此字符串不直接對用戶可見 |
spellcheck boolean | 是否啟用內置拼寫檢查器。 默認值為 (true) |
enableWebSQL boolean | 是否啟用 。 默認值為 (true) |
v8CacheOptions string | 強制 blink 使用 v8 代碼緩存策略。 可接受的值為: |
v8CacheOptions.none | 禁用代碼緩存 |
v8CacheOptions.code | 基于啟發式代碼緩存 |
v8CacheOptions.bypassHeatCheck | 繞過啟發式代碼緩存,但使用懶編譯。 |
v8CacheOptions.bypassHeatCheckAndEagerCompile | 與上面相同,除了編譯是及時的。 默認策略是 (code) |
enablePreferredSizeMode boolean | 是否啟用首選大小模式。 首選大小是包含文檔布局所需的最小大小--無需滾動。 啟用該屬性將導致在首選大小發生變化時,在 (WebContents) 上觸發 (preferred-size-changed) 事件。默認值為 (false) |
titleBarOverlay Object/Boolean | 當在 macOS 使用無框窗口結合 (win.setWindowButtonVisibility(true)) 或使用 (titleBarStyle) 以便標準窗口控制 (在 macOS為 "traffic lights") 可見,此屬性將啟用 Window Controls Overlay 和 。指定 (true) 將導致覆蓋默認系統顏色。 默認值為 (false) |
color String (win) | 啟用窗口控制時覆蓋面的 CSS 顏色 默認是系統顏色 |
symbolColor String (win) | 啟用時窗口控制中符號的 CSS 顏色 默認是系統顏色 |
height Integer (win/mac) | 標題欄和 Window Controls Overlay,以像素為單位。 默認值為系統高度 |
const { BrowserWindow } = require('electron')
const child = new BrowserWindow({ modal: true, show: false })
child.loadURL('//github.com')
child.once('ready-to-show', () => {
child.show()
})
:- | :- |
---|---|
page-title-updated | 文檔更改標題時觸發 |
close | 在窗口要關閉的時候觸發 |
closed | 在窗口關閉時觸發 |
session-end (win) | 因為強制關機/重啟/會話注銷而導致窗口會話結束時觸發 |
unresponsive | 網頁變得未響應時觸發 |
responsive | 未響應的頁面變成響應時觸發 |
blur | 當窗口失去焦點時觸發 |
focus | 當窗口獲得焦點時觸發 |
show | 當窗口顯示時觸發 |
hide | 當窗口隱藏時觸發 |
ready-to-show | 當頁面已經渲染完成(還沒有顯示)窗口可以被顯示時觸發 |
maximize | 窗口最大化時觸發 |
unmaximize | 當窗口從最大化狀態退出時觸發 |
minimize | 窗口最小化時觸發 |
restore | 當窗口從最小化狀態恢復時觸發 |
will-resize (mac/win) | 調整窗口大小前觸發 |
resize | 調整窗口大小后觸發 |
resized (mac/win) | 當窗口完成調整大小后觸發一次 |
will-move (mac/win) | 窗口移動前觸發 |
move | 窗口移動到新位置時觸發 |
moved (mac/win) | 當窗口移動到新位置時觸發一次 |
enter-full-screen | 窗口進入全屏狀態時觸發 |
leave-full-screen | 窗口離開全屏狀態時觸發 |
enter-html-full-screen | 窗口進入由HTML API 觸發的全屏狀態時觸發 |
leave-html-full-screen | 窗口離開由HTML API觸發的全屏狀態時觸發 |
always-on-top-changed | 設置或取消設置窗口總是在其他窗口的頂部顯示時觸發 |
app-command | 請求一個應用程序命令時觸發 |
scroll-touch-begin (mac) | 滾輪事件階段開始時觸發 |
scroll-touch-end (mac) | 滾輪事件階段結束時觸發 |
scroll-touch-edge (mac) | 滾輪事件階段到達元素邊緣時觸發 |
swipe | 三指滑動時觸發 |
rotate-gesture (mac) | 在觸控板旋轉手勢上觸發 |
sheet-begin (mac) | 窗口打開sheet(工作表) 時觸發 |
sheet-end (mac) | 窗口關閉sheet(工作表) 時觸發 |
new-window-for-tab (mac) | 當點擊了系統的新標簽按鈕時觸發 |
system-context-menu (win) | 當系統上下文菜單在窗口上觸發時觸發 |
:- | :- |
---|---|
win.destroy() | 強制關閉窗口 |
win.close() | 嘗試關閉窗口 |
win.focus() | 聚焦于窗口 |
win.blur() | 取消窗口的聚焦 |
win.isFocused() | 判斷窗口是否聚焦 |
win.isDestroyed() | 判斷窗口是否被銷毀 |
win.show() | 顯示并聚焦于窗口 |
win.showInactive() | 顯示但不聚焦于窗口 |
win.hide() | 隱藏窗口 |
win.isVisible() | 判斷窗口是否可見 |
win.isModal() | 判斷是否為模態窗口 |
win.maximize() | 最大化窗口 |
win.unmaximize() | 取消窗口最大化 |
win.isMaximized() | 判斷窗口是否最大化 |
win.minimize() | 最小化窗口 |
win.restore() | 窗口最小化狀態恢復到以前的狀態 |
win.isMinimized() | 判斷窗口是否最小化 |
win.setFullScreen(flag) | 設置窗口是否應處于全屏模式 |
win.isFullScreen() | 窗口當前是否已全屏 |
win.setSimpleFullScreen(flag) (mac) | 進入或離開簡單的全屏模式 |
win.isSimpleFullScreen() | 窗口是否為簡單全屏模式(pre-Lion) |
win.isNormal() | 窗口是否處于正常狀態(未最大化,未最小化,不在全屏模式下) |
win.setAspectRatio(aspectRatio[, extraSize]) | 為內容視圖保持的寬高比 |
win.setBackgroundColor(backgroundColor) | 顏色,格式為 Hex,RGB,RGBA,HSL,HSLA 或 CSS 命名顏色 |
win.previewFile(path[, displayName]) (mac) | 要用 QuickLook 預覽的文件的絕對路徑 |
win.closeFilePreview() (mac) | 關閉當前打開的 |
win.setBounds(bounds[, animate]) | 重置窗口,并且移動窗口到指定的位置 |
win.getBounds() | 表示窗口的 bounds |
win.getBackgroundColor() | 格式獲取窗口的背景色,格式為 Hex (#RRGGBB ) |
win.setContentBounds(bounds[, animate]) | 調整窗口的工作區 (如網頁) 的大小并將其移動到所提供的邊界。 |
win.getContentBounds() | 窗口客戶端區域的 bounds 對象 |
win.getNormalBounds() | 包含正常狀態下的窗口大小 |
win.setEnabled(enable) | 禁用或者啟用窗口 |
win.isEnabled() | 窗口是否啟用 |
win.setSize(width, height[, animate]) | 調整窗口的 width 和 height |
win.getSize() | 包含窗口的寬度和高度 |
win.setContentSize(width, height[, animate]) | 將窗口的工作區 (如網頁) 的大小調整為 width 和 height |
win.getContentSize() | 包含窗口的寬度和高度 |
win.setMinimumSize(width, height) | 設置窗口最小化的 width 和 height |
win.getMinimumSize() | 包含窗口最小化的寬度和高度 |
win.setMaximumSize(width, height) | 設置窗口最大化的 width 和 height |
win.getMaximumSize() | 包含窗口最大化的寬度和高度 |
win.setResizable(resizable) | 設置用戶是否可以手動調整窗口大小 |
win.isResizable() | 用戶是否可以手動調整窗口大小 |
win.setMovable(movable) (mac/win) | 設置用戶是否可以移動窗口 |
win.isMovable() (mac/win) | 窗口是否可以被用戶拖動,在 Linux 上總是返回 true |
win.setMinimizable(minimizable) (mac/win) | 設置用戶是否可以手動將窗口最小化 |
win.isMinimizable() (mac/win) | 用戶是否可以手動最小化窗口 |
win.setMaximizable(maximizable) (mac/win) | 設置用戶是否可以手動最大化窗口 |
win.isMaximizable() (mac/win) | 窗口是否可以最大化 |
win.setFullScreenable(fullscreenable) | 設置最大化/縮放窗口按鈕是切換全屏模式還是最大化窗口 |
win.isFullScreenable() | 最大化/縮放窗口按鈕是切換全屏模式還是最大化窗口 |
win.setClosable(closable) (mac/win) | 設置用戶是否可以手動關閉窗口。 在Linux上不起作用 |
win.isClosable() (mac/win) | 窗口是否被用戶關閉了 |
win.setAlwaysOnTop(flag[, level][, relativeLevel]) | 設置窗口是否應始終顯示在其他窗口的前面 |
win.isAlwaysOnTop() | 當前窗口是否始終在其它窗口之前 |
win.moveAbove(mediaSourceId) | 將窗口按z軸順序移動到源窗口前面 |
win.moveTop() | 無論焦點如何, 將窗口移至頂端(z軸上的順序) |
win.center() | 將窗口移動到屏幕中央 |
win.setPosition(x, y[, animate]) | 將窗口移動到 x 和 y |
win.getPosition() | 返回一個包含當前窗口位置的數組 |
win.setTitle(title) | 將原生窗口的標題更改為 title |
win.getTitle() | 網頁的標題可以與原生窗口的標題不同 |
win.setSheetOffset(offsetY[, offsetX]) (mac/win) | 改變macOS上sheet組件的附著點,默認情況下,sheet貼在窗口邊框正下方 |
win.flashFrame(flag) | 啟動或停止閃爍窗口, 以吸引用戶的注意 |
win.setSkipTaskbar(skip) (mac/win) | 使窗口不顯示在任務欄中 |
win.setKiosk(flag) | 進入或離開 kiosk 模式 |
win.isKiosk() | 判斷窗口是否處于kiosk模式 |
win.isTabletMode() (win) | 此 API 返回 窗口是否在平板電腦模式下,并且 調整大小 事件可以用于監聽對平板模式的更改 |
win.getMediaSourceId() | DesktopCapturerSource 的 id 格式的窗口 id |
win.getNativeWindowHandle() | 窗口的平臺特定句柄 |
win.hookWindowMessage(message, callback) (win) | 鉤住窗口消息。 當消息到達 WndProc 時調用 callback |
win.isWindowMessageHooked(message) (win) | 返回 boolean - true 或false,具體取決于是否鉤掛了消息 |
win.unhookWindowMessage(message) (win) | 取消窗口信息的鉤子 |
win.unhookAllWindowMessages() (win) | 取消所有窗口信息的鉤子 |
win.setRepresentedFilename(filename) (mac) | 設置窗口所代表的文件的路徑名,并且將這個文件的圖標放在窗口標題欄上 |
win.getRepresentedFilename() (mac) | 獲取窗口當前文件路徑 |
win.setDocumentEdited(edited) (mac) | 明確指出窗口文檔是否可以編輯,如果設置為true則將標題欄的圖標變成灰色 |
win.isDocumentEdited() (mac) | 判斷當前窗口文檔是否可編輯 |
win.focusOnWebView() | |
win.blurWebView() | |
win.capturePage([rect]) | 在 rect 內捕獲頁面的快照 |
win.loadURL(url[, options]) | 加載頁面 |
win.loadFile(filePath[, options]) | 加載頁面 |
win.reload() | 與 webContents.reload 相同 |
win.setMenu(menu) (win/linux) | 將 menu 設置為窗口的菜單欄 |
win.removeMenu() (win) | 刪除窗口的菜單欄 |
win.setProgressBar(progress[, options]) | 設置進度條的進度值 |
win.setOverlayIcon(overlay, description) (win) | 設置進度條的進度值。 有效范圍為 [0, 1.0] |
win.setHasShadow(hasShadow) | 設置窗口是否有陰影 |
win.hasShadow() | 判斷窗口是否有陰影 |
win.setOpacity(opacity) (win/mac) | 設置窗口的不透明度。 在Linux上不起作用。 超出界限的數值被限制在 [0, 1] 范圍內 |
win.getOpacity() | 介于 0.0 (完全透明) 和 1.0 (完全不透明) 之間。在Linux上,始終返回 1 |
win.setShape(rects) (win/linux) | 對窗口形狀的設置決定了窗口內系統允許繪制與用戶交互的區域 |
win.setThumbarButtons(buttons) (win) | 將指定的一組按鈕添加到菜單欄的縮圖工具欄上 |
win.setThumbnailClip(region) (win) | 將窗口的區域設置為在任務欄中懸停在窗口上方時顯示的縮略圖圖像 |
win.setThumbnailToolTip(toolTip) (win) | 設置在任務欄中懸停在窗口縮略圖上時顯示的工具提示 |
win.setAppDetails(options) (win) | 設置窗口任務欄按鈕的屬性 |
win.showDefinitionForSelection() (mac) | 和 webContents.showDefinitionForSelection() 相同 |
win.setIcon(icon) (win/linux) | 設置窗口圖標 |
win.setWindowButtonVisibility(visible) (mac) | 設置是否窗口交通燈需要顯示 |
win.setAutoHideMenuBar(hide) (win/linux) | 設置窗口菜單欄是否自動隱藏 |
win.isMenuBarAutoHide() (win/linux) | 判斷窗口的菜單欄是否自動隱藏 |
win.setMenuBarVisibility(visible) (win/linux) | 設置菜單欄是否可見 |
win.isMenuBarVisible() (win/linux) | 判斷窗口的菜單欄是否可見 |
win.setVisibleOnAllWorkspaces(visible[, options]) (mac/linux) | 設置窗口是否在所有工作空間上可見 |
win.isVisibleOnAllWorkspaces() (mac/linux) | 判斷窗口是否在所有工作空間上可見 |
win.setIgnoreMouseEvents(ignore[, options]) | 忽略窗口內的所有鼠標事件 |
win.setContentProtection(enable) (mac/linux) | 防止窗口內容被其他應用捕獲 |
win.setFocusable(focusable) (mac/linux) | 設置窗口是否可聚焦 |
win.isFocusable() (mac/linux) | 返回當前窗口是否可以作為焦點被選中 |
win.setParentWindow(parent) | 設置 parent 為當前窗口的父窗口 |
win.getParentWindow() | 返回 BrowserWindow/null - 如果沒有父窗口則為 null |
win.getChildWindows() | 返回 BrowserWindow[] - 首頁的子窗口 |
win.setAutoHideCursor(autoHide) (mac) | 設置輸入時是否隱藏光標 |
win.selectPreviousTab() (mac) | 當啟用本地選項卡,并且窗口中有另一個標簽時,選擇上一個選項卡 |
win.selectNextTab() (mac) | 當啟用本地選項卡,并且窗口中有另一個標簽時,選擇下一個選項卡 |
win.mergeAllWindows() (mac) | 當啟用本地選項卡并且存在多個打開窗口時,將所有窗口合并到一個帶有多個選項卡的窗口中 |
win.moveTabToNewWindow() (mac) | 如果啟用了本機選項卡并且當前窗口中有多個選項卡,則將當前選項卡移動到新窗口中 |
win.toggleTabBar() (mac) | 如果啟用了本機選項卡并且當前窗口中只有一個選項卡,則切換選項卡欄是否可見 |
win.addTabbedWindow(browserWindow) (mac) | 在該窗口中添加一個窗口作為選項卡,位于窗口實例的選項卡之后 |
win.setVibrancy(type) (mac) | 在瀏覽器窗口中添加一個動態特效。 傳遞 null 或空字符串將會移除窗口上的動態效果 |
win.setTrafficLightPosition(position) (mac) | 在無框窗口中設置自定義控制按鈕的位置 |
win.getTrafficLightPosition() (mac) | 在無框窗口中自定義控制按鈕的位置 |
win.setTouchBar(touchBar) (mac) | 設置窗口的觸摸條布局 設置為 null 或undefined將清除觸摸條 |
win.setBrowserView(browserView) (實驗) | |
win.getBrowserView() (實驗功能) | |
win.addBrowserView(browserView) (實驗功能) | |
win.removeBrowserView(browserView) (實驗功能) | |
win.setTopBrowserView(browserView) (實驗功能) | |
win.getBrowserViews() (實驗功能) | |
win.setTitleBarOverlay(options) (win) | 在已開啟 Window Controls Overlay 的窗口上,此方法將更新標題欄疊加層的樣式 |
:- | :- |
---|---|
BrowserWindow.getAllWindows() | 所有打開的窗口的數組 |
BrowserWindow.getFocusedWindow() | 當前獲得焦點的窗口 |
BrowserWindow.fromWebContents(webContents) | 擁有給定 webContents 窗口 |
BrowserWindow.fromBrowserView(browserView) | 擁有給定 browserView 窗口 |
BrowserWindow.fromId(id) | 帶有給定 id 的窗口 |
const { BrowserWindow } = require('electron')
// 本例(li)中 `win` 是我(wo)們的實例(li)
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('//github.com')
:- | :- |
---|---|
win.webContents | 此窗口擁有的 WebContents 對象 |
win.id | 代表了窗口的唯一ID |
win.autoHideMenuBar | 決定窗口菜單欄是否自動隱藏 |
win.simpleFullScreen | 決定窗口是否處于簡單(pre-Lion) 全屏模式 |
win.fullScreen | 決定窗口是否處于全屏模式 |
win.focusable | 確定窗口是否可作為焦點被選中的屬性 |
win.visibleOnAllWorkspaces | 決定窗口是否在所有工作區中可見 |
win.shadow | 決定窗口是否顯示陰影 |
win.menuBarVisible | 決定菜單欄是否可見 |
win.kiosk | 決定窗口是否處于kiosk模式 |
win.documentEdited | 指明窗口文檔是否已被編輯 |
win.representedFilename | 確定窗口代表的文件的路徑名 |
win.title | 用于確定原生窗口的標題 |
win.minimizable | 決定窗口是否可被用戶手動最小化 |
win.maximizable | 決定窗口是否可被用戶手動最大化 |
win.fullScreenable | 決定是切換全屏模式還是最大化窗口 |
win.resizable | 決定窗口是否可被用戶手動調整大小 |
win.closable | 決定窗口是否可被用戶手動關閉 |
win.movable | 決定窗口是否可被用戶移動 |
win.excludedFromShownWindowsMenu | 決定窗口是否從 Windows 菜單排除 |
win.accessibleTitle | 定義一個僅為輔助工具提供的替代標題 |