我在一个通过 AJAX 提供内容的网站上工作。
如果你点击菜单中的一个项目，一个内容 div 会随着$.get响应更新，没什么特别的。
我正在实施history.pushState以允许使用浏览器的后退/前进按钮进行导航。
我有以下内容可以在历史导航中加载内容：
$(function() {
$(window).bind("popstate", function() {
$.getScript(location.href);
});
});
问题是，当第一次加载页面时，此函数会$.getScript立即再次加载页面。第一次加载页面时，它呈现初始 HTML 视图，然后在第二次加载时呈现 JS 视图，因为它是一个 JS 请求。
如何防止在带有 HTML 请求的页面上触发此事件？
使用本机 HTML5 History API 时，您会遇到一些问题，每个 HTML5 浏览器处理 API 的方式略有不同，因此您不能只编写一次代码并期望它在不实施变通方法的情况下正常工作。History.js为 HTML5 History API 提供了一个跨浏览器的 API，hashchange如果你想沿着这条路走下去，它也为 HTML4 浏览器提供了一个可选的回退。
要将您的网站升级为 RIA/Ajax 应用程序，您可以使用以下代码片段：https : //github.com/browserstate/ajaxify
这是一篇较长的智能状态处理文章的一部分，其中解释了有关 hashbang、哈希和 html5 历史 api 的解释。
如果您需要任何进一步的帮助，请告诉我 :) 干杯。
你需要得到 event.originalEvent
// Somewhere in your previous code
if (history && history.pushState) {
history.pushState({module:"leave"}, document.title, this.href);
}
$(window).bind("popstate", function(evt) {
var state = evt.originalEvent.state;
if (state && state.module === "leave") {
$.getScript(location.href);
}
});
在页面加载时触发 popstate 事件时，事件对象中将没有 state 属性。这允许您检查是否为页面加载触发了事件。
window.onpopstate = function (event) {
if (event.state) {
// do your thing
} else {
// triggered by a page load
}
}
当浏览器第一次加载时，它总是会触发一个 popstate 事件。所以你需要确定这个 popstate 是否是你的。
当您执行 pushState 时，请确保您有一个状态对象。这样你以后就可以检查了。
然后在 popstate 处理程序上，检查状态对象 :)
$(function() {
$(window).bind("popstate", function(data) {
if (data.state.isMine)
$.getScript(location.href);
});
});
// then add the state object
history.pushState({isMine:true},title,url);
如果您需要更多帮助，请告诉我:)
我使用下面的方法来更改地址栏并保存当前状态，包括当前的 HTML 正文，然后在没有任何其他 AJAX 调用的情况下单击后退按钮重新加载它。所有内容都保存在您的浏览器中：
<script type="text/javascript">
$(document).ajaxComplete(function(ev, jqXHR, settings) {
var stateObj = { url: settings.url, innerhtml: document.body.innerHTML };
window.history.pushState(stateObj, settings.url, settings.url);
});
window.onpopstate = function (event) {
var currentState = history.state;
document.body.innerHTML = currentState.innerhtml;
};
</script>