How to deal with interception when opening a new window in Ajax request response

This time I will bring you how to deal with the interception of opening a new window in the Ajax request response. What are the things to note when dealing with the interception of opening a new window in the Ajax request response? The following is a practical case. Get up and take a look.

1. Problem description After ajax asynchronous request is successful, a new window needs to be opened to open the url, and

window.open# is used. ##() method, but it will be intercepted by the browser and requires the user to click.

2. Problem Analysis

The reason why the browser intercepts the newly opened window is because the operation is not actively triggered by the user, so it thinks This is intercepted because it is unsafe. Even if the ajax callback function

simulates user behavior such as click or submit (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 onclick="fun()"> 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 in the ajax response function Set the location attribute of the window to the new URL.

Code example:

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

When there is a problem with the above method, because a blank window is opened first, if the ajax request fails (network or business logic problem), there will be no new window. There will be normal results, which may cause confusion to users.

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 The ajax response time is too long. When the window is created, the prompt tmpWin.document.write("The server is processing, please wait") is immediately given;

If ajax returns normally later, it is 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 intercepted.

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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with Ajax submission garbled code under IE

Detailed steps for ajax to send data types to the server

The above is the detailed content of How to deal with interception when opening a new window in Ajax request response. For more information, please follow other related articles on the PHP Chinese website!