Question

我正在开发一个导航如下的网站：

$(document).ready(function () {
  if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)
      + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
  }

  if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1));
});

$(document).on("click", "a:not(.regular)", function (e) {
  var url = this.href;
  if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
    return;

  e.preventDefault();

  $('#ajax').load(url, function () {
      document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1);
  });
});

$(window).on('popstate', function (e) {
    // Back only!
    //location.reload();
    //$('#ajax').load(this.location);
});

当用户导航时，即使用户按下后退按钮，网址也会更改。但是，在向后导航时页面不会刷新，因此只有当实际页面保持不变时，网址才会更改。

我该如何解决这个问题？
Fiddle
的 Actual site

Answer 1

在#负责效果后添加页面标识符。 #（URL片段）后面的所有内容都应该由浏览器在本地解释。因此，返回相同的URL但不同的片段不会触发浏览器进行“重新加载”，因为他希望这是一个书签。

更改实际参数.....?pageid=over_ons.html或使用PATH_INFO .../overons.html

除此之外：

document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)

只是

document.location.hash

Answer 2

使用数组存储历史记录。

$(document).ready(function () {

  var history = [];

  if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)
      + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
    history.push(document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
  }

  if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1), function(){
      history.push(document.location.href.substr(document.location.href.lastIndexOf('#') + 1));
   });
});

$(document).on("click", "a:not(.regular)", function (e) {
  var url = this.href;
  if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
    return;

  e.preventDefault();

  $('#ajax').load(url, function () {
      document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1);
      history.push(url.substr(url.lastIndexOf('/') + 1);
  });
});

$(window).on('popstate', function (e) {
    $('#ajax').load(history[history.lastIndexOf(document.location.href)-1], function(){
       document.location.href =  "#" + history[history.lastIndexOf(document.location.href)-1];
    });
});

Answer 3

我解决了它，因为下面承认虽然它有效，但它可能远非最优雅的解决方案：

var lastLocation = document.location.href;

$(document).ready(function () {
    if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
        document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1) +
            "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
    }

    if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
        $('#ajax').load(window.location.hash.substr(1));
});

$(document).on("click", "a:not(.regular)", function (e) {
    var url = this.href;
    if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
        return;

    e.preventDefault();

    $('#ajax').load(url, function () {
        var pagename = url.substr(url.lastIndexOf('/') + 1);
        // Keep track of last location.
        lastLocation = document.location.href.replace(window.location.hash, "") + '#' + pagename;
        document.location.href = '#' + pagename;
    });
});

window.onpopstate = function (event) {
    // Test if popstate changed while lastLocation wasn't updated.
    if (lastLocation != document.location.href)
        location.reload();
    else
        return;
};

Answer 4

当您使用后退按钮ready导航时，由于back-forward cache而未触发事件。而是触发pageshow event。您可以在pageshow事件处理程序中强制重新加载页面。

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

如何在ajax页面上启用后退按钮

4 个答案: