25

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

如果您单击菜单中的一个项目，内容 div 会随着$.get响应而更新，没什么特别的。

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

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

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

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

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

4

5 回答 5

38

使用本机 HTML5 History API 您会遇到一些问题，每个 HTML5 浏览器处理 API 的方式都略有不同，因此您不能只编写一次代码并期望它在不实施变通办法的情况下工作。History.js为 HTML5 History API 提供了一个跨浏览器 API，hashchange如果你想走这条路，还可以为 HTML4 浏览器提供一个可选的回退。

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

这是较长文章智能状态处理的一部分，该文章解释了 hashbang、哈希和 html5 历史 API。

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

于 2011-03-07T18:38:44.453 回答
23

您需要获取 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-23T06:48:27.150 回答
8

当页面加载时触发 popstate 事件时，事件对象中将没有 state 属性。这允许您检查是否为页面加载触发了事件。

window.onpopstate = function (event) {
  if (event.state) {
    // do your thing
  } else {
    // triggered by a page load
  }
}
于 2011-03-07T14:24:16.357 回答
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);

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

于 2011-03-06T13:37:04.940 回答
1

我使用下面的方法来更改地址栏并保存当前状态，包括当前的 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>
于 2015-12-10T12:40:44.507 回答