浏览器按返回键回到指定页⾯
在做⼀个⽹页的项⽬，有个功能的需求是“有⼀个页⾯转跳后，不要让返回键能回到上⼀页，⽽是直接回到主页”。
有⼀个表单提交，但是不想有返回键能回到表单提交页⾯，所以，想要返回键返回时回到⾸页。
实现原理：
利⽤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() {
520送什么给女友最合适window.history.pushState({}, "index", "#");
}
//执⾏代码
pushHistory();
//添加监听事件，监听后退，前进
window.addEventListener("popstate", function (e) {
window.location.href = "index.html";
}, false);
三.pushState介绍
南京周边旅游 HTML5引进了history.pushState()⽅法和placeState()⽅法，它们允许你逐条地添加和修改历史记录条⽬。
这些⽅法可以协同popstate事件⼀起⼯作。
⽅法：修改⽹站路径并创建新的历史记录
history.pushState(state, "title", "url");
参数作⽤
状态对象
⼀个JavaScript对象，与⽤pushState()⽅法创建的新历史记录条⽬关联。⽆论何时⽤户导航到新创建的状态，popstate事件都（state
object）会被触发，并且事件对象的state属性都包含历史记录条⽬的状态对象的拷贝。任何可序列化的对象都可以被当做状态对象。标题
（title）
FireFox浏览器⽬前会忽略该参数，但是我们不能保证以后是否会被⽤到。
地址（URL）新的历史记录条⽬的地址。浏览器不会在调⽤pushState()⽅法后加载该地址，可以理解为当前地址被更改，不指定的话则为⽂档当前URL
1.参数URL必须和当前URL同源
2.修改⽹站路径但不操作
四.popstate事件
调⽤history.back()、history.forward()、()等⽅法，会触发popstate事件，单纯调⽤pushState()或replaceState()不触发popstate 事件。
访问事件的state属性可获取当初pushState()或replaceState()设置的状态数据。
history.back()和history.forward() ： 分别表⽰向后⼀页和向前⼀页。
<(num) ： 表⽰向前或向后翻多少页，num为正数表⽰向前翻，为负数则向后翻。
History.back() ： 等价于(-1)，history.forward()等价于(1)。
五.总结
对于这些也是在项⽬需求的时候上⽹的资料，本⾝没有很深⼊的研究，只是将其实现，在代码上可能存在⼀定的缺陷。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论