首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何阻止用户使用浏览器的后退按钮从回执页面返回?

要阻止用户使用浏览器的后退按钮从回执页面返回,可以通过以下方法实现:

  1. 使用JavaScript的history对象:可以使用history对象的pushState方法将当前页面的URL添加到浏览器的历史记录中,并使用replaceState方法替换当前页面的URL。这样在用户点击后退按钮时,浏览器会认为没有可回退的历史记录,从而无法返回到回执页面。
代码语言:txt
复制
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
  history.go(1);
};
  1. 使用sessionStorage或localStorage:可以在回执页面中设置一个标记,表示用户已经访问过该页面。然后在其他页面中检查该标记,如果存在则禁止用户返回到回执页面。
代码语言:txt
复制
// 在回执页面中设置标记
sessionStorage.setItem('visitedReceiptPage', 'true');

// 在其他页面中检查标记
if (sessionStorage.getItem('visitedReceiptPage')) {
  history.pushState(null, null, location.href);
  window.onpopstate = function(event) {
    history.go(1);
  };
}
  1. 使用禁用缓存的方式:可以在回执页面的响应头中设置禁用缓存的指令,使浏览器不缓存该页面。这样在用户点击后退按钮时,浏览器会重新请求该页面,而不是从缓存中加载。
代码语言:txt
复制
// 在回执页面的响应头中设置禁用缓存的指令
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

以上方法可以阻止用户使用浏览器的后退按钮从回执页面返回。然而,需要注意的是这些方法并不能完全阻止用户返回,因为用户仍然可以通过其他方式返回到回执页面,如重新输入URL或使用书签等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js判断页面是否是通过浏览器后退按钮返回打开

这样子就产生了一个问题,点击身份时候会生成新token,但是页面是允许返回所以url地址栏中历史token还在,所以就会基于这个token触发请求导致接口报了Token验证失败错误,一番搜索之后终于找到了解决办法...是W3C性能小组引入API,目前IE9以上浏览器都支持。...(用户通过常规导航方式访问页面,比如点一个链接,或者一般get方式) 1 : TYPE_RELOAD Navigation where the history handling behavior is...(用户通过后退按钮访问本页面) 255 : TYPE_RESERVED Any navigation types not defined by values above....所以我们只要判断type属性为2时就可以知道页面是通过返回按钮打开了,然后开头问题就可以据此加判断来解决token异常了。 ?

16.9K20

JavaScript对象

JavaScript对象 Documetn Document Document 接口表示任何在浏览器中载入网页,并作为网页内容入口,也就是DOM 树。...DOM 树包含了像 、 这样元素,以及大量其他元素。它向网页文档本身提供了全局操作功能,能解决如何获取页面的 URL ,如何在文档中创建一个新元素这样问题。...,还能使用更多 API:使用 "text/html" 作为内容类型(content type) HTML 文档,还实现了 HTMLDocument 接口,而 XML 和 SVG 文档则(额外)实现了...,所以不能后退页面 location.reload() 重新加载页面,相当于刷新按钮或者f5 如果参数为true强制刷新ctrl+f5 ---- history对象 history对象方法 作用...history.back() 相当于页面后退 history.forward() 页面前进 history.go(args) 前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

52430

JSP 防止网页刷新重复提交数据

或者“怎样才能防止用户点击后退按钮返回以前浏览过页面?” 遗憾是,我们无法禁用浏览器后退按钮。...浏览器后退按钮使得我们能够方便地返回以前访问过页面,它无疑非常有用。...一、概述      曾经有许多人问起,“怎样才能‘禁用’浏览器后退按钮?”,或者“怎样才能防止用户点击后退按钮返回以前浏览过页面?”在ASP论坛上,这个问题也是问得最多问题之一。...后来,看到竟然有那么多的人想要禁用这个后退按钮,我也就释然(想要禁用只有后退按钮,不包括浏览器前进按钮)。因为在默认情况下,用户提交表单之后可以通过后退按钮返回表单页面(而不是使用“编辑”按钮!)...,我是当用户提交第一次提交第一个页面时,把插入数据库中记录自增长id号放到session里,当用户第二个页面返回到第一个页面再一次提交该页面时,我就用session里值去数据库查,如果有这个id

