1

I have a button that needs to fetch data on click before calling a third party library which ultimately opens a popup window.

The problem that I have is that it works in Chrome, but fails in Firefox and Safari because the popup window is being blocked by their popup blockers.

Avoid browser popup blockers contains a work-around, however it doesn't work for me because I don't instantiate the popup window myself (the third party library does)

Is there a way to get Firefox and Safari to recognize a click > fetch (promise) as a user initiated action so that it doesn't trigger the popup blocker?

Note: The following snippet is included for readability, but it doesn't behave as expected using the StackOverflow code snippet tool. It is reproducible in the following JSFiddle: https://jsfiddle.net/jwrLgqs3/

function thirdPartyLibraryThatOpensWindow(params) {
  window.open(params.url);
}

document.querySelector('button').addEventListener('click', async () => {
  const response = await fetch('https://dog.ceo/api/breeds/image/random');
  const data = await response.json();
  
  thirdPartyLibraryThatOpensWindow({url: data.message});
});
<button>Promise Button</button>

EDIT: I am using Firefox 70.0.1 on MacOS Mojave (10.14.6)

EDIT: Update to fix up statements that it was working in Safari, it doesn't

EDIT: Works in Opera 64

Soc
  • 7,425
  • 4
  • 13
  • 30
  • Well there is little you can no to keep the pop up blocker from blocking it. You can try to open it first and change the location. Or you can detect it is blocked and tell the user. – epascarello Nov 06 '19 at 20:31
  • If you use the method described in the answer, it works https://jsfiddle.net/mxwtjkuo/ ... of course, **you** can't change the third party library, therefore you can't fix your problem - why are you using a third party library to open a new window? – Bravo Nov 06 '19 at 20:31
  • @epascarello, unfortunately I can't open the window as the third party library does this. – Soc Nov 06 '19 at 22:33
  • @Bravo, the third party is responsible for collecting user input... it does it in a popup window. I was trying to get some additional information so that I could pass it as a parameter. The snippet that I provided was an example to demonstrate the issue. – Soc Nov 06 '19 at 22:38
  • @Soc - I understand all that, I'm saying you can't change third party code, so you can't fix this issue – Bravo Nov 06 '19 at 23:59
  • It would seem to me that the data you are fetching has nothing to do with any input, so you can probably fetch this ahead of time, and then the button click will just open the popup, which should work on firefox – smac89 Mar 24 '22 at 17:23

0 Answers0