浏览器后退，前进按钮都出现了怪异的行为。 History.js [英] Back-Forward buttons of browser are showing weird behaviour. History.js

问题描述

我有一个＆LT;选择＆GT; 标记。在改变所选的项目，有些＆LT; D​​IV＆GT; ，则通过功能使用AJAX更新： update_div1，update_div2，update_div3 。在code管理这个操作如下，并运作良好：

  $（'select.select-X'）。改变（功能（E）{

    即preventDefault（）;

    VAR值= $（'select.select-X选项：选择）。VAL（）;
    VAR文字= $（'选项：选择）文本（）。

    update_div1（值）;
    update_div2（值）;
    update_div3（值）;
    manage_history（值，文字）;

    返回false;

}）;
 

现在的问题是，在最后一个函数 manage_history 这是RESPONSABLE管理浏览器的历史。在这个函数中，我使用history.js推浏览器的状态在历史堆栈中。据我所知很多阅读文章，因此，关于history.js后，前进和后退按钮的行动应在 History.Adapter.bind被inclueded（）。问题是，在浏览器的后面向前按钮有怪异的行为：他们执行的功能里面 History.Adapter.bind（）很多次，次exaclty数我已经通过℃的onChange事件triggerd;选择＆GT; 。

manage_history 的code是：

 函数manage_history（STR，STR2）
{

    VAR记录= window.History;
    如果（！History.enabled）{返回false; }

    VAR路径=HTTP：//本地主机/ ENC / P ='+ STR;

    History.pushState（{身份识别码：STR}，STR2，路径）;

    History.Adapter.bind（窗口，statechange'，函数（）{

        变种状态= History.getState（）;

        update_div1（State.data.myid）;压脚提升
        update_div2（State.data.myid）;
        update_div3（State.data.myid）;
    }）;
}
 

我希望我是清楚的。你的帮助是AP preciated。

theBrain贡献后的整体解决方案：

  $（'select.select-X'）。改变（功能（E）{

    即preventDefault（）;

    VAR值= $（'select.select-X选项：选择）。VAL（）;
    VAR文字= $（'选项：选择）文本（）。

    manage_history（值，文字）;

    返回false;

}）;

History.Adapter.bind（窗口，statechange'，函数（）{//注意：使用statechange代替popstate

        变种状态= History.getState（）;

            update_div1（值）;
        update_div2（值）;
            update_div3（值）;

    }）;

功能manage_history（STR，STR2）
{

    VAR记录= window.History;
    如果（！History.enabled）{返回false; }

    VAR路径=HTTP：//本地主机/ ENC / P ='+ STR;

    History.pushState（{身份识别码：STR}，STR2，路径）;

        update_div1（State.data.myid）;
        update_div2（State.data.myid）;
            update_div3（State.data.myid）;

}
 

解决方案

移动 History.Adapter.bind 远离 manage_history 功能。您每次调用 manage_history 函数时重新绑定。

I have a <select> tag. On changing the selected item, some <div>s are updated using AJAX via the functions: update_div1, update_div2, update_div3. The code managing this operation is below and working well:

$('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;

});

The problem is in the last function manage_history which is responsable of managing browser history. In this function I am using history.js to push browser states in history stack. As I know after reading many articles on SO about history.js, the actions of back and forward buttons should be inclueded in History.Adapter.bind(). The problem is that the back-forward buttons of the browser are having weird behaviour: They execute the functions inside History.Adapter.bind() many times, exaclty the number of times I already had an onChange event triggerd via <select>.

The code of manage_history is:

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);
    }); 
} 

I hope I was clear. Your help is appreciated.

The whole Solution after theBrain contribution:

$('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);

} 

解决方案

move the History.Adapter.bind away from the manage_history function. You rebind it every time you call the manage_history function.

这篇关于浏览器后退，前进按钮都出现了怪异的行为。 History.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！