我是否可以阻止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，如果您想沿这条路线浏览，则为HTML4浏览器提供了可选的hashchange后备。]

要将网站升级到RIA / Ajax应用程序，您可以使用以下代码段：https://github.com/browserstate/ajaxify

[这是较长文章Intelligent State Handling的一部分，该文章深入解释了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>

Answer 2

您需要获取event.originalEvent

Answer 3

当popstate事件在页面加载时触发时，事件对象中将没有state属性。这使您可以检查是否针对页面加载触发了事件。

Answer 4

当浏览器首次加载时，它始终会触发popstate事件。因此，您需要确定此popstate是否属于您。

Answer 5

我使用下面的方法来更改地址栏并保存包括当前HTML正文的当前状态，然后在单击后退按钮时重新加载它，而无需进行任何其他AJAX调用。所有都保存在浏览器中：