The compatibility of files downloaded during the Ajax request in the FireFox browser, ajaxfirefox

The compatibility of files downloaded during the Ajax request in the FireFox browser, ajaxfirefox

The requirement is simple. Click a file link to download the file and send a request to the background. The requirement is very common. users usually need to perform download statistics after clicking download. for statistics, you can use the cross-origin capability of the script tag or img Tag (image ping, point their src attribute to the statistics address. However, this problem occurs when ajax is used for statistics.

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 a tag a has both the onclick event and the href attribute, The onclick Event Callback will be executed before the default event (jump, this is exactly how e. the preventDefault () Code removes the cause of default events (that is, redirection. Therefore, if you click the tag in the above Code, The onclick Event Callback will be executed first, that is, the ajax request will be sent. Theoretically, because ajax in the Code is asynchronous (in fact, the same is true for synchronization ), therefore, the downloaded file will be opened at the request side.

Chrome, UC, opera, and 2345 are both the same as expected. You can click to download an object in firefox. However, ajax reports an error and IE does not test the download.

The first error is that cross-origin causes an error. When you click the download link, the ajax request will assume that the page is about to jump to the address indicated by href, And the browser will assume that the ajax cross-origin is used. This idea was quickly overturned. First, the request was not instantly cross-origin because ajax requests were first made. Second, no cross-origin error was reported (usually indicated by the cross-origin error console ); third, the following code further proves 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 then make an ajax request. Once you click the Download button, the request is aborted. If the href attribute value of tag a is not the file address, but is replaced by any url, if tag a is clicked, the page will jump to the address pointed to by the tag immediately, and the page does not exist, ajax is naturally interrupted. If tag a points to the file address, will it be parsed in the same way under ff (the browser thinks it is about to jump to the address and stops 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 wocould no file transfer, you wocould see the requested page .. try to set a target = "_ blank" or use an iframe as target for the link.

From the question, we can see that chrome and ff both had similar problems in 2010, and chrome or webkit kernel browsers fixed this problem in later version iterations, ff keeps the problem to the present (I think this is not reasonable ).

After knowing the root cause of the problem, the solution is ready.

Method 1:

The simplest method is to add target = "_ blank" to tag a. In fact, this is usually the case on Web pages. This is also a positive practice.

Method 2:

Since the default behavior of tag a causes ajax requests to be interrupted, what about placing "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 the timer to delay the request. However, because the default jump of tag a is not within the control range of the Javascript thread, the setting of this latency threshold is very important, my local test result is actually 2 ms (which I never expected). It is usually set to around 100 ms. This method is not elegant 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 content introduces the compatibility of files downloaded in the FireFox (FireFox) browser during the Ajax request process, and hopes to help you in your future work and study.

Articles you may be interested in:

• Solution: JS setTimeout Function incompatibility failure and not execution in Firefox browser
• Modify js Calendar controls to be compatible with IE9/Google/Firefox
• Solve the problem that ExtJS does not display in ie normally in chrome or Firefox.
• Add the code compatible with mainstream browsers such as 360/Firefox/Google/IE to the favorites page
• Self-Adaptive size of images in div using pure js (tested and compatible with Firefox)
• Simple implementation of Ajax displaying progress in the Request Process