programing

jquery window.open in ajax 성공 차단

magicmemo 2023. 3. 17. 20:31
반응형

jquery window.open in ajax 성공 차단

ajax 성공 호출에서 새 브라우저 창을 열려고 했지만 팝업으로 차단되었습니다.검색을 해보니 사용자 이벤트를 창에 연결해야 합니다.열어봐야 이런 일이 일어나지 않습니다.

또한 Ajax 전에 빈 창을 열고 성공 콜에서 정상적으로 URL을 로드하는 솔루션도 찾았습니다.

그래서 이것과 관련하여 두 가지 질문이 있습니다.

1 - 이 빈 창을 열고 싶지 않기 때문에 이 방법밖에 없습니까?

2 - 이게 유일한 방법이라면 이 새로운 창에 html을 로드하려면 어떻게 해야 하나요?예를 들어, ajax가 실패했을 경우 URL이 열리지 않기 때문에 이 빈 창에 오류 텍스트를 추가하려면 어떻게 해야 합니까?

또, Ajax 콜을 동기화하고 싶지 않은 것도 주의해 주세요.이건 에이잭스의 목적을 저버린거야. 그리고 난 이게 이미 폐지되지 않았다면...검색에서 잘못 읽으면 정정해 주세요.

    $('#user-login').on('click', function () {
        var $form = $(this).closest('form');
        window.open('about:blank', 'myNewPage');

        $.ajax({
            type: 'post',
            url: '/spc_admin/process/p_user_login.php',
            data: $form.serialize(),
            dataType : 'json'
        }).done(function (response) {

            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){

                if (response.success)
                {
                    $myElem.html('<p><b class="text-blue">Success!</b> &nbsp;You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');                 

                    // open new window as logged in user
                    //window.open('http://www.example.com/');
                    window.open('http://www.example.com/', 'myNewPage');
                } 
                else
                {
                    $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');
                }               
            });
        });
    });

편집:

관심 있는 분들을 위해서...이게 제가 생각해낸 해결책입니다.연속 클릭이 같은 창에서 열리고 새 창이 반복적으로 열리지 않도록 새 창의 이름이 필요합니다.html을 추가하는 것은 답변에 나와 있는 것과 조금 다르며, 이것은 동작합니다.창문이 흐려지지 않아서 없어요.제가 아는 바로는 이것은 제어할 수 없고 브라우저에 관한 것입니다.

    $('#user-login').on('click', function () {
        var $form = $(this).closest('form');

        //open blank window onclick to prevent popup blocker
        var loginWindow = window.open('', 'UserLogin');

        $.ajax({
            type: 'post',
            url: '/spc_admin/process/p_user_login.php',
            data: $form.serialize(),
            dataType : 'json'
        }).done(function (response) {

            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){

                if (response.success)
                {
                    // show success
                    $myElem.html('<p><b class="text-blue">Success!</b> &nbsp;You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');                 

                    // open new window as logged in user
                    loginWindow.location.href = 'http://www.example.com/';
                } 
                else
                {
                    // show error
                    $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');

                    // add error to the new window (change this to load error page)
                    loginWindow.document.body.innerHTML = '<p><b>Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>';
                }               
            });
        });

에서 연 창에서 새 URL을 열기 위해onclick, 다음을 수행합니다.

  1. 생성한 새 창을 변수에 저장합니다.var newWindow = window.open("","_blank");
  2. 새 창의 위치 변경newWindow.location.href = newURL;

유저 익스피리언스를 향상시키기 위해서 할 수 있는 또 하나의 방법은, 새로운 창을 곧바로 백그라운드로 송신하는 것입니다( ).newWindow.blur를 열고 나서, 다시 포그라운드로 가져옵니다).newWindow.focusURL을 여는 동안 새 창을 엽니다.

을 실행합니다.window.open("about:blank", "newPage");AJAX 콜 전과 콜 후에 호출하여 열린 창에 URL을 추가합니다.window.open("http://google.com", "newPage");.

$('#user-login').on('click', function () {
    var $form = $(this).closest('form');

    $.ajax({
        type: 'post',
        url: '/spc_admin/process/p_user_login.php',
        data: $form.serialize(),
        dataType : 'json',
        success: function(res) {    
            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){
                $myElem.html('<p><b class="text-blue">Success!</b> &nbsp;You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');                 
                // open new window as logged in user
                window.open('http://www.example.com/', '_blank');
        } else {
            $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');
        }               
    });
});

언급URL : https://stackoverflow.com/questions/20822711/jquery-window-open-in-ajax-success-being-blocked

반응형