The BrowserWindow
class gives you ability to create a browser window, an
example is:
var BrowserWindow = require('browser-window');
var win = new BrowserWindow({ width: 800, height: 600, show: false });
win.on('closed', function() {
win = null;
});
win.loadUrl('https://github.com');
win.show();
You can also create a window without chrome by using Frameless Window API.
BrowserWindow
is an
EventEmitter.
options
Objectx
Integer - Window's left offset to screeny
Integer - Window's top offset to screenwidth
Integer - Window's widthheight
Integer - Window's heightuse-content-size
Boolean - Thewidth
andheight
would be used as web page's size, which means the actual window's size will include window frame's size and be slightly larger.center
Boolean - Show window in the center of the screenmin-width
Integer - Minimum widthmin-height
Integer - Minimum heightmax-width
Integer - Maximum widthmax-height
Integer - Maximum heightresizable
Boolean - Whether window is resizablealways-on-top
Boolean - Whether the window should always stay on top of other windowsfullscreen
Boolean - Whether the window should show in fullscreen, when set tofalse
the fullscreen button would also be hidden on OS Xskip-taskbar
Boolean - Do not show window in taskbarzoom-factor
Number - The default zoom factor of the page, zoom factor is zoom percent / 100, so3.0
represents300%
kiosk
Boolean - The kiosk modetitle
String - Default window titleicon
NativeImage - The window icon, when omitted on Windows the executable's icon would be used as window iconshow
Boolean - Whether window should be shown when createdframe
Boolean - Specifyfalse
to create a Frameless Windownode-integration
Boolean - Whether node integration is enabled, default istrue
accept-first-mouse
Boolean - Whether the web view accepts a single mouse-down event that simultaneously activates the windowdisable-auto-hide-cursor
Boolean - Do not hide cursor when typingauto-hide-menu-bar
Boolean - Auto hide the menu bar unless theAlt
key is pressed.enable-larger-than-screen
Boolean - Enable the window to be resized larger than screen.dark-theme
Boolean - Forces using dark theme for the window, only works on some GTK+3 desktop environmentspreload
String - Specifies a script that will be loaded before other scripts run in the window. This script will always have access to node APIs no matter whether node integration is turned on for the window, and the path ofpreload
script has to be absolute path.transparent
Boolean - Makes the window transparenttype
String - Specifies the type of the window, possible types aredesktop
,dock
,toolbar
,splash
,notification
. This only works on Linux.standard-window
Boolean - Uses the OS X's standard window instead of the textured window. Defaults totrue
.web-preferences
Object - Settings of web page's featuresjavascript
Booleanweb-security
Booleanimages
Booleanjava
Booleantext-areas-are-resizable
Booleanwebgl
Booleanwebaudio
Booleanplugins
Boolean - Whether plugins should be enabled, currently onlyNPAPI
plugins are supported.extra-plugin-dirs
Array - Array of paths that would be searched for plugins. Note that if you want to add a directory under your app, you should use__dirname
orprocess.resourcesPath
to join the paths to make them absolute, using relative paths would make Electron search under current working directory.experimental-features
Booleanexperimental-canvas-features
Booleansubpixel-font-scaling
Booleanoverlay-scrollbars
Booleanoverlay-fullscreen-video
Booleanshared-worker
Booleandirect-write
Boolean - Whether the DirectWrite font rendering system on Windows is enabledpage-visibility
Boolean - Page would be forced to be always in visible or hidden state once set, instead of reflecting current window's visibility. Users can set it totrue
to prevent throttling of DOM timers.
Creates a new BrowserWindow
with native properties set by the options
.
Usually you only need to set the width
and height
, other properties will
have decent default values.
event
Event
Emitted when the document changed its title, calling event.preventDefault()
would prevent the native window's title to change.
event
Event
Emitted when the window is going to be closed. It's emitted before the
beforeunload
and unload
event of DOM, calling event.preventDefault()
would cancel the close.
Usually you would want to use the beforeunload
handler to decide whether the
window should be closed, which will also be called when the window is
reloaded. In Electron, returning an empty string or false
would cancel the
close. An example is:
window.onbeforeunload = function(e) {
console.log('I do not want to be closed');
// Unlike usual browsers, in which a string should be returned and the user is
// prompted to confirm the page unload, Electron gives developers more options.
// Returning empty string or false would prevent the unloading now.
// You can also use the dialog API to let the user confirm closing the application.
return false;
};
Emitted when the window is closed. After you have received this event you should remove the reference to the window and avoid using it anymore.
Emitted when the web page becomes unresponsive.
Emitted when the unresponsive web page becomes responsive again.
Emitted when window loses focus.
Emitted when window gains focus.
Emitted when window is maximized.
Emitted when window exits from maximized state.
Emitted when window is minimized.
Emitted when window is restored from minimized state.
Emitted when window is getting resized.
Emitted when the window is getting moved to a new position.
Note: On OS X this event is just an alias of moved
.
Emitted once when the window is moved to a new position.
Note: This event is available only on OS X.
Emitted when window enters full screen state.
Emitted when window leaves full screen state.
Emitted when window enters full screen state triggered by html api.
Emitted when window leaves full screen state triggered by html api.
Emitted when devtools is opened.
Emitted when devtools is closed.
Emitted when devtools is focused / opened.
Emitted when an App Command is invoked. These are typically related to keyboard media keys or browser commands, as well as the "Back" button built into some mice on Windows.
someWindow.on('app-command', function(e, cmd) {
// Navigate the window back when the user hits their mouse back button
if (cmd === 'browser-backward' && someWindow.webContents.canGoBack()) {
someWindow.webContents.goBack();
}
});
Note: This event is only fired on Windows.
Returns an array of all opened browser windows.
Returns the window that is focused in this application.
webContents
WebContents
Find a window according to the webContents
it owns
id
Integer
Find a window according to its ID.
path
String
Adds devtools extension located at path
, and returns extension's name.
The extension will be remembered so you only need to call this API once, this API is not for programming use.
name
String
Remove the devtools extension whose name is name
.
The WebContents
object this window owns, all web page related events and
operations would be done via it.
Note: Users should never store this object because it may become null
when the renderer process (web page) has crashed.
Get the WebContents
of devtools of this window.
Note: Users should never store this object because it may become null
when the devtools has been closed.
Get the unique ID of this window.
Force closing the window, the unload
and beforeunload
event won't be emitted
for the web page, and close
event would also not be emitted
for this window, but it would guarantee the closed
event to be emitted.
You should only use this method when the renderer process (web page) has crashed.
Try to close the window, this has the same effect with user manually clicking the close button of the window. The web page may cancel the close though, see the close event.
Focus on the window.
Returns whether the window is focused.
Shows and gives focus to the window.
Shows the window but doesn't focus on it.
Hides the window.
Returns whether the window is visible to the user.
Maximizes the window.
Unmaximizes the window.
Returns whether the window is maximized.
Minimizes the window. On some platforms the minimized window will be shown in the Dock.
Restores the window from minimized state to its previous state.
Returns whether the window is minimized.
flag
Boolean
Sets whether the window should be in fullscreen mode.
Returns whether the window is in fullscreen mode.
options
Objectx
Integery
Integerwidth
Integerheight
Integer
Resizes and moves the window to width
, height
, x
, y
.
Returns an object that contains window's width, height, x and y values.
width
Integerheight
Integer
Resizes the window to width
and height
.
Returns an array that contains window's width and height.
width
Integerheight
Integer
Resizes the window's client area (e.g. the web page) to width
and height
.
Returns an array that contains window's client area's width and height.
width
Integerheight
Integer
Sets the minimum size of window to width
and height
.
Returns an array that contains window's minimum width and height.
width
Integerheight
Integer
Sets the maximum size of window to width
and height
.
Returns an array that contains window's maximum width and height.
resizable
Boolean
Sets whether the window can be manually resized by user.
Returns whether the window can be manually resized by user.
flag
Boolean
Sets whether the window should show always on top of other windows. After setting this, the window is still a normal window, not a toolbox window which can not be focused on.
Returns whether the window is always on top of other windows.
Moves window to the center of the screen.
x
Integery
Integer
Moves window to x
and y
.
Returns an array that contains window's current position.
title
String
Changes the title of native window to title
.
Returns the title of the native window.
Note: The title of web page can be different from the title of the native window.
flag
Boolean
Starts or stops flashing the window to attract user's attention.
skip
Boolean
Makes the window not show in the taskbar.
flag
Boolean
Enters or leaves the kiosk mode.
Returns whether the window is in kiosk mode.
filename
String
Sets the pathname of the file the window represents, and the icon of the file will show in window's title bar.
Note: This API is only available on OS X.
Returns the pathname of the file the window represents.
Note: This API is only available on OS X.
edited
Boolean
Specifies whether the window’s document has been edited, and the icon in title
bar will become grey when set to true
.
Note: This API is only available on OS X.
Whether the window's document has been edited.
Note: This API is only available on OS X.
options
Objectdetach
Boolean - opens devtools in a new window
Opens the developer tools.
Closes the developer tools.
Returns whether the developer tools are opened.
Toggle the developer tools.
x
Integery
Integer
Starts inspecting element at position (x
, y
).
Opens the developer tools for the service worker context present in the web contents.
rect
Object - The area of page to be capturedx
Integery
Integerwidth
Integerheight
Integer
callback
Function
Captures the snapshot of page within rect
, upon completion callback
would be
called with callback(image)
, the image
is an instance of
NativeImage that stores data of the snapshot. Omitting the
rect
would capture the whole visible page.
Note: Be sure to read documents on remote buffer in remote if you are going to use this API in renderer process.
Same with webContents.print([options])
Same with webContents.printToPDF(options, callback)
Same with webContents.loadUrl(url, [options])
.
Same with webContents.reload
.
menu
Menu
Sets the menu
as the window's menu bar, setting it to null
will remove the
menu bar.
Note: This API is not available on OS X.
progress
Double
Sets progress value in progress bar. Valid range is [0, 1.0].
Remove progress bar when progress < 0; Change to indeterminate mode when progress > 1.
On Linux platform, only supports Unity desktop environment, you need to specify
the *.desktop
file name to desktopName
field in package.json
. By default,
it will assume app.getName().desktop
.
overlay
NativeImage - the icon to display on the bottom right corner of the taskbar icon. If this parameter isnull
, the overlay is cleareddescription
String - a description that will be provided to Accessibility screen readers
Sets a 16px overlay onto the current taskbar icon, usually used to convey some sort of application status or to passively notify the user.
Note: This API is only available on Windows (Windows 7 and above)
Shows pop-up dictionary that searches the selected word on the page.
Note: This API is only available on OS X.
hide
Boolean
Sets whether the window menu bar should hide itself automatically. Once set the
menu bar will only show when users press the single Alt
key.
If the menu bar is already visible, calling setAutoHideMenuBar(true)
won't
hide it immediately.
Returns whether menu bar automatically hides itself.
visible
Boolean
Sets whether the menu bar should be visible. If the menu bar is auto-hide, users
can still bring up the menu bar by pressing the single Alt
key.
Returns whether the menu bar is visible.
visible
Boolean
Sets whether the window should be visible on all workspaces.
Note: This API does nothing on Windows.
Returns whether the window is visible on all workspaces.
Note: This API always returns false on Windows.
A WebContents
is responsible for rendering and controlling a web page.
WebContents
is an
EventEmitter.
Emitted when the navigation is done, i.e. the spinner of the tab will stop
spinning, and the onload
event was dispatched.
event
EventerrorCode
IntegererrorDescription
String
This event is like did-finish-load
, but emitted when the load failed or was
cancelled, e.g. window.stop()
is invoked.
event
EventisMainFrame
Boolean
Emitted when a frame has done navigation.
Corresponds to the points in time when the spinner of the tab starts spinning.
Corresponds to the points in time when the spinner of the tab stops spinning.
event
Eventstatus
BooleannewUrl
StringoriginalUrl
StringhttpResponseCode
IntegerrequestMethod
Stringreferrer
Stringheaders
Object
Emitted when details regarding a requested resource is available.
status
indicates the socket connection to download the resource.
event
EventoldUrl
StringnewUrl
StringisMainFrame
Boolean
Emitted when a redirect was received while requesting a resource.
event
Event
Emitted when document in the given frame is loaded.
event
Eventfavicons
Array - Array of Urls
Emitted when page receives favicon urls.
event
Eventurl
StringframeName
Stringdisposition
String - Can bedefault
,foreground-tab
,background-tab
,new-window
andother
Emitted when the page requested to open a new window for url
. It could be
requested by window.open
or an external link like <a target='_blank'>
.
By default a new BrowserWindow
will be created for the url
.
Calling event.preventDefault()
can prevent creating new windows.
event
Eventurl
String
Emitted when user or the page wants to start a navigation, it can happen when
window.location
object is changed or user clicks a link in the page.
This event will not emit when the navigation is started programmatically with APIs
like WebContents.loadUrl
and WebContents.back
.
Calling event.preventDefault()
can prevent the navigation.
Emitted when the renderer process is crashed.
event
Eventname
Stringversion
String
Emitted when a plugin process is crashed.
Emitted when the WebContents is destroyed.
Returns the Session
object used by this WebContents.
url
URLoptions
URLhttpReferrer
String - A HTTP Referer urluserAgent
String - A user agent originating the request
Loads the url
in the window, the url
must contains the protocol prefix,
e.g. the http://
or file://
.
Returns URL of current web page.
Returns the title of web page.
Returns whether web page is still loading resources.
Returns whether web page is waiting for a first-response for the main resource of the page.
Stops any pending navigation.
Reloads current page.
Reloads current page and ignores cache.
Returns whether the web page can go back.
Returns whether the web page can go forward.
offset
Integer
Returns whether the web page can go to offset
.
Clears the navigation history.
Makes the web page go back.
Makes the web page go forward.
index
Integer
Navigates to the specified absolute index.
offset
Integer
Navigates to the specified offset from the "current entry".
Whether the renderer process has crashed.
userAgent
String
Overrides the user agent for this page.
css
String
Injects CSS into this page.
code
String
Evaluates code
in page.
muted
Boolean
Set the page muted.
Returns whether this page has been muted.
Executes editing command undo
in page.
Executes editing command redo
in page.
Executes editing command cut
in page.
Executes editing command copy
in page.
Executes editing command paste
in page.
Executes editing command pasteAndMatchStyle
in page.
Executes editing command delete
in page.
Executes editing command selectAll
in page.
Executes editing command unselect
in page.
text
String
Executes editing command replace
in page.
text
String
Executes editing command replaceMisspelling
in page.
callback
Function
Checks if any serviceworker is registered and returns boolean as
response to callback
.
callback
Function
Unregisters any serviceworker if present and returns boolean as
response to callback
when the JS promise is fullfilled or false
when the JS promise is rejected.
options
Objectsilent
Boolean - Don't ask user for print settings, defaults tofalse
printBackground
Boolean - Also prints the background color and image of the web page, defaults tofalse
.
Prints window's web page. When silent
is set to false
, Electron will pick
up system's default printer and default settings for printing.
Calling window.print()
in web page is equivalent to call
WebContents.print({silent: false, printBackground: false})
.
Note: On Windows, the print API relies on pdf.dll
. If your application
doesn't need print feature, you can safely remove pdf.dll
in saving binary
size.
-
options
ObjectmarginsType
Integer - Specify the type of margins to use- 0 - default
- 1 - none
- 2 - minimum
printBackground
Boolean - Whether to print CSS backgrounds.printSelectionOnly
Boolean - Whether to print selection only.landscape
Boolean -true
for landscape,false
for portrait.
-
callback
Function -function(error, data) {}
error
Errordata
Buffer - PDF file content
Prints windows' web page as PDF with Chromium's preview printing custom settings.
By default, an empty options
will be regarded as
{marginsType:0, printBackgrounds:false, printSelectionOnly:false, landscape:false}
.
var BrowserWindow = require('browser-window');
var fs = require('fs');
var win = new BrowserWindow({width: 800, height: 600});
win.loadUrl("http://github.com");
win.webContents.on("did-finish-load", function() {
// Use default printing options
win.webContents.printToPDF({}, function(error, data) {
if (error) throw error;
fs.writeFile(dist, data, function(error) {
if (err)
alert('write pdf file error', error);
})
})
});
channel
String
Send args..
to the web page via channel
in asynchronous message, the web
page can handle it by listening to the channel
event of ipc
module.
An example of sending messages from the main process to the renderer process:
// On the main process.
var window = null;
app.on('ready', function() {
window = new BrowserWindow({width: 800, height: 600});
window.loadUrl('file://' + __dirname + '/index.html');
window.webContents.on('did-finish-load', function() {
window.webContents.send('ping', 'whoooooooh!');
});
});
// index.html
<html>
<body>
<script>
require('ipc').on('ping', function(message) {
console.log(message); // Prints "whoooooooh!"
});
</script>
</body>
</html>
Note:
- The IPC message handler in web pages do not have a
event
parameter, which is different from the handlers on the main process. - There is no way to send synchronous messages from the main process to a renderer process, because it would be very easy to cause dead locks.
The cookies
gives you ability to query and modify cookies, an example is:
var BrowserWindow = require('browser-window');
var win = new BrowserWindow({ width: 800, height: 600 });
win.loadUrl('https://github.com');
win.webContents.on('did-finish-load', function() {
// Query all cookies.
win.webContents.session.cookies.get({}, function(error, cookies) {
if (error) throw error;
console.log(cookies);
});
// Query all cookies that are associated with a specific url.
win.webContents.session.cookies.get({ url : "http://www.github.com" },
function(error, cookies) {
if (error) throw error;
console.log(cookies);
});
// Set a cookie with the given cookie data;
// may overwrite equivalent cookies if they exist.
win.webContents.session.cookies.set(
{ url : "http://www.github.com", name : "dummy_name", value : "dummy"},
function(error, cookies) {
if (error) throw error;
console.log(cookies);
});
});
details
Objecturl
String - Retrieves cookies which are associated withurl
. Empty imples retrieving cookies of all urls.name
String - Filters cookies by namedomain
String - Retrieves cookies whose domains match or are subdomains ofdomains
path
String - Retrieves cookies whose path matchespath
secure
Boolean - Filters cookies by their Secure propertysession
Boolean - Filters out session or persistent cookies.
callback
Function - function(error, cookies)error
Errorcookies
Array - array ofcookie
objects.cookie
- Objectname
String - The name of the cookievalue
String - The value of the cookiedomain
String - The domain of the cookiehost_only
String - Whether the cookie is a host-only cookiepath
String - The path of the cookiesecure
Boolean - Whether the cookie is marked as Secure (typically HTTPS)http_only
Boolean - Whether the cookie is marked as HttpOnlysession
Boolean - Whether the cookie is a session cookie or a persistent cookie with an expiration date.expirationDate
Double - (Option) The expiration date of the cookie as the number of seconds since the UNIX epoch. Not provided for session cookies.
-
details
Objecturl
String - Retrieves cookies which are associated withurl
name
String - The name of the cookie. Empty by default if omitted.value
String - The value of the cookie. Empty by default if omitted.domain
String - The domain of the cookie. Empty by default if omitted.path
String - The path of the cookie. Empty by default if omitted.secure
Boolean - Whether the cookie should be marked as Secure. Defaults to false.session
Boolean - Whether the cookie should be marked as HttpOnly. Defaults to false.expirationDate
Double - The expiration date of the cookie as the number of seconds since the UNIX epoch. If omitted, the cookie becomes a session cookie.
-
callback
Function - function(error)error
Error
details
Objecturl
String - The URL associated with the cookiename
String - The name of cookie to remove
callback
Function - function(error)error
Error
callback
Function - Called when operation is done
Clears the session's HTTP cache.
options
Objectorigin
String - Should followwindow.location.origin
's representationscheme://host:port
storages
Array - The types of storages to clear, can contain:appcache
,cookies
,filesystem
,indexdb
,localstorage
,shadercache
,websql
,serviceworkers
quotas
Array - The types of quotas to clear, can contain:temporary
,persistent
,syncable
callback
Function - Called when operation is done
Clears the data of web storages.
config
Stringcallback
Function - Called when operation is done
Parses the config
indicating which proxies to use for the session.
config = scheme-proxies[";"<scheme-proxies>]
scheme-proxies = [<url-scheme>"="]<proxy-uri-list>
url-scheme = "http" | "https" | "ftp" | "socks"
proxy-uri-list = <proxy-uri>[","<proxy-uri-list>]
proxy-uri = [<proxy-scheme>"://"]<proxy-host>[":"<proxy-port>]
For example:
"http=foopy:80;ftp=foopy2" -- use HTTP proxy "foopy:80" for http://
URLs, and HTTP proxy "foopy2:80" for
ftp:// URLs.
"foopy:80" -- use HTTP proxy "foopy:80" for all URLs.
"foopy:80,bar,direct://" -- use HTTP proxy "foopy:80" for all URLs,
failing over to "bar" if "foopy:80" is
unavailable, and after that using no
proxy.
"socks4://foopy" -- use SOCKS v4 proxy "foopy:1080" for all
URLs.
"http=foopy,socks5://bar.com -- use HTTP proxy "foopy" for http URLs,
and fail over to the SOCKS5 proxy
"bar.com" if "foopy" is unavailable.
"http=foopy,direct:// -- use HTTP proxy "foopy" for http URLs,
and use no proxy if "foopy" is
unavailable.
"http=foopy;socks=foopy2 -- use HTTP proxy "foopy" for http URLs,
and use socks4://foopy2 for all other
URLs.