如何在Ajax项目中使用浏览器的前进后退按钮


在Ajax项目中如何管理浏览器的浏览历史呢?以前还真没想过,现在不得不想了。

一开始,我想到了用window.history.forword(1);来控制后退时回到当前页,但是浏览器不会保存Ajax修改的DOM对象,所以window.history.forword(1);之后,Ajax修改过的页面内容不见了。所以想到了Ajax Browser history了。马上放狗。

感谢万能的Google,在我使用Ajax Hisotry作为关键字的时候,搜索到了Ajax and Browser History。在结果中还发现了YUI也提供浏览历史记录管理的功能。不过我的项目没有用到YUI,所以作罢。直接看Ajax and Browser History。

首先简单看了一下网站的示例程序,发现确实能够实现前进后退。然后下载,配置。一切OK。只有简单几步:

  1. 确保每个页面都引用了bookmarks.js文件,例如像下面这样
    <script type=”text/javascript” src=”/bookmarks/bookmarks.js”></script>
    当然,文件名称是可以修改的。唯一需要注意的是,如果修改目录名称和blank.html文件的名称,需要在bookmarks.js文件中做出相应的修改。
  2. 保证页面onload的时候会执行 bookmarks.initialize();方法。例如我在JQuery中初始化:
    $(function(){
    bookmarks.initialize();
    });

通过上面两步,我们就已经把bookmarks引入进来了,然后就可以测试浏览器的前进、后退功能了。

上面只是使用bookmarks.js中提供的ajax方法做异步请求时,前进后退功能可用了。如果需要在其他的ajava库(例如:JQuery,Ext)中使用bookmarks,必须要实现bookmarks.sethash(store,url,container)方法。

目前该组件能够支持以下浏览器

Advertisements

如何在Ajax项目中使用浏览器的前进后退按钮》上有1条评论

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s