Explain Codes LogoExplain Codes Logo

Javascript open in a new window, not tab

javascript
window-open
browser-features
user-experience
Nikita BarsukovbyNikita Barsukov·Feb 27, 2025
TLDR

Use the window.open() method with width and height parameters to open a new window:

window.open('http://example.com', '_blank', 'width=600,height=400');

Heads up: Users’ browser preferences could outplay this, leading to the opening of a new tab instead. To date, there's no wizardry to countermand user set preferences for new window vs. tab.

Customized window features for user engagement

Crafting an optimized user experience is a game changer. Opening a new window with specific dimensions can help focus the user's attention onto the most vital content, side stepping browser toolbars or the address bar distractions.

Here's the magic to open a window stripped of Navigation toolbar, Menubar, and more:

window.open('http://example.com', '_blank', 'width=600,height=400,toolbar=0,location=0,menubar=0'); // Feel like a minimalist artist!

But beware, settings like toolbar=0,location=0,menubar=0 can cause browser's pop-up blockers to be unpleasant pals or could even be snubbed by browsers like Firefox if user's settings don't swing that way.

Swing at browser preferences with alternatives

When our beloved window.open() isn't behaving as expected due to browser prefs, be ready to adapt and discuss alternatives with your users. A popular choice to look at with delight is modals, offering a similar insular environment within the existing page.

Go modal when Firefox is throwing fits:

window.open('http://example.com', '_blank', 'modal=yes'); // Who knew Firefox had a "soft side"?

Keep your new window on top and in sight with alwaysRaised=yes:

window.open('http://example.com', '_blank', 'width=600,height=400,alwaysRaised=yes'); // Because some windows like being on top.

Slamming in the right content at the right place consistently can be accomplished with named window targets. Direct content right where it belongs:

window.open('http://example.com', 'uniqueWindowName', 'width=800,height=600'); // It's like having your own personal carriage for content delivery.

Repeated usages of the same window name will load new content in the same window. It's the lullaby Jenkins uses to maintain context for your users.

Compatibility testing roundup

Doing a cross-browser check is essential to ensure our window.open() parameters deliver results as expected. Dev tools in browsers like Chrome, Firefox, and Edge can be your testing sherpa guiding you to perfection.

Don't forget about accessibility. Make sure the new windows are user-friendly to all irrespective of their abilities.