Sometimes when we try to open a window with the window.open
 method, we may see the browser permission popup asking for permission to open the popup created by window.open
 .
In this article, weâll look at how to avoid browser popup blockers within our JavaScript code.
Avoid Calling window.open in Async Functions
To avoid the permission popup for opening the popup, we should use avoid calling window.open
 in a function that returns a promise or in callbacks for functions like setTimeout
 , setInterval
 , or any other async function.
This is because, a popup can only be opened from an app without permission with direct user action.
The depth of the call chain may also matter since some older browsers requires permission is window.open
 isnât called by the function thatâs run immediately after a user action.
Therefore, we should call window.open
 within synchronous functions run as a result of direct user action to avoid the popup permission popup from showing in any browser.
We can check if a popup is blocked by checking if window.open
 returns null
 or undefined
 .
For instance, we can check if a popup window is blocked by writing:
const pop = (url, w, h) => {
const popup = window.open(url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500');
return popup !== null && typeof popup !== 'undefined'
}
console.log(pop('https://example.com'))
We call window.open
 with the url
 as the first argument and a string with some settings as the 3rd argument.
Then we return is popup
 isnât null
 and popup
 isnât undefined
 .
If the popup opens, then popup
 shouldnât be null
 and it shouldnât be undefined
 .
And so pop
 should return true
 if the popup opens.
Share