javascript - 创建可由 google 机器人和用户的 jquery 单击的链接的正确方法是什么？

Question

我想创建一个在菜单中包含链接的网站，可能是<a>这将发送一些真实的 href，比如 /contact/ /services/等，这样当 google bot 访问该站点时，它会将其索引为真正的子页面。

但是当用户在浏览器中单击这些链接时，我不希望浏览器刷新和重新加载内容，我希望 jQuery 拍摄并更改适当的 div 中的内容，但也应该以某种方式更改 url，这样用户也可以将此链接复制给他的 friend 。

我可以做 jQuery 内容更改部分，我只是不知道如何创建这些链接，以便它们在 javascript 处于事件状态时不刷新浏览器，但在 javascript 关闭时正常工作(谷歌机器人)。

Answer 1

了解 manipulating history

history.pushState({foo: "bar"}, "page 2", "newpage.html");

前两个参数不是必需的(至少我还没有看到任何有用的用法)，我完全按照下面的说明使用它

<a href="/contact" class="ajax">Contact</a>

使用javascript

$("body").delegate('.ajax', 'click', function(){
    $("#content").html('Loading new content...');
    history.pushState({foo: "bar"}, "dummy", $(this).attr('href'));
    $("#content").load($(this).attr('href')+'?ajax=1');
    return false;
});

但是，不支持 native 浏览器的后退按钮。这意味着当您点击后退按钮时，地址会更改为旧地址，但内容保持不变。要解决此问题，请尝试使用以下代码

var popped = ('state' in window.history), initialURL = location.href;
$(window).bind('popstate', function(event) {
    // Ignore inital popstate that some browsers fire on page load  
    var initialPop = !popped && location.href == initialURL
    popped = true
    if ( initialPop ) return;
    $("#content").load(location.href+' #content');
    return false;
});

这将在用户点击后退按钮时立即加载旧内容。

此外，您必须注意 .pushState 不适用于过时的浏览器，因此您应该为没有此功能的用户创建后备。

最终，从 jQuery 1.7 开始，使用 .on() 而不是 .delegate()，因为它更快并且正在被替换。因此，我们可以使用

$(".ajax").on('click', function(){
    $("#content").html('Loading new content...');
    history.pushState({foo: "bar"}, "dummy", $(this).attr('href'));
    $("#content").load($(this).attr('href')+'?ajax=1');
    return false;
});

这会将事件处理程序附加到特定元素。