操作浏览器的历史记录整理

参考文档:https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

实现目标

      1.页面的跳转(前进后退,点击等)不重新请求页面

      2.页面URL与页面展现内容一致(符合人们对传统网页的认识)

      3.在不支持的浏览器下降级成传统网页的方式

使用到的API

      history.state

        当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。

      history.pushState(state, title, url)

        将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。

        state:与要跳转到的URL对应的状态信息。

        title:标题,可以为空。

        url:要跳转到的URL地址,不能跨域。

        history.replaceState

        用新的state和URL替换当前。不会造成页面刷新。

        state:与要跳转到的URL对应的状态信息。

         title:不知道干啥用,传空字符串就行了。

         url:要跳转到的URL地址,不能跨域。

window.onpopstate

       history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容