jQuery + Ajax 哈希 / 历史记录等

Question

我正在尝试使用jQuery中的URL哈希来控制Ajax中的历史记录，并使链接/页面可书签。 我尝试了几乎所有的插件，但似乎没有一个可以正常工作，所以我真的没有任何代码示例。 但我欢迎任何建议，信息，教程等。

我正在尝试将此功能整合到其中一个页面中，该页面具有由jQuery动画驱动的闪屏/加载页，这也是所有内容都将加载到的页面。

并且在此链接中，我希望通过忽略所有闪屏/加载动画，根据哈希值/字符串（在此示例中为#home）直接加载内容。

我一直在尝试解决这个问题，非常感谢任何帮助，谢谢！

- abysslogic

Answer 1

那么你遇到了什么问题？设置哈希标签还是处理哈希的更改？

当然，设置哈希只是在链接中放置哈希的问题，例如<a href="www.voidsync.com/2010/#page">Link</a>，但我猜想这不是你的问题。

为了实际操作哈希，您必须有一个侦听器函数，每隔100ms检查哈希是否更改并相应地执行。一个简单的函数可能像这样：

$(function() {
    var current_hash = false;
    setInterval(function() {
        if(window.location.hash != current_hash) {
            current_hash = window.location.hash;
            $('#content').load("content.php?page="+current_hash);
        }        
    }, 100);    
});

那个（未经测试的）函数将每隔100毫秒检查哈希是否已更改，如果是，则通过Ajax更新页面。该函数还可在页面加载时使用，因此如果用户通过链接（如www.voidsync.com/2010/#images）着陆在页面上，则函数将自动加载页面“images”。 因此，历史记录和书签功能正常工作。希望这有所帮助，如果您有其他问题，请随时提出。

- Tatu Ulmanen

---

稍微改了一下措辞就让它正常工作了，而且在所有最新的浏览器中都可以使用，我还成功地调整了它以重置闪屏加载，干杯！ - abysslogic

实际上，还需要进行一些重写才能使链接可书签化，并在哈希设置时绕过默认的闪屏页面，但在加载动画正在运行时不应该这样做。 - abysslogic

能否发布重写后的 abysslogic 代码？ - rideon88

Answer 2

基于Tatu的答案，我只是改了一些东西让它适用于我的情况。 它会保留历史记录，所以返回和前进按钮可以很好地工作。 这是我的代码：

$(function() {
var current_hash = false;
setInterval(function() {
    if(window.location.hash != current_hash) {
        current_hash = window.location.hash;
            if(current_hash=='#home'){
                var month = '9';
                var year ='2011';       
                $.ajax({
                    type: "POST",
                    url: "/home.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });                     
            }
            else if(current_hash=='#edit'){
                $.ajax({
                    type: "POST",
                    url: "/edit.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });             
            }
    }        
}, 100);

然后只需将一些哈希分配给链接的href属性即可；

                    <li><a href="#home">Home Page</a></li>
                <li><a href="#edit">Edit Page</a></li>

这不是完全重写，只是基本上添加了一些if语句到同一个东西，但它可能会帮助某人。

- David