11.5K20

无限滚动加载最佳实践

实际上,这也是无限滚动设计主要挑战之一:用户到达列表底部时候,内容在不断地加载进来,用户会有一两秒时间看到页脚,直到下一组结果加载成功并将页脚挤出视图之外。这阻止用户接触到页脚。...返回按钮用户待回至之前位置 有时候,无限滚动实现带来一个主要可用性缺陷:滚动位置并未被记录为“状态”。如果用户列表中链接跳转了,然后点返回按钮,他们希望能回到页面原来相同位置。...但是列表位置不再存在了,这意味着使用浏览器返回按钮一般都导致滚动位置重置到页面顶部。无怪乎用户很快就觉得沮丧,都没有一个合适“回到列表”功能。 ?...别让你用户就因为使用返回按钮,找不到列表位置。很重要是,用户通过列表访问了某一个项目的详情页,他们点击浏览器返回按钮返回列表时候,也应该在相同位置。...Flickr 监听用户点击浏览器后退按钮行为,满足用户期望。APP 记住用户滚动位置,所以当用户后退按钮时候,返回到原始位置。 ? 4.

4.2K20

注意,这个 JavaScript 事件即将弃用!

另外,因为它是早于 bfcache (浏览器前进,后退,缓存操作),所以会对正常 bfcache 进行阻塞,对网站性能产生负面影响(正常根据规范来讲,unload 是不应该阻止用户 bfcache...有什么替代方案 第一个替代方式就是 visibilitychange ,当用户切换选项卡、最小化浏览器窗口或打开新页面时,都会触发这个事件。...console.log('页面不可见'); } }); 第二个替代事件为 pagehide ,它会在用户点击跳转其他链接、前进或后退按钮,或关闭浏览器选项卡时触发,也能够用来确定用户什么时候离开界面...pagehide 不会像 unload 一样让页面不符合bfcache (浏览器前进,后退,缓存操作)条件。...另外 Chrome DevTools 也有一个 back-foward-cache 检测,可帮助我们识别可能阻止页面后退/前进缓存资格问题,这里面就包括使用 unload 事件。

35420

理解JavaScript中window对象

这将阻止程序继续进行并阻止删除资源,直到用户来决定如何处理。 还值得注意是,大多数浏览器允许用户禁用任意重复出现对话框,这意味着该功能是不可靠。...如果传递参数true,会强制浏览器服务端重新加载页面,而不是使用缓存页面。 assign()方法可以用来参数提供URL中加载另一个资源。...所以用户不能使用返回按钮进行返回。...,就好像使用浏览器前进和后退按钮。...可用性角度来看,调整或移动用户窗口大小也是一个坏主意。 许多浏览器阻止弹出式窗口,并在某些情况下不允许调用其中一些方法。例如,如果有一个以上标签打开,你就不能调整一个窗口大小。

1.6K20

大前端开发中路由管理之二:web篇

,所以当刷新浏览器时js会重新执行,当前页面的内容便会丢失;页面跳转时浏览器不会向服务器发出新页面请求,浏览器也就无法前进、后退页面。         ...但每次hash值改变,都会在浏览器访问历史栈里增加一个记录,使用'后退'键便能返回上一个位置。在H5history模式出现之前,hash是前端路由实现方式。...然而调用history.pushState()/history.replaceState()不会触发popstate事件,只有在做出浏览器动作时,才会触发该事件,比如用户点击浏览器回退/前进按钮,或者在...点击浏览器前进或后退按钮;         2. 点击 a 标签;         3. 在JS代码中触发history.pushState函数;         4....为解决这个问题,我们需要修改web服务器配置,让其在匹配不到页面返回单页应用页面

