Kompatibilitätsproblem beim Herunterladen von Dateien während der Ajax-Anfrage im Firefox-Browser

Ich habe kürzlich an einem Projekt gearbeitet und eine der Projektanforderungen war wie folgt: Klicken Sie auf einen Dateilink, um die Datei herunterzuladen, und senden Sie gleichzeitig eine Anfrage an den Hintergrund. Während des Entwicklungsprozesses gab es viele Probleme. Der Herausgeber hat eine Zusammenfassung der Probleme auf der Script Home-Plattform zur Verfügung gestellt.

Die Anforderung ist ganz einfach: Klicken Sie auf einen Dateilink, um die Datei herunterzuladen, und senden Sie gleichzeitig eine Anfrage an den Hintergrund . Die Nachfrage ist sehr häufig, nachdem Benutzer zum Herunterladen geklickt haben. Für Statistiken können Sie die domänenübergreifenden Funktionen von Skript-Tags oder IMG-Tags (Bild-Ping) verwenden, um ihre SRC-Attribute auf die Statistik zu verweisen Aber dieses Mal wird Ajax verwendet. Laut Statistik tritt dieses Problem auf.

Der Democode lautet wie folgt:

<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>

Wir alle wissen, dass, wenn ein Tag sowohl ein Onclick-Ereignis als auch ein Href-Attribut hat, der Rückruf des Onclick-Ereignisses erfolgt im Standardereignis (d. h. Sprung (Jump)) enthalten ist, können Sie deshalb Code wie e.preventDefault() im Onclick-Ereignis verwenden, um das Standardereignis (d. h. Sprung) zu entfernen. Wenn im obigen Code auf das Tag „a“ geklickt wird, wird daher zuerst der Rückruf des onclick-Ereignisses ausgeführt, d (das Gleiche gilt für die Synchronisierung). Die heruntergeladene Datei wird bei der Anforderung geöffnet.

Die Leistung in Chrome-, UC-, Opera- und 2345-Browsern entspricht den Erwartungen, wenn Sie unter Firefox darauf klicken, um die Datei herunterzuladen, aber der Ajax-Teil meldet einen Fehler. Er wurde nicht unter IE getestet.

Die falsche Vorstellung am Anfang war, dass domänenübergreifendes Arbeiten Fehler verursachen würde. Wenn auf den Download-Link geklickt wird, geht die Ajax-Anfrage davon aus, dass die Seite im Begriff ist, zu der von href angegebenen Adresse zu springen, wodurch der Browser annimmt, dass Ajax domänenübergreifend ist. Diese falsche Idee wurde schnell verworfen, da die Ajax-Anfrage im Moment nicht domänenübergreifend war Fehler); Drittens wurde der folgende Code aktualisiert. Ein weiterer Beweis für den Fehler.

<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>

Öffnen Sie die Seite und stellen Sie eine Ajax-Anfrage. Sobald Sie auf die Download-Schaltfläche klicken, wird die Anfrage abgebrochen. Wenn der href-Attributwert des a-Tags keine Dateiadresse ist, sondern durch eine beliebige URL ersetzt wird und Sie auf das a-Tag klicken, springt die Seite sofort zu der Adresse, auf die das Tag verweist, und die Seite existiert nicht mehr. und Ajax werden natürlich unterbrochen. Wenn das a-Tag auf eine Dateiadresse verweist, wird es dann unter ff auf die gleiche Weise analysiert (der Browser geht davon aus, dass er zu dieser Adresse springen wird, und beendet Ajax)?

Die Antwort lautet: Ja, ich habe die Antwort auf Stackoverflow gefunden.

Wenn Sie auf den Download-Link klicken, verlassen Sie die Seite, auch wenn es nicht so aussieht. Wenn keine Dateiübertragung stattfinden würde, würden Sie die angeforderte Seite sehen. Versuchen Sie, ein Ziel = „_blank“ festzulegen oder zu verwenden ein Iframe als Ziel für den Link.

Wie aus der Frage hervorgeht, hatten Chrome und ff im Jahr 2010 ähnliche Probleme, und Chrome- oder Webkit-basierte Browser haben es in nachfolgenden Versionsiterationen behoben. ff hat dieses Problem bis dahin belassen jetzt (ich persönlich halte das für unvernünftig).

Wenn Sie die Ursache des Problems kennen, ist die Lösung schnell erkennbar.

Methode 1:

Die einfachste Methode besteht darin, target="_blank" zum a-Tag hinzuzufügen. Tatsächlich ist dies bei Webseiten normalerweise der Fall ist ebenfalls ein Ansatz, der Anerkennung verdient.

Methode 2:

Da das Standardverhalten des a-Tags die Ajax-Anfrage unterbricht, wie wäre es, wenn Sie das „Standardverhalten“ vor die Anfrage setzen?

<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>

Methode 3:

Stellen Sie einen Timer ein, um die Anforderung zu verzögern, aber da der Standardsprung des a-Tags nicht im Kontrollbereich des Javascript-Threads liegt, Dieser Verzögerungsschwellenwert ist sehr wichtig. Mein lokales Testergebnis war tatsächlich 2 ms (was ich nie erwartet hätte). Diese Methode ist unelegant und sollte nicht verwendet werden.

<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>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Implementierungsmethode zum dynamischen Hinzufügen von Daten zur Dropdown-Liste

Ajax-Implementierung der Registrierung und des Hochladens nach der Auswahl Avatar

Detailliert die Unterschiede zwischen async:false und async:true in Ajax-Anfragen

Das obige ist der detaillierte Inhalt vonKompatibilitätsproblem beim Herunterladen von Dateien während der Ajax-Anfrage im Firefox-Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!