`

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解析

    NULL 博文链接:https://hugang357.iteye.com/blog/1833003

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

    下面小编就为大家带来一篇小发现之浅谈location.search与location.hash的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

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

    scrollHash-Willie.Smith.Chen 描述 滚动到Blaock时,然后更改location.hash! ## Demo页面

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

    单页后退前进刷新 jquery.hash.min.js 和 jquery.ba-hashchange.min.js

    [removed].hash 属性使用说明

    不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Ajax页面里边有意思的内容,想将它收藏起来,可是地址只有一个呀,下次你打开这个地址,还是得像以往一样不断地去点击网页,...

    location和history对象

    NULL 博文链接:https://baihe747.iteye.com/blog/2152459

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

    jquery.hash:jQuery DOM元素哈希插件

    抓取out/jquery.hash.min.js文件并将其插入! 例子 DOM元素 $elem = $ ( "#myBeautifulDiv" ) ; hash_b64 = $elem . hash ( ) ; //same: $elem.hash({method: "base64"}); hash_sha1 = $elem . hash ( { method : ...

    [removed].hash知识汇总

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin...

    shiro-crypto-hash-1.4.0-API文档-中文版.zip

    赠送jar包:shiro-crypto-hash-1.4.0.jar; 赠送原API文档:shiro-crypto-hash-1.4.0-javadoc.jar; 赠送源代码:shiro-crypto-hash-1.4.0-sources.jar; 赠送Maven依赖信息文件:shiro-crypto-hash-1.4.0.pom; ...

    hash.js:hash.js 是一个处理 location.hash 的超小型框架

    哈希.js hash.js是一个处理的超小型框架得到 /* * Given the following url: http://www.example.net/#!&foo=bar&array[]=1&array[]=2 */hash ( 'foo' ) ; // 'bar'hash ( 'array' ) ; // ['1', '2']hash ( ) ; // {...

    hash.route.js:使用 location.hash 的简单灵活的路由系统

    hash.route.js,一个简单灵活的路由系统。设置哈希路由侦听器和不同的匹配规则: 空场比赛。 // Match empty routehash ( "" ) . on ( "change" , function ( evt ) { console . log ( arguments ) ;} ) ; 完全符合...

    [removed].hash 使用说明

    但是 location.hash可以获取或设置页面的 标签值 比如http://domain/#testDemo中 咱们的location.hash 就是 #testDemo 下面引用一个 网上的demo 一个搜索版块,功能有3个:普通搜索,高级搜索,后台管理,分别指明他们...

Global site tag (gtag.js) - Google Analytics