Avoid browser popup blockers

Popup blockers' secret life

Popup blockers work in mysterious ways - they prefer userinvitation rather than spawning unexpectedly. Keep the JavaScript call stack shallow, don't make window.open walk through a maze of functions before it sees the light.

OAuth flows and non-blocking arts

While bypassing popup blockers for purposes like OAuth authentication, remember that every action has a security reflex. Rely on trusted authentication libraries and bring modal dialogs onto the stage for seamless within-page user interaction.

Browser harmony

Browsers have their own personalities. Test your code on different browsers to ensure all users are happily served. Make contingency plans for unbudging blockers, such as instructions for enabling pop-ups or inbuilt redirects.

Popup detective

Examine the return value when window.open is called; if it's null, a blocker likely fought it off:

let popUpWindow = window.open('https://example.com'); // 'I solemnly swear that I am up to no good'
if (!popUpWindow) {
   // Guide users on how to whitelist your site 
}


Generate user-friendly instructions if they need to whitelist your site. If needed, provide an alternative UI experience via a fake modal popup.

Promises, promises

Promises are elegant and easy to manage. Wrap your window.open in a promise and handle the success and failure gracefully:

new Promise((resolve, reject) => {
    let popUp = window.open(url); // 'Knock, Knock. Who's there?'
    popUp ? resolve(popUp) : reject('Pop-up was blocked'); // 'Pop-up who? Pop-up blocked that's who!'
})
.then(window => /* your code here */)
.catch(error => /* your code here */);


Try another door

Straight to the point with clicks

Connect window.open directly with an onclick event:

document.querySelector('#pop-link').onclick = function() {
  const pop = window.open('https://example.com');
  return !pop; // 'I came, I clicked, I... blocked?'
};


For target="_blank" links, prepare an onclick handler to master all possibilities.

Consider modal or new tab tricks

Do not be disheartened when pop-ups are not welcome. New tabs or in-page modals also provide a smooth user experience and are less susceptible to itchy popup blockers.

Plan B : Redirects for dead-ends

When pop-ups are unacceptable, go for redirects, especially in OAuth flows. Everyone appreciates a plan B, including your user and their browser!

A quick comparison

Pros:

• User-friendly
• Compliant with browser security
• User remains in control

Cons:

• Might need plan B and modal magic
• May cause confusion for non-technical users
• Possibly a game of browser roulette

Best practices

• Prioritize User experience
• Ensure solutions are accessible and intuitive
• Strive for universal functionality under different scenarios and browsers
• Guide users on responding to pop-up blockers