在做一个网页的项目，有个功能的需求是“有一个页面转跳后，不要让返回键能回到上一页，而是直接回到主页”。

有一个表单提交，但是不想有返回键能回到表单提交页面，所以，想要返回键返回时回到首页。

实现原理： 
利用HTML5 的window.history对象实现对历史记录的访问

实现代码：

一,在需求页面之前的页面修改历史记录

// 前提：假设我们在index.html页面,将要进入到order.html进行表单提交

// 思路
// 1.实现我们大概可以知道pushState函数的作用是修改当前页面的地址，但是不刷新当前页面或者跳转到其他页面
// 2.因为当前页面的地址被改变了，所以我们通过返回键的时候，返回的是index页面

// 过程
// 我来到了一个表单显示的页面
// orderRead.html
// 此时回退会回到前一页面，但是前一页面的URL被修改为index.html
// 所以，我们跳转到了index.html
// 也就是我们需要跳转的页面

//加载页面时，自动执行下面下列代码

//index页面是我们按返回键后，要跳转的页面
function pushHistory() {
    window.history.pushState({}, "index", "index.html");
}

pushHistory();

// 影响
// 当前url本应该是order.html,但是因为上述代码改变为index.html

二,在需求页的页面修改历史记录

这个方法与之前的方法不同的地方是就在当前页面写代码

//该方法修改地址后，会变成order#
//此时返回是变成order.html
//但是，执行了一次popstate
//我们通过捕捉这个popstate完成手动跳转
 function pushHistory() {
       window.history.pushState({}, "index", "#");
                        }
 
 
 
//执行代码
pushHistory();
//添加监听事件，监听后退，前进
window.addEventListener("popstate", function (e) {
      window.location.href = "index.html";
}, false);

三.pushState介绍

　　HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。

　　这些方法可以协同window.onpopstate事件一起工作。

方法：修改网站路径并创建新的历史记录

 history.pushState(state, "title", "url");

1.参数URL必须和当前URL同源 
2.修改网站路径但不操作

四.popstate事件

　　调用history.back()、history.forward()、history.go()等方法，会触发popstate事件，单纯调用pushState()或replaceState()不触发popstate事件。 
　　 
　　访问事件的state属性可获取当初pushState()或replaceState()设置的状态数据。

history.back()和history.forward()　：　分别表示向后一页和向前一页。
history.go(num)　：　表示向前或向后翻多少页，num为正数表示向前翻，为负数则向后翻。
History.back()　：　等价于history.go(-1)，history.forward()等价于history.go(1)。

五.总结

对于这些也是在项目需求的时候上网找的资料，本身没有很深入的研究，只是将其实现，在代码上可能存在一定的缺陷。

来源于：https://blog.csdn.net/u010433704/article/details/82661289

参考： 
https://www.jb51.net/article/82673.htm