JS前进、后退、刷新、退出

本文介绍了如何在管理后台中使用前进、后退、刷新和退出功能,包括JavaScript代码实现,以及如何从当前页面返回到登录页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JS前进、后退、刷新、退出:

<table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td height="23" valign="bottom">
                                        <td>
                                            <img src="images/main_13.gif" />
                                        </td>
                                        <td width="35" class="STYLE1">
                                            <div align="center">
                                                首页</div>
                                        </td>
                                        <td>
                                            <img src="images/main_15.gif" />
                                        </td>
                                        <td width="35" class="STYLE1">
                                            <div align="center">
                                                <a href="javascript:history.go(-1);">后退</a></div>
                                        </td>
                                        <td>
                                            <img src="images/main_17.gif" />
                                        </td>
                                        <td width="35" class="STYLE1">
                                            <div align="center">
                                                <a href="javascript:history.go(1);">前进</a></div>
                                        </td>
                                        <td>
                                            <img src="images/main_19.gif" />
                                        </td>
                                        <td width="35" class="STYLE1">
                                            <div align="center">
                                                <a onclick="window.parent['main'].location.reload()">刷新</a></div>
                                        </td>
                                        <td>
                                            <img src="images/main_22.gif" />
                                        </td>
                                        <td width="35" class="STYLE1">
                                            <div align="center">
                                                <a onclick="return   Image18_onclick()">退出</a></div>
                                        </td>
                                    </td>
                                </tr>
                            </table>

退出返回到Login页面:

    <script language="javascript">
        function Image18_onclick() {
            if (confirm("确实要退出管理后台? ")) {
                window.parent.location.href = "Login.aspx ";
            }
        }
    </script>

