Ajax request response _ajax associated with window.open open new Windows blocked solution

I. Description of the problem

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

Second, the problem analysis

The browser intercepts a new open window because it is not the user's active trigger, so it thinks it is unsafe to intercept, even if the Ajax callback function simulates performing user actions such as click or submit (Trigger (' click ')), The browser also thinks it is not triggered by the user, so it cannot be executed securely, so it is intercepted.

Description

1. Calling fun () in the fun method specified in the <a href= "javascript:void (0)" onclick= "window.open ()" ></a> is not intercepted. Because the browser will think it is active. However, opening a window in the response of an AJAX request will be blocked.

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

Third, the solution

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

The code shows for example:

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

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

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

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

Here's another way, but there's a flaw:

Because Ajax can be set as a sync request, you can use window.open to open a new window after the AJAX request. Such as:

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

The above procedure, because is to the AJAX request result judgment, only then opens the new window, avoids the above question.
However, because it is synchronous request, we found a problem in our test, if the server response time is too long, one is the interface will be paused (user experience is not good), and the second is the new window will be intercepted.

There is no problem until the server returns soon. When we tested, we had 1 seconds of sleep in the server's code processing and found that a new window was intercepted.

Iv. Summary

In summary, you can see that there is no particularly perfect way to open a new window after Ajax returns. Specifically, according to the business characteristics of their own system to take the appropriate approach.

The above is a small set to introduce AJAX request response with window.open Open a new window was intercepted solution, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!