是否可以检测进入页面和刷新同一页面时的情况
if (entered) alert("hi");
if (refreshed) alert("you've refreshed");
不知何故,页面渲染在输入时和刷新时之间存在一些细微差别,检测这种情况比为我调试它要容易得多(如果它甚至可能的话——也许是一些浏览器优化的东西导致了它)。
是否可以检测进入页面和刷新同一页面时的情况
if (entered) alert("hi");
if (refreshed) alert("you've refreshed");
不知何故,页面渲染在输入时和刷新时之间存在一些细微差别,检测这种情况比为我调试它要容易得多(如果它甚至可能的话——也许是一些浏览器优化的东西导致了它)。
这不是一个理想的解决方案,但如果您的页面可以在 5 秒内加载,那么这将起作用,并且假设您没有导航到另一个页面,然后在 5 秒内返回。
window.onbeforeunload = function(){
window.sessionStorage.setItem('lastvisit', new Date().getTime());
}
var lastVisit = +window.sessionStorage.getItem('lastvisit');
var isRefresh = (new Date().getTime() - lastVisit) < 5000;
console.log(isRefresh);
没有完美的方法来跟踪重新加载和新页面加载,但这种解决方案在大多数情况下都有效。将 sessionStorage 与卸载事件结合使用:
(function (win) {
'use strict';
var reloaded = false,
ss = win.sessionStorage,
offset = 1000, // 1 second, may need tweaking if
// your page takes a long time to load/where
// this code is located in your page
now = function () {
return (new Date()).getTime();
},
lastUnload = ss.getItem('lastunload'),
loadStatus = document.getElementById('status');
// sessionStorage returns null if nothing was stored
if (lastUnload !== null) {
// sessionStorage returns a string, +lastUnload
// coerces the string held in lastUnload into an integer
// see https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29
if (+lastUnload + offset > now()) {
reloaded = true;
}
}
win.addEventListener('unload', function () {
ss.setItem('lastunload', now());
}, false);
if (lastUnload === null) {
loadStatus.innerHTML = 'First visit of session.';
} else if (reloaded) {
loadStatus.innerHTML = 'Page was reloaded.';
} else {
loadStatus.innerHTML = 'Navigated back to page after leaving';
}
}(window));
此代码将页面重新加载定义为在离开页面后 1 秒内返回页面,因此如果有人离开页面并立即点击后退按钮但实际上不应该发生正常浏览行为,则可能会出现误报。如果您想给予更多或更少的余地,您可以修改该offset
变量,但 1 秒似乎是一个不错的默认值。
开发此代码后,我也找到了类似的答案。
如果sessionStorage
可用,您可以使用它。
if (!window.sessionStorage.getItem('visited')) {
//entered
window.sessionStorage.setItem('visited', true);
}
else {
//refreshed
}