更新URL而不明显重新加载

时间:2011-08-11 15:59:27

标签: php javascript html

我正在构建一个网页,其中包含一种目录,显示当前项目及其描述,以及其下方其他项目的缩略图,如果我点击其他项目的缩略图,我有一些脚本将描述和大图像更改为所需的项目。问题是我希望这反映在URL中,以便用户可以将URL作为链接发送给其他人以显示所需的项目。但我没有找到一种方法来更改URL而无需重新加载页面,而对于美学,我不想重新加载页面。 任何想法如何做到这一点?

4 个答案:

答案 0 :(得分:5)

解决方案是使用location.hash。另外,要正确实现它,您可能需要阅读Google的这篇文章:Making AJAX Applications Crawlable

答案 1 :(得分:4)

好吧,给你一个线索:你实际上无法更改URL。 (如,windows.location)尽管如此,你可以改变的是哈希。使用javascript变量window.location.hash。然后继续阅读http://code.google.com/web/ajaxcrawling/docs/getting-started.html。使用位置哈希的两个好例子是http://facebook.comhttp://sinonimai.lt/。 (后者是我个人的项目,虽然你分析它会更简单,而不是facebook)

答案 2 :(得分:3)

没有可靠的(跨浏览器)方式来更改地址栏中的URL而不重新加载页面 - 更改window.location.href(我想象的是你想要做的事情)告诉浏览器重新加载页面(即使window.location.href = window.location.href;也会在某些浏览器中执行此操作)。

我认为您必须在页面上放置[链接到此页面]元素并改为 - 您可以使用当前URL在服务器端或使用window.onload函数轻松填充它以与使用element.valueelement.innerHTML相同的方式操作它(取决于您选择包含链接的元素类型)。

你可以使用哈希(请参阅window.location.hash属性)来执行此操作,但这可能会以编程方式出现乱码。

答案 3 :(得分:1)

通常的,目前广泛兼容的方式是使用散列,例如:

http://myniftystore.com/catalog#11321R-red-shirt

然后

http://myniftystore.com/catalog#11321B-blue-shirt

然后

http://myniftystore.com/catalog#95748B-blue-slacks

...当您导航项目时。您可以通过分配location.hash属性来更改页面上的哈希值,而无需重新加载。这要求您首先使用一些客户端脚本来确定用户第一次访问URL时要显示的内容(通过检查location.hash)。

Google有proposal了解如何使这些内容可抓取。就个人而言,我认为他们通过要求奇怪的主题标签(#!xyz而不仅仅是#xyz)来搞砸了它,但如果是我或谷歌,我想我知道谁会赢。 : - )

沿着长矛出现整个history API,但实际支持不是很厚(特别是 - 咳嗽 - 来自某些供应商)。