window.open 在用户操作期间被阻止为弹出窗口

Question

Firefox is blocking my use of window.open and blocking it as if it's an unwanted popup.

I have a ui with a button.

When the button is pressed I make a call to a service to fetch some data and then use the result of that call as input to the url I window.open() to.

The psudocode looks something like:

onClick = (selectedAccount, $event){
  this.serviceBroker.getUrl(selectedAccount).then(data => window.open(data.url, '_blank', 'noreferrer'));
}

The above code will display a message in Firefox saying popup blocked would you like to allow this popup?
I'm assuming this is happening because the call to window.open is being passed into a service that doesn't have the user action context.

If I change the code to be:

onClick = selectedAccount, $event){
  window.open(<hardcoded_url>,'_blank', 'noreferrer');
}

Then the new tab opens and I do not receive the unwanted popup blocked

I've tried binding the context of function with the $event as the resolve call of the promise, but it didn't help

let test = data => window.open(data.url, '_blank', 'noreferrer');
onClick = (selectedAccount, $event){
  this.serviceBroker.getUrl(selectedAccount).then(test.bind(this));
}

This is only occurring in Firefox and the popup is not blocked in IE, Chrome, or Edge.

Answer 1

All browsers support window.open() to show popups, but there are some rules. The window should be open as a result of a user action , for example, button click. Still, if you add async call inside of the button click event and try to open the popup window inside of then/callback , it is no longer considered as a user action, and such popup will be blocked .

const popUp = (url) => {
       const isOpen = window.open(url, '_blank')
    
        if(isOpen==null){
           return true;
        }

       return false;
   };

 this.serviceBroker.getUrl(selectedAccount).then(data => popUp(data.url));

I tried to keep the async call on a button click, still, it was blocked.

https://codesandbox.io/s/zen-field-1srdo?file=/src/Moondc.js

The best workaround would be to do the open at first then fill it with the content once the async action completes.

let popUp = window.open(url, '_blank');

this.serviceBroker.getUrl(selectedAccount).then(data => {
            popUp.document.write(data.url);
            popUp.focus();
});

or simply,

let popUp= window.open(...);

 this.serviceBroker.getUrl(selectedAccount).then(data => {
          popUp.location = data.url;
    });