另一个“如何在不离开网页的情况下更改URL”

时间:2012-01-18 13:04:25

标签: javascript jquery ajax url

我正在创建一个使用jquery滚动作为导航方法的网站,该网站永远不会留下单个html页面。

我注意到有些网站可以更改网址并查看帖子/答案(例如How does GitHub change the URL without reloading a page?Attaching hashtag to URL with javascript),这些帖子/答案指的是推送状态,AJAX脚本或历史API(所有这些我都不太精明)。

目前我正在研究哪种方法最适合我的网站,并且一直在查看我喜欢的一些示例。

我的问题是为什么以下网站在路径中使用/#/来更改网址。我问的唯一原因是因为我越来越频繁地看到jquery重型网站。

http://na.square-enix.com/ffxiii-2/
http://www.airwalk.com

如果有人能够简单地说明这些人正在使用这些内容,那么我将非常感激,因此我可以创建自己的脚本。

4 个答案:

答案 0 :(得分:1)

  

我的问题是为什么以下网站在路径中使用/#/来更改网址

如果我们忽略了对替代方案无知的可能性,那么:因为他们愿意接受the horrible drawbacks以换取它在Internet Explorer中工作(不支持the history API)。

Github采用合理的方法使用历史API(如果可用)并退回到服务器(如果不可用),而不是生成将在没有JavaScript的情况下中断的链接。

答案 1 :(得分:0)

  

http://probablyinteractive.com/url-hunter

这是一个很好的例子,说明如何使用javascript更改网址。

答案 2 :(得分:0)

我自己没有尝试过,但阅读了很多关于History.js

的评论/意见

如你所说(对于较旧的 - 不兼容的浏览器)以及类似于facebook的直接更改URL,它应该具有“路径中的#”选项。另外,当你点击后退按钮时,你将毫无问题地进入之前加载AJAX的页面。

我已经实现了这样一个功能(带有URL更改的AJAX选项卡),但如果你想在动态加载的页面上有其他javascript,我不建议你使用加载AJAX的页面,因为当你使用AJAX加载内容,内容中的JavaScript将不会被执行。

所以我投票支持HistoryJS或制作自己的模块。

答案 3 :(得分:0)

嗯,他们正在使用锚“#”,因为他们需要区分网站中的多个可书签/浏览器可导航位置,同时仍然在同一页面上拥有所有内容。通过添加类型/mySamePage.html#page1,/ mySamePage.html #page2的浏览器历史事件,当用户执行Ajax加载当前html页面中的某些内容时,您的优势(好吧,显而易见)仍然保留在当前页面,但同时用户可以为该特定内容添加书签,并且在他的浏览器上向后/向前按下将区分不同的Ajax加载内容。

这不是一个伎俩,唯一的问题是SEO优化。 Google有一个很好的页面解释了这个http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html