FireFox ブラウザでの Ajax リクエスト中にファイルをダウンロードする際の互換性の問題

最近あるプロジェクトに取り組んでいたのですが、プロジェクトの要件の 1 つが次のようなものでした。ファイルのリンクをクリックして、同時にバックグラウンドでリクエストを送信しました。開発プロセス中に多くの問題が発生しました。スクリプト ホーム プラットフォームの問題の概要を全員に共有しました。参考

要件は非常に簡単で、ファイルのリンクをクリックしてファイルをダウンロードし、同時にバックグラウンドにリクエストを送信します。この要求は非常に一般的であり、ユーザーがクリックしてダウンロードした後、統計情報を得るために、script タグまたは img タグ (画像 ping) のクロスドメイン機能を使用して、src 属性を統計情報に指定することができます。しかし、今回は ajax が使用されているため、この問題が発生します。

デモ コードは次のとおりです:

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

a タグに onclick イベントと href 属性の両方がある場合、onclick イベントのコールバックはデフォルト イベント (つまりジャンプ) の前に実行されることは誰もが知っています。 onclick の前に実行できることを正確に説明します。 イベント内で e.preventDefault() と同様のコードを使用して、デフォルト イベント (つまり、ジャンプ) の原因を削除します。したがって、上記のコードで a タグがクリックされると、onclick イベントのコールバックが最初に実行されます。つまり、コード内の ajax は非同期であるため、理論上は ajax リクエストが送信されます。同期についても同様です)、ダウンロードされたファイルはリクエスト中に開かれます。

Chrome、UC、Opera、および 2345 ブラウザーでのパフォーマンスは期待どおりです。Firefox の下をクリックするとファイルがダウンロードされますが、IE では Ajax 部分でエラーが報告されます。

最初の間違った考えは、クロスドメインがエラーを引き起こすということでした。ダウンロード リンクをクリックすると、ajax リクエストは、ページが href で指定されたアドレスにジャンプしようとしていると判断し、ブラウザーに ajax がクロスドメインであると認識させます。この間違った考えはすぐに覆されました。第一に、ajax リクエストが最初に行われたため、その時点ではリクエストはクロスドメインではありませんでした (通常、クロスドメインであるかどうかはコンソールによって指摘されます)。エラー); 3 番目に、次のコードが更新されました。エラーのさらなる証拠です。

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

ページを開いて ajax リクエストを作成します。ダウンロード ボタンをクリックすると、リクエストは中止されます。 a タグの href 属性値がファイルアドレスではなく、任意の URL に置き換えられた場合、a タグをクリックすると、そのページはすぐにタグが指すアドレスにジャンプし、そのページは存在しなくなります。そして ajax は当然中断されます。 a タグがファイル アドレスを指している場合、ff で同じ方法で解析されますか (ブラウザはそのアドレスにジャンプすると考えて ajax を終了します)?

答えは「はい」です。stackoverflow で答えを見つけました。

ダウンロード リンクをクリックすると、そう見えなくてもページから離れることになります。ファイル転送がない場合は、要求されたページが表示されます。target="_blank" を設定するか、ターゲットとして iframe を使用してください。質問からわかるように、chrome と ff の両方で 2010 年に同様の問題が発生し、chrome または webkit ベースのブラウザはその後のバージョンの反復でこの問題を修正しましたが、ff は常に問題を残しました。今までは（個人的には無理があると思いますが）。

問題の根本原因がわかれば、解決策はすぐにわかります。

方法 1:

最も簡単な方法は、target="_blank" を a タグに追加するだけです。実際、これは通常 Web ページで行われ、これも価値のある実践です。

方法 2:

a タグのデフォルトの動作は ajax リクエストを中断するため、リクエストの前に「デフォルトの動作」を置くのはどうでしょうか?

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

方法 3:

タイマーを設定してリクエストを遅延させますが、a タグのデフォルトのジャンプは Javascript スレッドの制御範囲内にないため、この遅延しきい値の設定は非常に重要です。テスト結果は実際には 2ms でしたが (予想していませんでした)、通常は約 100ms に設定しても問題ありません。 この方法は洗練されていないため、使用しないでください。

rreee

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

ドロップダウンリストに動的にデータを追加するAjaxの実装方法

Ajaxはアバター選択後に登録・アップロードする機能を実装

async:falseの違いを解説Ajax リクエストの async:true

以上がFireFox ブラウザでの Ajax リクエスト中にファイルをダウンロードする際の互換性の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。