programing

ajax 요청 후 Chrome window.open(크롬 창)이 팝업처럼 작동합니다.

css3 2023. 11. 6. 21:57

ajax 요청 후 Chrome window.open(크롬 창)이 팝업처럼 작동합니다.

사용자가 버튼을 누르면 ajax 요청을 수행한 다음 ajax 요청 결과를 사용하여 새 탭에서 열고 싶은 URL을 생성하는 상황이 발생합니다.그러나 ajax 요청에 대해 성공 처리기에서 window.open을 호출하면 팝업처럼 새 창에서 열립니다(팝업 차단기에 의해 차단됨).성공 코드는 클릭 핸들링 코드에서 비동기식 코드이기 때문에 크롬은 클릭과 인과관계가 있지만 클릭으로 트리거된 것은 아니라고 생각합니다.ajax 요청을 동기화하지 않고 이를 방지할 수 있는 방법이 있습니까?

편집 다음은 이러한 동작을 보여주는 몇 가지 최소 코드입니다.

$('#myButton').click(function() {
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {'json': JSON.stringify({
            url:'http://google.com'})},
        success: function(data) {
            window.open(data.url,'_blank');
        }
    });
});

http://jsfiddle.net/ESMUA/2/

한 가지 설명 사항:팝업 차단으로 차단되는 것보다 탭이 아닌 별도의 창에서 열리는 것이 더 걱정됩니다.

추가 시도

window.open(url,'_blank');

편집

사용자 작업의 즉각적인 결과가 아닌 페이지를 열 때(즉, 비동기화가 아닌) 팝업 차단 기능을 사용할 수는 없다고 생각합니다.

팝업 차단에 대한 사용자 조치처럼 보일 수 있습니다.

var $a = $('<a>', {
        href: url,
        target: '_blank' 
    });

$(document.body).append($a);
$a.click();

편집2

동기화를 유지하는 게 더 나은 것 같네요

새 창이 "동일한 원점"인 한 JS로 조작할 수 있는 힘이 있습니다.

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');

    setTimeout(function(){ // async
        wi.location.href = 'http://google.com';
    }, 500);
});

sync: false를 추가해 보십시오.효과가 있을 겁니다

$('#myButton').click(function() {
$.ajax({
    type: 'POST',
    async: false,
    url: '/echo/json/',
    data: {'json': JSON.stringify({
        url:'http://google.com'})},
    success: function(data) {
        window.open(data.url,'_blank');
    }
});
});

제게 도움이 된 것은 다음과 같습니다.

var win = window.open('about:blank', '_blank');

myrepository.postmethod('myserviceurl', myArgs)
.then(function(result) {
    win.location.href = 'http://yourtargetlocation.com/dir/page';
});

범위 내에 있는 동안 동기화 호출 전에 새 창 탭을 열고 창 핸들을 잡은 다음 약속에서 ajax 결과를 받으면 다시 탐색합니다.

위의 @pstenstrm에서 올린 답변(Edit 2)은 대부분 효과가 있지만, 솔루션을 보다 우아하게 만들기 위해 한 줄만 추가했습니다.제 경우의 ajax call이 1초 이상 걸리는데 빈 페이지에 직면한 사용자가 문제를 제기했습니다.좋은 점은 방금 만든 새 창에 HTML 콘텐츠를 넣을 수 있는 방법이 있다는 것입니다.

예:

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');
    $(wi.document.body).html("<p>Please wait while you are being redirected...</p>");

    setTimeout(function(){ // async
        wi.location.href = 'http://google.com';
    }, 500);
});

그러면 새 탭이 "방향 전환되는 동안 기다려주세요.."라는 텍스트로 채워집니다.." 사용자가 잠시 빈 페이지를 보는 것보다 더 우아해 보입니다.댓글로 올리고 싶었는데 평판이 안 좋아요.

믿을 수 있는 방법이 없습니다.FF 및 IE6 SP2에서 pop-blocker에 의해 탭/윈도우가 차단된 경우 window.open은 null 값을 반환합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open#FAQ

팝업 차단으로 창이 언제 막혔는지 어떻게 알 수 있습니까?Mozilla/Firefox와 Internet Explorer 6 SP2의 팝업 차단 기능이 내장되어 있으므로 window.open()의 반환 값을 확인해야 합니다. window가 열리지 않으면 null이 됩니다.그러나 대부분의 다른 팝업 차단에는 신뢰할 수 있는 방법이 없습니다.

언급URL : https://stackoverflow.com/questions/22007592/chrome-window-open-after-ajax-request-acts-like-popup