Overcoming Popup Blocking Issues in Browser

Popups are frequently used in online applications to give consumers more functionality or information. Popup blocking by web browsers is a common problem faced by developers. In this article, we’ll look into one specific problem that comes up when using popups in the browser and offer a JavaSript fix for it.

Popup blocker notifications appear at the top right of the browser. Allowing popups once enables future redirection to new tabs, while blocking them prevents such redirection.

Problem:

Imagine that you have a web application that uses popup windows to show crucial information or carry out certain tasks. You laboriously create the code for a new popup using the `window.open()` function, but to your surprise, the browser is blocking the popup. Because the browser tries to prevent users from annoying ads while visiting a page. This interferes with your application’s functioning as well as the desired user experience.

Code snippet illustrating the problem:

function openInNewTab(url){
  window.open(url, '_blank').focus();
}

The popup usually cannot be opened by the browser, thus if you want the popup to open via the aforementioned method, it might not always work. Because it is using JavaScript DOM property and the browser by default blocks this. When a user accepts the popup for the first time on your website, it works. However, if a user blocks the popup, it will always be blocked.

Solution:

To tackle the issue of popup blocking in Chrome, we can employ an alternative approach that involves dynamically creating an anchor element and using it for navigation. Here’s a code snippet demonstrating the solution:

function dynamicallyCreateAnchorAndNavigate(url) {
  let anchorElement = document.createElement('a');
  anchorElement.href = url;
  document.body.appendChild(anchorElement);
  anchorElement.click();
  document.body.removeChild(anchorElement);
}

function openInNewTab(url){
  dynamicallyCreateAnchorAndNavigate(url);
}

The answer is comparatively simple. Starting with `document.createElement(‘a’)`, we create an anchor element and set its `href` property to the desired URL. The anchor element is then added to the document body using the `document.body.appendChild(anchorElement)` function. By doing this, we produce a clickable link that takes the place of the popup that was before disabled.

We use the `click()` method to mimic a click on the dynamically generated anchor element. By initiating navigation to the supplied URL, this action accomplishes the same goal as launching a fresh popup. After the navigation is finished, we clean up by using `document.body.removeChild(anchorElement)` to remove the anchor element from the document body.

Was it helpful?

Thank you for taking the time to read this. If you found it helpful, and informative, and you would like to show your support, you can consider “buying me a coffee”. Your support would mean a lot and make a real difference.❤️️

Follow me on “LinkedIn” and “GitHub” for more updates.