当有人试图刷新页面时,我想检查一下。
例如,当我打开一个页面什么都没有发生,但当我刷新页面时,它应该显示一个警告。
当有人试图刷新页面时,我想检查一下。
例如,当我打开一个页面什么都没有发生,但当我刷新页面时,它应该显示一个警告。
当前回答
第一步是检查sessionStorage是否有一些预定义的值,如果存在,提醒用户:
if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');
第二步是将sessionStorage设置为某个值(例如true):
sessionStorage.setItem("is_reloaded", true);
会话值保持,直到页面关闭,所以它将工作,只有当页面重新加载在一个新的标签与网站。你也可以用同样的方法保持重载计数。
其他回答
我在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>
我写了这个函数来同时检查两个方法,使用旧的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:任何其他方法。
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 =>返回按钮单击。
新标准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);
}
}