弹出状态无法正常工作

On pop state not working properly

本文关键字：工作 常工作 状态      更新时间：2023-09-26

我有一些图像，当我单击特定图像时，url会更改为该id。但问题是I can only go back once（而不是每次按下后退按钮时重复相同的 url）并且根本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);   
}

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

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

例如：

  1. /mysite/访问您的页面
  2. 单击图像 1，将网址更改为/mysite/1
  3. 映像 1 的推送状态
  4. 单击图像 2，将 url 更改为/mysite/2
  5. 映像 2 的推送状态
  6. 按返回，将网址更改为/mysite/1
  7. 此处出现映像 1 的推送状态
  8. 按返回，网址保持在/mysite/1

根据您打算做什么，您可能只需从onpopstate中删除update(photo_id)。我使用以下修复程序对此进行了测试，它起作用了。我能够在Chrome上正确地来回切换。

window.onpopstate = function(event) {
    var photo_id= document.location.href.split('/').slice(-1)[0];
    //Remove this line: update(photo_id);   
}
相关文章：