我在一个通过AJAX提供内容的网站上工作。
如果你点击菜单中的一项,内容div就会更新为$.get
响应,没什么特别的。
我正在实现history.pushState
,以允许使用浏览器的后退/前进按钮进行导航。
我有以下内容可以在历史导航中加载:
$(function() {
$(window).bind("popstate", function() {
$.getScript(location.href);
});
});
问题是,当第一次加载页面时,此函数会执行$.getScript
操作,因此页面会立即再次加载。第一次加载页面时,它会呈现初始的HTML视图,第二次加载时,它会呈现JS视图,因为这是一个JS请求。
如何防止此事件在具有HTML请求的页面上触发?
发布于 2011-03-07 18:38:44
使用原生的HTML5历史应用程序接口你会遇到一些问题,每个HTML5浏览器对应用程序接口的处理略有不同,所以你不能只编写一次代码就期望它在没有实现变通方法的情况下工作。History.js为HTML5 History API提供了一个跨浏览器的API,如果您想沿着这条路走下去,它还为HTML4浏览器提供了一个可选的hashchange
回退。
为了将您的网站升级为RIA/Ajax应用程序,您可以使用以下代码片段:https://github.com/browserstate/ajaxify
这是更长的文章Intelligent State Handling的一部分,这篇文章对hashbang、哈希和html5历史api进行了解释。
如果您需要进一步的帮助,请告诉我:)干杯。
发布于 2011-03-23 06:48:27
你需要拿到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);
}
});
发布于 2011-03-07 14:24:16
当popstate事件在页面加载时激发时,它在事件对象中将不具有state属性。这允许您检查事件是否为页面加载而触发。
window.onpopstate = function (event) {
if (event.state) {
// do your thing
} else {
// triggered by a page load
}
}
https://stackoverflow.com/questions/5210034
复制