logo标签列表

HTML5历史记录API的popstate事件返回错误数据

javascriptjqueryhtmlbrowser-historyhtml5-history
4

当popstate事件发生时，HTML5历史API返回错误的历史状态数据。以下是一些push和pop事件响应（已在控制台记录）。

JS

/*
 * JS USED TO PUSH HISTORY 
 */
var markers = [];
var markerIndexes = [];
// mapOverlays (array) is a global variable containing all marker and infowindow objects
var overlayIndex = mapOverlays.length; 
var historyData = {
    "historyDetails": {
        "append": true,
        "popState": false
    },
    "title": null,
    "url": ""
};
for (var i = 1; i < data.length; i++) {
    // this function creates a marker with infowindow and pushes marker & infowindow objects to mapOverlays array
    addActionMarkerToGMap(data[i].lat, data[i].lng, 'Demo info window', false);
}
for (var i = overlayIndex; i < mapOverlays.length; ++i) {
    markers.push(mapOverlays[i].marker);
    markerIndexes.push(i);
}
historyData.historyDetails.markerIndexes = markerIndexes;
window.history.pushState(historyData.historyDetails, historyData.title, historyData.url);


/*
 * POPSTATE EVENT HANDLER
 */
window.addEventListener('popstate', function (event) {
    if (event.state != null && event.state != "" && typeof event.state == "object") {
        var popstateData = {
            historyDetails: {
                append: event.state.append,
                popState: true, // hard coded because this is result of popstate event
                markerIndexes: event.state.markerIndexes
            }
        };
        console.log(popstateData);
    }
});

推送状态 1

以下 JSON 在第一次 AJAX 请求完成时被推送。

    {  
   "historyDetails":{
      "append":false,
      "popState":false,
      "markerIndexes":[  
         0,
         1,
         2
      ]
   },
   "title":null,
   "url":""
}

推送状态2

当第二个AJAX请求完成时，该JSON对象将被推送到历史记录中。

{  
   "historyDetails":{  
      "append":true,
      "popState":false,
      "markerIndexes":[  
         3,
         4,
         5
      ]
   },
   "title":null,
   "url":""
}

弹出状态1

当我点击浏览器后退按钮时，会返回Push状态1而不是Push状态2。这就是弹出状态事件的返回值。

{  
   "historyDetails":{  
      "append":false,
      "popState":true,
      "markerIndexes":[  
         0,
         1,
         2
      ]
   },
   "title":null,
   "url":""
}

如上所示，历史API不会返回最近的PUSH STATE数据。非常感谢您的帮助。
谢谢。
你能展示一下你实际的历史记录API代码吗（在哪里推送状态以及之后弹出状态的位置）？ - nils
@nils请检查更新。我已将JS添加到顶部。 - Debugger
1个回答
0
但是我想获取最近推送的历史状态数据。我该怎么做？ - Debugger
既然最后一个 pushstate 应该是您的“当前状态”，那么您可能在变量中拥有当前状态。 - André Snede
你在上面回答中提到的那篇文章真的非常有帮助，但我期望popstate事件返回最近推送的历史数据。我认为我应该创建自己的历史堆栈，使用push和pop函数来管理历史记录。 - Debugger
@webmasterjohn 这是一个常见的陷阱，我自己也曾经掉进去过。 - André Snede
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接