浏览器的记录栈和history API的应用

最新推荐文章于 2024-03-05 16:05:36 发布
VIP文章 最新推荐文章于 2024-03-05 16:05:36 发布
阅读量3.4k 收藏 3
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33050575/article/details/77091921
版权

回顾

上篇博客，我使用hashchange函数来监听每次hash改变的时候，记录当前的scrollTop值到sessionStorage中，然后再进入该页面时就看sessionStorage中是否有记录值，如果有就在页面html内容全部加载完成后取出记录值使页面加载到同样的位置，如果没有记录就记录当前的位置。一波简单的操作之后，页面在hash变化的时候，确实能按照我们预期的那样进行着，非第一次进入一个页面，会保存上次浏览该页面的位置继续浏览，但是！当我在切换多个hash后，按物理键返回或点击页面的返回键的时候，页面并没有按照我当前记录的那样保存位置，而是发生了错乱。

问题调研

在一系列的断点调试的时候，终于找到了问题所在。假如有两个页面a(#a) 和b(#b)，先从a页面跳到b页面，然后在b页面返回到a页面的时候，注意了！浏览器的行为这时候有点诡异，返回的时候，首先a的scrollTop值赋给当前页面！首先a的scrollTop值赋给当前页面！首先a的scrollTop值赋给当前页面！然后再改变hash，然后再渲染dom加载内容，那么一切都变得合理了
由于首先会把a的滚轮值给b页面，那其实这时候b的scrollTop值其实已经是a的了，然后再hash改变的时候，执行我们的hash监听函数，把b的scrollTop值(其实是a的位置记录)错误的更新了，当我们一直点返回，就会一直记录错的位置，只要返回到已经错误记录过的那个页面时，就会出现我们前面说的那种错误现象了。
那么找到问题所在了，原来这是单页面的特性使然，并不是代码问题，那解决也就变的简单了，只要让页面返回或者前进的时候，不执行我们定义的hashchange函数，也就是只要是页面返回或者前进的时候，就不记录当前的scrollTop值，让他只执行他的页面变化，，就OK了。
避免再次踩坑，我还是不急着解决该问题，而是决定彻底把浏览器的记录行为弄清楚先！！！

理解浏览器的历史记录

1.浏览器有一个类似栈的网页记录的数据结构，我把他叫做记录栈，在同一个窗口下，改变网页的时候，会把当前的网页记录推到记录栈中，刷新页面不会增加记录栈。浏览器有一个history对象，可以记录这种行为，但是只能通过length属性查看当前窗口消息历史记录的总数，不能查看当前栈里的情况，对于开发者来说，操作记录栈相当于操作一个黑箱子，所以

最低0.47元/天 解锁文章
weikxu
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
history-api：历史记录应用程序API
02-24
历史 启动API source .env 在环境中运行一次： python run.py 对于产品 源.env 古尼康--bind 0.0.0.0:5000 wsgi：application
history:超级简单的历史堆栈
07-13
历史 历史组件 安装 使用安装： $ component install bmcmahen/history $ npm install bmcmahen-history 应用程序接口 执照 麻省理工学院许可证 (MIT) 版权所有 (c) 2014 特此授予任何人免费获得本软件副本和相关文档文件（“软件”）的许可，不受限制地处理本软件，包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或销售本软件的副本，并允许向其提供本软件的人员这样做，但须符合以下条件： 上述版权声明和本许可声明应包含在软件的所有副本或重要部分中。 该软件“按原样”提供，不提供任何形式的明示或暗示的保证，包括但不限于适销性、特定用途的适用性和不侵权的保证。 在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任承担任何责任，无论是在合同诉讼、侵权行为或其他方面，由软件或软件的使用或使用或其
深入理解 history API
最新发布
JudithHuang的博客
03-05 563
这篇博客介绍了前端开发中常用的 History API，包括浏览器历史、哈希历史和内存历史等环境，以及常用的方法和创建不同环境历史对象的方式。通过深入理解 History API，开发者可以更好地控制浏览器的历史记录，实现页面导航和状态管理，提升用户体验和应用的功能性。
如何使用 JavaScript 操作浏览器历史记录 API
01-22
History 是 window 对象中的一个 JavaScript 对象，它包含了关于浏览器会话历史的详细信息。你所访问过的 URL 列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是 history 的信息。 History 对象包含长度属性，它包含了会话历史记录栈中的 URL 数量。例如，如果用户在浏览器中打开一个标签页，历史记录的长度将是 1（新的标签页也是一个网页）。然后用户输入一个网址 foo.com 并点击回车，现在历史记录对象的长度将是 2, 用户转到其他页面 bar.com，历史记录对象的长度将就是 3 了。 Back 和 Forward 方法 你可以使用 his
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
10-26
本文主要介绍了window.history对象使用方法
HTML5学习笔记之History API
09-28
系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，
uniapp开发H5,刷新浏览器时导致页面栈消失出现的跳转问题不能返回
weixin_45863359的博客
05-17 2170
近期开发H5遇到在刷新浏览器时,左上方返回按钮没有用了,是因为刷新游览器导致页面栈消失了，经过百度和交流群咨询得到了解决方案，记录一下。 1.pages.json（需要自定义顶部导航栏） { "path": "pages/index/index", "style": { "navigationStyle": "custom" } } 2.创建导航栏组件（我的项目引入了uview-ui,直接进入u-navbar位置去修改） /*主要是以下这几行代码，自定义组件左侧返回按钮事件*.
浏览器前进与后退的秘密——栈 （栈的理解与实现）
m0_69383623的博客
03-18 3273
关于“栈”，我有一个非常贴切的例子，就是一摞叠在一起的盘子。我们平时放盘子的时候，都是从下往上一个一个放；取的时候，我们也是从上往下一个一个地依次取，不能从中间任意抽出。 后进者先出，先进者后出，这就是典型的“栈”结构。
前端路由之hashRouter与BrowserHistory
weixin_45492532的博客
05-10 349
标题 这里写自定义目录标题标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何
JS获取浏览器信息
来啦(#^.^#)
08-10 452
最近做项目用到了该方法，之前没接触过，记录一下 userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值 function getExplore(){ var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] : (s = ua.match(/msie ([\d\
localhistory:将历史记录存储到localStorage
05-25
当地历史 localhistory是将历史记录存储到的浏览器库。 防止localStorage异常到达您的代码。 修剪较旧的条目，以避免使localStorage饱和。 约1k缩小并压缩。 没有依赖关系。 localhistory最初是为了向语言游乐场添加历史功能而开发的。 如果您对此感兴趣，请查看。 demo目录中提供了一个的demo 。 安装 从dist目录下载localhistory.min.js 。 将其添加到您的网页： [removed][removed] 用法 localhistory.append（键，条目，[选项]，[回调]） 将条目追加到历史记录。 争论 key是一个字符串，用于标识要附加的历史记录。 entry是要附加到历史记录的值。 entry可以是任何值。 [options]是一组可选的键/值对
html5怎么改为vue_vue-router实现原理及两种模式分析
weixin_39955938的博客
11-20 278
之前用Vue开发单页应用，发现不管路由怎么变化，浏览器地址栏总是会有一个'#'号。 当时检查自己的代码，没有发现请求的地址带'#'，当时也很纳闷，但是由于没有影响页面的渲染以及向后台发送请求，当时也没有在意。最近看了一下vue-router的实现原理，才逐渐揭开了这个谜题。vue-router 的两种方式（浏览器环境下）1. Hash （对应HashHistory）hash（“#”）符号的本来作用...
获取页面栈
m0_59722227的博客
03-14 88
【代码】获取页面栈。
Linux虚拟地址空间布局以及进程栈和线程栈总结
u014426028的博客
02-22 795
本文转自多个博客，以及最后有我的总结。我没有单独从头到尾写一个总结的原因是别人已经写得很好了，我不花大量时间是无法达到这水平的。 一：Linux虚拟地址空间布局 （转自：Linux虚拟地址空间布局) 在多任务操作系统中，每个进程都运行在属于自己的内存沙盘中。这个沙盘就是虚拟地址空间(Virtual Address Space)，在32位模式下它是一个4GB的内存地址块。在Lin...
浏览器中的history详解
qq_42880714的博客
08-05 1813
浏览器中的history详解
从window.history理解浏览器返回不触发页面刷新问题
weixin_42349568的博客
02-28 3621
DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问，它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从 HTML5 开始——提供了对 history 栈中内容的操作。
使用document.referrer代替history.back(-1) 返回
发现问题，面对问题，分析问题，解决问题，总结问题
09-14 2017
window.history. DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从HTML5开始——提供了对history栈中内容的操作。 window.history.back(); 浏览器回退操作 window.history.forward(); 向前跳转 window.history.go(-1); 向后移动一个页面 (等同于调用 back()): window.history.go(1)
React-router原理——浏览器记录
读心悦
03-15 555
React-router在React应用中用来路由管理。 在理解React-router原理之前，我们先来简单了解一下几点知识： URL和URI 浏览器记录 浏览器中的跳转和相关事件 URI和URL URI：统一资源标识符，允许用户对网络中的资源通过特定的协议进行交互操作。 URL：统一资源定位器，作为URI其中的一种。 浏览器记录 是浏览器中各个页面的用户导航记录，通过window.history.length获取页面栈的信息。浏览器的记录是浏览器统一管理的，它不属于具体的某一个页面。 window.
HTML5的History API 用法例子
04-01
以下是一个使用HTML5的History API来实现浏览器前进和后退按钮的例子： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>History API Example</title> </head> <body> <h1>History API Example</h1> <button id="backBtn">Back</button> <button id="forwardBtn">Forward</button> <script src="script.js"></script> </body> </html> ``` JavaScript代码： ``` // 获取back和forward按钮 var backBtn = document.getElementById('backBtn'); var forwardBtn = document.getElementById('forwardBtn'); // 监听back和forward按钮的点击事件 backBtn.addEventListener('click', function() { window.history.back(); }); forwardBtn.addEventListener('click', function() { window.history.forward(); }); // 获取当前的历史状态 var currentState = history.state; // 创建一个新的历史状态 var newState = { page: 'example.html' }; // 使用pushState方法将新的历史状态添加到历史记录中 history.pushState(newState, 'Example Page', 'example.html'); // 监听popstate事件，当用户点击浏览器的前进或后退按钮时触发 window.addEventListener('popstate', function(event) { // 获取新的历史状态 var newState = event.state; // 更新页面内容 document.title = newState.page; }); ``` 在这个例子中，我们首先获取back和forward按钮并添加点击事件监听器，当用户点击这些按钮时，我们使用History API的back()和forward()方法来模拟浏览器的前进和后退按钮。 接下来，我们获取当前的历史状态，并使用pushState()方法将一个新的历史状态添加到历史记录中。在这个例子中，我们创建了一个包含页面名称的简单对象，并将其添加到历史记录中。 最后，我们监听popstate事件，当用户点击浏览器的前进或后退按钮时触发。在这个事件处理程序中，我们获取新的历史状态并更新页面的标题。在实际应用中，您可以使用这个事件处理程序来更新页面内容，以便与用户选择的历史状态相匹配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值