Question

我想拉深链接。我找到了一个教程并尝试实现它。这是我的带有jQuery / Ajax加载器的History_API：

$('.hor_menu').click(function() {
    var url = $(this).attr('href');
    $.ajax({
        url: url + '?ajax=1',
        success: function(data) {
            $('#destination').html(data);
        }
    });

因此，如果点击了div类的任何.hor_menu - 按钮，Ajax会将其内容加载到#destination块。
链接更改为：

if (url != window.location) {
    window.history.pushState(null, null, url);
}
return false;
});

要启用后退/前进按钮，我使用：

$(window).bind('popstate', function() {
    $.ajax({
        url: location.pathname + '?ajax=1',
        success: function(data) {
            $('#destination').html(data);
        }
    });
});

示例div按钮：

<div class="hor_menu" id="b5" href="/pages/about.htm" onclick="
    ('main_hor_menu')"><strong>About us</strong></div>

整个工作正常：更改链接，将请求加载到目标。当我单击后退/前进时，浏览器仅按原样重新加载内容。唯一的问题是我没有实现深层链接：在任何状态下，按F5重新加载请求的页面，而不是它的内容到#destination块。显然，我无法直接链接到任何页面。请告诉我我错过了什么或做错了什么。

Answer 1

如果没有backbone's或ember's等路由器组件，这种有状态的客户端应用程序真的很难做到。我建议找一个你喜欢的并使用它，而不是建立自己的路由器。

另外，请确保您的服务器路由器将pages/**（或任何相关的）映射到您的html文件

使用History_API创建深层链接

1 个答案: