从URL中删除哈希，以无哈希URL加载页面，然后在不重新加载页面的情况下向URL添加哈希

Remove hash from URL, load the page at hash-less URL, then add hash to URL without reloading the page

本文关键字：URL 哈希 加载 情况下 添加 新加载 然后 删除      更新时间：2023-09-26

我在一个使用AJAX加载一些jQuery动画的网站上工作。

使用JavaScript，我从动态生成的指向基于php的页面的链接中获取href，然后将该href添加到URL(在不可避免的#/之后)。

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

所以，当一个页面被直接访问时，不是通过点击网站的内部链接，我想从url中删除#/，但保留它之后的所有内容，所以url是这样被书签的:

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

被重写为:

http://www.mysite.com/somepage

然后，在正确的页面(http://www.mysite.com/somepage)完成加载后，我想把#/粘回到URL (http://www.mysite.com/#/somepage)中原来的位置，而不重新加载页面(这要归功于我使用的一个聪明的代码片段，将确保其余的导航工作方式。)

:

  1. 页面加载前，检查URL，如果它有#/，删除它。
  2. 加载位于无哈希url的页面
  3. 用#/重新显示url，不重新加载页面。

这真的可行吗?如果有，我很感激你给我上一课。

您正在尝试做的是可行的，但需要维护完全的PITA，并且它不会在所有浏览器上可用。除此之外，键驻留在history对象中，最近扩展了一组新的"技巧"。完整文档可从MDN获取。

你要做的是replaceState命令。内容如下:

更新历史堆栈上的最新条目，使其具有指定的数据、标题和URL(如果提供的话)。数据被DOM视为不透明的;你可以指定任何可以序列化的JavaScript对象。注意，Firefox目前会忽略title参数;要了解更多信息，请参见操作浏览器历史记录。

这将允许您替换浏览器历史记录中的当前页面，但URL中的不能替换。URL将与您所拥有的完全相同-带有散列。考虑到你的解决方案，没有必要改变它。

但是，为了一致性，您必须确保您的无散列页面重定向到具有history对象的客户机的存在散列的页面。这是唯一的要求。

在页面加载之前，检查URL，如果有#/，删除它。

不可能的。片段id没有发送到服务器，所以你只能用客户端代码访问它，这需要页面加载(或至少开始加载)。

加载位于无哈希url的页面
用#/重新显示url，而不重新加载页面

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

正如在其中一个答案中指出的那样，您不能在页面加载之前删除散列。

然而，一旦页面开始加载，问题中描述的操作是可能的。

有一种方法可以做到。

// Remove the hash and reload the page at url without hash 
if (window.location.href.indexOf('/#/')>=0) {
    window.location = window.location.href.replace(/'/#'//, '/');
}

一旦新页面开始加载，您可以使用历史记录。pushState更新URL显示:

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

你要记住，pushState只适用于以Gecko 2.0开始的浏览器，所以把哈希放回url在旧的浏览器中不起作用，就这样。

这可能导致一些不幸的情况。例如，假设您的url 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。

相关文章：