browser-window.md

BrowserWindow

Create and control browser windows.

// In the plugin.
const BrowserWindow = require('sketch-module-web-view')

let win = new BrowserWindow({ width: 800, height: 600 })
win.on('closed', () => {
  win = null
})

// Load a remote URL
win.loadURL('https://github.com')

// Or load a local HTML file
win.loadURL(require('./index.html'))

Frameless window

To create a window without chrome, or a transparent window in arbitrary shape, you can use the Frameless Window API.

Showing window gracefully

When loading a page in the window directly, users may see the page load incrementally, which is not a good experience for a native app. To make the window display without visual flash, there are two solutions for different situations.

Using ready-to-show event

While loading the page, the ready-to-show event will be emitted when the renderer process has rendered the page for the first time if the window has not been shown yet. Showing the window after this event will have no visual flash:

const BrowserWindow = require('sketch-module-web-view')
let win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
  win.show()
})

This event is usually emitted after the did-finish-load event, but for pages with many remote resources, it may be emitted before the did-finish-load event.

Setting backgroundColor

For a complex app, the ready-to-show event could be emitted too late, making the app feel slow. In this case, it is recommended to show the window immediately, and use a backgroundColor close to your app's background:

const BrowserWindow = require('sketch-module-web-view')

let win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')

Note that even for apps that use ready-to-show event, it is still recommended to set backgroundColor to make app feel more native.

Class: BrowserWindow

Create and control browser windows.

BrowserWindow is an EventEmitter.

It creates a new BrowserWindow with native properties as set by the options.

new BrowserWindow([options])

• options Object (optional)
  • width Integer (optional) - Window's width in pixels. Default is 800.
  • height Integer (optional) - Window's height in pixels. Default is 600.
  • x Integer (optional) (required if y is used) - Window's left offset from screen. Default is to center the window.
  • y Integer (optional) (required if x is used) - Window's top offset from screen. Default is to center the window.
  • useContentSize Boolean (optional) - The width and height 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. Default is false.
  • center Boolean (optional) - Show window in the center of the screen.
  • minWidth Integer (optional) - Window's minimum width. Default is 0.
  • minHeight Integer (optional) - Window's minimum height. Default is 0.
  • maxWidth Integer (optional) - Window's maximum width. Default is no limit.
  • maxHeight Integer (optional) - Window's maximum height. Default is no limit.
  • resizable Boolean (optional) - Whether window is resizable. Default is true.
  • movable Boolean (optional) - Whether window is movable. Default is true.
  • minimizable Boolean (optional) - Whether window is minimizable. Default is true.
  • maximizable Boolean (optional) - Whether window is maximizable. Default is true.
  • closable Boolean (optional) - Whether window is closable. Default is true.
  • focusable Boolean (optional) - Whether the window can be focused. Default is true.
  • alwaysOnTop Boolean (optional) - Whether the window should always stay on top of other windows. Default is false.
  • fullscreen Boolean (optional) - Whether the window should show in fullscreen. When explicitly set to false the fullscreen button will be hidden or disabled. Default is false.
  • fullscreenable Boolean (optional) - Whether the window can be put into fullscreen mode. Also whether the maximize/zoom button should toggle full screen mode or maximize window. Default is true.
  • title String (optional) - Default window title. Default is your plugin name.
  • show Boolean (optional) - Whether window should be shown when created. Default is true.
  • frame Boolean (optional) - Specify false to create a Frameless Window. Default is true.
