Question

我正在使用JS / PHP开发Google Maps AJAX应用程序，并希望实现HTML5 History API。我已经实现了自定义深层链接，因此可以使用漂亮的URL访问所有内容。

现在，在AJAX上，我会执行以下操作来存储历史记录：

var stateObj = { id: obj.id };
history.pushState(stateObj, null, obj.deeplink);

并在浏览器上检索它，我这样做：

window.onpopstate = function(event) {
google.maps.event.trigger(markersArray[JSON.parse(event.state.id)], 'click');
};

但是，只存储了一步，所以当我多次点击后退时，它会像调用第一个回来时一样调用。

怎么了？

更多解释

好吧，似乎我没有提供足够的代码。这是一般的onpopstate-listener：

//get popstate event
window.onpopstate = function(event) {
   console.log('onpopstate: '+JSON.parse(event.state.id));
    google.maps.event.trigger(markersArray[JSON.parse(event.state.id)], 'click');
    };

点击地图标记，我这样做：

//change URL, save state
history.pushState({ objId: obj.id }, obj.pagetitle, obj.deeplink);

但是，当然，标记点击onpopstate的触发器也会导致history.pushState，所以我认为它覆盖了最后一个值。

在“历史”对象中，无论点击多少个标记，都只有一个对象。

Answer 1

当你单击你执行.pushState（）但你onPopstate（）的元素时，你只需要调用onclick（）函数再次推送相同的状态信息，让你永远保持这个id。

作为解决方案，你应该只有.pushState（）if（history.state.id！= this.id）或你当前的对象id。

HTML5历史记录只存储一个状态

1 个答案: