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

Question

在最新版本的OSX上使用Chrome浏览Facebook时，我发现在评论框中开始输入并单击其他链接或按下返回按钮会触发一个确认窗口，询问是否要离开。

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

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

- Corey Ballou

---

他们可能正在处理链接点击和 popstate 事件，并始终抑制默认操作。 - SLaks

正如您在http://www.businessinsider.com/facebook-saves-stuff-you-start-typing-and-the-delete-2013-12中所看到的，他们有更高的逻辑并实现了像那样的问题。 ;) - loveNoHate

@SLaksпјҢзңӢиө·жқҘдҪ жүҖжҢҮеҮәзҡ„popstateеҫҲеҸҜиғҪжҳҜзҪӘйӯҒзҘёйҰ–гҖӮеёҢжңӣжңүдәәиғҪеҸ‘еёғдёҖдёӘз»“еҗҲиҝҷдёӨдёӘпјҲй“ҫжҺҘз»‘е®ҡе’Ңpopstateпјүзҡ„жҰӮеҝөйӘҢиҜҒгҖӮhttps://developer.mozilla.org/en-US/docs/Web/API/Window.onpopstate - Corey Ballou

好的，最后一件事。popstate 只在同一文档中起作用，这意味着你不仅需要使用 AJAX，还需要使用 .htacess 路由，例如将所有“文档”路由到 index.php。然后你就可以在同一页上防止该事件的发生！ - loveNoHate

现在Facebook至少在Chrome版本49.0.2623.110 m上测试使用本地对话框。 - Ezekiel Baniaga

Answer 1

好的，我在Stackoverflow上找到了这个答案 链接。

这个处理了onbeforeunload事件。 要在浏览器中测试它，只需输入：

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

在您的控制台中输入，按回车键并尝试后退按钮。

现在是您真正的答案：

Facebook以上述描述的方式处理后退按钮的按下（如我所测试的），并通过单击页面上弹出的包含问题的

上的另一个链接来取消评论。

编辑

如果可以防止浏览器离开AJAX上下文，这将起作用（在控制台中添加）：

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

我在这里回答，因为 Facebook 没有回答你的问题。但我真诚地希望有人能证明它是错误的！

- loveNoHate

---

onbeforeunload 不是我要找的。谢谢。 - Corey Ballou

我知道，但是当我在Facebook上输入评论时，当我点击返回按钮时，只会弹出那个丑陋的对话框！？！ - loveNoHate

同样，当离开页面时，popstate的这个概念也只能在AJAX环境下保存，就像我的第一个链接所描述的那样。首先，您必须能够完全禁用后退按钮以捕获事件。但是，当您离开已经ajaxified的环境时，您的脚本会随着单击后退按钮而丢失！？！ - loveNoHate

@cballou 已更新!! ;-) - loveNoHate