我有一个带有某些选择字段的页面。
一旦用户更改了选择字段的值,将使用所有选择字段的值作为状态对象创建新的历史记录对象:
例如,我更改了三个选择字段(创建三个历史记录条目)。然后我返回。执行restoreState,相应地更改一个选择字段。但是浏览器本身仍停留在同一位置(无法向前移动,后面的历史记录条目数量仍相同)。
然后我再次单击“后退”按钮。这次状态对象与上次单击时提供的对象相同。但浏览器向后移动了一个历史记录条目。
第三次单击“后退”按钮时,下一个选择字段会更改,但是浏览器仍停留在该状态,除非我再次单击“后退”按钮。
有人能解释一下我做错了什么吗?
$(".chosen-select-field").chosen().change(function() {
$(".chosen-select-field").each( function ( index ) {
parameterNames[index].value = $( this ).val();
});
history.pushState(parameterNames, '', newUrl);
});
parameterNames是一个包含键值对的对象数组,例如:
parameterNames.push({key:"name", value:"foobar"});
以下代码在用户单击浏览器的“后退”或“前进”按钮时还原状态。它运行正常,但表现出意外行为。例如,我更改了三个选择字段(创建三个历史记录条目)。然后我返回。执行restoreState,相应地更改一个选择字段。但是浏览器本身仍停留在同一位置(无法向前移动,后面的历史记录条目数量仍相同)。
然后我再次单击“后退”按钮。这次状态对象与上次单击时提供的对象相同。但浏览器向后移动了一个历史记录条目。
第三次单击“后退”按钮时,下一个选择字段会更改,但是浏览器仍停留在该状态,除非我再次单击“后退”按钮。
有人能解释一下我做错了什么吗?
var restoreState = function(event) {
event = event.originalEvent;
parameterNames = event.state;
$(".chosen-select-field").each( function ( index ) {
if ($( this ).val() != parameterNames[index].value){
$( this ).val(parameterNames[index].value).change();
$( this ).trigger('chosen:updated');
}
});
};
// Bind history events
$(window).bind("popstate",restoreState);