Question

我已经设置了一个页面，当你点击一个链接时，内容会在不刷新页面的情况下发生变化，因此使用这个完全相同的命令（这就是它在代码中的方式）命令的URL也是如此：

window.history.pushState("object or string", "title", "/photo.php");

但是，当用户点击后退按钮时，内容不会改变回来。我该怎么做？我有这个想法，因为当你在Facebook上点击主页上的图片，当你点击后退按钮（两次，我认为这是一个错误），你回到家里，网址变回来，页面没有刷新。

Answer 1

您可以像这样使用onpopstate。使用导航按钮时也会触发它。

http://jsfiddle.net/54LfW/4/

window.onpopstate = function(e) { // executed when using the back button for example
    alert("Current location: " + location.href); // location.href is current location

    var data = e.state;
    if(data) {
        alert(JSON.stringify(e.state)); // additional data like your "object or string"
    }
};

Answer 2

已经给出了这个答案，但我将尝试使用pushState解释我的理解请注意您的网址是“google.com/gmail”

1.将currentURL作为临时URL，因此您的浏览器将显示此URL。在此步骤中，堆栈中将有一个URL，即google.com/gmail#!/tempURL。

history.replaceState(null, document.title, location.pathname+"#!/tempURL");

2.将previousURL推送为新状态，现在您的浏览器将显示previousURL，即google.com/gmail。

history.pushState(null, document.title, location.pathname);

堆栈的当前状态

第一要素： google.com/gmail

最后一个元素： google.com/gmail#！/ tempURL

3.现在添加监听器来监听事件

    window.addEventListener("popstate", function() {
      if(location.hash === "#!/tempURL") {
        history.replaceState(null, document.title, location.pathname);
        //replaces first element of last element of stack with google.com/gmail so can be used further
        setTimeout(function(){
          location.replace("http://www.yahoo.com/");
        },0);
      }
    }, false);

如何更改网址并检测后退按钮

2 个答案: