如何区分刷新（通过F5 /刷新按钮）和关闭浏览器？

Question

我有要求处理浏览器上的事件，如回来，刷新和跨浏览器关闭。问题是我的客户需要针对每个事件采用不同的逻辑。 对于后退按钮，该解决方案是相当精致：

• https://*.com/a/36786695/3462243

，但现在很难刷新和密切加以区分，所有的解决方案，我发现是关于使用“beforeunload”事件：

• How to know whether refresh button or browser back button is clicked in firefox
• Handle refresh page event with javascript
• https://forums.asp.net/t/1829278.aspx?Detect+Browser+refresh+reload+button+click+in+all+browsers按F5（这一个不稳定的工作）
• https://www.quora.com/What-is-the-best-way-to-detect-refresh-event-in-jquery
• https://www.sitepoint.com/community/t/detect-refresh-button-in-the-browser/1119/22

刷新，我可以在键盘上赶上事件，但是当浏览器用户按刷新按钮，我不能。如果我使用“beforeunload”，则关闭浏览器事件也是一样。

我还发现了一个变通方法解决方案：

• Identifying Between Refresh And Close Browser Actions
• How do I detect a page refresh using jquery?

但不幸的是，我想要做的是显示页面卸载之前消息（显示在浏览器接近但不刷新时）

有没有人知道它的解决方案（跨浏览器）

谢谢

Answer 1

您可能想要使用Cookies/window.sessionStorage。

您可以设置一个没有明确过期日期的cookie，以便它仅适用于当前会话（在用户关闭浏览器窗口之前有效）。
您也可以使用sessionStorage对象，它仅存储一个会话的数据。当用户关闭特定浏览器选项卡时，数据将被删除。

您可以按照appraoch：
1.创建一个cookie时，用户第一次访问该页面document.cookie = "userloggedin=true";或设置sessionStorage.userLoggedIn = true;

2.Cookie将刷新/关闭并重新打开选项卡后可用，如果cookie是不存在那么它意味着用户关闭了窗口并重新打开了它。
同样sessionStorage数据将被删除后用户关闭浏览器选项卡

希望这有助于！

Answer 2

您可以使用浏览器的performance.navigation对象来检测您的页面的导航类型。

var navigationType = performance.navigation.type; 

if (navigationType === performance.navigation.TYPE_BACK_FORWARD) { 
    console.log("Back/Forward button"); 
} else if (navigationType === performance.navigation.TYPE_RELOAD) { 
    console.log("Reloaded"); 
} else if (navigationType === performance.navigation.TYPE_NAVIGATE) { 
    console.log("Normal navigation"); 
} 

而且onbeforeunload事件可以照常使用来检测浏览器关闭。请参阅this documentation以了解有关导航常量的更多信息。