利用popstate 禁止返回上一页

最新推荐文章于 2024-03-14 18:18:42 发布
最新推荐文章于 2024-03-14 18:18:42 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zzzzzwt/p/11320036.html
本文介绍了一种防止浏览器历史记录被恶意篡改的方法，通过使用JavaScript的history.pushState和popstate事件监听，可以有效地保护网站的浏览状态不被非法操作。

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

能用到这个需求的页面大部分估计都是黑五或黄赌

history.pushState(null, null, document.URL);
window.addEventListener("popstate",function(e) {  
  console.log(e);
  history.pushState(null, null, document.URL);
}, false);

 

转载于:https://www.cnblogs.com/zzzzzwt/p/11320036.html

js注册popstate事件并阻止浏览器返回
阿超的博客
06-12 1144
在做一些重要资料填写的时候, 我们基本都会阻止一下浏览器的回退, 刷新等等, 今天我们主要针对回退, 做一次讲解。提示：以下是本篇文章正文内容，下面案例可供参考这样, 我们的功能就实现了我们看一下大致效果// 文档。
多页面阻止浏览器回退的解决思路(popstate)
小小小的骆驼的前端技术博客
06-08 6026
需求目的： 用户填写表单时，需要监听浏览器返回按钮，当用户点击浏览器返回时需要提醒用户是否离开。如果不需要，则需要阻止浏览器回退 实现原理：监听 popstate 事件 popstate，MDN 的解释是：当浏览器的活动历史记录条目更改时，将触发 popstate 事件。 触发条件：当用户点击浏览器回退或者前进按钮时、当 js 调用 history.back,history.go, history.forward 时 但要特别注意：当 js 中 pushState, replaceState 并不会触发 p
浏览器禁止url转码 meta_利用popstate事件处理浏览器跳转问题
weixin_39640762的博客
12-05 245
引子之前，偶尔在项目中用过history接口做返回上一页功能，当时是用的history.go(-1)，前几天面试中遇到一个控制浏览器跳转的问题时有点懵，特意查了文档记录一下，并且列出一些目前能想到的应用：popstate事件文档地址当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.re...
popstate
zgrbsbf的专栏
03-27 1204
今天测试一个h5中的popstate事件，虽然我很久之前就对这个新属性有所学习， https://blog.youkuaiyun.com/zgrbsbf/article/details/25297359 无奈今天还是犯了几个小错误,记录如下： 错误： https://developer.mozilla.org/en-US/docs/Web/Events/popstate 这篇文章中说， ...
popstate实现history路由拦截，监听页面返回事件
weixin_30716725的博客
03-25 844
1、当活动历史记录条目更改时，将触发popstate事件。 如果被激活的历史记录条目是通过对history.pushState（）的调用创建的， 或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。2、需要注意的是调用history.pushState()或history.replaceState(...
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
10-21
在开发Web应用程序时，我们经常需要处理用户界面的导航行为，如浏览器的返回、后退或上一页按钮。在桌面浏览器上这些功能通常通过使用浏览器历史记录（History API）来实现。然而，在移动设备上，尤其是在iOS和...
js禁止浏览器页面后退功能的实例(推荐)
10-19
下面的代码示例展示了如何利用这些API来禁止浏览器的后退功能： ```javascript $(function() { if (window.location.href.indexOf("/login") > -1) { // 防止页面后退 history.pushState(null, null, document....
页面禁止各种浏览器后退.txt
05-29
在Web开发中，有时我们需要控制用户的行为，比如阻止用户通过浏览器的后退按钮返回到上一个页面。这通常发生在某些场景下，如表单提交确认、敏感操作确认等，以确保用户能够按照既定流程完成任务或操作。本文将详细...
js禁止浏览器的回退事件
10-20
文章首先给出了一种“终极方案”，该方案利用了HTML5的history API，具体方法是在JavaScript中调用history.pushState方法，并为window对象添加一个popstate事件监听器，在这个监听器中再次调用history.pushState方法...
微信自带的返回上一级拦截
最新发布
04-01
用户提到的场景是在微信内置浏览器中，当用户点击左上角的返回按钮时，不希望直接返回上一页，而是执行一些自定义逻辑，比如提示用户或者跳转到指定页面。这时候需要拦截返回事件。 接下来，我需要考虑具体的实现...
微信popstate外部返回时问题
ffsdp的专栏
04-14 1194
微信使用pushState控制返回按钮时，跳转到外部链接后，再从外部链接返回时，会重新加载js，导致触发onpopstate事件，从而返回到上上个页面。 如果各位有何解决方法请告知，本人是用延迟加载来解决这个问题的。//第一次访问时history.state为null,刷新或返回时有值 if(history.state){ setTimeout(function(){ $(
关于onpopstate
weixin_33724570的博客
07-10 469
Magix第1个版本做了hash与pushState之间的切换兼容关于url解析可以看这篇 当时在做history.pushState时(2012年)，发现对于onpopstate对于不同的浏览器是不一样的。 $(window).on("popstate", function() { alert('popstate'); }); 上述代码在chr...
浏览器“后退”、“前进”或可以这么去监听
weixin_30813225的博客
12-28 1148
我们知道，浏览器实现了onbeforeunload和onunload事件，onbeforeonload事件是在浏览器即将请求下一个页面（请求还未发出）的时候触发，它可以实现阻止onunload的触发。onunload事件则是浏览器已经将下一个页面请求回来，页面即将跳转的时候触发，该事件无法中断。看起来onbeforeunload事件似乎能满足我们的需求，但是，这只是一个假象。 onbeforeu...
popstate 的触发
PC_136的博客
03-14 673
而history.back() 、history.forward()、history.go()就是两条历史记录条目直接的跳转，所以会触发。也就是说，pushState和replaceState都是单一维度操作历史记录条目，只涉及一条历史记录条目，所以不会触发。代码中调用history.back() 、history.forward()、history.go()代码中调用pushState()、replaceState()在同一文档的两个历史记录条目之间导航会触发该事件，用户点击浏览器的前进、后退按钮。
h5,小程序阻止用户返回行为增加挽回弹窗
lhlu666888的博客
11-02 1841
在h5中可以通过监听popstate事件来实现，当浏览器的活动历史记录条目更改时，将触发 popstate 事件。
popstate_HTML5之pushstate、popstate操作history，无刷新改变当前url
weixin_39668479的博客
12-20 161
一、认识window.historywindow.history表示window对象的历史记录，是由用户主动产生，并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退。1、历史记录的前进和后退在历史记录中后退，可以这么做：1 window.history.back();这...
popstate_H5，API的pushState()，replaceState()和popstate()用法
weixin_39579726的博客
12-20 427
pushState和replaceState是H5的API中新添加的两个方法。通过window.history方法来对浏览器历史记录的读写。pushState和replaceState在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。pushState() 带有三个参数：一个状态对象，一个标题(现在被忽略了)，以及一个可选的URL地址。state ob...
HTML5的popstate、pushState、replaceState记录(Vue-Router实现)
陈坚泓的博客
10-11 2063
HTML5的popstate、pushState、replaceState记录popstate示例hashchangehistory.pushState()语法参数描述示例history.replaceState()语法参数例子推荐阅读Vue源码学习目录Vue Router源码（四）路径切换 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 Vue-Router源码里路由切换跳转的实现原理是通过调用浏览器原生的 history 的 pushState 接口或者 repla
popstate_ios下popstate触发的问题
weixin_39957265的博客
12-20 1365
背景：在使用Tarojs开发的时候，发现在ios上跳转至其他页面，再返回回来会出现接口接连调用两次的情况。排查过程：1.由于接口调用在组件的didMount里，所以看其他的组件也是didMount调用两次，这让我感觉很诧异，componentDidMount这个生命周期应该不会调用两次的；2.我打开了weinre查看，发现了有两个一模一样的页面组件，如下图因为是router层级上double了，所...
iframe返回上一页面时禁止刷新上一页面
06-12
在 iframe 中返回上一页面时，如果不想刷新上一页面，可以使用以下方法： 1. 使用 history.pushState() 方法 在 iframe 中返回上一页面时，可以使用 JavaScript 的 history.pushState() 方法修改浏览器历史记录，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值