web-dev-qa-db-fra.com

La boîte de dialogue fonctionne pendant 1 seconde et disparaît?

J'exécute une boîte de dialogue lorsque l'utilisateur quitte la page. La seule chose est-il fonctionne pendant 1 seconde et disparaît? Je sais que cela a à voir avec bind('beforeunload'), mais le dialogue meurt plus tôt que vous ne pouvez le lire.

Comment puis-je empêcher cela d'arriver?

$(document).ready(function() {  

    // Append dialog pop-up modem to body of page
    $('body').append("<div id='confirmDialog' title='Confirm'><p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Are you sure you want to leave " + brandName + "? <br /> Your order will not be saved.</p></div>");

    // Create Dialog box
    $('#confirmDialog').dialog({
      autoOpen: false,
      modal: true,
      overlay: {
        backgroundColor: '#000',
        opacity: 0.5
      },
      buttons: {
        'I am sure': function() {
          var href = $(this).dialog('option', 'href', this.href);
          window.location.href = href;
        },
        'Complete my order': function() {
          $(this).dialog('close');
        }
      }
    });

    // Bind event to Before user leaves page with function parameter e
    $(window).bind('beforeunload', function(e) {    
        // Mozilla takes the
        var e = $('#confirmDialog').dialog('open').dialog('option', 'href', this.href);
        // For IE and Firefox prior to version 4
        if (e){
            $('#confirmDialog').dialog('open').dialog('option', 'href', this.href);
        }
        // For Safari
        e.$('#confirmDialog').dialog('open').dialog('option', 'href', this.href);
    }); 

    // unbind function if user clicks a link
    $('a').click(function(event) {
        $(window).unbind();
        //event.preventDefault();
        //$('#confirmDialog').dialog('option', 'href', this.href).dialog('open');
    });

    // unbind function if user submits a form
    $('form').submit(function() {
        $(window).unbind();
    });
});
jqueryjquery-ui
59
user154107

beforeunload utilise une méthode intégrée au navigateur. Vous devez y renvoyer une chaîne. Le navigateur l'affichera et demandera à l'utilisateur s'il souhaite quitter la page.

Vous ne pouvez pas utiliser vos propres boîtes de dialogue (ou les boîtes de dialogue modales jQueryUI) pour remplacer beforeunload.

beforeunload ne peut pas rediriger l'utilisateur vers une autre page.

$(window).on('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Cela fera apparaître une boîte d'alerte indiquant 'Are you sure you want to leave?' et demandant à l'utilisateur s'il souhaite quitter la page.

(UPDATE: Firefox n'affiche pas votre message personnalisé, il n'en affiche que le sien.)

Si vous souhaitez exécuter une fonction pendant le déchargement de la page, vous pouvez utiliser $(window).unload(). Notez simplement qu'il ne peut pas empêcher la page de se décharger ou de rediriger l'utilisateur. (UPDATE: Chrome et Firefox bloquent les alertes dans unload.)

$(window).unload(function(){
  alert('Bye.');
});

Démo: http://jsfiddle.net/3kvAC/241/

METTRE À JOUR:

$(...).unload(...) est obsolète depuis jQuery v1.8, utilisez plutôt:

$(window).on('unload', function(){
});
153
Rocket Hazmat

Vous pouvez également utiliser la méthode de déchargement suivante introduite par Microsoft pour y parvenir . Cliquez sur ici pour voir la démonstration en direct.

function closeIt()
  {
    return "Any string value here forces a dialog box to \n" + 
         "appear before closing the window.";
  }
  window.onbeforeunload = closeIt;

Cliquez sur pour lire la documentation Microsoft.

3
kbvishnu

Dans mon cas, je l'utilise pour afficher un "préchargeur" ​​avant de passer à une autre partie de mon application Web. Cela correspond donc au "préchargeur" ​​qui apparaît dans la nouvelle page ouverte, pour un changement esthétique entre les pages.

Qu'est-ce que cela a fonctionné pour moi (et j'ai tout essayé), était ceci:

function myLoader() {
    // Show my Loader Script;
}

$( window ).on( 'beforeunload' , function() {
    myLoader();
} );
0
DeathMomo