为了在IE6中改变hash来保留历史记录实现ajax的前进后退,通常需要在页面内加入隐藏的iframe,对其open+close然后修改iframe的hash,再通过timer更新主窗口的hash,达到让主窗口生成历史记录的目的。
参见http://tkyk.github.com/jquery-history-plugin/
但是这样做有一个问题,ie6默认是打开导航音的,对于用户而言,如果用隐藏iframe实现ajax历史记录,则导航时会出现两次导航音,这是非常讨厌的。有什么办法解决这个问题呢?
如果是要让页面导航不发出声音,本身是不难的。用新建的iframe设置src后再添加进dom结构,就不会有导航音。
参见http://www.julienlecomte.net/blog/2007/11/30/
但这样创建的iframe,是不会被IE6认作浏览记录的。最后研究gmail的代码发现:
-
不用修改iframe的src,只是简单的在open close中插入一个write,就可以生成历史记录。
-
这样的修改,此iframe本身不会有导航音。于是总共只发出一次导航音,非常正常。
-
最好是在这个iframe的document中写入title标题,这个是历史记录的名字,便于用户查找。
-
hash不再保存于iframe的document.location.hash,也不能直接挂靠在iframe上,而是应该放置于iframe的document内部,最简单还是用title节点
-
iframe支持load事件,只要open write close就会触发,所以前进后退都可以用这个驱动。在ie6/7上都可以工作,类似于hashchange事件。
-
https和http协议,最简单的iframe src都是javascript:0。
-
唯一的问题是:点击前进后退,仍然会有两次导航音,但这已经好很多了。
通过进一步的搜索发现,许多库的作者使用了open close,却仅仅是修改了hash,说明他们并没有意识到真正的问题所在。
相关推荐
这篇博客文章可能详细讲解了如何使用和解析`window.location.hash`。 哈希值在网页中的主要用途是实现页面内部跳转,例如,如果有一个长页面,我们可以在链接中指定一个哈希值,当用户点击这个链接时,浏览器不会...
本文将深入探讨location.search与location.hash的区别、应用场景和解决问题的方法。 一、location.search和location.hash的区别 location.search和location.hash是两个不同的属性,它们在URL中的位置和作用也不同...
JavaScript 中的 location.reload 和 location.replace 方法的区别 在 JavaScript 中,我们经常使用 location.reload() 和 location.replace() 两个方法来刷新页面或重定向到新的 URL。但是,这两个方法之间有着...
hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)...在我们的项目中,写了一个很简单的JavaScript基类来处理location.hash从而保存页面状态,今天在此就分享给大家。 (本文的内容可能
而 `jquery.hash.min.js` 和 `jquery.ba-hashchange.min.js` 这两个文件则是在 jQuery 基础上扩展了对浏览器 URL hash 变化的处理,从而实现单页面应用(Single Page Application, SPA)中后退和前进按钮的刷新功能...
在前端开发中,`location` 和 `history` 对象是两个至关重要的概念,它们与浏览器的URL导航密切相关。本文将深入探讨这两个对象的功能、用法以及它们如何协同工作以实现网页间的导航。 `location`对象是Window接口...
`(oldCap - 1)`和`(2 * oldCap - 1)`的低n位都是111...1,它们与`e.hash`的低n位进行按位与运算得到的值决定了元素在旧数组中的索引,而这个值在满足`(e.hash & oldCap) == 0`的条件下对新数组的索引计算也适用。...
www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会...
3. **历史记录管理**:`location.hash`的变化可以被浏览器的历史记录跟踪,因此用户可以使用前进/后退按钮在不同的页面状态之间切换。在上述代码中,通过`switch`语句根据`hash`值切换显示的面板,确保了前进/后退...
在Web开发中,有时候我们需要在用户滚动页面到特定区块(block)时,自动更新浏览器URL的哈希值(hash),以便于实现如锚点链接的效果或者进行历史记录管理。`scrollHash.js`就是这样一个JavaScript库,它专门用于...
当作为Location对象时,提供了许多属性和方法,可以分别获取和设置URL的不同部分,比如protocol、hostname、port、pathname、search和hash等。 1. location.replace()方法 location.replace()方法用于加载一个新的...
浏览器会为每个不同的`hash`值创建一个新的历史记录条目,使得用户可以通过前进和后退按钮进行导航。 在AJAX应用中,我们可以利用`hashchange`事件来监听`hash`值的变化。当用户点击前进或后退按钮时,浏览器会触发...
在JavaScript中,`location.href` 是一个非常重要的属性,它表示当前页面的完整URL,包括协议、主机名、路径和查询字符串。当我们需要从URL中提取特定参数时,`location.href` 提供了便利的访问方式。在本文中,我们...
`window.location.hash` 是在JavaScript中用于操作URL的锚点(Hash)部分的属性,它在Web开发中常用于实现单页应用(Single-Page Applications, SPA)中的导航和页面状态管理。`window.location` 是一个全局对象,...
CRA location.hash路由器在此存储库中,我使用URL片段验证了有关客户机+服务器路由解决方案的想法。 这个想法是针对您的SPA是通过文件服务器(例如GitHub Pages)提供SPA的情况,而您不能为index.html设置一个...
location.hash 的路由器 文件 示例网址: : $router.path console . log ( $router . path ) ; // aaa/bbb/ccc?x=1&y=2&y=3&z $router . path = 'ccc/ddd' ; console . log ( $router . path ) ; // ccc/ddd $...