Question

我正在使用jQuery将一些动态内容加载到窗口中。

我希望浏览器中的地址显示为已加载新页面，即

我们正在寻找：

url.com/articles

我们点击了一篇文章，现在地址如下：

url.com/articles/something

我正在接近这个：

  location.hash = '/'+article_url;

但我最终得到的更像是：

url.com/articles#/something

有没有办法在不使用'ol hash标签？

的情况下将某些内容附加到该位置

其次，一旦附加了此哈希，就可以在浏览器中单击返回，而不会明显尝试更改页面 - 换句话说，新加载的ajax内容保留在屏幕上，而网址更改。我已经看过这个插件了，但我想在安装一个全新的脚本之前我会在这里搜索。

有什么想法吗？

Answer 1

您应该使用Ben Alman's BBQ plugin。它实现起来非常简单，并且可以节省很多时间。

Answer 2

所以，正如您从尼克克拉弗的有用评论中了解到的那样，在大多数浏览器中都无法实现您所寻找的内容（“在不使用'ol哈希标记的情况下向某个位置添加内容的方法”）。所以我们来谈谈主题标签。

让我们看几个方法：

Facebook有一个奇怪的解决方案，IMO。如果您访问Facebook网址，例如从书签，如http://www.facebook.com/domenicdenicola，它就像一个“正常”的网页。

当你点击该页面中的其他地方时，会发生疯狂的事情。例如，如果您点击我的“信息”标签，您将获得http://www.facebook.com/domenicdenicola#!/domenicdenicola?v=info。所以你看到Facebook基本上是你输入网站的URL，然后附加`＃！`，然后附加你当前所在页面的URI。如果你这样，这个散列部分会改变点击“照片”。奇怪吧？

它变得更好了。无论出于何种原因，某些页面无法加载哈希值。因此，如果您单击“链接”，您将获得http://www.facebook.com/domenicdenicola?v=app_2309869772，这是一个“普通”URL，哈希消失。现在这是哈希附加的“基础”：所以如果我再次点击信息，我会得到http://www.facebook.com/domenicdenicola?v=app_2309869772#!/domenicdenicola?v=info.
Twitter更明智一点。如果您访问http://twitter.com/domenicdenicola, 并且您已登录，您会立即被重定向到http://twitter.com/#!/domenicdenicola，这是一个“哈希版本” “原始网址。从那里开始，所有导航都通过哈希进行，加载了看似正常的URL，只需加上额外的`＃！/`前缀。

有时它会让你回到正常的URL，对于那些不能加载哈希，就像Facebook一样;我可以找到一个例子，如果你按右上下拉菜单中的“设置”，你会得到http://twitter.com/settings/account。但是如果你回到其他任何地方，那就像往常一样。

现在，请注意，如果您退出Twitter，会发生一些有趣的事情：没有任何链接是哈希！如果您将http://twitter.com/#!/domenicdenicola复制并粘贴到地址栏中，您将被重定向到非散列的http://twitter.com/domenicdenicola。这很棒，因为它意味着搜索引擎会看到不同的页面，而用户（启用了JavaScript）可以获得更流畅的Ajaxy浏览体验。
最后，我必须提到GameGround，因为我在过去三个月在该网站上工作并为他们实施了此功能。它基本上就像Twitter，除了我们只使用`#`作为前缀而不是`＃！/`。我们做公共网址的事情和一切。我想一个主要区别是我们保持外部“框架”（标题+侧边栏）相同，并使用URL加载不同的“内容窗格”。

如何实现这一目标？我们使用了jQuery history plugin，使用Ajax加载页面内容区域的函数对其进行初始化。我们所有的链接都是普通网址，但上面有class="LoadHashLink"。然后我们基本上会这样做：

$(function ()
{
    $("a.LoadHashLink").click(function (e)
    {
        e.preventDefault();
        $.history.load($(this).attr("href"));
    });
});

确保不在已登出用户的页面上包含该代码，为登录用户实施重定向到散列以及为已注销用户重定向到非散列，这有一些细微之处，等等。但你可以想象这是怎么做的。

希望这有帮助！

在使用jQuery加载动态内容时，在Web浏览器中向URL添加内容

2 个答案: