Ajax 요청 과정 에서 FireFox(불 여우)브 라 우 저 에서 파일 을 다운로드 하 는 호환성 문제

필요 한 것 은 간단 합 니 다.파일 링크 를 클릭 하여 이 파일 을 다운로드 하고 배경 으로 요청 을 보 냅 니 다.수요 가 흔 합 니 다.사용자 가 다운 로드 를 클릭 한 후에 다운 로드 량 에 대한 통 계 를 해 야 합 니 다.통 계 를 통 해 script 태그 나 img 태그(그림 ping)의 크로스 도 메 인 능력 을 이용 하여 src 속성 을 통계 주 소 를 가리 키 지만 이번 에는 ajax 로 통 계 를 해서 이 문제 가 발생 했 습 니 다.
demo 코드 는 다음 과 같 습 니 다.

<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 브 라 우 저 에서 예상 한 것 과 일치 합 니 다.fireforx 에서 클릭 하면 다운로드 파일 이 튀 어 나 올 수 있 지만 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 에서 도 똑 같이 해석 되 지 않 습 니까?
답 은 긍정 적 입 니 다.저 는 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.
질문 을 통 해 알 수 있 듯 이 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 태그 의 기본 점프 는 자바 script 스 레 드 가 제어 할 수 있 는 범위 에 속 하지 않 기 때문에 이 지연 한도 값 의 설정 이 매우 중요 합 니 다.제 로 컬 테스트 결 과 는 2ms(또한 전혀 생각 하지 못 했 습 니 다)입 니 다.보통 100 ms 정도 로 설정 하면 ok 입 니 다.이 방법 은 우아 하지 않 아서 사용 해 서 는 안 된다.

<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 요청 과정 에서 다운로드 한 파일 이 FireFox(불 여우)브 라 우 저 에서 호 환 되 는 문 제 를 소개 하 였 으 며,앞으로 의 업무 학습 에 도움 이 되 기 를 바 랍 니 다.