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

在OSX上最新的Chrome浏览器中浏览Facebook时，我注意到开始在评论框中键入内容，然后单击另一个链接或按“后退”按钮会触发一个确认窗口，询问我是否要离开：

作为一名老派开发人员，我认为唯一的可能性是在页面上附加一个

onbeforeuload

事件来处理后退按钮的单击。我知道你可以在锚点上做一个全局绑定来模拟卸载前的

onbeforeunload

，但是我很惊讶他们居然有一个自定义样式的确认，而不是一个外观难看的库存确认对话框

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

好的，我在Stackoverflow上找到了这个

这将在卸载之前处理

on

要在浏览器中测试这一点，只需将

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

在控制台中，按enter键，然后尝试返回按钮

现在让我们来看看你真正的答案： Facebook以上述方式处理按下后退按钮（正如我测试出来的那样）和通过点击页面上另一个链接来取消（l）评论的

div

，该链接在你的问题中弹出

编辑 如果有可能阻止浏览器离开

AJAX

上下文，这将起作用（将其添加到控制台中）：

---

我在这里回答，因为facebook不这样做，这是你最初的问题。但我真心希望有人能证明这是错的

他们可能自己处理链接点击和

popstate

，并且总是抑制默认操作。正如您在这里所看到的，他们有更高的逻辑，在睡眠中实现类似问题的东西@SLaks正如您所指出的，似乎是

popstate

的罪魁祸首。希望有人能将两者结合起来（链接绑定和popstate）发布一个概念证明。好的，最后一件事

popstate

只起作用，这意味着您不仅必须使用

AJAX

，还必须使用

.htacess

路由，例如将所有“文档”路由到

index.php

。然后您可以在同一页面上阻止该事件！现在Facebook使用了native dialog，至少在Chrome版本49.0.2623.110 m

onbeforeunload

上进行了测试，这不是我想要的。谢谢。我知道，但是当我在facebook上点击后退按钮，输入评论时，只会弹出难看的对话！？！类似地，

popstate

的这个概念在离开页面时不起作用，只保存在

AJAX

环境中，正如我的第一个链接所描述的。首先，您必须能够禁用“后退”按钮来捕获事件。但是当您离开

ajaxified

环境时，您的脚本会因为单击“上一步”按钮而丢失@CBALOU已更新！！；-）

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