Shulou(Shulou.com)06/03 Report--

This article shows you how to solve the compatibility problem of downloading files under the FireFox browser during the Ajax request. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The requirement is simple. Click on a file link to download the file and send the request to the background. The demand is very common. Users usually need to count the number of downloads after clicking on the download. For statistics, you can use the cross-domain ability of script tags or img tags (image ping) to point their src attributes to statistical addresses. But this time, ajax is used for statistics, and this problem arises.

The demo code is as follows:

Clickdocument.getElementById ("a") .onclick = function (e) {$.post ("data.php");}

As we all know, if an a tag has both the onclick event and the href attribute, the callback of the onclick event is executed before the default event (that is, the jump), which is why the default event (that is, the jump) can be removed with code like e.preventDefault () in the onclick event. So the above code, if you click the a tag, will first execute the callback of the onclick event, that is, send an ajax request. In theory, because the ajax in the code is asynchronous (in fact, synchronization is the same), it will open the download file while requesting it.

The performance in chrome, UC, opera and 2345 browsers is as expected. Clicking on the download file under firefox can jump out of the download file, but some errors are reported in ajax and not tested in IE.

At first, the misconception was that cross-domain led to error reporting. When the download link is clicked, the ajax request assumes that the page is about to jump to the address referred to by the href, causing the browser to think that the ajax is cross-domain. The wrong idea was quickly overturned: first, the request did not cross-domain immediately because the ajax request was made first; second, no cross-domain error was reported (usually pointed out by the cross-domain error console); third, the following code further proved the error.

Click$.post ("data.php"); / / data.php sleep

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 the file address, but is replaced with any url, if you click the a tag, the page will immediately jump to the address pointed to by the tag, the page no longer exists, and the ajax will naturally be interrupted. If the a tag points to the file address, will it be parsed in the same way under ff (the browser thought it was going to jump to that address and aborted ajax)?

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 you can see from the question, both chrome and ff had similar problems in 2010, while browsers in the chrome or webkit kernel fixed the problem in later version iterations, while ff left the problem until now (which I don't think makes sense).

Knowing the root cause of the problem, the solution is about to come out.

Method 1:

The easiest way is to tag a with target= "_ blank". In fact, this is what web pages usually do, which is also commendable.

Method 2:

Since the default behavior of the a tag interrupts the ajax request, how about putting the "default behavior" before the request?

Clickdocument.getElementById ("a") .onclick = function (e) {location.href = "http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe"; $.post ("data.php");}

Method 3:

Setting a timer delays the request, but because the default jump of the a tag is not within the control of the Javascript thread, the setting of this delay threshold is very important. My local test result is 2ms (also unexpected), which is generally set to ok around 100ms. This method is not elegant and should not be used.

Clickdocument.getElementById ("a"). Onclick = function (e) {setTimeout (function () {$.post ("data.php");}, 100);}; the above is how to solve the compatibility problem of downloading files in FireFox browsers during Ajax requests. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.