当有人试图刷新页面时，我想检查一下。
例如，当我打开一个页面什么都没有发生，但当我刷新页面时，它应该显示一个警告。
当前回答
if(sessionStorage.reload) {
sessionStorage.reload = true;
// optionnal
setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
sessionStorage.setItem('reload', false);
}
其他回答
我在JavaScript检测页面刷新中找到了一些信息。他的第一个建议是使用隐藏字段，这些字段往往是通过页面刷新存储的。
function checkRefresh() { if (document.refreshForm.visited.value == "") { // This is a fresh page load document.refreshForm.visited.value = "1"; // You may want to add code here special for // fresh page loads } else { // This is a page refresh // Insert code here representing what to do on // a refresh } } <html> <body onLoad="JavaScript:checkRefresh();"> <form name="refreshForm"> <input type="hidden" name="visited" value="" /> </form> </body> </html>
新标准2018-now (PerformanceNavigationTiming)
window.performance.navigation属性在2级导航时序规范中已弃用。请使用PerformanceNavigationTiming接口。
PerformanceNavigationTiming.type
这是一项实验技术。
在生产中使用此功能之前，请仔细检查浏览器兼容性表。
检查页面是否在JavaScript中重新加载或刷新
const pageAccessedByReload = ( (window.performance。Navigation && window.performance.navigation.type === 1) || window.performance .getEntriesByType(导航) .map((nav) => nav.type) 其中包括(“重载”) ）; 警报(pageAccessedByReload);
2021-11-09支持
type只读属性返回表示导航类型的字符串。必须为以下值之一:
导航——通过点击链接开始导航，在浏览器地址栏中输入URL，提交表单，或者通过脚本操作(而不是下面列出的reload和back_forward)初始化。 重载——导航是通过浏览器的重载操作或location.reload()完成的。 back_forward -导航是通过浏览器的历史遍历操作。 prerender -导航由一个prerender提示启动。
此属性为只读。
下面的例子说明了这个属性的用法。
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);
}
}
这里没有提到一个简单的解决方案(不依赖已弃用的window.performance.navigation):
使用窗口。onbeforeunload在用户离开页面(可能会刷新页面)时存储当前页面的时间和URL(在localstorage中)。
window.onbeforeunload = function(e)
{
localStorage.setItem('reload-url', window.location.href);
}
然后使用window。Onload从本地存储中获取这些值。
window.onload = function(e)
{
if (localStorage.getItem('reload-url') != null))
{
if (window.location.href == localStorage.getItem('reload-url'))
{
console.log('Reload');
}
}
}
如果最近的URL与存储的URL匹配，如果存储的时间与当前时间匹配(可能有一个微小的偏移)，那么它是用户重新加载的页面。
if(sessionStorage.reload) {
sessionStorage.reload = true;
// optionnal
setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
sessionStorage.setItem('reload', false);
}
下面是一个几乎所有浏览器都支持的方法:
if (sessionStorage.getItem('reloaded') != null) {
console.log('page was reloaded');
} else {
console.log('page was not reloaded');
}
sessionStorage.setItem('reloaded', 'yes'); // could be anything
它使用SessionStorage来检查页面是第一次打开还是刷新。
