如何使用 history.js 捕获一次状态更改事件？答案

【问题标题】：How to catch a state change event ONCE with history.js?如何使用 history.js 捕获一次状态更改事件？
【发布时间】：2011-10-13 08:20:15
【问题描述】：

我在下面有一个示例代码，如果您单击链接，然后使用后退和前进，每次状态更改都会导致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 dom-events browser-history history.js

【解决方案1】：

这是因为你在加载页面时调用了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,"","");

【讨论】：

【解决方案2】：

虽然与您的具体问题无关，但我有一个场景需要从历史适配器中取消绑定事件处理程序。为此，您可以从窗口中取消绑定“statechange”事件，这是 History.Adapter 在您调用 History.Adapter.bind() 时绑定的事件：

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

您可以为事件添加命名空间以避免解除绑定其他不相关的事件处理程序，或使用命名函数专门解除绑定该函数。要使用上述命名空间，您需要使用相同的命名空间绑定处理程序，即

History.Adapter.bind(window,'statechange.namespace',function(){...}

【讨论】：

谢谢，我试图在适配器对象中找到解除绑定功能：/