浏览器按返回键回到指定页面

标签：等价   oca   style   直接   bsp   状态   window   项目   border   

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

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

实现代码：

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

<!--前提1
//假设我们在index.html页面
//------进入到order.html进行表单提交
//自动执行下面下列代码
 
//index页面是我们要跳转的页面-->
function pushHistory() {
   window.history.pushState({}, "index", "index.html");
}
 
pushHistory();
 
 
<!--影响2
当前url本应该是order.html,但是因为上述代码改变为index.html-->
 
<!--过程3
我来到了一个表单显示的页面
orderRead.html
此时回退会回到前一页面，但是前一页面的URL被修改为index.html
所以，我们跳转到了index.html
也就是我们需要跳转的页面
-->
 
 
 
<!--思路
1.实现我们大概可以知道pushState函数的作用是修改当前页面的地址，但是不刷新当前页面或者跳转到其他页面
2.因为当前页面的地址被改变了，我们今天到后面的页面时，当前页面的地址所以我们通过返回键的时候，返回的事index页面
-->

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

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

//该方法修改地址后，会变成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#

浏览器按返回键回到指定页面

标签：等价   oca   style   直接   bsp   状态   window   项目   border   

原文地址：https://www.cnblogs.com/caitangbutian/p/11734302.html