как поймать событие изменения состояния ОДИН РАЗ с помощью history.js?

У меня есть пример кода ниже, где, если вы щелкнете по ссылкам, а затем используете «назад» и «вперед», каждое изменение состояния будет вызывать все больше и больше обращений к событию «statechange». Вместо того, что я ожидаю.

Ссылки:

Код:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>History start</title>
</head>
<body>
    <h1>Headline</h1>
    <hr>
    <div id="menu">
        <ul>
            <li>
                <a href="page-1">Page 1</a>
                <div style="display:none;">
                    <h2>Page 1</h2>
                    <p>Content 1</p>
                </div>
            </li>
            <li>
                <a href="page-2">Page 2</a>
                <div style="display:none;">
                    <h2>Page 2</h2>
                    <p>Content 2</p>
                </div>
            </li>
        </ul>
    </div>
    <hr>
    <div id="content">
        <h2>Start page</h2>
        <p>Paragraf</p>
    </div>
    <script src="external/jquery-1.6.2.min.js"></script>
    <script>if ( typeof window.JSON === 'undefined' ) { console.log("Loaded json2"); document.write('<script src="external/json2.js"><\/script>'); }</script>
    <script src="external/history.adapter.jquery.js"></script>
    <script src="external/history.js"></script>
    <script>
    $(document).ready(function() {
        History.enabled = true;

        $('a').each(function() {
            $(this).click(function(e) {
                e.preventDefault();
                var $link = $(e.target),
                    state = {'href': $link.attr('href'), 'title': $link.html()},
                    $div = $link.siblings('div'),
                    content = $div.html();

                $('#content').html(content);

                History.pushState(state, state.title, state.href);

                return false;
            });
        });

        History.Adapter.bind(window, 'statechange', function() {
            var State = History.getState();
            // remove double hit on event
            console.log(State);

        });

    });
    </script>
</body>
</html>

javascript ajax history.js browser-history javascript-events
person Alexander Morland    schedule 13.10.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Это потому, что вы вызываете функцию pushState при загрузке страницы, что также вызывает изменение состояния. Я был в похожей ситуации и использовал логическое значение перед моими pushStates, поэтому я знал, что делаю pushState. Похоже на это...

historyBool = true;
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate

var State = History.getState(); // Note: We are using History.getState() instead of event.state

    //don't run our function when we do a pushState
    if(historyBool){
        historyBool = false;
        tempFunction = new Function(State.data.ajaxRunFunction);
        tempFunction();
    }
    historyBool = true;
});

historyBool = false;
historySet = {ajaxRunFunction: "upc('" + pageID + "','')"};
History.pushState(historySet,"","");
person Jared    schedule 30.11.2011

arrow_upward
4
arrow_downward

Хотя это и не относится к вашей конкретной проблеме, у меня был сценарий, в котором мне нужно было отвязать обработчик событий от адаптера истории. Для этого вы можете отвязать событие «statechange» от окна, к которому привязывается History.Adapter, когда вы вызываете History.Adapter.bind() :

$(window).unbind('statechange.namespace');

Вы можете добавить к событию пространство имен, чтобы избежать отвязки других несвязанных обработчиков событий, как указано выше, или использовать именованную функцию, чтобы отвязать конкретно эту функцию. Чтобы использовать указанное выше пространство имен, вам необходимо связать обработчик с использованием того же пространства имен, т.е.

History.Adapter.bind(window,'statechange.namespace',function(){...}
person lvanzyl    schedule 14.10.2013
comment
Спасибо, я пытался найти функцию развязки в объекте адаптера :/ - person Tamara; 30.01.2015