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.
