Facebook如何处理他们的onbeforeunload确认对话框?

时间:2014-02-04 15:33:54

标签: javascript modal-dialog onbeforeunload

在OSX上的最新Chrome浏览Facebook时,我注意到开始输入评论框并点击其他链接或按后退按钮会触发确认窗口,询问我是否要离开:

Facebook Confirmation Dialog

作为一名老派开发人员,我认为唯一的可能性是将onbeforeunload事件附加到页面以处理后退按钮点击。我知道你可以对锚点进行全局绑定来模拟onbeforeunload,但我很惊讶他们设法有一个自定义样式的确认,而不是股票,丑陋的确认对话框。

他们是怎么做到的?这是某种HTML5窗口历史记录还是pushState事件触发器?

1 个答案:

答案 0 :(得分:2)

好的,我在Stackoverflow answer上找到了这个here

这会处理onbeforeunload 要在浏览器中测试,只需输入

即可
window.onbeforeunload = function() { return "Your work will be lost."; };

进入您的控制台,按回车并尝试后退按钮。

现在回答你的真实答案:

Facebook通过点击页面上另一个弹出cancel(l)ing的链接,以上述方式(我测试出来)和评论的div处理按下后退按钮在你的问题中。

修改

如果可以阻止浏览器离开AJAX上下文,这将有效(将其添加到控制台中):

window.onpopstate = function (event) {
 alert("location: " + document.location);
 event.preventDefault();
 return false;
}

我在这里回答,因为facebook没有这样做,这是你最初的问题。但我衷心希望有人证明这是错误的!