FireFox 브라우저에서 Ajax 요청 중 파일 다운로드 호환성 문제

최근에 프로젝트를 진행했는데, 프로젝트 요구 사항 중 하나가 파일 링크를 클릭해 파일을 다운로드하는 동시에 백그라운드로 요청을 보내는 것이었습니다. 개발 과정에서 많은 문제가 있었습니다. 모두를 위해 Script Home 플랫폼의 문제 요약을 공유했습니다. Reference

요구 사항은 매우 간단합니다. 파일 링크를 클릭하여 파일을 다운로드하는 동시에 백그라운드로 요청을 보냅니다. 수요는 매우 일반적입니다. 사용자가 다운로드를 클릭한 후 일반적으로 다운로드 볼륨을 계산해야 합니다. 통계의 경우 스크립트 태그 또는 img 태그(그림 핑)의 도메인 간 기능을 사용하여 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를 클릭하면 파일을 다운로드할 수 있지만 Ajax 부분에서는 오류가 보고됩니다. IE에서는 테스트되지 않았습니다.

처음에는 도메인 간 오류가 발생할 것이라는 잘못된 생각이 있었습니다. 다운로드 링크를 클릭하면 Ajax 요청은 페이지가 href가 가리키는 주소로 곧 이동하려고 한다고 생각하여 브라우저는 Ajax가 크로스 도메인이라고 생각하게 됩니다. 이 잘못된 생각은 먼저 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>
$.post("data.php"); // data.php sleep(100)
</script>

페이지를 열고 Ajax 요청을 하세요. 다운로드 버튼을 클릭하면 요청이 중단됩니다. a 태그의 href 속성 값이 파일 주소가 아니고 임의의 URL로 대체된 경우, a 태그를 클릭하면 해당 페이지는 즉시 태그가 가리키는 주소로 이동하게 되며 해당 페이지는 더 이상 존재하지 않게 되며, 그리고 ajax는 자연스럽게 중단될 것입니다. a 태그가 파일 주소를 가리키는 경우 ff에서 동일한 방식으로 구문 분석됩니까(브라우저는 해당 주소로 점프할 것이라고 생각하고 ajax를 종료함)?

답은 '예'입니다. stackoverflow에서 답을 찾았습니다.

페이지를 떠나는 다운로드 링크를 클릭하면 그렇게 보이지 않더라도 파일 전송이 없으면 요청한 페이지가 표시됩니다. target="_blank"를 설정하거나 iframe을 대상으로 사용해 보세요.

질문에서 볼 수 있듯이 2010년에는 chrome과 ff 모두 비슷한 문제가 있었고, chrome 또는 webkit 기반 브라우저는 후속 버전 반복에서 이 문제를 해결한 반면 ff는 항상 문제를 유지했습니다. 지금까지(개인적으로는 무리하다고 생각합니다).

문제의 근본 원인을 알면 해결책이 쉽게 드러납니다.

방법 1:

가장 간단한 방법은 a 태그에 target="_blank"를 추가하는 것입니다. 실제로 이는 일반적으로 웹 페이지에서 수행되며 이 또한 인정할 만한 관행입니다.

방법 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로 설정해도 괜찮습니다. 이 방법은 우아하지 않으므로 사용해서는 안 됩니다.

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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Ajax를 구현하여 드롭다운 목록에 동적으로 데이터를 추가하는 방법

Ajax는 아바타를 등록하고 선택한 후 업로드하는 기능을 구현합니다.

async:false의 차이점 분석 Ajax 요청의 경우 async:true

위 내용은 FireFox 브라우저에서 Ajax 요청 중 파일 다운로드 호환성 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!