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

我正在使用AJAX加载一些jQuery动画的网站上工作。从URL中删除哈希，在无哈希URL加载页面，然后在不重新加载页面的情况下将哈希添加到URL

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

到目前为止，除非用户对该页面进行书签并试图访问该页面，否则该用户将到达主页，而不是他/她期望访问的页面。

因此，当直接访问网页时，不是通过点击网站的内部链接，我想从网址中删除＃/，但将所有内容都保存在网址后面，这样就可以像这样标记网址：

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

被改写成这样：

http://www.mysite.com/somepage

然后，在正确的页面（http://www.mysite.com/somepage）完成加载，我要坚持＃/放回原处的网址（http://www.mysite.com/#/somepage），无需重新加载这一页（其中，由于我使用的是一个聪明的片断，将确保导航的其余产品的方式应该。）

所以：

页面加载之前，检查URL，如果它已有，请将其移除。
加载页面位于无散列URL
重新显示网址，无需重新加载页面。

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

来源

2013-06-03 KeithRules

你看过[History.js]（http://balupton.github.io/history.js/demo/）吗？ – bdesham

页面加载之前，检查URL，如果它具有＃/，将其删除。

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

加载页面显示乱码少网址
重新显示＃/网址，无需重新加载页面

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

来源

2013-06-03 13:51:25 Quentin

谢谢@Quentin。那么怎么样，“一旦页面开始加载，删除散列，重新加载页面在无散列URL，然后添加散列而不重新加载页面” - 这是可行的吗？ – KeithRules

你正在做的事是可行的，但是要维护一个完全的PITA，并且它不会在所有浏览器上都可用。除此之外，关键在于最近扩展的history对象添加了一组新的“技巧”。其完整文档可用from MDN。

你在做什么之后是replaceState命令。请阅读以下内容：

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

这将允许你替换当前的页面在浏览器的历史，但不在URL中。网址将与您的网址一致 - 使用散列。考虑到您的解决方案，没有任何改变。

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

来源

2013-06-03 13:52:55

这听起来很有希望，@Sebastien，只是我希望我能更好地理解它。你能否详细解释一下？ – KeithRules

@KeithRules：'window.history.replaceState（{}，“您的页面标题”，“/ your/page/with/no/hash”）;'会更改导航器中的网址**和**标记它历史作为新的一页。从那里开始，你需要做的就是使用'window.location.hash'添加＃标签。 –

谢谢@Sebastien - 你能告诉我这是怎么做的任何页面？例如，任何页面的URL是＃/后跟任何页面标题？ – KeithRules

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

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

以下是一种方法。

// 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更新URL显示：

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

你总得记住尽管这pushState仅适用于浏览器开始与壁虎2.0，所以将散列放回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 
}

最后，看看这两种资源。你根本不需要散列：3210和jQuery Address。

来源

2013-06-04 13:19:52

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

回答

相关问题