如何控制浏览器的历史记录
2014-01-14 10:42
197 查看
上次一位网友在我blog留言问到如何修正Ajax后退失效,这是在开发Ajax应用时很常见的需求。这篇文章就简单的介绍一下怎么解决这个问题。
首先我们要清楚后退按钮会失效的原因:使用Ajax时,页面通过XMLHttpRequest来更新内容,并没有Redirect,所以浏览器不会出现前进后退。这也是Ajax刚出来时遭到很多人批判的一个原因,其中细节可以参考这两篇文章《Ajax:
99% Bad》、《AJAX的七宗罪》。这个问题其实跟Ajax无关,不过Ajax的出现使得一个页面实现无刷新更新更容易,这个时候人们开始意识到,一个页面发生巨大改变而不能后退是一件很痛苦的事情。
要解决这个问题,就要控制浏览器的history,在页面发生改变时往浏览器历史里插入一条记录。但是出于安全的目的,JS是不能直接操作history的。我们必须采用其他方法:IE中,在页面中插入一个隐藏的iframe,通过改变iframe的location或者DOM,都可以在主窗口的history中产生新记录,详细研究可以参考这篇文章;在其他浏览器(Firefox、Opera、Safari)中没有这么复杂,只需改变url就可以产生一条新的history记录,当然url不能乱改,要不页面就跳转走了,通常我们改变的是location.hash,也就是url“#”以后的部分。下面是具体实现:
首先在页面中放一个隐藏的iframe:
blank.html的内容也很简单,放了一个div来存当前的hash:
对不同浏览器采用不同方法控制history:
可以测试一下了:
上面就是控制浏览器history的基本原理,通过点击三个按钮,会往浏览器写入三条历史记录,这样尽管页面依旧没有刷新,但是浏览器的前进后退却能开始工作了。剩下的工作很简单:利用一个定时器不停的检测状态是否发生变化(IE检测iframe里state的innerText;其他浏览器检测location.hash),然后在检测到状态改变时调用相应的方法还原页面内容。限于篇幅,这一部分代码就不贴出来了。完整的实例在这里。
首先我们要清楚后退按钮会失效的原因:使用Ajax时,页面通过XMLHttpRequest来更新内容,并没有Redirect,所以浏览器不会出现前进后退。这也是Ajax刚出来时遭到很多人批判的一个原因,其中细节可以参考这两篇文章《Ajax:
99% Bad》、《AJAX的七宗罪》。这个问题其实跟Ajax无关,不过Ajax的出现使得一个页面实现无刷新更新更容易,这个时候人们开始意识到,一个页面发生巨大改变而不能后退是一件很痛苦的事情。
要解决这个问题,就要控制浏览器的history,在页面发生改变时往浏览器历史里插入一条记录。但是出于安全的目的,JS是不能直接操作history的。我们必须采用其他方法:IE中,在页面中插入一个隐藏的iframe,通过改变iframe的location或者DOM,都可以在主窗口的history中产生新记录,详细研究可以参考这篇文章;在其他浏览器(Firefox、Opera、Safari)中没有这么复杂,只需改变url就可以产生一条新的history记录,当然url不能乱改,要不页面就跳转走了,通常我们改变的是location.hash,也就是url“#”以后的部分。下面是具体实现:
首先在页面中放一个隐藏的iframe:
相关文章推荐
- 如何快速清除IE8浏览器的历史记录
- 图解用HTML5的popstate如何玩转浏览器历史记录
- Ajax请求如何实现页面无刷新前进后退,将ajax请求保存至浏览器历史记录
- web开发如何屏蔽浏览器输入框下拉历史的输入记录
- 图解用HTML5的popstate如何玩转浏览器历史记录
- 用HTML5的popstate如何玩转浏览器历史记录
- android代码如何获取非自带浏览器的历史记录,最好附带关键代码
- 如何控制 Internet Explorer 浏览器的进程数量
- 使用VSTS的Git进行版本控制(三)——评审历史记录
- 如何查看域名的历史使用记录,以前注册信息,whois,是否有被K记录
- 如何让input双击时不显示历史记录
- C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)
- ZBrush中保存历史记录太多该如何解决
- 如何在WinDBG里保存运行过的命令的历史记录?
- 操纵浏览器的历史记录
- python-5-如何实现用户的历史记录功能(最多n条)?
- 如何查询SQL Server备份还原历史记录
- 如何手动屏蔽Win7资源管理器的历史记录 保护隐私安全
- 如何清空历史记录