`

E6与location.hash和Ajax历史记录 (转载)

阅读更多

为了在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的代码发现:

  1. 不用修改iframe的src,只是简单的在open close中插入一个write,就可以生成历史记录。
  2. 这样的修改,此iframe本身不会有导航音。于是总共只发出一次导航音,非常正常。
  3. 最好是在这个iframe的document中写入title标题,这个是历史记录的名字,便于用户查找。
  4. hash不再保存于iframe的document.location.hash,也不能直接挂靠在iframe上,而是应该放置于iframe的document内部,最简单还是用title节点
  5. iframe支持load事件,只要open write close就会触发,所以前进后退都可以用这个驱动。在ie6/7上都可以工作,类似于hashchange事件。
  6. https和http协议,最简单的iframe src都是javascript:0。
  7. 唯一的问题是:点击前进后退,仍然会有两次导航音,但这已经好很多了。

通过进一步的搜索发现,许多库的作者使用了open close,却仅仅是修改了hash,说明他们并没有意识到真正的问题所在。

 

原文地址:http://blog.sina.com.cn/s/blog_6e7f61f30100sddm.html

分享到:
评论

相关推荐

    window.location.hash解析

    这篇博客文章可能详细讲解了如何使用和解析`window.location.hash`。 哈希值在网页中的主要用途是实现页面内部跳转,例如,如果有一个长页面,我们可以在链接中指定一个哈希值,当用户点击这个链接时,浏览器不会...

    小发现之浅谈location.search与location.hash的问题

    本文将深入探讨location.search与location.hash的区别、应用场景和解决问题的方法。 一、location.search和location.hash的区别 location.search和location.hash是两个不同的属性,它们在URL中的位置和作用也不同...

    js 页面刷新location.reload和location.replace的区别小结.docx

    JavaScript 中的 location.reload 和 location.replace 方法的区别 在 JavaScript 中,我们经常使用 location.reload() 和 location.replace() 两个方法来刷新页面或重定向到新的 URL。但是,这两个方法之间有着...

    location.hash保存页面状态的技巧

    hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)...在我们的项目中,写了一个很简单的JavaScript基类来处理location.hash从而保存页面状态,今天在此就分享给大家。 (本文的内容可能

    jquery.hash.min.js 和 jquery.ba-hashchange.min.js

    而 `jquery.hash.min.js` 和 `jquery.ba-hashchange.min.js` 这两个文件则是在 jQuery 基础上扩展了对浏览器 URL hash 变化的处理,从而实现单页面应用(Single Page Application, SPA)中后退和前进按钮的刷新功能...

    location和history对象

    在前端开发中,`location` 和 `history` 对象是两个至关重要的概念,它们与浏览器的URL导航密切相关。本文将深入探讨这两个对象的功能、用法以及它们如何协同工作以实现网页间的导航。 `location`对象是Window接口...

    利用location.hash实现跨域iframe自适应

    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的宽度和高度是不可预知而且会...

    HashMap扩容时的rehash方法中(e.hash & oldCap) == 0算法推导.docx

    `(oldCap - 1)`和`(2 * oldCap - 1)`的低n位都是111...1,它们与`e.hash`的低n位进行按位与运算得到的值决定了元素在旧数组中的索引,而这个值在满足`(e.hash & oldCap) == 0`的条件下对新数组的索引计算也适用。...

    [removed].hash 属性使用说明

    3. **历史记录管理**:`location.hash`的变化可以被浏览器的历史记录跟踪,因此用户可以使用前进/后退按钮在不同的页面状态之间切换。在上述代码中,通过`switch`语句根据`hash`值切换显示的面板,确保了前进/后退...

    scrollHash.js:滚动到Blaock时,然后更改location.hash!

    在Web开发中,有时候我们需要在用户滚动页面到特定区块(block)时,自动更新浏览器URL的哈希值(hash),以便于实现如锚点链接的效果或者进行历史记录管理。`scrollHash.js`就是这样一个JavaScript库,它专门用于...

    js location.replace与location.reload的区别

    当作为Location对象时,提供了许多属性和方法,可以分别获取和设置URL的不同部分,比如protocol、hostname、port、pathname、search和hash等。 1. location.replace()方法 location.replace()方法用于加载一个新的...

    对ajax前进后退的处理

    浏览器会为每个不同的`hash`值创建一个新的历史记录条目,使得用户可以通过前进和后退按钮进行导航。 在AJAX应用中,我们可以利用`hashchange`事件来监听`hash`值的变化。当用户点击前进或后退按钮时,浏览器会触发...

    js获取location.href的参数实例代码

    在JavaScript中,`location.href` 是一个非常重要的属性,它表示当前页面的完整URL,包括协议、主机名、路径和查询字符串。当我们需要从URL中提取特定参数时,`location.href` 提供了便利的访问方式。在本文中,我们...

    [removed].hash 使用说明

    `window.location.hash` 是在JavaScript中用于操作URL的锚点(Hash)部分的属性,它在Web开发中常用于实现单页应用(Single-Page Applications, SPA)中的导航和页面状态管理。`window.location` 是一个全局对象,...

    cra-location-hash-router:使用location.hash的CRA路由器

    CRA location.hash路由器在此存储库中,我使用URL片段验证了有关客户机+服务器路由解决方案的想法。 这个想法是针对您的SPA是通过文件服务器(例如GitHub Pages)提供SPA的情况,而您不能为index.html设置一个...

    hashRouter:location.hash 的路由器

    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 $...

Global site tag (gtag.js) - Google Analytics