<think>好的,我现在需要解决用户提到的在H5页面中使用pagehide事件监听导致页面刷新后自动登出的问题。首先,我得理解用户的问题场景。用户可能在页面隐藏(比如切换标签页或关闭页面)时触发了一些登出逻辑,但页面刷新时也会触发pagehide事件,导致用户被意外登出。这显然不是用户期望的行为,因为刷新页面时应该保持登录状态。 接下来,我需要分析pagehide事件的行为。根据MDN文档,pagehide事件在浏览器卸载页面时触发,比如导航到其他页面、关闭标签页或刷新页面。因此,当用户刷新页面时,pagehide会被触发,这可能导致事件监听器中的登出代码被执行,从而清除登录状态。 用户的目标是区分页面刷新和其他导致页面隐藏的情况,比如关闭标签页或切换应用。这样,只有在用户真正离开页面时才执行登出,而不是在刷新时。 接下来,我需要考虑如何区分页面刷新和页面关闭。查阅相关文档,发现可以利用PageTransitionEvent的persisted属性。当页面被缓存(比如通过浏览器的前进/后退导航),persisted属性为true。然而,这可能不适用于所有情况,特别是刷新的时候。 另一个思路是使用beforeunload和unload事件,但需要注意这些事件在页面刷新和关闭时都会触发。然而,pagehide事件的触发顺序在这些事件之前。可能需要结合多个事件来处理。 然后,用户提供的引用中提到使用window.history.state来获取历史状态,但这里的问题可能更侧重于区分事件类型。根据引用[2],用户使用了addEventListener来添加事件监听,可能需要正确使用事件对象中的属性来判断事件类型。 解决方案的关键点在于:在pagehide事件处理函数中,检查事件的persisted属性。如果persisted为false,可能意味着页面不会被缓存,即用户正在关闭页面或导航离开,而不是刷新。但是,在页面刷新时,persisted的值是什么呢?需要进一步验证。 查阅相关资源,发现当页面刷新时,浏览器可能会重新加载页面,但pagehide事件中的persisted属性可能为false,因为页面没有被缓存。然而,这可能因浏览器而异,所以需要更可靠的判断方法。 另一个方法是结合visibilitychange事件。当页面隐藏是因为切换到其他标签页,document.visibilityState会变为hidden。但如果是刷新或关闭页面,visibilityState也会变为hidden,但随后页面卸载。不过,这并不能直接区分刷新和关闭。 或许可以在pagehide事件中,同时监听beforeunload或unload事件,但需要注意事件触发的顺序和兼容性。例如,在pagehide事件中设置一个标志,然后在beforeunload中检查这个标志,但这可能不可靠。 最终,可能的解决方案是在pagehide事件处理程序中,检查event.persisted属性。如果persisted为false,则可能是页面关闭或刷新。但需要进一步区分这两种情况。不过,根据测试,当页面刷新时,persisted通常为false,而通过前进/后退导航时,persisted可能为true。但如何在刷新时避免触发登出? 可能的解决方法是延迟执行登出操作,并检查页面是否被重新加载。例如,在pagehide事件中设置一个标记,然后在pageshow事件中清除该标记。如果在短时间内标记未被清除,则执行登出。不过,这可能需要使用localStorage或sessionStorage来保持状态,因为页面卸载后内存中的变量会丢失。 或者,使用sessionStorage在pagehide时存储一个时间戳,然后在页面加载时检查这个时间戳。如果时间戳在很短的时间内(比如几秒内),则认为是刷新,不执行登出;否则,执行登出。这种方法可能有效,但需要考虑时间间隔的设置和不同浏览器的行为差异。 另一个思路是,在pagehide事件中,通过navigator.sendBeacon发送一个请求,但需要确保在页面卸载前完成,这可能不可靠。 综合各种方法,比较可行的方案是:在pagehide事件中,检查event.persisted属性。如果为false,可能表示页面将被卸载(关闭或刷新),但无法直接区分两者。为了区分,可以结合beforeunload事件,但可能依然存在限制。 或者,使用pageshow事件,当页面从缓存中恢复时,persisted属性为true。因此,在pagehide事件中,如果persisted为false,可能是页面关闭或刷新,但无法直接区分。这时候,可以考虑在用户点击刷新按钮时,通过其他方式(如按下F5或Ctrl+R)来检测,但这涉及浏览器安全限制,不可行。 因此,最终可能的解决方案是:在pagehide事件中,不立即执行登出,而是使用sessionStorage记录一个状态,然后在页面加载时检查是否需要登出。例如,当页面重新加载时,如果发现是刷新操作,则不执行登出。具体实现如下: 1. 在pagehide事件中,将登出状态保存到sessionStorage。 2. 在页面加载时(DOMContentLoaded或load事件),检查sessionStorage中的登出状态。 3. 如果是刷新导致的重新加载,则清除该状态,避免登出。 4. 如果是新标签页或首次加载,则执行登出。 不过,这种方法可能不够准确,因为刷新和关闭后重新打开页面都可能触发加载事件。 另一种方法是在pagehide事件中,使用PerformanceNavigationTiming API检测导航类型。例如,通过performance.getEntriesByType("navigation")来获取导航类型,判断是否为reload。但需要注意兼容性和实现细节。 例如: const navigationEntries = performance.getEntriesByType('navigation'); if (navigationEntries.length > 0 && navigationEntries[0].type === 'reload') { // 处理刷新情况 } 但这种方法只能在页面加载后执行,无法在pagehide事件中实时判断。 因此,可能的解决方案是在页面卸载前(pagehide或beforeunload事件)记录一个标记,然后在页面加载时检查该标记和导航类型,以决定是否登出。 具体步骤: 1. 在pagehide事件处理函数中,如果event.persisted为false,则使用sessionStorage.setItem('shouldLogout', 'true')。 2. 在页面加载时,检查performance.navigation.type是否为1(页面重新加载),如果是,则清除shouldLogout标记,避免登出。 3. 如果shouldLogout存在且不是刷新,则执行登出逻辑。 代码示例: // 页面加载时 window.addEventListener('load', function() { const navEntries = performance.getEntriesByType('navigation'); if (navEntries.length > 0 && navEntries[0].type === 'reload') { sessionStorage.removeItem('shouldLogout'); } else { if (sessionStorage.getItem('shouldLogout')) { // 执行登出 sessionStorage.removeItem('shouldLogout'); } } }); // 监听pagehide事件 window.addEventListener('pagehide', function(event) { if (!event.persisted) { sessionStorage.setItem('shouldLogout', 'true'); } }); 这种方法可能在大多数情况下有效,但需要考虑兼容性,尤其是performance.getEntriesByType('navigation')在旧浏览器中的支持情况。此外,如果用户在页面卸载前多次触发pagehide,可能需要更精细的处理。 总结,用户的问题可以通过结合pagehide事件的persisted属性和页面加载时的导航类型检查来区分刷新和页面关闭,从而避免在刷新时触发登出逻辑。</think>### 分步解决方案 #### 问题分析 在H5页面中使用`pagehide`事件监听浏览器返回或页面隐藏操作时,**页面刷新会意外触发登出逻辑**,原因是`pagehide`事件在页面卸载(包括刷新)时均会触发。需要区分**页面刷新**和**真实离开页面**的场景。 --- #### 解决方案 通过**事件属性判断**和**浏览器API组合**实现精准控制: 1. **利用`event.persisted`属性**: `pagehide`事件的`persisted`属性标记页面是否被缓存(例如通过浏览器前进/后退导航)。若为`false`,表示页面未被缓存,可能正在关闭或刷新。 2. **结合`pageshow`事件**: 当页面从缓存恢复时(如前进/后退),`pageshow`事件的`persisted`属性为`true`,此时无需登出。 3. **标记刷新操作**: 使用`sessionStorage`记录刷新状态,避免误判。 --- #### 代码实现 ```javascript // 监听页面隐藏事件(关闭/刷新) window.addEventListener('pagehide', (event) => { // 仅当页面未缓存时标记登出 if (!event.persisted) { sessionStorage.setItem('shouldLogout', 'true'); } }); // 监听页面显示事件(从缓存恢复) window.addEventListener('pageshow', (event) => { if (event.persisted) { // 清除登出标记(避免前进/后退误触) sessionStorage.removeItem('shouldLogout'); } }); // 页面加载时判断是否需要登出 window.addEventListener('load', () => { const navigationEntry = performance.getEntriesByType('navigation')[0]; const isPageRefresh = navigationEntry?.type === 'reload'; if (isPageRefresh) { // 清除刷新导致的登出标记 sessionStorage.removeItem('shouldLogout'); } else if (sessionStorage.getItem('shouldLogout')) { // 执行登出逻辑 logout(); sessionStorage.removeItem('shouldLogout'); } }); function logout() { // 调用登出接口或清理登录状态 } ``` --- #### 关键点说明 1. **`event.persisted`属性**: - `false`:页面未缓存,可能是关闭或刷新[^1]。 - `true`:页面被缓存(如前进/后退导航),无需登出。 2. **`performance.navigation`检测刷新**: 通过`performance.getEntriesByType('navigation')`获取页面导航类型,若为`reload`则标记为刷新操作[^2]。 3. **`sessionStorage`临时存储**: 用于在页面会话期间暂存状态,刷新后自动清除。 --- #### 扩展优化 - **兼容性处理**: 使用`try-catch`包裹`performance API`调用,避免旧浏览器报错。 - **防抖机制**: 在`pagehide`事件中增加延时逻辑,防止快速刷新误触。 - **服务端校验**: 结合Token过期时间,在页面加载时主动校验登录状态。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值