为非javascript创建一个#-tag javascript链接词


Make a #-tag javascript link word for non javascript

使用以下教程,我希望我的网站使用AJAX来加载内容(但也希望能够使用后退按钮等):http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

当然,如果有人禁用了javascript,网站也应该工作(没有Ajax)。

然而,当启用javascript的用户向未启用javascript的用户发送链接时,问题就出现了。因为javascript是禁用的,它将不能正确处理#标签,只会转到主页(所以从javascript用户直接链接到非javascript用户的页面是不可能的)。是否有办法解决这个问题(最好是php或htaccess)。

HTML5为我们提供了无需刷新页面即可更改URL的方法https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

这意味着你可以在不刷新页面的情况下更新一些东西,但仍然给用户一个url,他们可以收藏或发送给其他人。这些url可以在没有JavaScript的情况下工作,只要您在这些位置有页面或使用mod_rewrite或类似的方法捕获它们。

https://github.com/browserstate/history.js是一个很棒的小polyfill,如果浏览器支持它,它将使用HTML5历史内容,否则(Internet Explorer)它会改变url的哈希值。

基本上有三个步骤:

  • 编码你的"a"标签正常:<a href='about'>About us</a>
  • 在你的javascript代码中,拦截<a>标签上的所有click事件,并导航到# + this.href。所以当他们点击上面的url时,你导航到site.com/#about而不是site.com/about
  • 在你的javascript代码中,有一个计时器函数,读取当前位置的哈希值,并通过ajax加载相应的url(带有# removed)

既然你像往常一样编写你的html,网站仍然完全可以被非js用户访问,更重要的是,对于搜索引擎的机器人。

对于这些评论,我可以提出以下建议:

  • 通过javascript将主页从site.com重定向到site.com/js/
  • <a href='about'>被点击时,导航到site.com/js/#about
  • 在"js"页面上,为非js用户设置<a id=about href="/about">click here</a>

为什么不正常构建应用程序,然后在上面添加AJAX,而不是反过来,给自己带来更多的工作呢?

问问自己,为什么需要AJAX页面转换?你的应用程序真的需要标签吗,还是仅仅因为你在其他网站(比如Twitter)上看到了?