Question

用户离开页面后，我正在运行一个对话框。唯一的事情是它运行1秒并消失？我知道它与bind('beforeunload')有关，但对话框的死亡时间早于您可以阅读它。

如何阻止这种情况发生？

$(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利用浏览器内置的方法，您需要向其返回一个字符串，浏览器将显示该字符串并询问用户是否要离开该页面。

您不能使用自己的对话框（或jQueryUI模式对话框）来覆盖beforeunload。

beforeunload无法将用户重定向到其他网页。

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

这将弹出一个警告框，显示'Are you sure you want to leave?'并询问用户是否要离开该页面。

（更新：Firefox不显示您的自定义消息，它只显示自己的消息。）

如果要在页面卸载时运行函数，可以使用$(window).unload()，只需注意它无法阻止页面卸载或重定向用户。（更新：Chrome和Firefox会阻止unload中的警报。）

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

演示：http://jsfiddle.net/3kvAC/241/

<强>更新

$(...).unload(...)自jQuery v1.8开始为deprecated，而不是使用：

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

Answer 2

您还可以使用Microsoft引入的以下卸载方法来实现此目的。点击here查看在线演示。

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

Click阅读Microsoft文档。

Answer 3

在我的情况下，我使用它来显示预加载器＆＃39;在转到我的webapp的另一部分之前，所以这与“预加载器”＃39;出现在新页面中，以便在页面之间进行美学更改。

它对我有用（我尝试了一切），是这样的：

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

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

对话框运行1秒后消失？

3 个答案: