浏览器中使返回上一页失效的js

最新推荐文章于 2025-10-15 18:25:00 发布
原创 最新推荐文章于 2025-10-15 18:25:00 发布 · 3.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
文章发表1周内为内容优化高峰期，后续会根据认知迭代继续做完善补充。
文章标签：

#返回上一页 #失效

本文介绍了一种使用JavaScript阻止用户在浏览器中使用后退按钮的方法。通过监听窗口的popstate事件并重新推送历史记录状态，可以有效防止用户直接返回到上一页面。此技巧适用于希望引导用户按特定流程操作的网站。
 <script>
    $(document).ready(function(e) {
var counter = 0;
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
window.history.pushState('forward', null, '#');
window.history.forward(1);
//$("#label").html("第" + (++counter) + "次单击后退按钮。");
});
}
window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
window.history.forward(1);

});

</script>

js 返回上一页和刷新 的代码
12-13
本文将详细介绍JavaScript中的各种方法来实现返回上一页、刷新页面以及相关的页面跳转技术。 首先，我们来看如何实现“返回上一页”： 1. `history.go(-1)`：这个方法将浏览器的历史记录向后移动一步，相当于点击...
解决微信返回上一页，页面中的AJAX的请求，对Get请求无效的问题
12-01
首先，问题的产生在于，当用户在微信中点击返回上一页时，浏览器会尝试恢复之前页面的状态，包括DOM结构、JavaScript变量以及网络请求。在这种情况下，如果原先页面中有一个基于Get请求的AJAX调用，如上述例子中所示...
vue填坑之解决部分浏览器不支持pushState方法
jiangxueyang的博客
03-30 9081
前端使用vue-router做单页面路由并开启history模式时，会碰到一个问题：部分低版本的手机浏览器、部分app以及IE9浏览器由于不支持pushState方法，会导致页面加载不出来。 解决这个问题的思路是： 1. 当浏览器支持pushState方法时，开启history模式，不支持则开启hash模式 2. 对链接做判断，当跳转的链接与路由模式不匹配时，则跳转至正确的链接 3. ...
js 浏览器 返回上一级页面并刷新
fighting_tl的博客
04-04 1270
1级页面js: var needRefresh = sessionStorage.getItem("need-refresh"); if(needRefresh){ sessionStorage.removeItem("need-refresh"); location.reload(); } 2级页面js: se...
iOS 微信无法捕捉到返回键的监听事件 popstate监听不触发
最新发布
weixin_43387678的博客
10-15 770
摘要： iOS环境下，从其他页面跳转到当前页面时，点击返回键无法监听到返回事件，原因是Safari的bfcache机制会跳过popstate事件。解决方案包括：1）使用pageshow事件检测返回行为；2）改用SPA路由（如router.push）替代window.location.href跳转，确保历史记录正确压栈。调整后代码在B页面初始化时通过window.history.pushState添加记录，并监听popstate事件实现拦截，结合Modal弹窗引导用户评价或关闭页面。
js返回上一个页面
qq_32067151的博客
04-25 834
https://blog.csdn.net/iteye_5552/article/details/82608488
点击返回上一页失效
Start2019
08-05 676
点击取消的时候，返回上一页，没有效果，仍然停留在当前页，还报500；改成window.history.go(-1)也不生效 代码： <button class="st-btn-normal st-btn-cancel cancle" onclick="javascript:window.history.back(-1);">取消</button> **解决办法：**在...
javascript 实现页面跳转 然后按返回键不会回到上一页
不以人人的意志为转义乃天道
09-17 1万+
  &lt;!doctype html&gt; &lt;html lang="en"&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;meta name="Generator" content="EditPlus®"&gt;   &am
