当有人试图刷新页面时,我想检查一下。
例如,当我打开一个页面什么都没有发生,但当我刷新页面时,它应该显示一个警告。
当有人试图刷新页面时,我想检查一下。
例如,当我打开一个页面什么都没有发生,但当我刷新页面时,它应该显示一个警告。
当前回答
document.addEventListener("keydown", (e)=>{
if (e.keyCode === 116) {
e.preventDefault();
// your code here
// var r = confirm("Reload!");
// if (r == true)
// window.location.reload();
}
})
这里我们使用事件监听器“keydown”,因为F1 - F12键在浏览器上无法用于“keypress”。 116是“F5”的键码。检查在这里 'preventDefault()'将停止按下键的默认功能。 在这里,当按下F5时,它会停止直接刷新。 然后添加代码。 当警报被确认时,'location.reload()'将重新加载页面
其他回答
if
event.currentTarget.performance.navigation.type
返回
0 =>用户刚刚输入了一个Url 1 =>页面重新加载 2 =>返回按钮单击。
我写了这个函数来同时检查两个方法,使用旧的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:点击链接,在浏览器地址栏输入URL,提交表单,点击书签,通过脚本操作初始化。
1:点击Reload按钮或使用Location.reload()
2:使用浏览器历史记录(Bakc和Forward)。
3:预渲染活动,如<link rel="prerender" href="//example.com/next-page.html">
4:任何其他方法。
⚠️⚠️⚠️window.performance.navigation.type已弃用。请看Илья Зеленько的回答。
了解页面是否实际被重新加载的更好方法是使用大多数现代浏览器支持的导航器对象。
它使用导航计时API。
//检查导航定时API支持 If (window.performance) { Console.info ("window.performance works fine on this browser"); } console.info (performance.navigation.type); 如果(performance.navigation。type == performance.navigation.TYPE_RELOAD) { console.info("此页面已重新加载"); }其他{ console.info("此页面未重新加载"); }
来源:导航定时API
document.addEventListener("keydown", (e)=>{
if (e.keyCode === 116) {
e.preventDefault();
// your code here
// var r = confirm("Reload!");
// if (r == true)
// window.location.reload();
}
})
这里我们使用事件监听器“keydown”,因为F1 - F12键在浏览器上无法用于“keypress”。 116是“F5”的键码。检查在这里 'preventDefault()'将停止按下键的默认功能。 在这里,当按下F5时,它会停止直接刷新。 然后添加代码。 当警报被确认时,'location.reload()'将重新加载页面
if(sessionStorage.reload) {
sessionStorage.reload = true;
// optionnal
setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
sessionStorage.setItem('reload', false);
}