js实现浏览器后退按钮失效(包含iframe的后退)

问题：使浏览器后退按钮失效

在业务中出现了这样的需求，用户不能通过浏览器的后退按钮后退到上一界面。这个需求出现的场景很多，比如不希望用户重复提交表单，或者上一页面需要重新从服务器上下载，或者单纯不希望用户可以重复访问上一页面。

解决办法：走一步退一步权当没走

方法简介

网上很多解决方案，我采取了其中一种，就是通过js监视浏览器的后退动作，当监视到浏览器后退时，在浏览器历史记录中添加一页当前页面，然后调用js的history.forward()方法前进一页。之后浏览器再后退就会进入当前页面。至于为什么不是先让浏览器后退，再前进一步呢？其实很简单，我们只能监视浏览器后退之前，然后执行一些操作，这是监视器的本质，我们无法监视后退之后。还有一点，如果先后退再前进会出现两个页面瞬间跳转的情况，画面会出现明显的抖动，用户体验不好。
这个方法在大多数浏览器上有效（但是目前亲测手机UC浏览器不行），而且无论前进和后退都是当前页面，不会出现页面抖动的感觉，基本解决了这个业务需求。如果实在必要，可以搭配限制浏览器使用。如何限制浏览器，请看我另一篇博客《如何限制访问网页的浏览器类型》。

history对象

在使用这个方法之前，很有必要了解一下js的history对象，因为这个方法大部分都是在操作这个对象，想要深度学习history对象的学习的朋友可以参考这个网站JavaScript history对象_w3cschool，下面我先简单介绍下用到的history api。

js实现浏览器的前进后退

js实现添加历史记录