DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on

 

Magic of window.open in browsers

The window object is supported by most modern browsers. It represents the browser window. The window is the root object and every other javascript object, function, variables are members of it.

It has some properties and methods. Here, we are going to see about window.open which we mostly use when we want to open a new window to perform some action.

Window.open() - open a new window and returns the windowProxy object which is the wrapper on the window object.

Syntax:

window.open(?url, ?target, ?features) - all three params are optional.

url - url to navigate for.

target - window name - it opens a new window if a window with that name doesn't exist otherwise simply focus the existing and reloads.

features - browser features like width, height etc.

// -> Opens up a pop-up with the mentioned URL with name JS_Articles (Its not a browser title)

const windowObj = window.open('https://dev.to/urstrulyvishwak', 'JS_Articles', 'popup');

// -> Focus window - if the 'JS_Articles' window is behind the current browser then it will get focused.

windowObj.focus();

// -> blur window - out focus the window as opposed to focusing.

windowObj.blur();

// -> Count of windows opened in current window starting with index 0.

windowObj.length;

// -> close - to close the window

windowObj.close();

// -> closed - it returns boolean and tells whether the window has opened or closed.
windowObj.closed;

Using these properties we can completely deal with a new window that we opened.

You can follow me here: https://twitter.com/urstrulyvishwak

Thank you :). Happy reading.

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await