更新:现在有 HTML5 History API(pushState、popState),它弃用了 HTML4hashchange
功能。历史.js https://github.com/balupton/history.js提供跨浏览器兼容性和optional https://github.com/balupton/history.js/wiki/Intelligent-State-Handling hashchange
HTML4 浏览器的后备。
要存储页面的历史记录,最流行且功能齐全/支持的方式是使用 hashchanges。这意味着说你从yoursite/page.html#page1
to yoursite/page.html#page2
您可以跟踪该更改,并且因为我们使用散列,所以可以通过书签以及后退和前进按钮来获取它。
您可以使用 jQuery History 项目找到一种绑定哈希更改的好方法http://www.balupton.com/projects/jquery-history http://www.balupton.com/projects/jquery-history
它还有一个全功能的 AJAX 扩展,允许您轻松地将 Ajax 请求集成到您的状态/哈希中,将您的网站转变为全功能的 Web 2.0 应用程序:http://www.balupton.com/projects/jquery-ajaxy http://www.balupton.com/projects/jquery-ajaxy
他们都在演示页面上提供了很好的文档来解释正在发生的事情和正在发生的事情。
以下是使用 jQuery History 的示例(取自演示站点):
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
// Update the current element to indicate which state we are now on
$current.text('Our current state is: ['+state+']');
// Update the page"s title with our current state on the end
document.title = document_title + ' | ' + state;
});
// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
// Update Menu
updateMenu(state);
// Show apricots tab, hide the other tabs
$tabs.hide();
$apricots.stop(true,true).fadeIn(200);
});
以及 jQuery Ajaxy 的示例(取自演示站点):
'page': {
selector: '.ajaxy-page',
matches: /^\/pages\/?/,
request: function(){
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
// Adjust Menu
$menu.children('.active').removeClass('active');
// Hide Content
$content.stop(true,true).fadeOut(400);
// Return true
return true;
},
response: function(){
// Prepare
var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
// Adjust Menu
$menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
// Show Content
var Action = this;
$content.html(data.content).fadeIn(400,function(){
Action.documentReady($content);
});
// Return true
return true;
如果你想获取查询字符串参数(所以yoursite/page.html#page1?a.b=1&a.c=2
)你可以只使用:
$.History.bind(function(state){
var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}
因此,请查看这些演示链接以查看它们的实际情况,以及所有安装和使用详细信息。