Problem related to window.open() on Safari

Question

I know that Safari try to block the open of a new tab via window.open() during an ajax call. We need to call window.open() to open a new tab before the ajax call so that the program can prevent the blocking from Safari. Reference for above, window.open(url, '_blank'); not working on iMac/Safari.

However, what if I want to use information from an ajax call to validate whether I need to open a new tab, i.e. conditionally open a new tab depends on the validation of an ajax call?

Then I can't open a new tab before the ajax call. It is because if the validation is not passed, then I need to close the tab that I opened before the ajax call..., which is not the behavior that I want for my program.

How can I make it such that I can open a new tab given the that information are validated from an ajax call? Thanks all for answering!

let newTab = window.open();

someAjaxChecking(...).then((isValid)=>{

   // isValid is a return boolean from the ajax calling someAjaxChecking() to 
   // determine whether redirect the new tab or close it

   if(isValid){
     newTab.location = url;
   }else{
     newTab.close(); // ***it is not desire to open and close the new tab...
   }

})

The real case:

I need to send a form(set of data) to my backbend to validate the form(an AJAX calling);
then it will return a boolean(isValid) to tell whether the form is valid;
then it will open a new tab if the boolean(isValid) is true

Paolo · Answer 1 · 2020-04-01T09:59:16.520

2

If I understand what happens on your site from the user perspective is this:

User take action (ex. click a button)
You perform an async AJAX call
On success (callback) a new window is opened

Now, you can't implement the third step because the browser doesn't allow you to.

However you are allowed to open a new window from a callback triggered by user action (such as clicking a button or other element).

A solution could be:

perform the AJAX call as soon as you have the data to be validated
the AJAX callback stores the result (success or no-success). In case of success enable/display a button to open the new window
clicking the (enabled) button triggers a function that open the new window

Another solution is:

the user enters data
the user click the button
perform the AJAX call syncronously
if validation succeeds then open the new window

edited Apr 01 '20 at 09:59

answered Mar 31 '20 at 10:09

Paolo

15,233
27
70
91

Thanks for replying, Paolo! Based on your answer, the user need two operations(the first click of a button to perform the async AJAX call and the second click of the enabled button later) to open a new window, right? What if I want to make it for one click only? Given that Safari will block any call to window.open() which is made inside an ajax call. – Nathan W Apr 01 '20 at 03:10
@NathanW as soon as you have the data perform the validation via async ajax call (no need for the user to click button, you do it in background) - store the validation result where it can be accessed later (ex. a global variable) - when the user clicks the button to proceed you just check the validation result (the global variable) – Paolo Apr 01 '20 at 10:01
@NathanW se also **my second proposed solution** - note that both solutions require the user to do a single click – Paolo Apr 01 '20 at 10:01

Problem related to window.open() on Safari

1 Answers1