Javascript Popups and windows methods

A popup window is used to display some information to the user with the help of a pop-up view.
All we need is to run the following command:

1window.open('https://javascript.info/')

It will open the new Window screen with the following URL. Modern Browser like Mozilla, Chrome will open the screen in a new tab instead of separate windows.

Popups exist from really ancient times. The initial idea was to show another content without closing the main window.
There are many things in which popups are still used, for OAuth authorization,(login Facebook/google/Instagram).

1-A popup is a separate window which has its own independent JavaScript environment. So opening a popup from a third-party, non-trusted site is safe.
2-It’s very easy to open a popup.
3-A popup can navigate (change URL) and send messages to the open window.

Popups Blocking

Some scam /evils sites abused popup a lot. A bad page suddenly appears with tons of popups with ads. So most browsers block the popups which are being triggered without event handlers in order to protect the user.

1// popup blocked
2window.open('https://javascript.info');
3
4// popup allowed
5button.onclick = () => {
6  window.open('https://javascript.info');
7};

This will somehow protect the user from being harmed.

Accessing popup from window

The open call returns a reference to the new window. It can be used to manipulate it’s properties, change location and even more. In this example, we generate popup content from JavaScript:

1let newWin = window.open("about:blank", "hello", "width=200,height=200");
2newWin.document.write("Hello, world!");

And here we modify the contents after loading:

1
2let newWindow = open('/', 'example', 'width=300,height=300')
3newWindow.focus();
4
5alert(newWindow.location.href); // (*) about:blank, loading hasn't started yet
6
7newWindow.onload = function() {
8  let html = <div style="font-size:30px">Welcome!</div>;
9  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
10};
11

Closing a popup

1- To close a window: win.close().
2- To check if a window is closed: win.closed.
3- Technically, the close() method is available for any window, but window.close() is ignored by most browsers if window is not created with window.open(). So it’ll only work on a popup.
4- The closed property is true if the window is closed. That’s useful to check if the popup (or the main window) is still open or not. A user can close it anytime, and our code should take that possibility into account.
Example code

1
2let newWindow = open('/', 'example', 'width=300,height=300');
3newWindow.onload = function() {
4  newWindow.close();
5  alert(newWindow.closed); // true
6};
7