How to open a new window with window.open in an AJAX request response will be blocked by the browser

First, the problem description

Ajax asynchronous request after the success of a new window to open the URL, using the window.open () method, but will be blocked by the browser, users need to click.

Second, the problem analysis

The browser intercepts the new window because it is not actively triggered by the user, so it thinks it is unsafe to intercept, even if the Ajax callback function simulates the execution of user behavior such as click or submit (Trigger (' click ')). The browser is also considered not to be actively triggered by the user and therefore cannot be safely executed, so it is intercepted.

Description

1, if it is in <a href= "javascript : void (0) "onclick=" Fun () "></a>

2, if not to open a new window, but instead of the original page address, you can use window.location = Newurl to achieve, so it will not be intercepted.

Third, the solution

Before the AJAX request, open a blank window with window.open and set the window's Location property to the new URL in the AJAX response function.

Code examples include:

function Fun   () {     var tmpwin  =window.open ()           ajax (XXX, handle () {             //  callback function. This is pseudo code, syntax is not allowed.             var  newurl  = xxxx            = newurl;       })}

The above method, when there is a problem, because the opening of a blank window, if the AJAX request failed (network or business logic problems), the new window will not have normal results, it may cause users to doubt.
One solution is to consider giving a hint, such as tmpWin.document.write ("Server handling Exception") when there is a problem with Ajax;

Even to prevent the Ajax response time is too long, when the window is new, immediately give the hint TmpWin.document.write ("Server is processing, please later");

If Ajax returns normally, the original printed information will be overwritten with the new page information because the location value is set.

Here's another way, but there are flaws:

Because Ajax can be set as a synchronous request, you can open a new window with window.open after the AJAX request. Such as:

function Fun () {     var  result;     Ajax ({  // need to set sync request           .....) = xxx           ...     })        if (Result) {          window.open (xxxx)     }}

The above approach, because it is the result of the AJAX request to judge, only open a new window, to avoid the above mentioned problem.
But because it is a synchronous request, in our test found a problem, if the server response time is too long, one is the interface will be paused (user experience is not good), and second, the new window will be intercepted.

There is no problem until the server returns quickly. When we were testing, we had 1 seconds of sleep in the server code processing and found a new window was intercepted.

Iv. Summary

In summary, it can be seen that there is no particularly perfect way to open a new window after Ajax returns. In particular, according to the business characteristics of their own system to take the corresponding approach.

How to open a new window with window.open in an AJAX request response will be blocked by the browser