浏览器的后退按钮显示出奇怪的行为。 History.js

psed 发布于 2019-03-09 ajax 最后更新 2019-03-09 14:38 0 浏览

我有一个<select>标签。在更改所选项目时,某些<div>使用AJAX通过以下函数进行更新:update_div1, update_div2, update_div3。管理此操作的代码位于下方并且运行良好:

$('select.select-x').change(function(e) {
e.preventDefault();
var value = $('select.select-x option:selected').val(); 
    var text = $('option:selected').text();
update_div1(value); 
    update_div2(value);
    update_div3(value);
    manage_history(value,text);
return false;
});
问题出在manage_history的最后一个函数中,该函数负责管理浏览器历史记录。在这个函数中,我使用history.js来推动历史堆栈中的浏览器状态。正如我在阅读关于history.js的关于SO的许多文章后知道的那样,后退和前进按钮的动作应该包含在History.Adapter.bind()中。问题在于浏览器的后退按钮具有奇怪的行为:它们多次执行History.Adapter.bind()中的函数,无法通过<select>触发onChange事件。 manage_history的代码是:
function manage_history(str,str2)
{
var History = window.History;
    if ( !History.enabled ) { return false; }
var path = 'http://localhost/enc/?p='+str;
History.pushState({myid:str},str2,path);
History.Adapter.bind(window,'statechange',function() {
var State = History.getState();
update_div1(State.data.myid); fter
        update_div2(State.data.myid);
        update_div3(State.data.myid);
    }); 
} 
我希望我很清楚。感谢您的帮助。 TheBrain贡献之后的整个解决方案:
$('select.select-x').change(function(e) {
e.preventDefault();
var value = $('select.select-x option:selected').val(); 
    var text = $('option:selected').text();
manage_history(value,text);
return false;
});
History.Adapter.bind(window,'statechange',function() { // Note:  Using statechange instead of popstate
var State = History.getState();
update_div1(value); 
        update_div2(value);
            update_div3(value);
});
function manage_history(str,str2)
{
var History = window.History;
    if ( !History.enabled ) { return false; }
var path = 'http://localhost/enc/?p='+str;
History.pushState({myid:str},str2,path);
update_div1(State.data.myid); 
        update_div2(State.data.myid);
            update_div3(State.data.myid);
} 
已邀请:

nautem

赞同来自:

History.Adapter.bind移离manage_history函数。每次调用manage_history函数时都会重新绑定它。