我想检查何时有人尝试刷新页面。
例如，当我打开一个页面时什么也没有发生，但是当我刷新页面时它应该显示一个警报。
检查页面是否在 JavaScript 中重新加载或刷新
IT技术
javascript
page-refresh
2021-01-10 06:50:45
6个回答
⚠️⚠️⚠️window.performance.navigation.type已弃用，请参阅Илья Зеленько 的回答
了解页面实际重新加载的更好方法是使用大多数现代浏览器支持的导航器对象。
它使用导航计时 API。
//check for Navigation Timing API support
if (window.performance) {
console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
console.info( "This page is reloaded" );
} else {
console.info( "This page is not reloaded");
}来源：https : //developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
新标准 2018-现在（PerformanceNavigationTiming）
window.performance.navigation属性在导航计时级别 2规范中已弃用。请改用接口。PerformanceNavigationTiming
PerformanceNavigationTiming.type
这是一项实验技术。
在生产中使用它之前，请仔细检查浏览器兼容性表。
检查页面是否在 JavaScript 中重新加载或刷新
const pageAccessedByReload = (
(window.performance.navigation && window.performance.navigation.type === 1) ||
window.performance
.getEntriesByType('navigation')
.map((nav) => nav.type)
.includes('reload')
);
alert(pageAccessedByReload);支持 2021-11-09
type 只读属性返回一个表示导航类型的字符串。该值必须是以下之一：
导航- 通过单击链接、在浏览器的地址栏中输入 URL、提交表单或通过脚本操作初始化而不是 reload 和 back_forward 开始导航，如下所列。
重新加载- 导航是通过浏览器的重新加载操作或
location.reload().back_forward — 导航是通过浏览器的历史遍历操作。
预渲染- 导航由预渲染提示启动。
此属性为只读。
以下示例说明了此属性的用法。
function print_nav_timing_data() {
// Use getEntriesByType() to just get the "navigation" events
var perfEntries = performance.getEntriesByType("navigation");
for (var i=0; i < perfEntries.length; i++) {
console.log("= Navigation entry[" + i + "]");
var p = perfEntries[i];
// dom Properties
console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
console.log("DOM complete = " + p.domComplete);
console.log("DOM interactive = " + p.interactive);
// document load and unload time
console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));
// other properties
console.log("type = " + p.type);
console.log("redirectCount = " + p.redirectCount);
}
}
第一步是检查sessionStorage一些预定义的值，如果它存在警报用户：
if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');
第二步是设置sessionStorage某个值（例如true）：
sessionStorage.setItem("is_reloaded", true);
会话值一直保留到页面关闭，因此只有在站点的新选项卡中重新加载页面时，它才会工作。您也可以以相同的方式保持重新加载计数。
在有人第一次访问该页面时存储一个 cookie。刷新时检查您的 cookie 是否存在，如果存在，则发出警报。
function checkFirstVisit() {
if(document.cookie.indexOf('mycookie')==-1) {
// cookie doesn't exist, create it now
document.cookie = 'mycookie=1';
}
else {
// not first visit, so alert
alert('You refreshed!');
}
}
在你的身体标签中：
<body onload="checkFirstVisit()">
我编写了这个函数来同时使用旧的window.performance.navigation和新的方法检查两种方法performance.getEntriesByType("navigation")：
function navigationType(){
var result;
var p;
if (window.performance.navigation) {
result=window.performance.navigation;
if (result==255){result=4} // 4 is my invention!
}
if (window.performance.getEntriesByType("navigation")){
p=window.performance.getEntriesByType("navigation")[0].type;
if (p=='navigate'){result=0}
if (p=='reload'){result=1}
if (p=='back_forward'){result=2}
if (p=='prerender'){result=3} //3 is my invention!
}
return result;
}
结果说明：
0：点击链接，在浏览器地址栏中输入网址，提交表单，点击书签，通过脚本操作初始化。
1：单击重新加载按钮或使用Location.reload()
2：使用浏览器历史记录（Bakc 和 Forward）。
3：预渲染活动如<link rel="prerender" href="//example.com/next-page.html">
4：任何其他方法。