집 > 기사 > 웹 프론트엔드 > Ajax 요청 응답에서 새 창을 열 때 가로채기를 처리하는 방법

Ajax 요청 응답에서 새 창을 열 때 가로채기를 처리하는 방법

php中世界最好的语言원래의: 2018-04-03 17:30:561813검색

이번에는 Ajax 요청 응답에서 새 창 열기 차단을 처리하는 방법을 소개하겠습니다. Ajax 요청 응답에서 새 창 열기 차단을 처리할 때 주의 사항은 무엇입니까? 실제 사례를 살펴보겠습니다.

1. 문제 설명

ajax 비동기 요청이 성공한 후 URL을 열려면 새 창을 열어야 하지만 window.open() 메소드가 사용되지만 가로채게 됩니다. 브라우저에 표시되며 사용자가 클릭해야 합니다.

2. 문제 분석

브라우저가 새로 열린 창을 가로채는 이유는 해당 작업이 사용자에 의해 적극적으로 실행되지 않기 때문에 ajax 콜백이 발생하더라도 안전하지 않다고 판단하고 가로채기 때문입니다. 기능 클릭이나 제출(트리거('클릭'))과 같은 사용자 동작을 시뮬레이션할 때 브라우저도 사용자에 의해 적극적으로 트리거되지 않는다고 생각하므로 안전하게 실행할 수 없으므로 차단됩니다.

지침:

1. javascript:void(0)" onclick="fun()">에 지정된 재미있는 방법인 경우 window.open()은 브라우저가 활성화된 것으로 간주하므로 가로채지 않습니다. 그러나 Ajax 요청에 대한 응답으로 창을 여는 것은 차단됩니다.

2. 새 창을 여는 대신 원래 웹페이지 주소를 변경하는 경우 window.location = newurl을 사용하여 가로채지 않도록 할 수 있습니다.

3. Solution

ajax 요청 전에 window.open을 사용하여 빈 창을 연 다음 ajax 응답 함수에서 창의 위치 속성을 새 URL로 설정합니다.

다음과 같은 코드 예:

function fun(){
var tmpWin =window.open()
ajax(xxx, handle(){ 
//回调函数。这是伪代码，语法不准。
var newurl = xxxx
tmpWin.location = newurl;
})
}

위 방법에는 문제가 있습니다. 먼저 빈 창이 열리기 때문에 ajax 요청이 실패하면(네트워크 또는 비즈니스 로직 문제) 새 창에서 정상적인 결과가 나오지 않습니다. .사용자에게 혼란을 야기할 수 있습니다.
한 가지 해결책은 ajax에 문제가 있을 때 tmpWin.document.write("ServerprocessingException");

Ajax 응답 시간이 너무 길어지는 것을 방지하기 위해와 같은 프롬프트를 제공하는 것을 고려할 수 있다는 것입니다. 창이 생성되면 즉시 tmpWin.document.write("서버가 처리 중입니다. 잠시 기다려 주십시오.")라는 프롬프트를 표시합니다.

나중에 ajax가 정상적으로 반환되면 위치 값이 설정되었기 때문에 원래 인쇄된 정보를 새 정보로 덮어쓰게 됩니다. 페이지 정보.

또 다른 방법이 있지만 결함도 있습니다.

ajax는 동기 요청으로 설정할 수 있으므로 ajax 요청 후에 window.open을 사용하여 새 창을 열 수 있습니다. 예:

function fun(){
var result;
ajax({ //需要设置同步请求
.....
result = xxx 
.......
}) 
if(result){
window.open(xxxx)
}
}

위 접근 방식은 ajax 요청 결과를 판단한 후 새 창을 열기 때문에 위에서 언급한 문제를 방지합니다.
하지만 동기 요청이기 때문에 테스트에서 문제를 발견했습니다. 서버 응답 시간이 너무 길면 첫째로 인터페이스가 일시 중지되고(사용자 경험이 좋지 않음) 둘째로 새 창이 차단됩니다. .

서버가 빨리 돌아오면 문제 없습니다. 테스트 도중 서버 코드 처리 중에 1초 동안 잠을 자다가 새 창이 차단된 것을 발견했습니다.

IV. 요약

요약하자면, Ajax가 반환된 후 새 창을 여는 데 특별히 완벽한 방법은 없다는 것을 알 수 있습니다. 구체적으로는 자사 시스템의 업무 특성에 따라 적절한 조치를 취해야 합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!