programing

window.open()은(는) AJAX 성공 시 다르게 작동합니다.

itmemos 2023. 8. 20. 10:18
반응형

window.open()은(는) AJAX 성공 시 다르게 작동합니다.

제가 그 예를 보여드리면 문제를 설명하는 것이 더 쉬울 것입니다. -> http://jsfiddle.net/RU2SM/
보시다시피 두 개의 버튼이 있습니다. 하나는 '라고 합니다.'AJAX'와 'Direct'라는 이름의...그래서 '직접'을 클릭하면 창(크롬의 새 탭)이 열리지만, AJAX 성공 핸들러에서 window.open()을 만들려고 하면 똑같이 작동하지 않습니다.
AJAX에서 문제가 발생한 것은 확실하지만 어떻게 해결해야 할지 모르겠습니다.
어떤 좋은 아이디어라도 감사하겠습니다.감사해요.

이것은 매력적으로 작동합니다.

// Direct window.open()
$('#btnDirect').on('click',function(){
    window.open('http://google.com')
})
var success = false;  //NOTE THIS

// AJAX window.open()
$('#btnAJAX').on("click", function(){
    $.ajax({
      url: "/user/login/",
      context: document.body,
      async:false,   //NOTE THIS
      success: function(){  //THIS ALSO CHANGED
         success = true
      }
    });
    if(success){ //AND THIS CHANGED
      window.open('http://google.com')
    }
})

이것은 Ajax 호출이 성공적일 때 변수 성공을 true로 설정하는 것입니다.
async:false속성은 if 문이 Ajax 호출이 완료된 후에 실행되는지 확인합니다.
따라서 직접 링크와 동일한 상황에서 window.open이 실행됩니다.

문제는 브라우저가 종종 차단한다는 것입니다.window.opens는 사용자 작업에 대한 직접적인 응답으로 호출되지 않습니다.그래서 클릭 핸들러는 작동하지만(클릭은 사용자 작업) AJAX 핸들러는 작동하지 않습니다.

한 가지 해결책은 초기 클릭 작업 중에 창을 연 다음 AJAX 성공 시 창 위치를 업데이트하거나 AJAX 실패 시 창을 다시 닫는 것입니다.

그렇지 않으면 사용자가 브라우저에서 도메인의 팝업을 명시적으로 허용하도록 해야 합니다.

추가로, 비동기를 사용하는 것: false를 사용한 다음 window.open을 호출하는 것은 크롬과 파이어폭스에서는 작동하지만 사파리에서는 문제를 일으킬 수 있다는 것을 언급할 가치가 있습니다.팝업이 차단되었다는 정보도 제공하지 않습니다.

Ajax 호출이 성공한 후 논리를 구현하는 것이 더 낫습니다. 모든 Ajax 호출 실행에 대해 이벤트가 발생합니다(예: $.ajax).요청 완료$.ajax.요청. 실패. $.ajax.Request.done(function(){if(success){ // 로직 } 구현});

언급URL : https://stackoverflow.com/questions/10223388/window-open-works-different-on-ajax-success

반응형