Question

我正在开发一个使用AJAX加载和一些jQuery动画的网站。

使用JavaScript，我从动态生成的链接中获取href到基于PHP的页面，然后将该href添加到URL（在不可避免的＃/之后）。

到目前为止一切顺利，除非用户为该页面添加书签并尝试访问该页面，该用户将到达主页，而不是他/她希望访问的页面。

因此，当直接访问页面时，不是通过点击网站的内部链接，我想从网址中删除＃/，但保留其后的所有内容，以便这样的网址加入：

http://www.mysite.com/#/somepage

被重写为：

http://www.mysite.com/somepage

然后，在正确的页面（http://www.mysite.com/somepage）完成加载后，我想将＃/重新粘贴到URL（http://www.mysite.com/#/somepage）中的原位置，而不重新加载页面（这要归功于我正在使用的一个聪明的片段，它将确保导航的其余部分以它应该的方式工作。）

所以：

在加载页面之前，请检查网址，如果网址为#/，请将其删除。
加载位于无哈希网址的页面
使用#/重新显示网址，而不重新加载网页。

它甚至可行吗？如果是的话，我会感激上一堂课。

Answer 1

你要做的事情是可行的但是要维护一个完整的PITA，并且它不会在所有浏览器上都可用。除此之外，密钥位于最近扩展的history对象中，以添加一组新的＆＃34;技巧＆＃34;。其完整文档可用from MDN。

您要执行此操作后的是replaceState命令。阅读如下：

更新历史堆栈中的最新条目，以获取指定的数据，标题以及URL（如果提供）。 DOM将数据视为不透明;您可以指定任何可以序列化的JavaScript对象。请注意，Firefox目前忽略title参数;有关更多信息，请参阅操作浏览器历史记录。

这样您就可以在浏览器的历史记录中替换当前页面，但在URL中不是。 URL将与您拥有的完全一样 - 使用哈希。考虑到您的解决方案，没有必要改变它。

但是，为了保持一致性，您必须确保无哈希页面重定向到具有history对象的客户端的哈希显示页面。这是唯一的要求。

Answer 2

在加载页面之前，请检查URL以及是否有＃/，将其删除。

不可能。片段ID不会发送到服务器，因此您只能使用客户端代码访问它，并且需要加载页面（或至少开始加载）。

加载位于无哈希网址的页面使用＃/重新显示网址，而不重新加载网页

使用XMLHttpRequest获取数据，DOM更改文档以使用它，history API更改地址栏中的网址。

Answer 3

正如其中一个答案中指出的那样，您无法在页面加载之前删除哈希值。

但是，一旦页面开始加载，问题中描述的操作就成为可能。

这是一种方法。

// Remove the hash and reload the page at url without hash 

if (window.location.href.indexOf('/#/')>=0) {
    window.location = window.location.href.replace(/\/#\//, '/');
}

开始加载新页面后，您可以使用history.pushState更新网址显示：

if ((window.location.href.indexOf('/#/')<1) && (location.pathname != "/")) {
     history.pushState({}, "page x",  location.protocol + '//' + location.host + '/#' + location.pathname);
}

你必须记住pushState仅适用于以Gecko 2.0开头的浏览器，因此将哈希值放回到网址中将无法在旧版浏览器中使用。

这可能会导致一些不幸的情况。例如，假设您的网址http://www.mywebsite.com/somepage被搜索引擎编入索引。用户单击该链接，在不支持pushState的旧浏览器中访问您的网站，然后在浏览启用AJAX的网站时单击其他链接。该用户可能会到达

http://www.mysite.com/somepage/#/someotherpage

然后，随着用户不断点击，它只会继续恶化：

http://www.mysite.com/somepage/#/someotherpage/#/yetanotherpage/#/andsoon/#/andsoforth/

所以你可能需要的是确保你的哈希值不会继续传播。

您还可以在条件中包装哈希删除/替换代码：

if (history.pushState) {
// add hash
} else {
// provide some alternative
}

最后，看看这两个资源。您可能根本不需要哈希：History.js和jQuery Address。

从URL中删除哈希，将页面加载到无哈希的URL，然后将哈希添加到URL而不重新加载页面

3 个答案: