在 JavaScript 中保存哈希/锚点更改的历史记录

2023-12-21

我目前正在实现一个 JavaScript 库,用于跟踪地址栏中哈希部分的更改历史记录。这个想法是,您可以在哈希部分保留一个状态,然后使用后退按钮返回到之前的状态。

在大多数最新的浏览器中,这是自动的,您只需轮询location.hash属性进行更改(在 IE8 中,您甚至不必这样做;您只需将一个函数附加到onhashchange event.)

我想知道的是,有哪些不同的方法来跟踪历史记录?我所实现的功能已经过测试,可在 Internet Explorer 6/7/8、Firefox 和 Chrome 中运行,但其他浏览器又如何呢?以下是我目前保存历史记录的方式:

Edit:请参阅下面我的回答,了解各种浏览器的演练。


首先谢谢各位热心解答的各位! =)

我现在已经做了更多的研究,我相信我对我的实施感到满意。这是我的研究结果。

首先,我完成了Hash library http://github.com/blixt/js-hash。它是一个独立的库,没有依赖项。它有两个功能:Hash.init(callback, iframe) and Hash.go(newHash)。每当哈希值发生变化时,就会调用回调函数,并将新哈希值作为其第一个参数,并使用一个标志作为第二个参数,指示回调函数是否由于初始状态而被调用(true)或对哈希值的实际更改(false).

Hash.js http://github.com/blixt/js-hash/raw/master/Hash.js(麻省理工学院许可证)

我还制作了一个 jQuery 插件以使其更易于使用。添加一个全局hashchange事件也是如此。有关如何使用它的信息,请参阅源代码中的示例。

jquery.hash.js http://github.com/blixt/js-hash/raw/master/jquery/jquery.hash.js(麻省理工学院许可证)

要查看它们的使用情况,请转到我的 JavaScript“领域”页面:

Blixt 的 JavaScript 领域 http://blixt.org/js

互联网浏览器 8

巡航顺利!只需拍打其中一个即可onhashchange事件到window对象(使用attachEvent)并得到location.hash事件处理程序中的值。

用户是否单击带有哈希值的链接,或者您是否以编程方式设置哈希值都没有关系;历史被完美保存。

Chrome、火狐、Safari 3+、Opera 8+

巡航顺利!只需轮询更改location.hash财产使用setInterval和一个函数。

历史完美运转。对于歌剧,我设置history.navigationMode to 'compatible'。老实说,我不确定它是做什么的,我是根据 YUI 代码中的注释的推荐来做的。

