使用History_API创建深度链接

Creating deep links with History_API

本文关键字：深度 链接 创建 API History 使用      更新时间：2023-09-26

我正在尝试拉深链接。我找到了一个教程，并试图实现它。下面是我的History_API与jQuery/Ajax加载器:

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

因此，如果单击.hor_menu类的任何div按钮，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块。显然，我不能直接链接到任何页面。

如果没有router组件(比如backbone的或ember的)，这种有状态的客户端应用是很难实现的。我建议你找一个你喜欢的，然后使用它，而不是自己建一个路由器。

同时，确保你的服务器路由器映射pages/**(或任何相关的)到你的html文件

相关文章：