history.js 混乱答案

【问题标题】：history.js confusionhistory.js 混乱
【发布时间】：2012-09-18 22:52:49
【问题描述】：

我对 AJAX 和 history.js 完全陌生。我想创建一个使用 AJAX 在单击导航项时更改内容区域的基本站点，保留后退按钮功能并允许用户输入直接 URL，例如 mysite.com/page2，并拥有它在内容区域中加载 page2。

我不知道我在做什么，但 history.js (as seen here) 看起来像我需要的。在测试它时，我不知道从这里去哪里。非常感谢任何帮助！

--编辑的jQuery脚本

<html>
<head>
    <title>test page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <!-- jQuery ScrollTo Plugin -->
    <script defer src="http://balupton.github.com/jquery-scrollto/scripts/jquery.scrollto.min.js"></script>
    <!-- History.js --> 
    <script defer src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
    <!-- This Gist -->
    <script defer src="http://gist.github.com/raw/854622/ajaxify-html5.js"></script>  

    <script type="text/javascript">
        $(window).bind("statechange", function(e) {
            var State = window.History.getState();
            if (window.console && window.console.log) {
                console.log("popstate", State, window.location.href);
            }
            $("#changehere").text(typeof State.data.changehere !== 'undefined' ? State.data.changehere : State.url);
            $('.nav').click(function() {
                alert(this);
                window.History.pushState({changehere:this}, this + 'title', '?' + this);
            })
        })
    </script>
    <style type="text/css">
        #one {
            height: 300px;
            width: 1000px;
            background: #a0a0a0;
        }
    </style>
</head>

<body>

    <div id="one">
        <a href="xml/first.html" id="first">change1</a>
        <a href="xml/second.html" id="second">change2</a>
        <a href="xml/third.html" id="third">change3</a>
    </div>
    <div id="changehere">
        start
    </div>

</body>

【问题讨论】：

标签： jquery ajax history.js

【解决方案1】：

您需要拦截所有对相关链接的点击，并为每次点击调用一个 History.pushState。见https://github.com/browserstate/ajaxify。

相关部分是：

    $.fn.ajaxify = function(){
        // Prepare
        var $this = $(this);

        // Ajaxify
        $this.find('a:internal:not(.no-ajaxy)').click(function(event){

            // Prepare
            var
                $this = $(this),
                url = $this.attr('href'),
                title = $this.attr('title')||null;

            // Continue as normal for cmd clicks etc
            if ( event.which == 2 || event.metaKey ) { return true; }

            // Ajaxify this link
            History.pushState(null,title,url);
            event.preventDefault();
            return false;
        });

        // Chain
        return $this;
    };

【讨论】：