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

Question

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

如果您单击菜单中的某个项目，内容 div 会使用 $.get 响应进行更新，没什么花哨的。

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

我有以下内容来加载历史导航上的内容：

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

问题是，当第一次加载页面时，此函数执行 $.getScript ，因此页面会立即再次加载。第一次加载页面时，它会呈现初始 HTML 视图，然后在第二次加载时，它会呈现 JS 视图，因为它是 JS 请求。

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

Answer 1

使用本机 HTML5 History API，您将遇到一些问题，每个 HTML5 浏览器处理 API 的方式都略有不同，因此您不能只编写一次代码并期望它在不实现解决方法的情况下工作。 History.js 为 HTML5 History API 提供跨浏览器 API 和可选的 hashchange 后备对于 HTML4 浏览器，如果您想走这条路。

要将您的网站升级为 RIA/Ajax 应用程序，您可以使用以下代码片段：
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
  }
}

Answer 4

当浏览器首次加载时，它总是会触发 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);

如果您需要更多帮助，请告诉我 :)

Answer 5

我使用下面的方法来更改地址栏并保存当前状态（包括当前 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>