我可以阻止history.popstate在初始页面加载时触发吗？

Question

我正在开发一个通过AJAX提供内容的网站.

如果单击菜单中的某个项目,内容div将更新为$.get响应,没有任何花哨.

我正在实现history.pushState允许使用浏览器的后退/前进按钮进行导航.

我有以下内容在历史导航中加载内容:

$(function() {
    $(window).bind("popstate", function() {
        $.getScript(location.href); 
    });
});

问题是,当第一次加载页面时,此功能会$.getScript立即再次加载页面.第一次加载页面时,它会呈现初始HTML视图,然后在第二次加载时呈现JS视图,因为它是一个JS请求.

如何防止此事件在具有HTML请求的页面上触发？

Answer 1

使用本机HTML5历史记录API会遇到一些问题,每个HTML5浏览器都会稍微处理不同的API,因此您不能只编写一次代码并希望它在没有实现变通方法的情况下工作.History.js为HTML5历史记录API提供跨浏览器API,hashchange如果您想沿着该路线前进,则为HTML4浏览器提供可选的后备.

要将您的网站升级为RIA/Ajax-Application,您可以使用以下代码段:https: //github.com/browserstate/ajaxify

这是较长的文章智能状态处理的一部分,它涉及hashbang,哈希和html5历史api的解释.

如果您需要任何进一步的帮助,请告诉我:)干杯.

Answer 2

你需要得到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);
  }
});

Answer 3

当在页面加载时触发popstate事件时,它将不在事件对象中具有state属性.这允许您检查是否针对页面加载触发了事件.

window.onpopstate = function (event) {
  if (event.state) {
    // do your thing
  } else {
    // triggered by a page load
  }
}