如何用history.js捕获一次状态改变事件

我下面有一个示例代码，如果您单击链接，然后使用后退和前进，每次状态更改都会导致对statechange事件的越来越多的点击。而不是我期待的那个。

链接:

https://github.com/browserstate/history.js
http://docs.jquery.com/Downloading_jQuery

代码:

<!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>

这是因为您在加载页面时调用了pushState函数，这也会导致statechange。我在一个类似的情况下，在我的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,"","");

虽然与您的特定问题无关，但我有一个场景，需要从历史适配器中解绑定事件处理程序。要做到这一点，你可以从窗口中取消绑定"statechange"事件，这就是历史。适配器绑定到调用History.Adapter.bind():

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

您可以为事件添加一个命名空间，以避免像上面那样取消绑定其他不相关的事件处理程序，或者使用命名函数来取消绑定该函数。要使用上述名称空间，您需要使用相同的名称空间绑定处理程序，即

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

相关内容

最新更新

热门标签：