如何使用Ajax解决书签和后退按钮失效问题

2025-05-18 00:43:35
推荐回答(1个)
回答(1):

开源RSH框架可以解决这些问题,它为应用程序提供了书签和控制后退、前进按钮的功能。RSH目前还处于Beta阶段,可以在Firefox 1.0、Netscape 7+、Internet Explorer 6+等浏览器上运行;目前还不支持Safari。
目前有几个框架对书签和历史记录问题有所帮助;但这些框架目前都有几个由于实现而造成的重大Bug。此外,很多历史记录框架被绑定到较大的库上,例如Backbase和Dojo;这些框架为应用程序引入了完全不同的编程模型,迫使开发人员使用全新的方式来获得历史记录功能。
相较之下,RSH是一个可以包含在现有系统中的简单模块。此外,RSH库采用了一些技术以避免产生影响其他历史记录框架的Bug。
RSH框架由两个JavaScript类组成:DhtmlHistory和HistoryStorage。
DhtmlHistory类为应用程序提供历史记录抽象。页面使用add()方法添加历史记录事件到浏览器,指定新的地址和相关的历史记录数据。DhtmlHistory类使用一个锚散列(如#new-location)更新浏览器当前的URL,同时把历史记录数据和该新URL关联。应用程序将自己注册为历史记录的监听器,当用户使用后退和前进按钮进行浏览时,历史记录事件被触发,为浏览器提供新的位置以及与add()调用一起保存的任何历史记录数据。
第二个类:HistoryStorage,允许开发人员保存任意数量的已存历史记录数据。在普通Web页面中,当用户导航到一个新的web站点时,浏览器卸载并清除web页面上的所有应用程序和JavaScript状态;如果用户用后退按钮返回,所有的数据都丢失了。HistoryStorage类通过一个包含简单散列表方法(例如put()、get()、hasKey())的API来解决这类问题。上面的方法允许开发人员在用户离开Web页面之后保存任意数量的数据;当用户按后退按钮重新返回时,历史记录数据可以通过HistoryStorage类来访问。在内部,我们通过使用隐藏的表单字段来实现此功能,这是因为浏览器会自动保存表单字段中的值,甚至在用户离开Web页面的时候也如此。
例子
让我们先从一个简单的例子开始。
首先,任何需要使用RSH框架的页面都必须包含dhtmlHistory.js脚本:
<!-- Load the Really Simple
History framework -->
<script type="text/javascript"
src="../../framework/dhtmlHistory.js">
</script>
DHTML历史记录应用程序也必须在与 Web页面相同的目录下包含blank.html文件;这个文件与RSH框架打包在一起,且对于Internet Explorer来说是必需的。顺便提一下,RSH使用一个隐藏Iframe来跟踪和添加Internet Explorer的历史记录变化;这个Iframe需要我们指定一个实际的文件位置才能正常工作,这就是blank.html。
RSH框架创建了一个叫做dhtmlHistory的全局对象,这是操纵浏览器历史记录的入口点。使用dhtmlHistory的第一步是在Web页面加载完成后初始化dhtmlHistory对象:
var webSiteID = 6;window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
然后,开发人员使用dhtmlHistory.addListener()方法订阅历史记录变化事件。这个方法带有一个JavaScript回调函数,当DHTML历史记录变化事件发生时,该函数接收两个参数:新的页面位置以及任何可与该事件关联的可选历史记录数据:
var webSiteID = 6;window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
// subscribe to DHTML history change
// events
dhtmlHistory.addListener(historyChange);
historyChange()方法很简单,该函数在用户导航到一个新位置后接收newLocation以及任何与该事件关联的可选historyData。
/** Our callback to receive history change
events. */
function historyChange(newLocation,
historyData) {
debug("A history change has occurred: "
+ "newLocation="+newLocation
+ ", historyData="+historyData,
true);
}