ToB企服应用市场:ToB评测及商务社交产业平台

标题: 在 Web 中判断页面是不是刷新 [打印本页]

---

作者: 用多少眼泪才能让你相信    时间: 2024-10-12 11:25
标题: 在 Web 中判断页面是不是刷新
在 Web 开辟中，我们经常必要区分用户是否通过刷新利用重新加载了页面。这一利用大概是由用户手动刷新（如按下 F5 键或点击浏览器刷新按钮）或通过浏览器自动重新加载。判断页面是否刷新有助于开辟者优化用户体验，比方在利用 vue 的时候必要进行权限控制，就必要判断在刷新后根据登录者的权限去添加对应的路由。
本文将具体剖析几种常见的判断页面是否刷新的技能方案，并探讨各自的适用场景、优缺点以及浏览器的兼容性。
1. 利用 window.name

window.name 是一个持久的窗口属性，它的值在页面刷新、乃至通过标签页导航到其他页面时也会保留，因此可以利用它来判断页面是否是通过刷新重新加载。
代码示例

1. window.onload = function() {
2.   if (window.name === 'isRefreshed') {
3.     console.log('页面被刷新');
4.   } else {
5.     console.log('首次加载页面');
6.     window.name = 'isRefreshed';
7.   }
8. };

复制代码

工作原理

• 初次加载时，window.name 是空字符串，通过设置它为 'isRefreshed' 来标记状态。
  
• 刷新页面后，window.name 仍保持为 'isRefreshed'，因此可以判断页面是通过刷新加载的。
  

优点

• 简单易用：不依赖外部存储机制或服务器端逻辑。
  
• 跨页面持久性：在页面间导航时，window.name 的值依然保持，适合跨页面场景。
  

缺点

• 安全性问题：window.name 的值在差别页面间共享，大概被其他页面读取。
  
• 手动清理：在某些场景下大概必要手动打扫 window.name，比方页面关闭时。
  

兼容性

window.name 是一个非常老的 Web API，险些在所有浏览器中都有广泛的支持，包括：

2. 利用 sessionStorage

sessionStorage 是 Web 存储 API 的一部门，它为每个标签页维护独立的存储空间，并且其数据在标签页关闭后会被清空。我们可以利用 sessionStorage 来判断页面是否被刷新：

1. window.onload = function() {
2.   if (sessionStorage.getItem('isRefreshed')) {
3.     console.log('页面被刷新');
4.   } else {
5.     console.log('首次加载页面');
6.   }
7.   sessionStorage.setItem('isRefreshed', true);
8. };

复制代码

工作原理

• 当页面初次加载时，sessionStorage 中没有 isRefreshed 条目，因此可以判断这是初次加载。
  
• 通过设置 sessionStorage.setItem('isRefreshed', true);，标记页面已加载。
  
• 当页面刷新后，sessionStorage 中的 isRefreshed 条目依然存在，因此可以检测到页面的刷新利用。
  

优点

• 简单且不依赖服务器端逻辑。
  
• 只对当前标签页有效，适合单个页面或 SPA（单页应用）场景。
  

缺点

• 可以被人为的窜改，不能保证百分之百准确。
  

兼容性

sessionStorage 是广泛支持的 API，适用于以下浏览器：

3. 利用 performance.navigation API

浏览器的 performance.navigation API 提供了页面加载的具体信息，包括是否是通过刷新利用加载的页面。通过查抄 performance.navigation.type 属性可以判断页面的加载方式。

1. window.onload = function() {
2.   if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
3.     console.log('页面被刷新');
4.   } else {
5.     console.log('首次加载页面');
6.   }
7. };

复制代码

属性解释

• performance.navigation.TYPE_RELOAD: 体现页面通过刷新加载。
  
• 其他类型（如 TYPE_NAVIGATE）体现正常导航。
  

优点

• 直接提供了判断页面刷新与否的接口，较为准确。
  
• 不必要手动存储状态。
  

缺点

• 该 API 正在逐步弃用，未来的浏览器大概不会支持。
  
• 不适合未来恒久维护的项目，应考虑迁移到更新的 API，比如下文中的 performance.getEntriesByType。
  

兼容性

performance.navigation API 在大多数浏览器中都被支持，但该 API 已逐步被弃用：

4. 利用 beforeunload 事件

beforeunload 事件在用户离开页面之前触发，无论是页面刷新、关闭还是导航到其他页面。在此事件中，我们可以设置一个标志位来判断用户是否通过刷新离开当前页面。

1. window.addEventListener('beforeunload', function() {
2.   localStorage.setItem('isRefreshed', 'true');
3. });
5. window.onload = function() {
6.   if (localStorage.getItem('isRefreshed') === 'true') {
7.     console.log('页面被刷新');
8.     localStorage.removeItem('isRefreshed');  // 刷新后清除标志位
9.   } else {
10.     console.log('首次加载页面');
11.   }
12. };