1.6K20

win10 UWP 标题栏后退

本文告诉大家如何在 UWP 标题栏添加后退按钮 设置里,标题栏有后退按钮,请看下图 ?...在用户点击标题栏后退按钮时候,可以通过下面代码拿到事件 Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested...可以通过 BackRequested 参数 handle 阻止在手机按下后退键让应用隐藏。...BackRequested 后退方法,如何获得参见:c# 设计模式 责任链.md 注意不要在每个页面的构造都使用添加事件,如果这样子,那么就会出现按一下后退出现你想不到异常。...如果是手机可以通过引用手机 sdk 使用下面的代码拿到硬件按钮返回 Windows.Phone.UI.Input.HardwareButtons.BackPressed 具体代码请看 Windows-universal-samples

80420

JavaScript 高级程序设计(第 4 版)- BOM

没有效果,还可能向用户显示错误 弹窗通常可能在鼠标点击或按下键盘中某个键情况下才能打开 弹窗屏蔽程序 所有现代浏览器都内置了屏蔽弹窗程序,因此大多数意料之外弹窗都会被屏蔽 // 如果浏览器内置弹窗屏蔽程序阻止了弹框...,用户通过单击不同按钮表明希望接下来执行什么操作,根据confirm()方法返回值判断点击项,true->OK、false->Cancel prompt():提示用户输入消息 接收两个参数:要显示给用户文本...,以及文本框默认值 如果用户单击了 OK 按钮,则 prompt()会返回文本框中值。...,除了hash外,设置location一个属性就会导致页面重新加载新URL 如果不希望增加历史记录,可以使用replace()方法,重定向后后退按钮是禁用状态 reload() 能重新加载的当前显示页面...对象 点击“后退按钮直到返回最初页面时, event.state 会为 null 可以通过 history.state 获取当前状态对象,也可以使用replaceState()并传入与pushState

1.2K10

hash和history原理和区别

1. hash模式 比如在用超链接制作锚点跳转时候,就会发现,url后面跟了"#id",hash值就是url中"#"号开始到结束部分。...hash值变化浏览器不会重新发起请求,但是会触发window.hashChange事件,假如我们在hashChange事件中获取当前hash值,并根据hash值来修改页面内容,则达到了前端路由目的。...window.onpopstate:是一个事件,在点击浏览器后退按钮或js调用forward()、back()、go()时触发。...,给每个超链接增加onclick方法,阻止默认超链接跳转,改用history.pushState或history.replaceState来更改浏览器url,并修改页面内容。...如果用户使用浏览器前进后退按钮,则会触发window.onpopstate事件,监听页面根据路由地址修改页面内容。

1.8K30

手机端页面在项目中遇到一些问题及解决办法

简单说就是:go(-1): 返回上一页,原页面表单中内容会丢失;back(): 返回上一页,原页表表单中内容会保留。...history.go(-1): 后退 + 刷新 history.back(): 后退 之所以注意到这个区别,是因为不同浏览器后退行为也是有区别的,而区别就跟 javascript:history.go...Chrome 和 ff 浏览器后退页面,会刷新后退页面,若有数据请求也会提交数据申请。...类似于 history.go(-1); 而 safari(包括桌面版和 ipad 版)后退按钮则不会刷新页面,也不会提交数据申请。...通常我们再滑屏页面,会调用 event preventDefault() 可以阻止默认情况发生:阻止页面滚动 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时候会触发

3.4K30

实现一个前端路由,如何实现浏览器前进与后退

