0

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

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

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

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

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

被重写为： 

http://www.mysite.com/somepage

那么，在正确的http://www.mysite.com/somepage页面（导航按应有的方式工作。）http://www.mysite.com/#/somepage

所以：

  1. 在页面加载之前，请检查 URL，如果有#/，请将其删除。
  2. 加载页面位于无哈希 url
  3. 使用 重新显示 url #/，而不重新加载页面。

它甚至可行吗？如果是的话，我将不胜感激。

4

3 回答 3

1

您正在尝试做的事情是可行的，但要维护一个完整的 PITA，并且它不会在所有浏览器上都可用。除此之外，密钥位于history最近扩展的对象中，以添加一组新的“技巧”。其完整文档可从 MDN获得。

您要执行此操作的是replaceState命令。内容如下：

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

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

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

于 2013-06-03T13:52:55.850 回答
0

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

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

这是一种方法。

// 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仅适用于从 Gecko 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
}

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

于 2013-06-04T13:19:52.123 回答
0

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

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

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

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

于 2013-06-03T13:51:25.987 回答