如何在不重新加载页面的情况下更改地址栏的网址答案

【问题标题】：how to change url at address bar without reloading the page如何在不重新加载页面的情况下更改地址栏的网址
【发布时间】：2010-12-17 22:38:02
【问题描述】：

我有http://mysite.com/index.php。

还有一个子菜单

但我希望http://mysite.com/index.php 处理每个请求，并使用 Ajax 请求更改内容。这样，网站只加载内容部分，并且浏览起来更快更容易。

这里的问题是 SEO，因为 google 会看到的唯一 URL 是 http://mysite.com/index.php，我想将 http://mysite.com/about-us 关联到 About Us 内容，http://mysite.com/product 关联到产品内容等

我知道我可以使用 PHP 执行此操作，只需读取 URL 并即时编写 Ajax，但这样做每次都会重新加载整个页面。有没有办法在不重新加载整个页面的情况下做到这一点？我认为我需要在子菜单中有一个常规锚点，例如指向“http://mysite.com/contact-us”，但是当单击时，不是打开此页面，而是处理 Ajax 请求。

如果这是可能的，Google 可能会将其视为黑帽，对吧？

问候亚历克斯

【问题讨论】：

您明白 Ajax 不会自动让事情变得更快，对吧？
zzzzBov: ????请问你还好吗？ Ajax 是最近的流行语？
有效的 PHP 解决方案：echo "<script>window.history.pushState('', '', 'http://desired.url.here');</script>";。 . . （来自埋在下面的answer。）

标签： php ajax

【解决方案1】：

这里有一个解决方案：

window.history.pushState(data, title, url)

Rob 在这里解释了它的工作原理，并且您有一个工作示例：

http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

【讨论】：

【解决方案2】：

您不能在不更改页面的情况下更改地址栏中的 URL，因为为此我可以让您通过 http://www.imhackingyou.com/sucker 访问我，但将地址栏更改为 http://www.bankofamerica.com/login

【讨论】：

你可以，但这样做有点棘手。
如果错了怎么可能是正确的答案？下面有一个很好的答案，它解释了如何做那个答案解释你不能做的事情！

【解决方案3】：

这是一个路由问题，而不是 AJAX 问题。

如果您使用其他工具（咳嗽 ASP.NET MVC 咳嗽），您只需添加一条路线（我希望有办法这个在 PHP 中）接受 URL，如

/home
/products
...

并将它们路由到，例如，

/index.php?area=home
/index.php?area=products

当在良好的 MVC 或 RESTful URL 系统之外使用时，这通常通过重写引擎来完成。我在 IIS 上使用ISAPI Rewrite，但如果您正在使用 LAMP 堆栈，我认为 Apache 提供了一个提供相同功能的模块。（谷歌.htaccess）

警告：接下来是咆哮

而且，对于它的价值，

避免尝试用 JavaScript 编写整个应用程序。服务器在那里是有原因的。作为 Web 开发人员，您的部分工作就是尽可能多地将工作吸收到您的服务器上。当您尝试在客户端上执行所有操作时，浏览器性能和兼容性问题会让您发疯。
在很多情况下，避免回发都是有意义的，但这并不是您应该尝试将其应用于每个页面的灵丹妙药。通常在单击链接时加载新页面是有意义的。这是用户所期望的，它更稳定（因为所需的大部分基础架构都是服务器端的），并且检索相同内容的速度并不比 AJAX 请求慢。

规则：

永远不要破坏后退按钮。如果没有仔细规划，大多数 AJAX 应用都会违反此规则。
参见规则 #1。

【讨论】：

谢谢大卫，但这不是我要问的。我使用 htaccess 重写，主要用于 SEO 目的。无论如何，我同意第 1 点，我发现 JS+Ajax 非常有用，有时我用得太多。但主要在 CMS 中，在访问者方面没有。

【解决方案4】：

这听起来应该使用rewrite engine 来完成，但假设您有充分的理由使用AJAX，您可以通过修改哈希后的部分或更好的是hashbang 来使用javascript 更改url：

window.location.hash = "#!about-us";

有关从 SEO 角度看 hashbang 的更多信息，请查看http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

【讨论】：

正是我想说的，但我找不到pdf：P

【解决方案5】：

那么 Shopify 是如何做到的呢？转到他们的网站，单击“功能”链接，您会看到 URL 显示：

http://www.shopify.com/tour/sell-online

然后点击任何子链接，你会看到 URl 中的地址发生了变化，但没有使用哈希，但没有翻页。

我认为他们没有使用 ajax 来更改内容，因为它们似乎都包含在页面上的隐藏 div 中，但无论如何，您显然可以使用客户端技巧来更改 URL。

【讨论】：