需求 如果要你实现一个前端路由,应该如何实现浏览器前进与后退 ? 2. 问题 首先浏览器中主要有这几个限制,让前端不能随意操作浏览器浏览纪录: •没有提供监听前进后退事件。...•用户可以手动输入地址,或使用浏览器提供前进后退来改变 url。 所以要实现一个自定义路由,解决方案是自己维护一份路由历史记录,从而区分 前进、刷新、回退。 下面介绍具体方法。 3....我们使用两个栈,X 和 Y,我们把首次浏览页面依次压入栈 X,当点击后退按钮时,再依次栈 X 中出栈,并将出栈数据依次放入栈 Y。...当我们点击前进按钮时,我们依次栈 Y 中取出数据,放入栈 X 中。当栈 X 中没有数据时,那就说明没有页面可以继续后退浏览了。当栈 Y 中没有数据,那就说明没有页面可以点击前进按钮浏览了。...当你通过浏览器后退按钮页面 c 后退页面 a 之后,我们就依次把 c 和 b 栈 X 中弹出,并且依次放入到栈 Y。这个时候,两个栈数据就是这个样子: ?

1.6K30

一篇文章带你了解JavaScript Window History

为了保护用户隐私,有限制JavaScript可以访问此对象。 history.back() - 与点击浏览器back按钮相同。...但是,为了保护用户隐私,JavaScript如何访问此对象存在一些限制。window.history 对象包含浏览器历史记录。...三、获取访问页面数 该history.length属性返回浏览器会话历史记录中当前窗口页面数,还包括当前加载页面。...返回上一页 该history.back()方法将历史记录列表中上一个URL加载。 这与在浏览器中单击“后退按钮”相同。 <!...转到特定页面 可以使用history.go()方法会话历史记录中加载特定页面。 此方法将整数作为参数,负整数在历史记录中向后移动,正整数在历史记录中向后移动。 例 <!

1.4K10

面试官:如何保证接口幂等性?一口气说了12种方法!

调用接口发生异常并且重复尝试时,总是会造成系统所无法承受损失,所以必须阻止这种现象发生。...网络波动, 可能会引起重复请求 用户重复操作,用户在操作时候可能会无意触发多次下单交易,甚至没有响应而有意触发多次交易应用 使用了失效或超时重试机制(Nginx重试、RPC重试或业务层重试等) 页面重复刷新...使用浏览器后退按钮重复之前操作,导致重复提交表单 使用浏览器历史记录重复提交表单 浏览器重复HTTP请求 定时任务重复执行 用户双击提交按钮 如何保证接口幂等性?...使用Post/Redirect/Get模式 在提交后执行页面重定向,这就是所谓Post-Redirect—Get(PRG)模式,简单来说就是当用户提交连表单后,跳转到一个重定向信息页面,这样就避免用户按...F5刷新导致重复提交,而且也不会出现浏览器表单重复提交警告,也能消除按浏览器前进和后退导致同样重复提交问题。

1.7K20

AngularDart 4.0 高级-路由概述 顶

点击页面链接,浏览器导航到新页面。 点击浏览器后退和前进按钮浏览器会前后浏览您浏览过网页历史记录。 Angular路由器借鉴了这种模式。...它可以将浏览器URL解释为导航到客户端生成视图指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现具体内容。您可以将路由器绑定到页面链接,并在用户单击链接时导航到适当应用程序视图。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激时,您都可以进行命令式导航。并且路由器在浏览器历史记录中记录活动,所以后退和前进按钮也起作用。...-- Routed views go here --> 路由链接 现在,您已经配置了路由并提供了一个渲染它们地方,但您如何导航? 该URL可以直接浏览器地址栏中获得。...点击“返回按钮,应用程序返回英雄列表,显示更改英雄名称。 注意名称更改立即生效。 如果您点击了浏览器后退按钮而不是“返回按钮,该应用程序也会将您返回到英雄列表。

6.1K20

如何保证接口幂等性?

