用Ajax来控制书签和回退按钮的代码

2019-09-14 07:29:47于海丽


  DhtmlHistory 类提供了一个对Ajax应用提取历史的功能。Ajax页面add() 历史事件到浏览器里,指定新的地址和关联历史数据。DhtmlHistory 类用一个锚的hash表更新浏览器现在的URL,比如#new-location ,然后用这个新的URL关联历史数据。Ajax应用注册他们自己到历史监听器里,然后当用户用前进和后退按钮导航的时候,历史事件被激发,提供给浏览器新的地址和调用add()持续保留数据。

  第二个类HistoryStorage,允许开发者存储任意大小的历史数据。一般的页面,当一个用户导航到一个新的网站,浏览器会卸载和清除所有这个页面的应用和javascript状态信息。如果用户用回退按钮返回过来了,所有的数据已经丢失了。HistoryStorage 类解决了这个问题,他有一个api 包含简单的hashtable方法比如put(),get(),hasKey()。这些方法允许开发者在离开web页面时存储任意大小的数据,当用户点了回退按钮返回时,数据可以通过HistoryStorage 类被访问。我们通过一个隐藏的表单域(a hidden form field),利用浏览器即使在用户离开web页面也会自动保存表单域值的这个特性,完成这个功能。

  让我们立即进入一个简单的例子吧。

  示例1

  首先,任何一个想使用Really Simple History框架的页面必须包含(include)dhtmlHistory.js 脚本。

<!-- Load the Really Simple 
     History framework -->
<script type="text/javascript"
        src="../../framework/dhtmlHistory.js">
</script>

DHTML History 应用也必须在和AJAX web页面相同的目录下包含一个叫blank.html 的指定文件,这个文件被Really Simple History框架绑定而且对IE来说是必需的。另一方面,RSH使用一个hidden iframe 来追踪和加入IE历史的改变,为了正确的执行功能,这个iframe需要指向一个真正的地址,不需要blank.html。

  RSH框架创建了一个叫dhtmlHistory 的全局对象,作为操作浏览器历史的入口。使用dhtmlHistory 的第一步需要在页面加载后初始化这个对象。

window.onload = initialize; 

function initialize() {
  // initialize the DHTML History
  // framework
  dhtmlHistory.initialize();

然后,开发者使用dhtmlHistory.addListener()方法去订阅历史改变事件。这个方法获取一个javascript回调方法,当一个DHTML历史改变事件发生时他将收到2个自变量,新的页面地址,和任何可选的而且可以被关联到这个事件的历史数据。

window.onload = initialize;