- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
在 Web 开发中,我们经常需要区分用户是否通过刷新操作重新加载了页面。这一操作可能是由用户手动刷新(如按下 F5 键或点击浏览器刷新按钮)或通过浏览器自动重新加载。判断页面是否刷新有助于开发者优化用户体验,例如在使用 vue 的时候需要进行权限控制,就需要判断在刷新后根据登录者的权限去添加对应的路由.
本文将详细解析几种常见的判断页面是否刷新的技术方案,并探讨各自的适用场景、优缺点以及浏览器的兼容性.
window.name
window.name 是一个持久的窗口属性,它的值在页面刷新、甚至通过标签页导航到其他页面时也会保留,因此可以利用它来判断页面是否是通过刷新重新加载.
window.onload = function() {
if (window.name === 'isRefreshed') {
console.log('页面被刷新');
} else {
console.log('首次加载页面');
window.name = 'isRefreshed';
}
};
window.name
是空字符串,通过设置它为 'isRefreshed'
来标记状态。window.name
仍保持为 'isRefreshed'
,因此可以判断页面是通过刷新加载的。window.name
的值依然保持,适合跨页面场景。window.name
的值在不同页面间共享,可能被其他页面读取。window.name
,例如页面关闭时。window.name 是一个非常老的 Web API,几乎在所有浏览器中都有广泛的支持,包括:
sessionStorage
sessionStorage 是 Web 存储 API 的一部分,它为每个标签页维护独立的存储空间,并且其数据在标签页关闭后会被清空。我们可以利用 sessionStorage 来判断页面是否被刷新:
window.onload = function() {
if (sessionStorage.getItem('isRefreshed')) {
console.log('页面被刷新');
} else {
console.log('首次加载页面');
}
sessionStorage.setItem('isRefreshed', true);
};
sessionStorage
中没有 isRefreshed
条目,因此可以判断这是首次加载。sessionStorage.setItem('isRefreshed', true);
,标记页面已加载。sessionStorage
中的 isRefreshed
条目依然存在,因此可以检测到页面的刷新操作。sessionStorage
会被清空,无法保存状态。sessionStorage 是广泛支持的 API,适用于以下浏览器:
performance.navigation
API浏览器的 performance.navigation API 提供了页面加载的详细信息,包括是否是通过刷新操作加载的页面。通过检查 performance.navigation.type 属性可以判断页面的加载方式.
window.onload = function() {
if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
console.log('页面被刷新');
} else {
console.log('首次加载页面');
}
};
performance.navigation.TYPE_RELOAD
: 表示页面通过刷新加载。TYPE_NAVIGATE
)表示正常导航。performance.getEntriesByType
。performance.navigation API 在大多数浏览器中都被支持,但该 API 已逐步被弃用:
beforeunload
事件beforeunload 事件在用户离开页面之前触发,无论是页面刷新、关闭还是导航到其他页面。在此事件中,我们可以设置一个标志位来判断用户是否通过刷新离开当前页面.
window.addEventListener('beforeunload', function() {
localStorage.setItem('isRefreshed', 'true');
});
window.onload = function() {
if (localStorage.getItem('isRefreshed') === 'true') {
console.log('页面被刷新');
localStorage.removeItem('isRefreshed'); // 刷新后清除标志位
} else {
console.log('首次加载页面');
}
};
beforeunload
事件设置一个标志位。localStorage
的数据不会在页面关闭时清除,因此可以用于判断跨页面的刷新。beforeunload
事件在部分浏览器(尤其是移动端)可能表现不一致。localStorage
,则无法正确判断。beforeunload 事件在大多数现代浏览器中都有广泛支持,但可能在一些移动端浏览器上表现不一致:
performance.getEntriesByType
performance.getEntriesByType("navigation") 是一个现代 Web 性能 API,用于获取页面导航的详细信息。通过这个方法,我们可以获取一个包含导航信息的对象,并通过检查该对象的 type 属性,判断页面是通过刷新加载还是其他方式进入的.
window.onload = function() {
const [navigationEntry] = performance.getEntriesByType('navigation');
if (navigationEntry && navigationEntry.type === 'reload') {
console.log('页面被刷新');
} else {
console.log('首次加载页面');
}
};
performance.getEntriesByType('navigation')
返回一个 PerformanceNavigationTiming
对象数组,其中包含页面导航的详细信息。navigationEntry.type
,可以确定页面加载的类型:
type === 'reload'
: 页面通过刷新加载。type === 'navigate'
: 页面通过正常导航进入。type === 'back_forward'
: 页面通过浏览器的前进或后退按钮加载。type === 'prerender'
: 页面通过预渲染加载(这个状态通常不常见)。performance.getEntriesByType
是较新的 API,能够在现代浏览器中准确区分页面的导航方式。sessionStorage
、localStorage
等外部状态,避免了状态同步问题。performance.getEntriesByType 适合那些只需要快速判断页面是否是刷新加载的场景,并且同时有进一步性能优化需求的应用。对于现代 Web 开发,这是一个较为精确且无需额外存储或会话管理的解决方案.
window.onload = function() {
const [navigationEntry] = performance.getEntriesByType('navigation');
if (navigationEntry) {
console.log(`页面加载类型: ${navigationEntry.type}`);
console.log(`页面加载时间: ${navigationEntry.loadEventEnd - navigationEntry.startTime} ms`);
}
};
这种方式不仅能帮助判断页面加载类型,还能帮助开发者优化页面性能,提供更多性能数据来分析页面加载瓶颈.
performance.getEntriesByType 是较新的 API,在现代浏览器中得到广泛支持,但较旧浏览器不支持:
判断页面是否刷新是一个常见的需求,本文介绍了五种技术方案。每种方案都有其特定的适用场景和优缺点。总结如下:
方案 | 优点 | 缺点 | 浏览器兼容性 |
---|---|---|---|
window.name |
简单、易跨页面保持状态 | 安全性问题,需手动清理 | 适用于所有现代浏览器 |
sessionStorage |
简单,不依赖复杂逻辑 | 关闭标签页时清空 | 支持现代浏览器及部分较旧浏览器 |
performance.navigation |
直接提供页面刷新判断 | API 正被弃用 | 广泛支持,但逐渐被废弃 |
performance.getEntriesByType |
精确判断加载类型 | 较新,旧版浏览器不支持 | 仅支持现代浏览器 |
beforeunload |
灵活,可处理多种离开页面的操作 | 部分浏览器不支持,尤其是在移动端 | 大多数现代浏览器支持 |
不同的方案各有优劣,开发者应根据应用的目标用户群体、性能需求和浏览器支持情况灵活选择。如果需要简单、跨页面的刷新判断,window.name 是一个不错的选择;而在需要更精确、现代化的判断方式时,performance.getEntriesByType 提供了更高的灵活性.
最后此篇关于在Web中判断页面是不是刷新的文章就讲到这里了,如果你想了解更多关于在Web中判断页面是不是刷新的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
判断置顶文章 is_sticky() 函数用来判断一篇文章是否为置顶文章。 用法 ?
判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的)。 下面是大多数编程语言中典型的判断结构的一般形式: 判断语句 C
我经常这样写: (if (nil? a-value) another-value a-value) 是否有更简单的功能可用,例如: (if-nil? a-value another-value) 最佳
MySQL IF 语句允许您根据表达式的某个条件或值结果来执行一组 SQL 语句。 要在 MySQL 中形成一个表达式,可以结合文字,变量,运算符,甚至函数来组合。表达式可以返回 TRUE,FA
也就是说,是否有一种工具可以自动显示给定语法的完整语言,包括突出歧义(如果有)? 最佳答案 BNF 风格的文法可能有一些特殊性,但总的来说,确定给定的上下文无关文法(例如 BNF)是否有歧义是不可能的
有没有办法确定像下面这样的 Axios 请求是否收到了答案并完成了? axios.get('/api') .then(response => this.data = response.data); 最
我想请大家禁用 Firebug 。如何确定自己安装了firebug?所以它是一个跨浏览器,并在 Chrome、Mozilla 和 IE8 + 中确定 最佳答案 两步: 如果 window.consol
我有一个看起来像这样的对象: var searchFilter = {_id: XXX, approved: true} 用于驱动 Meteor 集合搜索过滤器。然后,我有一对文本框,允许用户输入一系
我正在循环并向我的数据库中插入几百万条记录。性能是第一要务。 我想利用无状态 session ,但您可能知道它们不支持在更复杂的实体上级联对象。 是否有一种通用方法可以确定实体是否具有级联记录?如果是
我正在使用 pdfminer 解析一些 PDF 文件。图书馆。 我需要知道文档是否是扫描文档,扫描机将扫描图像放在顶部,将 OCR 提取的文本放在背景中。 有没有办法识别文本是否可见,因为 OCR 机
我正在寻找一种方法来找出当前为浏览器游戏 TribalWars 编写的脚本打开的页面。 URL 的设置非常相似,对于知道自己在做什么的人来说这应该很容易(我显然不知道)。 URL 如下所示: http
我在 C# 中使用包装的 C 库,需要将图像从该库转换为位图并返回,但没有复制像素缓冲区。 转换为位图很简单: Bitmap WrapAsBitmap(CImage image) { retu
有没有办法检查调用方法的Controller是否来自Area内的Controller? 例如,我有一个继承自 AuthorizeAttribute 的类,例如 public class CustomA
是否可以找到MySQL View 中某列所属的表名? 如果 View 构造为 CREATE VIEW alpha_view AS SELECT alpha.col1, alpha.col2,
如何判断 .Net 应用程序是作为桌面应用程序运行还是作为服务运行? 我们正在尝试使用 Fitnesse 测试我们的应用程序,它将应用程序作为服务加载,然后调用它。但是当一个模式错误框被按下时,它就会
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及
我试图计算出 iframe 内容的大小,以便调整 iframe 元素的大小以包含其内容。 如何确定 iFrame 是否已加载以及我是否可以可靠地测量它的内容尺寸。 注意:onload 事件不会执行,因
这个问题在这里已经有了答案: How to write portable code in c++? (12 个答案) 关闭 9 年前。 我正在尝试编写可以用任何现代版本的 g++ 编译的代码,但遇到
这个问题在这里已经有了答案: distinguish shared objects from position independent executables (2 个答案) 关闭 4 年前。 我有
我的目标是如果 dte 与当前时间相差不到 1 小时,则停止循环。是否有“ ruby 方式”来做到这一点? #THIS IS AN INFINITE LOOP, DONT RUN THIS dte=D
我是一名优秀的程序员,十分优秀!