Question

我有一些图片，当我点击特定图片时，网址会更改为该ID。但问题是I can only go back once（每次按下后退按钮都会重复相同的网址）和forward button does not work。知道我做错了什么吗？

<img id="1" src="">
<img id="2" src="">
<img id="3" src="">

$('img').click( function() {
    update($(this).attr('id'));
});

function update(photo_id) {
    var state = { photo_id: photo_id},
    title = "",
    path  = "/mysite/" + photo_id;

    window.history.pushState(state, title, path);
}

window.onpopstate = function(event) {
    var photo_id= document.location.href.split('/').slice(-1)[0];

    update(photo_id);   
}

Answer 1

为什么要在update(photo_id)上致电onpopstate？您的update函数会调用window.history.pushstate。

这意味着当您按下“返回”按钮时，您将该URL推回历史堆栈。这就是为什么你一遍又一遍地获得相同的URL。

例如：

访问您的网页/mysite/
点击图片1，将网址更改为/mysite/1
图像1的推送状态
点击图片2，将网址更改为/mysite/2
图像2的推送状态
按返回，将网址更改为/mysite/1
此处出现图像1的推送状态
按返回，网址停留在/mysite/1

根据您的目的，您可以从update(photo_id)中删除onpopstate。我通过以下修复测试了它，并且它工作正常。我能够在Chrome上正常来回。

window.onpopstate = function(event) {
    var photo_id= document.location.href.split('/').slice(-1)[0];

    //Remove this line: update(photo_id);   
}

在流行状态不正常

1 个答案: