Compatibility issue of downloading files during Ajax request under FireFox browser

I recently worked on a project, and one of the project requirements was like this. Click a file link to download the file, and at the same time send a request to the background. There were many problems during the development process. The editor shared the summary of the problems on the Script Home platform. For your reference

The requirement is very simple, click on a file link to download the file, and send a request to the background at the same time. The demand is very common. After users click to download, they usually need to count the download volume. For statistics, you can use the cross-domain capabilities of script tags or img tags (picture ping) to point their src attributes to the statistical address. But this time, ajax is used. According to statistics, this problem arises.

The demo code is as follows:

<a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
<script src="jQuery.js"></script>
<script>
document.getElementById("a").onclick = function(e) {
$.post("data.php");
};
</script>

We all know that if an a tag has both onclick event and href attribute, the callback of the onclick event will be in the default event (i.e. jump (jump), this is why you can use code like e.preventDefault() in the onclick event to remove the default event (i.e. jump). Therefore, if the a tag is clicked in the above code, the callback of the onclick event will first be executed, that is, an ajax request will be sent. In theory, because the ajax in the code is asynchronous (in fact, the same is true for synchronization), the downloaded file will be opened while requesting.

The performance in chrome, UC, opera, and 2345 browsers is consistent with expectations. Clicking under firefox can jump out to download the file, but the ajax part reports an error. It has not been tested under IE.

The wrong idea at the beginning was that cross-domain causes errors. When the download link is clicked, the ajax request will think that the page is about to jump to the address pointed to by the href, causing the browser to think that the ajax is cross-domain. This wrong idea was quickly overturned. First, because the ajax request was made first, the request did not cross domain at the moment; second, no cross-domain error was reported (usually the console will point out if it is a cross-domain error); third, the following code was updated Further proof of the error.

<a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
<script src="jQuery.js"></script>
<script>
$.post("data.php"); // data.php sleep(100)
</script>

Open the page and make an ajax request. Once the download button is clicked, the request is aborted. If the href attribute value of the a tag is not a file address, but replaced with any URL, if you click the a tag, the page will immediately jump to the address pointed to by the tag, and the page will no longer exist, and ajax will naturally be interrupted. . If the a tag points to a file address, will it be parsed in the same way under ff (the browser thinks it is going to jump to that address, and ajax will be terminated)?

The answer is yes, I found the answer in stackoverflow.

When clicking the download link you are leaving the page, even it does not look so. If there would no file transfer, you would see the requested page.. try to set a target="_blank" or use an iframe as target for the link.

As can be seen from the question, chrome and ff had similar problems in 2010, and chrome or webkit-based browsers fixed it in subsequent version iterations ff has left this issue until now (I personally think this is unreasonable).

Once you know the root of the problem, the solution will be readily apparent.

Method 1:

The simplest method is nothing more than adding target="_blank" to the a tag. In fact, this is usually how web pages do it. It is also an approach worthy of recognition.

Method 2:

Since the default behavior of the a tag will interrupt the ajax request, what about putting the "default behavior" before the request?

<a id="a" href="javascript:;" >click</a>
<script src="jQuery.js"></script>
<script>
document.getElementById("a").onclick = function(e) {
location.href = "http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe";
$.post("data.php");
};
</script>

Method 3:

Set a timer to delay the request, but because the default jump of the a tag is not within the range that the Javascript thread can control, this delay threshold The setting is very important. My local test result was actually 2ms (which I never expected). Generally, setting it to about 100ms is ok. This method is inelegant and should not be used.

<a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
<script src="jQuery.js"></script>
<script>
document.getElementById("a").onclick = function(e) {
setTimeout(function() {
$.post("data.php");
}, 100);
};
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax method to dynamically add data to the drop-down list

Ajax realizes the function of registering and selecting an avatar and then uploading

Detail the differences between async:false and async:true in Ajax requests

The above is the detailed content of Compatibility issue of downloading files during Ajax request under FireFox browser. For more information, please follow other related articles on the PHP Chinese website!