对话框运行 1 秒后消失？答案

【问题标题】：Dialog box runs for 1 sec and disappears?对话框运行 1 秒后消失？
【发布时间】：2011-08-29 03:26:10
【问题描述】：

当用户离开页面时，我正在运行一个对话框。唯一的事情是它运行了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();
    });
});

【问题讨论】：

您需要返回false，否则事件会继续到unload，因此会关闭窗口...
如果返回 false，大多数浏览器会打开一个默认对话框：“留下”或“离开”
@balexandre: 从beforeunload 返回false 只会制作一个带有“false”的警告框。
复制an example的时候，尽量理解后再编辑。 e.$('#confirmDialog') 没有任何意义。

标签： jquery jquery-ui

【解决方案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(){
});

【讨论】：

Firefox 现在似乎也阻止了 alert()
@alumi：我猜浏览器不喜欢当你添加警报时浏览器不能离开页面。这只是展示活动有效的一个例子^^
请注意，window.onbeforeunload is not working on the iPad
在 IE10 中 - 此方法非常适合关闭选项卡或单击链接。但是当您尝试关闭窗口时 - 没有任何反应（没有提示并且窗口也没有关闭）
另外 - 这个 jsfiddle 工作得很好 - 但我希望它只在选项卡/窗口关闭时工作，而不是在链接点击时工作。怎么可能做到这一点？检测到锚点击或其他什么？

【解决方案2】：

你也可以使用下面微软介绍的卸载方法来实现。点击here观看现场演示。

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

Click 阅读 Microsoft 文档。

【讨论】：

不工作...自定义消息没有出现。浏览器只显示其默认消息。

【解决方案3】：

在我的情况下，我使用它在转到我的 web 应用程序的另一部分之前显示“预加载器”，因此这与打开的新页面中出现的“预加载器”相匹配，以实现页面之间的美学变化。

它对我有用（我尝试了所有方法），是这样的：

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

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

【讨论】：