javascript - example - w3schools jquery ajax get




jquery window.open in ajax successo bloccato (2)

Per aprire un nuovo URL nella finestra che hai aperto in onclick , onclick come segue

  1. Memorizza la nuova finestra creata in una variabile var newWindow = window.open("","_blank");
  2. Cambia la posizione della nuova finestra newWindow.location.href = newURL;

Una cosa aggiuntiva che può essere fatta per migliorare l'esperienza dell'utente è quella di inviare immediatamente la nuova finestra allo sfondo ( newWindow.blur ) dopo l'apertura e quindi portarla nuovamente in primo piano ( newWindow.focus ) mentre si apre l'URL della nuova finestra.

Cercando di aprire una nuova finestra del browser nella mia chiamata di successo ajax, tuttavia, viene bloccato come popup. Ho fatto un po 'di ricerche e ho scoperto che un evento utente deve essere legato alla finestra. Questo perché non si verifichi.

Ho anche trovato questa soluzione in cui si apre una finestra vuota prima che ajax quindi carichi l'url normalmente nella chiamata di successo.

Quindi con questo ho due domande:

1 - Questa è l'unica soluzione perché preferirei non aprire questa finestra vuota.

2 - Se questo è davvero l'unico modo, allora come posso aggiungere load html in questa nuova finestra? Ad esempio, se il mio ajax non riesce, come posso aggiungere il mio testo di errore in questa finestra vuota dal momento che l'url non verrà aperto?

Dovrei anche notare che non voglio rendere la chiamata ajax sincrona ... questo sconfigge lo scopo di ajax e credo che sarà deprecato se non già ... correggimi se leggo male nella mia ricerca.

    $('#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');
                }               
            });
        });
    });

MODIFICARE:

Per chiunque sia interessato ... ecco la soluzione che mi è venuta in mente. È necessario un nome per la nuova finestra in modo che i clic successivi si aprano nella stessa finestra e non si aprano più volte nuovi. L'aggiunta di html è leggermente diversa da quella indicata nella risposta e funziona. L'offuscamento della finestra non funziona, quindi non è lì. Da quello che ho potuto trovare questo non è controllabile ed è una cosa del browser.

    $('#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>';
                }               
            });
        });

Fai un window.open("about:blank", "newPage"); prima della chiamata AJAX e dopo la chiamata aggiungere l'URL alla finestra aperta chiamando window.open("http://google.com", "newPage"); .





jquery