• vibrancy String (optional) - Add a type of vibrancy effect to the window, only on macOS. Can be appearance-based, light, dark, titlebar, selection, menu, popover, sidebar, medium-light or ultra-dark. Please note that using frame: false in combination with a vibrancy value requires that you use a non-default titleBarStyle as well.

  Event: 'closed'

  Emitted when the window is closed. After you have received this event you should remove the reference to the window and avoid using it any more.

  Event: 'blur'

  Emitted when the window loses focus.

  Event: 'focus'

  Emitted when the window gains focus.

  Event: 'ready-to-show'

  Emitted when the web page has been rendered (while not being shown) and window can be displayed without a visual flash.

  Event: 'minimize'

  Emitted when the window is minimized.

  Event: 'restore'

  Emitted when the window is restored from a minimized state.

  Event: 'resize'

  Emitted when the window is being resized.

  Event: 'move'

  Emitted when the window is being moved to a new position.

  Note: This event is just an alias of moved.

  Event: 'moved' macOS

  Emitted once when the window is moved to a new position.

  Event: 'enter-full-screen'

  Emitted when the window enters a full-screen state.

  Event: 'leave-full-screen'

  Emitted when the window leaves a full-screen state.

  Static Methods

  The BrowserWindow class has the following static methods:

  BrowserWindow.fromId(id)

  • id Integer

  Returns BrowserWindow - The window with the given id.

  Instance Properties

  Objects created with new BrowserWindow have the following properties:

  const BrowserWindow = require('sketch-module-web-view')
  // In this example `win` is our instance
  let win = new BrowserWindow({ width: 800, height: 600 })
  win.loadURL('https://github.com')

  win.webContents

  A WebContents object this window owns. All web page related events and operations will be done via it.

  See the webContents documentation for its methods and events.

  win.id

  A Integer representing the unique ID of the window.

  Instance Methods

  Objects created with new BrowserWindow have the following instance methods:

  win.destroy()

  Force closing the window, the unload and beforeunload event won't be emitted for the web page, and close event will also not be emitted for this window, but it guarantees the closed event will be emitted.

  win.close()

  Try to close the window. This has the same effect as a user manually clicking the close button of the window. The web page may cancel the close though. See the close event.

  win.focus()

  Focuses on the window.

  win.blur()

  Removes focus from the window.

  win.isFocused()

  Returns Boolean - Whether the window is focused.

  win.isDestroyed()

  Returns Boolean - Whether the window is destroyed.

  win.show()

  Shows and gives focus to the window.

  win.showInactive()

  Shows the window but doesn't focus on it.

  win.hide()

  Hides the window.

  win.isVisible()

  Returns Boolean - Whether the window is visible to the user.

  win.isModal()

  Returns Boolean - Whether current window is a modal window.

  win.maximize()

  Maximizes the window. This will also show (but not focus) the window if it isn't being displayed already.

  win.unmaximize()

  Unmaximizes the window.

  win.isMaximized()

  Returns Boolean - Whether the window is maximized.

  win.minimize()

  Minimizes the window. On some platforms the minimized window will be shown in the Dock.

  win.restore()

  Restores the window from minimized state to its previous state.

  win.isMinimized()

  Returns Boolean - Whether the window is minimized.

  win.setFullScreen(flag)

  • flag Boolean

  Sets whether the window should be in fullscreen mode.

  win.isFullScreen()

  Returns Boolean - Whether the window is in fullscreen mode.

  win.setAspectRatio(aspectRatio[, extraSize])

  • aspectRatio Float - The aspect ratio to maintain for some portion of the content view.
  • extraSize Size - The extra size not to be included while maintaining the aspect ratio.

  This will make a window maintain an aspect ratio. The extra size allows a developer to have space, specified in pixels, not included within the aspect ratio calculations. This API already takes into account the difference between a window's size and its content size.

  Consider a normal window with an HD video player and associated controls. Perhaps there are 15 pixels of controls on the left edge, 25 pixels of controls on the right edge and 50 pixels of controls below the player. In order to maintain a 16:9 aspect ratio (standard aspect ratio for HD @1920x1080) within the player itself we would call this function with arguments of 16/9 and [ 40, 50 ]. The second argument doesn't care where the extra width and height are within the content view--only that they exist. Just sum any extra width and height areas you have within the overall content view.

  win.setBounds(bounds[, animate])

  • bounds Rectangle
  • animate Boolean (optional)

  Resizes and moves the window to the supplied bounds

  win.getBounds()

  Returns Rectangle

  win.setContentBounds(bounds[, animate])

  • bounds Rectangle
  • animate Boolean (optional)

  Resizes and moves the window's client area (e.g. the web page) to the supplied bounds.

  win.getContentBounds()

  Returns Rectangle

  win.setEnabled(enable)

  • enable Boolean

  Disable or enable the window.

  win.setSize(width, height[, animate])

  • width Integer
  • height Integer
  • animate Boolean (optional)

  Resizes the window to width and height.

  win.getSize()

  Returns Integer[] - Contains the window's width and height.

  win.setContentSize(width, height[, animate])

  • width Integer
  • height Integer
  • animate Boolean (optional)

  Resizes the window's client area (e.g. the web page) to width and height.

  win.getContentSize()

  Returns Integer[] - Contains the window's client area's width and height.

  win.setMinimumSize(width, height)

  • width Integer
  • height Integer

  Sets the minimum size of window to width and height.

  win.getMinimumSize()

  Returns Integer[] - Contains the window's minimum width and height.

  win.setMaximumSize(width, height)

  • width Integer
  • height Integer

  Sets the maximum size of window to width and height.

  win.getMaximumSize()

  Returns Integer[] - Contains the window's maximum width and height.

  win.setResizable(resizable)

  • resizable Boolean

  Sets whether the window can be manually resized by user.

  win.isResizable()

  Returns Boolean - Whether the window can be manually resized by user.

  win.setMovable(movable)

  • movable Boolean

  Sets whether the window can be moved by user.

  win.isMovable()

  Returns Boolean - Whether the window can be moved by user.

  win.setMinimizable(minimizable)

  • minimizable Boolean

  Sets whether the window can be manually minimized by user.

  win.isMinimizable()

  Returns Boolean - Whether the window can be manually minimized by user.

  win.setMaximizable(maximizable)

  • maximizable Boolean

  Sets whether the window can be manually maximized by user.

  win.isMaximizable()

  Returns Boolean - Whether the window can be manually maximized by user.

  win.setFullScreenable(fullscreenable)

  • fullscreenable Boolean

  Sets whether the maximize/zoom window button toggles fullscreen mode or maximizes the window.

  win.isFullScreenable()

  Returns Boolean - Whether the maximize/zoom window button toggles fullscreen mode or maximizes the window.

  win.setClosable(closable)

  • closable Boolean

  Sets whether the window can be manually closed by user.

  win.isClosable()

  Returns Boolean - Whether the window can be manually closed by user.

  win.setAlwaysOnTop(flag[, level][, relativeLevel])

  • flag Boolean
  • level String (optional) macOS - Values include normal, floating, torn-off-menu, modal-panel, main-menu, status, pop-up-menu, screen-saver, and dock (Deprecated). The default is floating. See the macOS docs for more details.
  • relativeLevel Integer (optional) - The number of layers higher to set this window relative to the given level. The default is 0. Note that Apple discourages setting levels higher than 1 above screen-saver.

  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.

  win.isAlwaysOnTop()

  Returns Boolean - Whether the window is always on top of other windows.

  win.moveTop()

  Moves window to top(z-order) regardless of focus

  win.center()

  Moves window to the center of the screen.

  win.setPosition(x, y[, animate])

  • x Integer
  • y Integer
  • animate Boolean (optional)

  Moves window to x and y.

  win.getPosition()

  Returns Integer[] - Contains the window's current position.

  win.setTitle(title)

  • title String

  Changes the title of native window to title.

  win.getTitle()

  Returns String - The title of the native window.

  Note: The title of web page can be different from the title of the native window.

  win.flashFrame(flag)

  • flag Boolean

  Starts or stops flashing the window to attract user's attention.

  win.getNativeWindowHandle()

  Returns Buffer - The platform-specific handle of the window.

  The native type of the handle is an NSPanel.

  win.loadURL(url)

  • url String

  Same as webContents.loadURL(url).

  The url can be a remote address (e.g. http://) or a path to a local HTML file using the file:// protocol.

  To ensure that file URLs are properly formatted, it is recommended to use require.

  win.reload()

  Same as webContents.reload.

  win.setHasShadow(hasShadow)

  • hasShadow Boolean

  Sets whether the window should have a shadow.

  win.hasShadow()

  Returns Boolean - Whether the window has a shadow.

  win.setOpacity(opacity)

  • opacity Number - between 0.0 (fully transparent) and 1.0 (fully opaque)

  Sets the opacity of the window.

  win.getOpacity()

  Returns Number - between 0.0 (fully transparent) and 1.0 (fully opaque)

  win.setVisibleOnAllWorkspaces(visible)

  • visible Boolean

  Sets whether the window should be visible on all workspaces.

  win.isVisibleOnAllWorkspaces()

  Returns Boolean - Whether the window is visible on all workspaces.

  win.setIgnoreMouseEvents(ignore)

  • ignore Boolean

  Makes the window ignore all mouse events.

  All mouse events happened in this window will be passed to the window below this window, but if this window has focus, it will still receive keyboard events.

  win.setContentProtection(enable)

  • enable Boolean

  Prevents the window contents from being captured by other apps.

  It sets the NSWindow's sharingType to NSWindowSharingNone.

  win.setAutoHideCursor(autoHide)

  • autoHide Boolean

  Controls whether to hide cursor when typing.

  win.setVibrancy(type) macOS

  • type String - Can be appearance-based, light, dark, titlebar, selection, menu, popover, sidebar, medium-light or ultra-dark. See the macOS documentation for more details.

  Adds a vibrancy effect to the browser window. Passing null or an empty string will remove the vibrancy effect on the window.