调用接口发生异常并且重复尝试时,总是会造成系统所无法承受损失,所以必须阻止这种现象发生。...网络波动, 可能会引起重复请求用户重复操作,用户在操作时候可能会无意触发多次下单交易,甚至没有响应而有意触发多次交易应用使用了失效或超时重试机制(Nginx重试、RPC重试或业务层重试等)页面重复刷新使用浏览器后退按钮重复之前操作...,导致重复提交表单使用浏览器历史记录重复提交表单浏览器重复HTTP请求定时任务重复执行用户双击提交按钮如何保证接口幂等性?...使用Post/Redirect/Get模式在提交后执行页面重定向,这就是所谓Post-Redirect—Get(PRG)模式,简单来说就是当用户提交连表单后,跳转到一个重定向信息页面,这样就避免用户按...F5刷新导致重复提交,而且也不会出现浏览器表单重复提交警告,也能消除按浏览器前进和后退导致同样重复提交问题。

69320

AJAX常见面试问题

缺点: .AJAX干掉了Back和History功能,即对浏览器机制破坏。 在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中静态页面。...一个被完整读入页面与一个已经被动态修改过页面之间差别非常微妙;用户通常会希望单击后退按钮能够取消他们前一次操作,但是在Ajax应用程序中,这将无法实现。...后退按钮是一个标准web站点重要功能,但是它没法和js进行很好合作。这是Ajax所带来一个比较严重问题,因为用户往往是希望能够通过后退来取消前一次操作。那么对于这个问题有没有办法?...答案是肯定,用过Gmail知道,Gmail下面采用Ajax技术解决了这个问题,在Gmail下面是可以后退,但是,它也并不能改变Ajax机制,它只是采用一个比较笨但是有效办法,即用户单击后退按钮访问历史记录时...(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮争论。 .AJAX安全问题。

1.8K20

pjax使用小结

liyu365.github.io/BG-UI/tpl/#page/desktop.html),但是 hash 方式有时候不能很好处理浏览器前进、后退,而且常规代码要切换到这种方式还要做不少额外处理...pjax 结合 pushState 和 ajax 技术, 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面,这个 ajax 请求会有永久链接、title 并支持浏览器回退/前进按钮。...优化页面跳转体验 常规页面跳转需要重新加载画面上内容,会有明显闪烁,而且往往和跳转前页面没有连贯性,用户体验不是很好。如果再遇上页面比较庞大、网速又不是很好情况,用户体验就更加雪上加霜了。...使服务端处理变得复杂 要做到普通请求返回完整页面,而pjax请求只返回部分页面,服务端就需要做一些特殊处理,当然这对于设计良好后端框架来说,添加一些统一处理还是比较容易,自然也没太大问题。...浏览器前进/后退导航时触发事件(暂时没做过多研究) 事件名 参数 说明 pjax:popstate 页面导航方向: 'forward'/'back'(前进/后退) pjax:start null,

2.9K40

如何保证接口幂等性?

对于防止重复提交,是放在前端控制用户点击完按钮之后,后台返回成功结果,按钮就不可见,实践证明,客户端限制操作不是绝对可靠。 针对上面的场景,就引入了今天问题,什么是接口幂等性?...网络波动, 可能会引起重复请求 用户重复操作,用户在操作时候可能会无意触发多次下单交易,甚至没有响应而有意触发多次交易应用 使用了失效或超时重试机制(Nginx重试、RPC重试或业务层重试等) 页面重复刷新...使用浏览器后退按钮重复之前操作,导致重复提交表单 使用浏览器历史记录重复提交表单 浏览器重复HTTP请求 定时任务重复执行 用户双击提交按钮 如何保证接口幂等性?...使用Post/Redirect/Get模式 在提交后执行页面重定向,这就是所谓Post-Redirect—Get(PRG)模式,简单来说就是当用户提交连表单后,跳转到一个重定向信息页面,这样就避免用户按...F5刷新导致重复提交,而且也不会出现浏览器表单重复提交警告,也能消除按浏览器前进和后退导致同样重复提交问题。

1.4K20
领券