需要单击两次才能返回历史记录(使用pushState)
我有一个包含一些选择字段的页面。一旦用户更改了选择字段的值，就会使用所有选择字段的值作为状态对象来创建一个新的历史对象：
$(".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，则相应地更改一个选择字段。但是浏览器本身在历史中仍然处于相同的位置(不能继续前进，仍然有相同数量的回溯历史条目)。
然后我再次点击后退按钮。这一次，state-object与我单击列表时传递的state-object是相同的。不过，浏览器会向后移动历史记录中的一个条目。
当我第三次点击后退按钮时，下一个选择字段被改变了，但是浏览器仍然停留在原来的状态，除非我再次点击第四次。
谁能解释一下我做错了什么？
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);回答 2
Stack Overflow用户
发布于 2021-06-18 04:30:10
当触发popstate事件并且循环遍历选择字段时，如果满足条件$( this ).val() != parameterNames[index].value，则当前的选择值将被更改，但也将触发更改事件，该事件将再次调用将新状态推入历史的函数。这样，如果您回到历史，您将得到相同的状态对象。
因此，解决方案应该是检查是否触发了popstate事件，如果是，则不调用history.pushState，而是调用history.replaceState。
function handleHistoryStates(popstateEventWasFired = false) {
$(".chosen-select-field").each( function ( index ) {
parameterNames[index].value = $( this ).val();
});
if (popstateEventWasFired) {
history.replaceState(parameterNames, '', newUrl);
} else {
history.pushState(parameterNames, '', newUrl);
}
}
$(".chosen-select-field").chosen().change(handleHistoryStates);
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);
handleHistoryStates(true);
$( this ).trigger('chosen:updated');
}
});
};
// Bind history events
$(window).bind("popstate",restoreState);Stack Overflow用户
发布于 2021-07-09 14:59:47
我猜当你到达当前状态时，你是在Pushing当前状态，而不是当你达到当前状态时，你推入前一个状态。这就是为什么当你第一次按下后退按钮时，你会弹出当前的状态，而你需要弹出前一个状态并进入那里…
let boxes = Array.from(document.getElementsByClassName('box'));
function selectBox(id) {
boxes.forEach(b => {
b.classList.toggle('selected', b.id === id);
});
}
boxes.forEach(b => {
let id = b.id;
b.addEventListener('click', e => {
history.pushState({
id
}, `Selected: ${id}`, `./selected=${id}`)
selectBox(id);
});
});
window.addEventListener('popstate', e => {
selectBox(e.state.id);
});
history.replaceState({
id: null
}, 'Default state', './');.boxes {
display: flex;
}
.desc {
width: 100%;
display: flex;
align-items: center;
padding: 3rem 0;
justify-content: center;
font-weight: bold;
}
.box {
--box-color: black;
width: 50px;
height: 50px;
margin: 20px;
box-sizing: border-box;
display: block;
border-radius: 2px;
cursor: pointer;
color: white;
background-color: var(--box-color);
border: 5px solid var(--box-color);
font-size: 14px;
font-family: sans-serif;
font-weight: bold;
text-align: center;
line-height: 20px;
transition: all 0.2s ease-out;
}
.box:hover {
background-color: transparent;
color: black;
}
.box.selected {
transform: scale(1.2);
}
#box-1 {
--box-color: red;
}
#box-2 {
--box-color: green;
}
#box-3 {
--box-color: blue;
}
#box-4 {
--box-color: black;
}<div class="boxes">
<div class="box" id="box-1">one</div>
<div class="box" id="box-2">two</div>
<div class="box" id="box-3">three</div>
<div class="box" id="box-4">four</div>
</div>
<div class="desc">
Click to select Each box and u can navigate back using browser back button
</div>
检查此代码：https://codepen.io/AmalNandan/pen/VwmrQJM?editors=1100
https://stackoverflow.com/questions/23739433
复制相似问题
腾讯云开发者