复制代码

工作原理

• 在页面卸载时（包括刷新），通过 beforeunload 事件设置一个标志位。
  
• 页面重新加载时，根据该标志位判断页面是否通过刷新利用加载。
  

优点

• 灵活，可以处理差别类型的页面离开利用。
  
• localStorage 的数据不会在页面关闭时打扫，因此可以用于判断跨页面的刷新。
  

缺点

• beforeunload 事件在部门浏览器（尤其是移动端）大概体现不一致。
  
• 如果用户打扫了浏览器缓存或 localStorage，则无法正确判断。
  

兼容性

beforeunload 事件在大多数今世浏览器中都有广泛支持，但大概在一些移动端浏览器上体现不一致：

5. 利用 performance.getEntriesByType

performance.getEntriesByType("navigation") 是一个今世 Web 性能 API，用于获取页面导航的具体信息。通过这个方法，我们可以获取一个包罗导航信息的对象，并通过查抄该对象的 type 属性，判断页面是通过刷新加载还是其他方式进入的。
示例代码

1. window.onload = function() {
2.   const [navigationEntry] = performance.getEntriesByType('navigation');
3.   
4.   if (navigationEntry && navigationEntry.type === 'reload') {
5.     console.log('页面被刷新');
6.   } else {
7.     console.log('首次加载页面');
8.   }
9. };

复制代码

工作原理

• performance.getEntriesByType('navigation') 返回一个 PerformanceNavigationTiming 对象数组，其中包罗页面导航的具体信息。
  
• 通过查抄 navigationEntry.type，可以确定页面加载的类型：
  
  
  
  • type === 'reload': 页面通过刷新加载。
    
  • type === 'navigate': 页面通过正常导航进入。
    
  • type === 'back_forward': 页面通过浏览器的前进或退却按钮加载。
    
  • type === 'prerender': 页面通过预渲染加载（这个状态通常不常见）。
    
  
  

优点

• 今世性：performance.getEntriesByType 是较新的 API，可以或许在今世浏览器中准确区分页面的导航方式。
  
• 具体信息：除了判断页面刷新，还可以获取更多关于页面加载性能的数据，如 DNS 剖析时间、请求时间等，有助于调优页面性能。
  
• 无状态管理：无需依赖 sessionStorage、localStorage 等外部状态，制止了状态同步问题。
  

缺点

• 浏览器兼容性：固然大多数今世浏览器支持此 API，但 Internet Explorer 不支持（现在已不是问题）。
  
• 不适用于多次刷新：如果必要在用户进行多次刷新的情况下进行追踪，单次判断大概不敷。
  

利用场景

performance.getEntriesByType 适合那些只必要快速判断页面是否是刷新加载的场景，并且同时有进一步性能优化需求的应用。对于今世 Web 开辟，这是一个较为准确且无需额外存储或会话管理的解决方案。
监控页面加载性能示例

1. window.onload = function() {
2.   const [navigationEntry] = performance.getEntriesByType('navigation');
4.   if (navigationEntry) {
5.     console.log(`页面加载类型: ${navigationEntry.type}`);
6.     console.log(`页面加载时间: ${navigationEntry.loadEventEnd - navigationEntry.startTime} ms`);
7.   }
8. };

复制代码

这种方式不但能资助判断页面加载类型，还能资助开辟者优化页面性能，提供更多性能数据来分析页面加载瓶颈。
兼容性

performance.getEntriesByType 是较新的 API，在今世浏览器中得到广泛支持，但较旧浏览器不支持：

总结

判断页面是否刷新是一个常见的需求，本文介绍了五种技能方案。每种方案都有其特定的适用场景和优缺点。总结如下：
方案优点缺点浏览器兼容性window.name简单、易跨页面保持状态安全性问题，需手动清理适用于所有今世浏览器sessionStorage简单，不依赖复杂逻辑关闭标签页时清空支持今世浏览器及部门较旧浏览器performance.navigation直接提供页面刷新判断API 正被弃用广泛支持，但逐渐被废弃performance.getEntriesByType准确判断加载类型较新，旧版浏览器不支持仅支持今世浏览器beforeunload灵活，可处理多种离开页面的利用部门浏览器不支持，尤其是在移动端大多数今世浏览器支持 差别的方案各有优劣，开辟者应根据应用的目标用户群体、性能需求和浏览器支持情况灵活选择。如果必要简单、跨页面的刷新判断，window.name 是一个不错的选择；而在必要更准确、今世化的判断方式时，performance.getEntriesByType 提供了更高的灵活性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4