我想以跨浏览器的方式使用 jQuery 和 AJAX 实现导航历史。我的方法是在不window.history.pushState支持./#!/urlwindow.history.pushState
例如：
<a href="/home">home</a>
<a href="/about">about</a>
<a href="/contact">contact</a>
在支持的浏览器上window.history.pushState，单击这些链接之一应将地址更改为http://domain.com/home、http://domain.com/about等，而无需刷新页面。当浏览器不支持window.history.pushState时，应使用片段标识符，即：http://domain.com/#!/home、http://domain.com/#!/about。
更新：根据这里的反馈，我已经实现了Ajax SEO ( git )，它使用
jQuery Address for HTML5 History API 和旧的浏览器回退到/#!/url.
// Assuming the path is retreived and stored in a variable 'path'
if (typeof(window.history.pushState) == 'function') {
window.history.pushState(null, path, path);
} else {
window.location.hash = '#!' + path;
}
我一直在使用后备哈希 URL 的东西：
History = History || {};
History.pathname = null;
History.previousHash = null;
History.hashCheckInterval = -1;
History.stack = [];
History.initialize = function () {
if (History.supportsHistoryPushState()) {
History.pathname = document.location.pathname;
$(window).bind("popstate", History.onHistoryChanged);
} else {
History.hashCheckInterval = setInterval(History.onCheckHash, 200);
}
};
History.supportsHistoryPushState = function () {
return ("pushState" in window.history) && window.history.pushState !== null;
};
History.onCheckHash = function () {
if (document.location.hash !== History.previousHash) {
History.navigateToPath(document.location.hash.slice(1));
History.previousHash = document.location.hash;
}
};
History.pushState = function (url) {
if (History.supportsHistoryPushState()) {
window.history.pushState("", "", url);
} else {
History.previousHash = url;
document.location.hash = url;
}
History.stack.push(url);
};
History.onHistoryChanged = function (event) {
if (History.supportsHistoryPushState()) {
if(History.pathname != document.location.pathname){
History.pathname = null;
History.navigateToPath(document.location.pathname);
}
}
};
History.navigateToPath = function(pathname) {
History.pushState(pathname);
// DO SOME HANDLING OF YOUR PATH HERE
};
您可以通过以下方式将点击事件绑定到此：
$(function(){
$("a").click(function(){
var href = $(this).attr('href');
History.navigateToPath( href )
return false;
});
});
如果您需要对此示例进行更多解释，我将很高兴听到它。
编辑
请看我的另一个回答。
距离我最初的回答已经有一段时间了，我现在建议使用Backbone。
一个实现可以是：
// First setup a router which will be the responder for URL changes:
var AppRouter = Backbone.Router.extend({
routes: {
"*path": "load_content"
},
load_content: function(path){
$('#content').load('/' + path);
}
});
var appRouter = new AppRouter;
// Then initialize Backbone's history
Backbone.history.start({pushState: true});
文档摘录：
要表明您希望
pushState在应用程序中使用 HTML5 支持，请使用Backbone.history.start({pushState: true}). 如果您想使用pushState，但浏览器本身不支持它，则改为使用整页刷新，您可以添加{hashChange: false}到选项中。
现在每次Backbone.history.navigate调用时，AppRouter都会将路径的 AJAX 加载到#contentdiv 中。
要使用 AJAX 处理所有链接，您可以使用以下命令：
$("a").on('click', function(event){
event.preventDefault();
Backbone.history.navigate( event.currentTarget.pathname, {trigger: true} )
});
请注意{trigger: true}导致调用路由器中的处理程序的原因（否则仅来自 url 更改）。