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

最新推荐文章于 2024-01-19 21:21:00 发布
转载 最新推荐文章于 2024-01-19 21:21:00 发布 · 614 阅读 · 0
文章标签：

#javascript #JavaScript #Javascript #javaScript

本文介绍了如何在管理后台中使用前进、后退、刷新和退出功能，包括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>

Vue3 - [兼容PC和手机H5] 详细监听浏览器刷新 / 关闭 / 前进后退事件，用户点击关闭和刷新页面前 “拦截“ 操作并弹出提示框（实时监听用户关闭或刷新网页，触发时文字提醒并执行自定义操作）
资深程序员
11-02 9861
vue3监听页面关闭和刷新，vue3中如何监听页面刷新和关闭事件，vue3中监听浏览器窗口关闭事件,并在窗口关闭进行操作，vue3怎么只在某个页面监听,其他页面不监听，vue3监听刷新和关闭怎么离开页面时注销释放，vue3怎么阻止浏览器前进和后退并提示，页面跳转离开后依旧可以监听到刷新和关闭，vue3怎么知道用户关闭了网页，vue3如何监听刷新网页操作并截断，vue3移动端手机h5网页手机网站监听浏览器刷新关闭，vue3当页面关闭或刷新时怎么提示用户离开不保存数据，vue3项目监听浏览器窗口或标签页关闭，并
Vue2 - [兼容PC和手机H5] 详细监听浏览器刷新 / 关闭 / 前进后退事件，用户点击关闭和刷新页面前 “拦截“ 操作并弹出提示框（实时监听用户关闭或刷新网页，触发时文字提醒并执行自定义操作）
资深程序员
11-02 2506
vue监听页面关闭和刷新，vue中如何监听页面刷新和关闭事件，vue中监听浏览器窗口关闭事件,并在窗口关闭进行操作，vue怎么知道用户关闭了网页，vue如何监听刷新网页操作并截断，vue移动端手机h5网页手机网站监听浏览器刷新关闭，vue当页面关闭或刷新时怎么提示用户离开不保存数据，vue项目监听浏览器窗口或标签页关闭，并在页面关闭/刷新前发送请求，vue怎么只在某个页面监听,其他页面不监听，vue监听刷新和关闭怎么离开页面时注销释放，vue怎么阻止浏览器前进和后退并提示，页面跳转离开后依旧可以监听到刷新和
js页面后退刷新前进
03-20
js页面后退刷新前进
js 前进,后退
weixin_30678349的博客
09-08 130
function back() {　　　　//后退一页 window.history.go(-1);　　　　 window.histrory.back(); } function qian() {　　　　//前进一页 window.history.forward(); }注意，不能在服...
JS-页面的前进后退
幸福有多远
03-14 489
history.back(-1)//直接返回当前页的上一页，数据全部消息，是个新页面 history.go(-1)//也是返回当前页的上一页，不过表单里的数据全部还在 window.location.reload() //刷新 window.history.go(1) //前进 window.history.go(-1) //后退 window.history.forward() //前进 ...
js 前进 后退 刷新
hxciwangbiao的专栏
11-03 315
前进 <input type=button value=前进 οnclick="window.history.go(1)"> <input type=button value=前进 οnclick="window.history.forward()"> 后退 <input type=button value=后退 οnclick="window.history.go(-1)"> <input type=button value=后退 οnclick="window
js前进后退后代码
李澎昆的博客
11-21 2050
Js中的前进后退代码跟浏览器的很像 浏览器前进代码使用window.history();=history.go(1); 然而js使用的history.forward();=history.go(1); 1是前进 -1是后退 1的意思是一页的意思 也可以当成前进一次或者后退一次 前进: history.forward();=history.go(1); 后退: history.back();=hi...
js监控IE火狐浏览器关闭、刷新、回退、前进事件.docx
01-21
### JS监控IE与火狐浏览器关闭、刷新、回退、前进事件 #### 一、引言 在Web应用开发过程中，有时需要对用户的浏览器行为进行监控，比如浏览器的关闭、刷新、前进或后退等操作。这对于提高用户体验、确保应用程序...
Android WebView加载网页，实现前进 后退 刷新 超链接
qq_43667831的博客
11-15 1388
Android WebView加载网页，实现前进 后退 刷新 超链接
vue vue-router 完美实现前进刷新，后退不刷新。附scrollBehavior源码解析
明月如霜丶
10-30 650
需求：在一个vue的项目中，我们需要从一个列表页面点击列表中的某一个详情页面，从详情页面返回不刷新列表，而从列表的上一个页面重新进入列表页面则需要刷新列表。 而浏览器的机制则是每一次的页面打开都会重新执行所有的程序，所以这个功能并不能直接实现。而vue-router给我们提供了一个叫scrollBehavior的回调函数，我门可以用这个方法结合keep-alive能很好的实现这个功能，下面第一步附...
js 特效 html 特效 前进后退按钮
08-23
js 特效 html 特效 前进后退按钮 js 特效 html 特效 前进后退按钮
js控制浏览器前进、后退、页面跳转
zhang20040217的博客
01-19 1324
请注意，这些方法的行为可能受到浏览器的安全限制和用户设置的限制。在某些情况下，你可能无法控制浏览器的历史记录或页面跳转。对象来控制浏览器的历史记录。在JavaScript中，你可以使用。
JS 页面前进、页面后退、页面跳转的方法
m0_74265396的博客
07-29 829
页面前进，页面后退，本质上也是页面跳转，这都属于在浏览器里进行的操作。
JS常用的刷新 前进和后退
NULL
02-21 687
前进&lt;a href="#" class="icon icon_j" onclick="javascript:history.go(1);"&gt;前进&lt;/a&gt;&lt;span&gt;&lt;/span&gt;后退&lt;a href="#" class="icon icon_t" onclick="javasc
js怎样控制浏览器前进、后退、页面跳转？
2301_77131852的博客
10-28 626
方法可以让浏览器前进到它的前一页。方法可以让浏览器后退到它的前一页。属性可以跳转到新的URL。
【JS】:JS实现页面的刷新，后退和前进
阳光心态，健康人生的博客
04-14 1478
通过history.go()完成 history.go(-1); 后退 history.go(0)； 刷新 history.go(1)； 前进通过三个按钮响应这三个消息即可<html> <body> <p> 这是神奇的代码 </p> <script> function back(){ history.go(-1);
JS实现前进后退刷新的各种方法
明凯博客
07-12 3787
这里介绍了JS前进、后台、刷新的各种方法。也解释了很多前进后退函数出问题的原因。 下面是用按钮做前进后退的JS： <input type=button value=刷新 onclick="window.location.reload()"/> <input type=button value=前进 onclick="window.history.go(1)"/> <input type=button value=后退 onclick="window.history.go(-
js返回和前进
kateLi的专栏
10-30 785
返回和前进用到的是BOM中的history对象： 返回： 返回          //相当于调用history对象的back()方法； 前进： 前进          //相当于调用history对象的forword()方法；
JS简单实现后退例子
jmh521的专栏
12-05 572
添加pagehide监听时间后，刷新之后直接退出登录
最新发布
03-14
<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、付费专栏及课程。

余额充值