Note:Opera 需要一些额外的测试,但到目前为止对我来说效果很好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 JavaScript 中保存哈希/锚点更改的历史记录 的相关文章

  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 如何在React Native Android中获取响应头?

    您好 我想在获取 POST 请求后获取响应标头 我尝试调试看看里面有什么response with console log response 我可以从以下位置获取响应机构responseData但我不知道如何获取标题 我想同时获得标题和正文
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作?

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • ORA-01000: 使用 Spring SimpleJDBCCall 时超出最大打开游标数

    我们使用 Spring SimpleJdbcCall 来调用 Oracle 中返回游标的存储过程 看起来 SimpleJdbcCall 没有关闭游标 并且在一段时间后超出了最大打开游标数 ORA 01000 maximum open cur
  • bash 中的 stdout 重定向与使用 fprintf 写入 c 中的文件(速度)

    我想知道哪个选项基本上更快 我最感兴趣的是重定向机制 我怀疑该文件是在程序启动时打开的 program gt file并在最后关闭 因此 每次程序输出一些内容时 都应该将其写入文件 就像听起来一样简单 是这样吗 那么我想这两种选择在速度方面
  • 如何为 WCF REST C# 站点设置 oAuth 身份验证

    我正在使用 VS 2010 在线模板的 WCF REST 服务模板 40 CS 制作一个网站 它工作得很好 但我需要保护它 我需要支持 Windows Linux 和 iPhone 应用程序 因此 REST oAuth 似乎是一个很好的解决
  • wp_list_comments() 不起作用

    我从头开始创建了一个自定义主题 没有什么花哨的简单主题 我目前使用的是 WordPress 3 2 1 我把wp list comments 放在comments php中来列出评论 它根本不起作用 没有显示评论 尝试将其放入 single
  • 无法启动服务应用程序:OCI 运行时创建失败:container_linux.go:349

    当我尝试使用 docker 启动 go 应用程序时遇到一些麻烦 ERROR for app Cannot start service app OCI runtime create failed container linux go 349
  • 在 jquery 中使表行可点击,但表头不可点击

    目前我正在使用 mytable tr click function blah blah 这使得所有行 包括标题 都可单击 如何排除标题或 th s 使用将标题和正文分开 thead and tbody 标签 并将选择器更改为 mytable
  • 以编程方式找出谁对我们的 iPhone 应用程序给予了 5 星评级

    我看到很多应用程序都说 如果您给我们的应用程序评分 5 星 您将获得 1000 个金币 用户可以在下载的应用程序中使用这些硬币 我想实现相同的功能 我们如何以编程方式确定谁对我们的 iPhone 应用程序给予了 5 星评级 以便我们可以在他
  • 安装nodejs后未定义require

    首先我从下载了node jslink https nodejs org en 然后我安装了browserifynpm install g browserify 然后我安装了fsnpm install fs 我收到以
  • 将 FindBugs 配置从 Sonar 导入到 Maven

    如何使用 Sonar 中的 FindBugs 配置文件作为规则集Maven FindBugs 插件 https gleclaire github io findbugs maven plugin 您可以放置 您的文件 即findbugs s
  • 非常大且非常稀疏的非负矩阵分解

    我有一个非常大且稀疏的矩阵 531K x 315K 单元格总数约为 1670 亿 非零值仅为 1s 非零值总数约为 45K 有高效的 NMF 包来解决我的问题吗 我知道有几个软件包可以实现这一点 并且它们仅适用于小尺寸的数据矩阵 任何想法都
  • WPF 将父绑定对象传递给转换器

    我有 ItemsControl 绑定到 Student 类型的集合 在 ItemTemplate 内部 我有一个 TextBox 它使用 IValueConverter 来执行一些自定义计算和逻辑 我想将实际的 Student 对象传递给值
  • 如何使用jquery在加载时滑动整个页面

    我想在更改时将整个页面向下滑动 我想做到这一点的方法是创建一个垂直幻灯片 在单击链接时播放 并在页面加载时再次播放 到目前为止 我只能创建影响特定 DIV 的幻灯片 我还希望它能够垂直滑入 任何想法将不胜感激 只需将所有内容包装在一个 di
  • 为什么应该仅在 1 个元素张量上或使用变量的梯度来调用向后函数?

    我是 pytorch 的新手 我想了解为什么我们不能对包含大小为 2 2 的张量的变量调用后向函数 如果我们确实想在包含大小为 2 2 的张量的变量上调用它 我们必须首先定义一个梯度张量 然后在包含张量 w r t 定义的梯度的变量上调用后
  • C# 如何使用 DataAnnotations StringLength 和 SubString 删除文本

    我有一个模型类 它有一个描述属性 其数据注释属性为 StringLength 长度设置为 100 个字符 当此属性超过 100 个字符并且实体框架尝试保存此属性时 我收到以下错误 StringLength 100 ErrorMessage
  • SQL:条件 AND in where

    我正在尝试创建一个允许省略参数的存储过程 但如果提供了参数则进行 AND 操作 CREATE PROCEDURE MyProcedure LastName Varchar 30 NULL FirstName Varchar 30 NULL
  • Apache Commons CLI - 订购帮助选项?

    我正在使用 Apache Commons CLI 默认情况下 它按字母顺序对命令行上的帮助选项进行排序 那么 出现的就是 csv ip msisdn xml 但我想按如下方式订购它们 csv xml ip msisdn 我知道您可以使用一个
  • 通过 Access 中的 ODBC 链接表更新 SQLite 数据库

    我在使用 SQLite 数据库时遇到问题 我正在使用 SQLite ODBChttp www ch werner de sqliteodbc http www ch werner de sqliteodbc 安装 64 位版本并使用以下设置
  • OpenERP (Odoo) 在哪里找到模块路径?

    我正在使用 Odoo v 8 我想找出 Odoo 在哪里找到模块所在的信息并加载它们 我知道文件 openerp server conf 中有一个变量 addons path 我找到该变量的唯一文件是 opt odoo odoo debia
  • Python:按索引过滤列表

    在Python中我有一个元素列表aList和索引列表myIndices 有什么方法可以一次检索所有这些项目aList将以下值作为索引myIndices Example gt gt gt aList a b c d e f g gt gt g
  • 在 JavaScript 中保存哈希/锚点更改的历史记录

    我目前正在实现一个 JavaScript 库 用于跟踪地址栏中哈希部分的更改历史记录 这个想法是 您可以在哈希部分保留一个状态 然后使用后退按钮返回到之前的状态 在大多数最新的浏览器中 这是自动的 您只需轮询location hash属性进