在不重新加载页面的情况下更改URL

Question

18

我想知道在不重新加载页面的情况下，是否可以更改浏览器中URL的内容？

我使用jQuery和Ajax来加载页面的新部分。当我选择“产品一”时，直接链接是mysite.com/product1，而对于“产品二”，则是mysite.com/product2，但我不想重新加载页面。

- Paul Peelen

7个回答

13

如果你想防止页面重新加载，你将需要添加哈希符号#。

css-tricks.com上有一个很好的视频教程，在这里看一下：

- Sarfraz

7

只需使用这个

window.history.pushState("object or string", "Title", "/new-url");

- naveen

注意IE < 10：http://caniuse.com/#search=pushstate。使用像history.js这样的polyfill。 - Johann

7

这是在HTML5中可以实现的。在此处查看演示here。

您可以更改URL以指向同一域内的另一个URL，但出于安全原因，不能更改域名。

有关详细信息，请参见HTML5规范中的history界面。

- Sparky

1

你可以这样做。但是很可能需要一个现代浏览器。看一下由Google Chrome团队创建的这个页面：http://www.20thingsilearned.com/（我用Chrome 9来阅读它）。更改页面不会重新加载整个页面，而是更改URL。

- Attila O.

1

是的，可以使用HTML5历史记录API实现。请查看此页面和此示例

- Manolis Georgopoulos

-4

你不能这样做。只有在像sAc告诉你的那样更改哈希值时才可以。

但是...我可以问一下为什么吗？

- Ionuț Staicu

2

我不是楼主，但当您通过ajax更改内容时，如果您的访问者想要将他正在查看的页面存储到书签/通过电子邮件发送等等，我认为这非常有用。 - nothrow

就像Yossarian所说的那样，这是我的原因之一。此外，使用ajax加载页面的负载较小，内容的加载效果更好看。 - Paul Peelen

@Yossarian: 我问他为什么想要使用site.com/product，就像最初的问题一样（而不是哈希）。@Paul: 如果您更改了超过页面内容的4-50％，则可能需要重新考虑策略，因为页面传输所获得的速度将被DOM操作时间取消:) - Ionuț Staicu

答案错误。在HTML5中可以做到这一点。 - sasa

1

@Sasa，同意。但是请尝试在IE9中实现 :) - Ionuț Staicu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pavel · Accepted Answer

现在使用HTML_5已经成为可能...

此外，Facebook和Google也在除了Hash(#)属性之外使用这种技巧。