Solution to the problem that using window.open to open a new window in Ajax request response is intercepted

1. Problem description

After the asynchronous asynchronous request is successful, a new window needs to be opened to open the url. The window.open() method is used, but it will be intercepted by the browser. The user needs to click Down.

2. Problem Analysis

The reason why the browser intercepts newly opened windows is because the operation is not actively triggered by the user, so it thinks it is unsafe. Intercepted, even if the user behavior such as click or submit is simulated in the ajax callback function (trigger('click')), the browser will think that it is not actively triggered by the user, so it cannot be executed safely, so it is intercepted.

Instructions:

1. If it is Calling window.open() in the fun method specified in this will not be intercepted, because the browser will think it is active. But opening the window in the response of the ajax request will be intercepted.

2. If instead of opening a new window, you change the original web page address, you can use window.location = newurl to achieve this, so that it will not be intercepted.

3. Solution

Before ajax request, use window.open to open a blank window, and then set the location attribute of the window in the ajax response function for the new url.

Code examples such as:

function fun(){
var tmpWin =window.open()
ajax(xxx, handle(){
//回调函数。这是伪代码，语法不准。
var newurl = xxxx
tmpWin.location = newurl;
})
}

There is a problem with the above method, because a blank window is opened first. If the ajax request After a failure (network or business logic problem), there will be no normal results reflected in the new window, which may cause confusion to the user.
One solution is that when there is a problem with ajax, you can consider giving a prompt, such as tmpWin.document.write("Server processing exception");

Even to prevent ajax response time Too long. When the window is created, a prompt will be given immediately tmpWin.document.write("The server is processing, please wait");

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

There is another method here, but it also has flaws:

Because ajax can be set as a synchronous request, you can use window.open to open a new window after the ajax request. . For example:

function fun(){
var result;
ajax({ //需要设置同步请求
.....
result = xxx
.......
})
if(result){
window.open(xxxx)
}
}

The above approach avoids the problems mentioned above because it opens a new window after judging the result of the ajax request.
But because it is a synchronous request, we found a problem in our test. If the server response time is too long, firstly, the interface will pause (the user experience is not good), and secondly, the new window will be blocked.

There is no problem only if the server returns quickly. During our test, we slept for 1 second during server code processing and found that the new window was blocked.

4. Summary

In summary, it can be seen that there is no particularly perfect method for opening a new window after ajax returns. Specifically, you need to take appropriate measures based on the business characteristics of your own system.

The above is the solution introduced by the editor to you when using window.open to open a new window in the Ajax request response and being intercepted. I hope it will be helpful to you. If you have any questions, please contact us. I will leave a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles on solutions to the interception of using window.open to open a new window in the Ajax request response, please pay attention to the PHP Chinese website!