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

Posted 2020-11-16 caitangbutian

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

实现原理： 
利用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");

参数	作用
状态对象（state object）	一个javascript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。任何可序列化的对象都可以被当做状态对象。
标题（title）	FireFox浏览器目前会忽略该参数，但是我们不能保证以后是否会被用到。
地址（URL）	新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，可以理解为当前地址被更改，不指定的话则为文档当前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#