通过 Javascript 更新地址栏

发布于 2024-10-09 06:32:04 字数 169 浏览 0 评论 0原文

现在我仍然知道在不更改页面的情况下更改位置栏的内容是不可能的(是的,我不是在谈论#)。我最近注意到 github.com。他们是如何在他们的网站上做到这一点的?当用户单击浏览器的后退或下一步按钮时,他们可以轻松获取事件。 dojo.back也有这个功能。但是如何在不离开页面的情况下使用 javascript 更改地址栏呢?

Still now I knew Its not Possible to change the contents of location bar without changing the page (and Yes I am not talking about #). I've recently noticed github.com. How they are doing that on their site ? they can easily get an event when user clicks on Browser's back or next button. dojo.back also have this feature. But how to change the addressbar with javascript without leaving the page ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

[浮城] 2024-10-16 06:32:04

有两种方式:

  • HTML5 的 pushState() 函数。例如,Facebook 和 Github 就使用它。它允许您修改完整的 URL 并在历史状态更改时触发事件处理程序。 Mozilla 有一个很好的概述
  • 旧的变体是使用 URL 的 hash 部分(这就是 Twitter 的做法)。这意味着您可以更改 window.location.hash,监视其更改,并根据该哈希值加载适当的内容。但是,这意味着当用户请求时,例如 http://twitter.com/#! /27c3/status/18331752900591616,仅向网络服务器请求哈希符号之前的部分,哈希之后的所有内容与客户端有关。这意味着服务器尚无法决定将哪些内容交给客户端。

There are two ways:

  • HTML5's pushState() function. Facebook and Github use this, for example. It allows you to modify the complete URL and fires event handlers when the history state changes. Mozilla has a good overview.
  • The old variant is to use the hash part of the URL (this is what Twitter does). This means that you change window.location.hash, monitor it for changes and, based on the value of that hash, load the appropriate content. However, this means that when the user requests, say, http://twitter.com/#!/27c3/status/18331752900591616, only the part before the hash sign is requested form the webserver, everything after the hash is only the client's business. This means that the server can not yet decide what content to hand to the client.
半步萧音过轻尘 2024-10-16 06:32:04

您在 GitHub 上指的是 #(哈希)。当您右键单击行号时,它将将该数字添加到您的散列中。

window.location.hash = 'HELLO';

将其放入页面中进行尝试。在不重新加载页面的情况下无法更改 window.location。后退按钮有点棘手,但 Dojo 是您最好的选择。 jQuery 不提供这个。不过,Dojo 的代码非常干净,因此您应该能够对它们的功能进行逆向工程(如果您选择将该功能包含到您自己的库中)。

您还会注意到 Google 也在做同样的事情: http://code.google.com/p/digitalxero/source/browse/#svn%2Ftrunk%2Flocale%2Fde

如果您点击文件夹(左侧),它会更改哈希值并提供不同的内容。

What you're referring to on GitHub is the # (hash). When you right click on a line number, it adds the number to your hash.

window.location.hash = 'HELLO';

Put that in a page to try it out. It's not possible to change window.location without the page reloading. The back button stuff is a little trickier, but Dojo is your best bet for that. jQuery doesn't provide this. Dojo has pretty clean code though, so you should be able to reverse engineer their functions (if you chose to include that functionality into your own library).

You'll also notice Google is doing the same with: http://code.google.com/p/digitalxero/source/browse/#svn%2Ftrunk%2Flocale%2Fde

If you click on folders (left), it changes the hash, and provides different content.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文