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

Question

J'exécute une boîte de dialogue lorsque l'utilisateur quitte la page. Le seul problème est qu'elle fonctionne pendant 1 seconde et disparaît ? Je sais que cela a à voir avec bind('beforeunload') mais le dialogue meurt avant que vous ne puissiez le lire.

Comment puis-je empêcher que cela se produise ?

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

Answer 1

beforeunload utilise une méthode intégrée au navigateur, vous devez lui renvoyer une chaîne, et le navigateur affichera la chaîne et demandera à l'utilisateur s'il veut quitter la page.

Vous ne pouvez pas utiliser vos propres boîtes de dialogue (ou les boîtes de dialogue modales de jQueryUI) pour remplacer les éléments suivants 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 qui dira 'Are you sure you want to leave?' et demande à l'utilisateur s'il veut quitter la page.

(MISE À JOUR : Firefox n'affiche pas votre message personnalisé, il n'affiche que le sien).

Si vous souhaitez exécuter une fonction pendant le déchargement de la page, vous pouvez utiliser la méthode suivante $(window).unload() Il est à noter qu'il ne peut pas empêcher le déchargement de la page ni rediriger l'utilisateur. (MISE À JOUR : Chrome et Firefox bloquent les alertes en unload .)

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

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

UPDATE :

$(...).unload(...) es déprécié depuis jQuery v1.8, utilisez plutôt :

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

Answer 2

Vous pouvez également utiliser la méthode de déchargement suivante, introduite par Microsoft, pour y parvenir. Cliquez sur aquí pour voir une 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 de Microsoft.

Answer 3

Dans mon cas, je l'utilise pour afficher un "préchargeur" avant de passer à une autre partie de ma webapp, afin qu'il corresponde au "préchargeur" qui apparaît dans la nouvelle page ouverte, pour un changement esthétique entre les pages.

Ce qui a marché pour moi (et j'ai tout essayé), c'est ça :

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

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