如何实现#!基于链接?
我一直想知道如何在 URL 中使用 #
或 #!
即时浏览页面。许多网站(例如 Google)都在 http://www.google.com/nexus/ 上使用它,当用户单击任何链接,不会发生任何变化,内容会立即打开,仅 URL 发生变化,例如:www.example.com/#contact
或 www.example.com/#home
我怎样才能用我的 8 个页面做到这一点? (主页、功能、价格、联系方式、支持)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可能想看一下基本的 AJAX 教程(例如 http ://marc.info/?l=php-general&m=112198633625636&w=2)。 URL 使用 #! 的真正原因就是让它们被谷歌索引。如果您希望 Google 将 AJAX 处理的 URL 编入索引,则必须实现对 _escaped_fragment_ 的支持(请参阅:http://code.google.com/web/ajaxcrawling/docs/specification.html)。
You may want to take a look at a basic AJAX tutorial (such as http://marc.info/?l=php-general&m=112198633625636&w=2). The real reason the URLS use #! is to have them get indexed by google. If you want you AJAX'ed URLs to be indexed by Google, you'll have to implement support for _escaped_fragment_ (see: http://code.google.com/web/ajaxcrawling/docs/specification.html).
使用此选项的唯一原因是在 url 中显示 AJAX 增强页面的状态。这样,您可以复制该 url 并将其添加为书签,以返回到相同的状态。
旧版浏览器不允许您在不重新加载页面的情况下更改地址栏中的 URL。最新的浏览器可以(搜索
PushState
)。要解决此问题,您可以更改 url 的哈希值。这是通常用于跳转到锚点的部分,但您可以使用 JavaScript 将其用于其他目的。!
对于此过程并不是绝对必需的。!
是由 Google 实现的。它允许对这些 url 进行索引。通常,散列不会单独索引,因为它们仅标记同一页面的不同部分(锚点)。但通过添加!
,您可以创建shebang
或hashbang
,它们会被 Google 编入索引。这里不解释所有内容,当你搜索 Ajax、HashBang 和 PushState 时,你应该会找到很多信息。
添加:检查 History.js。它是 PushState api 的包装器,在旧版浏览器上使用哈希值。
The only reason this is used, is to show the state of an AJAX enhanced page in the url. This way, you can copy and bookmark the url to come back to the same state.
Older browsers don't allow you to change the url in the address bar without the page being reloaded. The latest browsers do (search for
PushState
). To work around this, you can change the hash of the url. This is the part that is normally used to jump to an anchor, but you can use it for other purposes using JavaScript.The
!
isn't strictly necessary for this process. The!
is implemented by Google. It allows these urls to be indexed. Normally hashes aren't indexed separately, because they mark only a different part of the same page (anchor). But by adding the!
, you create ashebang
orhashbang
, which is indexed by Google.Without explaining everything here, you should find a lot of information when you search for Ajax, HashBang and PushState.
Addition: Check History.js. It is a wrapper for the PushState api, that falls back to using hashes on older browsers.