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

2023-09-10 17:30:45 作者：薰衣草有着淡淡的香

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

链接：

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

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; DIV ID =菜单＆GT;
        ＆LT; UL＆GT;
            ＆LT;李＆GT;
                ＆LT; 1＆LT; A HREF =页面-1＆GT / a取代;
                ＆LT; DIV的风格=显示：无;＆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; DIV的风格=显示：无;＆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; DIV 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，，）;

详解Windows下运用Docker部署Node.js开发环境

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:

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

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

上一篇：PhoneGap的Android的Ajax请求工作，但还是没有POST工作、Andr、PhoneGap、oid

下一篇：Symfony的，jQuery.ajax（）调用，会话变量丢失变量、Symfony、jQuery、ajax

相关推荐