BrowserWindow creates the process that controls the BrowserWindow: the main process

Create a program window

// In the main process const {BrowserWindow} = require('electron') // or in the render process 'remote' // const {BrowserWindow} = Let win = new BrowserWindow({width: 800, height: 0); 600}) win.on('closed', () => {win = null}) // Load a remote address win.loadURL('https://github.com') // or load a local file win.loadURL(`file://${__dirname}/app/index.html`)Copy the code

New BrowserWindow([options]

  • Width: Integer – The window width, in pixels. The default is 800
  • Height: Integer – Window height in pixels. The default is 600.
  • X: Integer – The left offset position of the window relative to the screen. Center by default.
  • Y: Integer – The offset position of the window relative to the top of the screen. Center by default.
  • UseContentSize: Boolean – width and height use the size of the web page, which means that the actual window size should include the size of the window frame, which is slightly larger and defaults to false
  • Center: Boolean – The window screen is centered.
  • MinWidth: Integer – The minimum window width, 0 by default
  • MinHeight: Integer – The minimum window height. The default is 0
  • MaxWidth: Integer – The maximum window width, default unlimited.
  • MaxHeight: Integer – The maximum window height. Default is unlimited.
  • Resizable: Boolean – Whether the window size can be changed, default is true
  • Movable: Boolean – Whether Windows can be dragged. Not valid on Linux. The default is true
  • Minimizable: Boolean – Whether Windows can be minimized. Not valid on Linux. The default is true
  • Maximizable: Boolean – Whether a window can be maximized. Not valid on Linux. The default is true
  • Closable: Boolean – Whether Windows can be closed. Not valid on Linux. The default is true
  • AlwaysOnTop: Boolean – Whether a window always appears before other Windows. Not valid on Linux. The default is false
  • Fullscreen: Boolean – whether Windows can be fullscreen. When explicitly set to false, the full-screen button will be hidden and disabled on macOS. The default false
  • Fullscreenable: Boolean – On macOS, whether the fullscreen button is available, default is true
  • SkipTaskbar: Boolean – Whether to display Windows in the taskbar. The default is false
  • Kiosk: Boolean – In KIOSK mode. The default is false
  • Title: String – Window default title. Default “Electron”
  • Icon: NativeImage – Window icon, if not set, the window will use the default icon available.
  • Show: Boolean – Whether the window is displayed when it is created. The default is true
  • Frame: Boolean – Specify false to create a Frameless Window. The default is true
  • AcceptFirstMouse: Boolean – Whether clicking on the Web View is allowed to activate the window. The default is false
  • DisableAutoHideCursor: Boolean – Whether to hide the mouse when typing. The default false
  • AutoHideMenuBar: Boolean – Hide menu bar unless Alt is pressed. The default is false
  • EnableLargerThanScreen: Boolean – Whether it is allowed to change the window size to be larger than the screen. The default is false
  • BackgroundColor: String – The window’s background color value is hexadecimal, such as #66CD00(transparency support). The default is #000(black) on Linux and Windows and #FFF(or transparent) on Mac.
  • HasShadow: Boolean – Whether the window has a shadow. It only works on macOS. The default is true
  • DarkTheme: Boolean – Use dark theme for Windows, only works on some desktop environments with GTK+3. The default is false
  • Transparent: Boolean – The window is transparent. The default is false
  • Type: String – Window type. The default window is normal.
  • TitleBarStyle: String – window titleBarStyle.
  • WebPreferences: Object – Sets interface features.

The event

The BrowserWindow object can fire the following events:

Note: Some events can only be triggered in a specific OS environment and have been marked as much as possible.

Event: “page-title-updated”

Returns:

  • event Event

Triggered when the document’s title changes, use event.preventDefault() to prevent the original window’s title from changing.

Event: “close”

Returns:

  • event Event

Triggered when the window is about to close. It fires before the beforeUnload and unload events of the DOM. To cancel this, use event.preventdefault ()

Normally you want to decide whether to close a window by using the beforeUnload handler, but it will also be triggered when the window reloads. In Electron, returning an empty string or false can cancel the closure. Such as:

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.
  e.returnValue = false;
};
Copy the code

Event: “closed”

Triggered when the window has closed. When you receive this event, you should delete references to the closed window and avoid using it again.

Event: “unresponsive”

Trigger event when interface freezes.

Event: “responsive”

Triggered when interface recovery freezes.

Event: “blur”

Triggered when a window loses focus.

Event: “focus”

Triggered when the window gets focus.

Event: “maximize”

Triggered when the window is maximized.

Event: “unmaximize”

Triggered when window exit is maximized.

Event: “minimize”

Triggered when the window is minimized.

Event: “restore”

Triggered when the window recovers from minimization.

Event: “resize”

Triggered when the window size changes.

Event: “move”

Triggered when the window moves.

Note: The alias is moved in OS X.

Event: “moved” OS X

Triggered when the window moves.

Event: “enter-full-screen”

Triggered when the window of the.

Event: “leave-full-screen”

Triggered when the window exits the full-screen state.

Event: “enter-html-full-screen”

Triggered when the window in the HTML API enters the full-screen state.

Event: “leave-html-full-screen”

Triggered when the window in the HTML API exits the full-screen state.

Event: “app-command” Windows

Triggered when an App Command is requested. Typically keyboard media or browser commands, the “Back” button on Windows can also be triggered when used as a mouse.

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(); }});Copy the code

Event: “scroll-touch-begin” OS X

Triggered when the scrollbar event starts.

Event: “scroll-touch-end” OS X

Triggered when the scrollbar event ends.