JS实现不重载页面前提下创建一条历史纪录

bigdevil_s 发布于2019-08-23 12:35 / 3260人阅读

摘要：背景最近在上班过程中，遇到了这么一个需求，在多页面应用中，需要在几个页面上共用同一个数据来源，且切换页面不刷新页面数据，并能实现历史记录的后退功能因前期只考虑在一个页面内实现多个页面的效果，并未考虑到历史记录堆栈中的处理，导致页面会一次性推

背景

最近在上班过程中，遇到了这么一个需求，在多页面应用中，需要在几个页面上共用同一个数据来源，且切换页面不刷新页面数据，并能实现历史记录的后退功能；因前期只考虑在一个页面内实现多个页面的效果，并未考虑到历史记录堆栈中的处理，导致页面会一次性推出入口，以下为总结的几种解决方法。

hash

在URL中，#我们称为位置标识符，代表网页的一个位置，在我们刚开始接触到a标签的时候，我们很多人都有操作过锚点跳转，主要就是通过在 href 中设置想要跳到的位置的id值，在这个过程中，页面是没有刷新的，但历史记录却新增了一条；我们利用window.location.hash可以取得当前页面的hash值，同时也可以也可以通过其写入新的hash值，并通过监听hashchange事件，来检测hash值是否发生了改变。当我们再点开弹框式的遮罩页面的时候，可以手动的去修改location.hash的值，这样点击window.history.back()，就可以实现历史记录回退；

例子

代码如下：




    
    Title
    



    加载中....

在浏览器中打开该页面，并在路由上加上#blue,如下：

可看到如下页面，初始条件下，页面的显示加载中...，而后定时器触发更新，显示递增的数字，此时我们可以在控制台中打印出对应的history.length,其值为2：

接下来，我们通过点击change-url 按钮，去实现修改hash值，我们可以看到，对应的路径发生了改变，#blue变为#g"ra，背景颜色也对应的更改，但此时递增的数字没有被刷新，说明我们的页面并没有经过刷新重载的过程。

重新在控制台输入window.history.length可以看到，其值已经变为3，点击浏览器后退箭头，页面背景改为之前的蓝色背景，到这里，我们就实现我们想要的功能；

history.pushState

除了上面讲到的方法外，通过html5新增的history.pushState也可以实现同样的效果；
history.pushState和history.replaceState同是html5新增的api，都可以实现改变状态栏的url而不刷新页面，但两者的区别是，replaceState是替换当前地址为指定的url，而pushState则是创建一条新的历史纪录。执行history.back()和history.forward()后会触发window.onpopstate事件。

API

history.pushState(state,title,url)
state:对象，可以存放一些数据表示当前的状态。当浏览器执行前进或在后退的时候，会触发onpopState事件，state将会是event对象的属性对象，可以通过event.state访问；需要注意的是，statez中的属性值不能为对象。url为将要替换的地址；如果是puhState则会添加一条历史记录；

例子

我们同样可以用上面的例子来测试，只不过，我们需要监听的是popstate事件,新建历史记录，将当前信息保存到history.state中，

history.pushState && window.addEventListener("popstate",function(e){})
history.pushState && history.pushState（state,title,url）

总结

以上介绍的两种方法，都可以实现页面不跳转的前提下，修改url 并新增一条新的历史记录，可以通过浏览器的默认行文执行前进后退操作，但需要注意的是，两者监听的触发修改后的响应事件不同，且修改url的方式也不一样。

GPU云服务器云服务器 php 清除历史纪录 js实现页面表格 js 实现页面滑动 js实现页面跳转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98768.html

实现一个前端路由，如何实现浏览器的前进与后退？

摘要：执行过程如下实现浏览器的前进后退第二个方法就是用两个栈实现浏览器的前进后退功能。我们使用两个栈，和，我们把首次浏览的页面依次压入栈，当点击后退按钮时，再依次从栈中出栈，并将出栈的数据依次放入栈。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你实现一个前端路由，应该如何实现浏览器的前进与后退？ 2. 问题...

刘东 2019-08-23 18:01 评论0 收藏0
基于 github issues 实现第三方评论系统

摘要：什么是第三方评论系统博客或系统，一般都是有内容和评论两部分组成。而且垃圾评论和过滤非法关键字难度较大，所以在国内外都有第三评论系统。三评论系统实现预备工作创建。本文只是介绍如何基于 github issues 实现第三方评论系统，对于 Hexo 介绍，本文并不打算详述，如果有童鞋之前还没有了解 Hexo 的，可以先看一下之前文章《静态博客框架 Hexo 入门》，或者直接访问 Hex...

waltr 2019-08-21 16:24 评论0 收藏0
jQloader 开源，集成 ajax、history、loading、orderTemplate

摘要：一款精简而丰富的微型框架，非常适合以为核心的项目使用。并集成指令模板进度条效果等功能。虽然支持载入页面的运行，但是由于安全限制以及可能出现的重复运行的问题，建议将所有写在主页面，事件以委托方式绑定。使用模式请求页面，这样可以保证是完全重载。 jQloader v0.2.3 一款精简而丰富的微型框架，非常适合以 jQuery 为核心的项目使用。它的核心功能为 ajax + pushS...

JohnLui 2019-08-19 18:44 评论0 收藏0