JS 返回上一步（退回上一步上一个网页）
热门推荐
11-11 10万+
链接式： 返回上一步 ">返回上一步 按钮式：   直接跳转式： window.location.href=’http://www.ekesn.com‘; JS跳转页面参考代码 第一种：    window.location.href="login.jsp?backurl="+window.location.href;    第二种：
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
12-09
在开发Web应用时，有时我们需要对用户在移动设备或浏览器中的操作进行自定义处理，比如监听微信、支付宝等APP以及浏览器的返回、后退、上一页按钮点击事件。这是因为这些行为可能会影响用户的交互流程，例如关闭当前...
让网页上的超链接失效，不能点击的js代码
10-31
expression函数是一个特殊的CSS函数，它可以在CSS中执行JavaScript代码。在这个例子中，我们使用expression函数来执行一个JavaScript函数，这个函数会阻止超链接的点击事件。 最后，我们可以添加以下HTML代码来测试...
页面js返回上一步上一页
05-16
改文档包含各种“返回”的实现方式。如：jS后退一页, JS返回上一页代码, JS返回下一页,JS返回第几页,JS页面跳转, JS引用JS
关于js返回上一页的实现方法
qq_35012721的博客
01-14 315
关于js返回上一页的实现方法 返回上一页 或 返回上一页 如果是用按钮做的话就是： 用图片做的话就是： [color=#FF0000]几秒钟后[/color]自动返回上一页代码:（加入两个head间，3000表示3秒） ...
JS返回上一步
QTFYING的博客
07-11 1340
JS 返回上一步（退回上一步上一个网页） 分类： jquery2011-11-11 18:45 15363人阅读 评论(0) 收藏 举报 javascriptbuttoninputgoc 链接式： 返回上一步 ">返回上一步 按钮式：   直接跳转式： window.location.href=’http://w
js控制返回上一步
林sanity
12-28 3224
两种方式返回上一步： 1、链接：&lt;a href="javascript:history.go(-1)"&gt;返回上一步&lt;/a&gt; 2、按钮：&lt;input type="button" value="返回" onclick="location=document.referrer" /&gt;...
用js实现返回上一步操作
月光如水的专栏
09-08 4万+
按钮式： 链接式： 返回上一步 ">返回上一步 直接跳转式： window.location.href='http://www.ddhbb.com'; 开新窗口： JS跳转页面参考代码 第一种： window.location.href="login.jsp?backurl="+window.location.href; 第二种： alert("返回");
jsp，js 设置返回上一步
zhang1409399037的博客
04-24 869
<a href="javascript:history.go(-1);">返回</a> //点击a标签返回上一步 <input type="button" value="返回" onclick="history.go(-1)" /> //点击按钮返回上一步 >设置进入这个页面的时候3秒之后返回上一步，方法一： <scri...
JavaScript实现返回上一页一共有多少种方法？使用场景是什么？底层原理是什么？
长风破浪会有时的博客
11-18 3065
返回到浏览器历史记录中的前一个页面。：与相同。或：导航到特定的 URL，通常用于返回到前一个页面或刷新当前页面。：替换当前历史记录条目，导航到新的 URL。：获取前一个页面的 URL，用于导航回前一个页面。使用前端路由框架提供的方法：在使用前端路由的应用中，使用框架提供的方法来实现返回上一页的功能。每种方法都有其特定的使用场景和底层原理，选择合适的方法可以根据具体的应用需求来决定。例如，在普通的 Web 应用中，或是最常用的方法；
js 返回上一页
05-15
JavaScript 实现返回上一页的功能有多种方法，具体取决于应用场景以及是否需要刷新页面。以下是详细的实现方式： ### 方法一：使用 `history.back()` 这是最常见的方法之一，它会触发浏览器的历史记录后退功能，回到前一个访问过的页面。 ```html <a href="javascript:history.back();">返回上一页</a> ``` 或者通过点击事件绑定： ```html <a href="javascript:;" onclick="history.back();">返回上一页</a> ``` 这种方法简单直观，适用于大多数基本场景[^1]。 --- ### 方法二：使用 `history.go(-1)` `history.go(-1)` 的作用与 `history.back()` 类似，都会使浏览器加载历史记录中的前一个页面。 ```html <input type="button" name="Submit" onclick="history.go(-1);" value="返回上一页"> ``` 如果希望用超链接形式实现： ```html <a href="javascript:;" onclick="history.go(-1);">返回上一页</a> ``` 这两种写法本质上没有区别，都可以满足基础的返回需求[^2]。 --- ### 方法三：基于 `document.referrer` 刷新上一页 当需要重新加载上一页的内容而非依赖缓存时，可以借助 `document.referrer` 获取当前页面的来源 URL 并强制跳转到该地址。 ```html <a href="javascript:void(0);" onclick="location.href=document.referrer;">返回上一页并刷新</a> ``` 这种方式特别适合在完成某些操作（如表单提交或数据更新）之后，确保用户看到的是最新状态的数据[^3]。 --- ### 方法四：定时自动返回上一页 有时可能需要在一定时间延迟后自动执行返回动作，这可以通过结合 `setTimeout` 函数来达成。 ```html <script type="text/javascript"> function goBack() { window.history.go(-1); } setTimeout(goBack, 3000); // 3秒后返回上一页 </script> ``` 此脚本会在页面加载完成后等待指定毫秒数再调用 `goBack` 函数完成跳转[^2]。 --- ### 注意事项 - 上述所有方案均基于客户端行为，因此对于无浏览历史的情况可能会失效。 - 若需完全重载目标页而非仅仅恢复缓存版本，请优先考虑第三种策略即利用 `document.referrer` 动态构建新请求[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值