pushState

pushState

关注
发信
关注(28)粉丝(399)

如何一次捕捉状态改变事件history.js？

本文介绍了如何一次捕捉状态改变事件history.js？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我下面那里，如果你点击的链接，然后使用后退和前进，每个状态的变化会导致越来越多的命中的statechange事件为例code。取而代之的是我没有想到的人。

链接：

code：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
    ＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
    ＆LT;冠军＆GT;历史开始＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; H1＆GT;标题＆LT; / H1＆GT;
    ＆LT; HR＆GT;
    ＆LT; D​​IV ID =菜单＆GT;
        ＆LT; UL＆GT;
            ＆LT;李＆GT;
                ＆LT; 1＆LT; A HREF =页面-1＆GT / a取代;
                ＆LT; D​​IV的风格=显示：无;＆GT;
                    ＆LT; H2＆gt;页面1 LT; / H＆GT;
                    ＆LT; P＆gt;内容1＆LT; / P＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; /李＆GT;
            ＆LT;李＆GT;
                ＆其中;第2版; A HREF =页面2＆GT / a取代;
                ＆LT; D​​IV的风格=显示：无;＆GT;
                    ＆其中; H2＆gt;页面2'; / H2＆GT;
                    ＆其中; P＆gt;内容2'; / P＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; HR＆GT;
    ＆LT; D​​IV ID =内容＆GT;
        ＆LT; H2＆GT;起始页＆LT; / H＆GT;
        ＆其中p为H.; Paragraf＆所述; / P＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;脚本SRC =外部/ jQuery的-1.6.2.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本＆GT;如果（typeof运算window.JSON ==='未定义'）{执行console.log（加载json2）;文件撰写（'＆LT;脚本SRC =外部/ json2.js＆GT;＆LT; \ / SCRIPT＆GT;'）; }＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =外部/ history.adapter.jquery.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =外部/ history.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本＆GT;
    $（文件）。就绪（函数（）{
        History.enabled = TRUE;

        $（'a'）的。每个（函数（）{
            $（本）。点击（函数（五）{
                即preventDefault（）;
                变量$链接= $（e.target）
                    国家= {HREF：$ link.attr（HREF'），'标题'：$ link.html（）}，
                    $股利= $ link.siblings（'格'），
                    内容= $ div.html（）;

                $（'＃内容）HTML（内容）;

                History.pushState（州，state.title，state.href）;

                返回false;
            }）;
        }）;

        History.Adapter.bind（窗口，statechange'，函数（）{
            变种状态= History.getState（）;
            //删除事件双重打击
            执行console.log（国）;

        }）;

    }）;
    ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

这是因为我们在调用pushState功能，当加载页面，这也导致为stateChange。我是在一个类似的情况，并使用了，但一个布尔值，之前我pushStates所以我知道我在做一个pushState。它看起来像这样... 

  historyBool = TRUE;
History.Adapter.bind（窗口，statechange'，函数（）{//注意：我们正在使用popstate的statechange代替

变种状态= History.getState（）; //注意：我们正在使用History.getState（），而不是event.state

    //不运行我们的功能时，我们做了pushState
    如果（historyBool）{
        historyBool = FALSE;
        tempFunction =新功能（State.data.ajaxRunFunction）;
        tempFunction（）;
    }
    historyBool = TRUE;
}）;

historyBool = FALSE;
historySet = {ajaxRunFunction：UPC（'+ PAGEID +'，''）};
History.pushState（historySet，，）;

I have an example code below where if you click the links, then use back and forward, each state change will cause more and more hits on the 'statechange' event. Instead of the one that I expect.

Links:

Code:

<!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>
解决方案

It's because you're calling the pushState function when you load the page, which also causes a statechange. I was in a similar situation and used a but a boolean before my pushStates so I knew I was doing a pushState. It looks like this...

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,"","");

这篇关于如何一次捕捉状态改变事件history.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-14 21:21
Powered by LMLPHP ©2024 pushState 0.040491