Popups

How to handle popup windows in your application.

The framework allows you to create and show native application windows that can display web pages and other content.

The web page can open a popup window in the following two cases:

When user clicks a link with the target="_blank" attribute.
When JavaScript calls the window.open() function.

When one of these two events occurs, the application creates and shows a new popup window.

Opening popups

To handle the moment when the popup window is about to be opened, you can use the following approach:

import { OpenPopupParams, BrowserWindow } from '@mobrowser/api';

win.browser.handle('openPopup', (params: OpenPopupParams) => {
  const popupWindow: BrowserWindow = params.popup
  popupWindow.setWindowTitleVisible(false)
  return 'open'
})

In the example above we access the created popup window and configure its title visibility. Then we return 'open' to show the popup window and load the required content.

Important: the popup instance in the example above does not have any content loaded at the time the handler is invoked. The content will be loaded later. At this moment you can register all required events, customize popup window, but you cannot access DOM or execute JavaScript, because it hasn’t been loaded yet.

Suppressing popups

You can suppress all popup windows by returning 'block' from the 'openPopup' handler as shown in the code snippet below:

win.browser.handle('openPopup', (params: OpenPopupParams) => {
  return 'block'
})

Closing popups

The popup window can be closed in the following ways:

The user clicks the close button in the title bar of the popup window.
When JavaScript calls the window.close() function.
When you programmatically close the popup window.

To get notifications when the popup window is closed, you can use the following approach:

popupWindow.on('closed', () => {
  console.log('Popup window closed')
})

One the popup window is closed, you cannot access and use it anymore.