AJAX 和浏览器后退按钮
我在 www.darknovagames.com 上运行一个基于浏览器的游戏。 最近，我一直致力于使用 CSS 重新格式化网站，试图使其所有页面都根据 HTML 标准进行验证。
我一直在考虑将导航菜单放在页面左侧的 AJAX 中（而不是每次将用户带到一个单独的页面，需要重新加载标题和导航栏，这几乎永远不会改变），我我知道如果我这样做，我可能会破坏浏览器中的前进/后退按钮。 我想我的问题是，我应该继续使用 AJAX 访问网站，从而要求用户使用网站导航来玩游戏，还是应该让网站保持当前状态，并使用标准超链接和导航内容？
我想我问这个问题的原因是我在网站中内置了一个论坛系统，很多时候我想链接到论坛中的特定主题。
我也愿意接受建议。 是否有一种标准（最好没有传统框架）方法可以仅重新加载网站的主体区域，同时仍然更改 URL，以便用户可以添加书签和前进/后退等？ 这也可能解决我的问题。 我只是在这里寻求最佳解决方案，而不是特定问题的答案。 ^_^
谢谢
I run a browser based game at www.darknovagames.com. Recently, I've been working on reformatting the site with CSS, trying to get all of its pages to verify according to the HTML standard.
I've been toying with this idea of having the navigation menu on the left AJAX the pages in (rather than taking the user to a separate page each time, requiring a reload of the title and nav bar, which almost never change) and I know that if I do so, I will probably break the Forward/Back buttons in the browser. My question I guess is, should I go ahead and AJAX the site, thus requiring the user to use the sites navigation to play the game, or should I leave the site as it currently stands, and use standard hyperlinks and things for navigation?
The reason I ask I guess is that I built a forums system into the site, and a lot of times I would want to link say to a particular topic within the forums.
I'm also open to suggestions. Is there a standard (preferably without traditional frames) way to make only the body area of the site reload, while still changing the URL so that users can bookmark and forward/back, etc? That could potentially solve my problem as well. I'm just asking for the best solution here, not an answer to a specific question. ^_^
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
对需要更新的页面部分而不是整个页面使用 ajax。 为此，您应该使用模板。
当您仍想保留页面上各种状态更改的后退按钮时，请将它们与#achors 结合起来以更改 url（而不强制浏览器发出另一个 GET）。
例如，gmail 看起来像这样：
mail.google.com/#inbox/message-1234
# 后面的所有内容都是通过 ajax 发生的页面状态更改。 如果我按“返回”，我将再次转到收件箱（再次，无需另一个浏览器 GET）
Use ajax for portions of the page that needs to update, not the entire thing. For that you should use templates.
When you want to still preserve the back button for your various state changes on the page, combine them with # achors to alter the url (without forcing the browser to issue another GET).
For example, gmail's looks like this:
mail.google.com/#inbox/message-1234
everything past the # was a page state change that happened via ajax. If I press Back, I'll go to the inbox again (again, without another browser GET)
如果您要启用 AJAX，请勿以牺牲网站上每个重要页面的可访问 URL 为代价。 这是人们可以使用的可导航网站的支柱。
当您将所有功能都放入 AJAX 调用和回调中时，您基本上是在迫使用户进入单一路径来访问他们想要的功能和内容 - 这完全违背了 Web 的运行方式。 人们依赖地址栏和后退按钮。 如果您覆盖所有链接，使您的网站本质上是一个仅通过 AJAX 更新的页面，那么您就限制了用户浏览您的网站并找到他们需要的内容的能力。 它还会阻止您的用户分享他们发现的内容（这就是重点的一部分，对吧？）。
想想用户对您网站的心理地图。 如果他们知道自己是通过主页进入的，那么他们就会去搜索某些内容，然后他们会登陆游戏页面，然后他们开始玩特定的游戏，这是用户采取的四个不同的操作单元。 他们可能在每个页面上做了一些其他更小的、更无关紧要的操作——但这些是主要的单元。 当他们单击“后退”按钮时，他们应该会返回到原来的路径。 如果您通过 AJAX 调用加载所有这些页面，那么您提供的网站的功能与用户的期望相反。
将您的网站分解为每个重要功能（即搜索、主页、个人资料、游戏 - 这将取决于您网站的全部内容）。 无论您在何处链接到这些页面，都可以通过常规链接和静态 URL 进行。
阿贾克斯没问题。 但它的艺术在于知道何时使用它，何时不使用它。 如果您坚持我上面概述的模型，您的用户将会欣赏它。
If you're going to enable AJAX, don't do it at the expense of having accessible URLs to every significant page on your site. This is the backbone of a navigable site that people can use.
When you shovel all your functionality into AJAX calls and callbacks, you're basically forcing your users into a single path to access the features and content that they want -- which is totally against how the web is meant to function. People rely on the address bar and the back button. If you override all your links so that your site is essentially a single page that only updates through AJAX, you're limiting your users' ability to navigate your site and find what they need. It also stops your users from being able to share what they find (which, that's part of the point, right?).
Think about a user's mental map of your site. If they know they came in through the home page, then they went to search for something, then they landed on a games page, then they started playing a particular game, that's four distinct units of action that the user took. They might have done a few other smaller, more insignificant actions on each of these pages -- but these are the main units. When they click the Back button, they should expect to go back through the path they came in on. If you are loading all these pages through AJAX calls, you're providing a site whose functionality runs contrary to what the user expects.
Break your site out into every significant function (ie, search, home, profiles, games -- it'll be dictated by what your site is all about). Anywhere you link to these pages, do it through a regular link and a static URL.
AJAX is fine. But the art of it is knowing when to use it and when not to. If you keep to the model I've sketched out above, your users will appreciate it.
请查看reallysimplehistory。 该 wiki 已经 10 个月没有更新了，但我刚刚在 Ajax Experience 2008 上看到了 布莱恩·迪拉德 (Brian Dillard) 的演讲。 他说 0.8 代码在他的硬盘上。 希望它很快就能下载。
Check out reallysimplehistory. The wiki hasn't been updated for 10 months, but I was just at the Ajax Experience 2008 and saw a presentation by Brian Dillard on it. He says the 0.8 code is on his hard drive. Hopefully, it will be downloadable soon.
另一个解决方案：
AJAX 分页 & 后退按钮
这似乎是最好的一个，可与 JQuery 和 JQuery 一起使用。 穆工具。
Another solution:
AJAX Pagination & Back Button
This seems to be the best one out there, works with JQuery & Mootools.
有很多方法可以使用时髦的 Javascript 技术来解决这个问题，通常涉及 iframe，但我认为在这种情况下你需要质疑为什么要使用 AJAX。 它真的会让用户更容易使用网站吗？ 在我看来，您使用它是因为您认为它很酷（这本身并不总是坏事），而不是因为它实际上会给您的访问者增加任何价值。 对于任何普通的网站，普通的超链接文档几乎总是适合主要导航。 这是人们所期望的，我不建议你基于一些花哨的技术来打破这些期望。
AJAX 很棒，可以让您做很多伟大的事情，更改网站导航不是其中之一。
不过，解决这个问题做得很好，有很多网站只是继续使用 AJAX，甚至没有考虑这一点！
There are numerous ways the solve this problem using funky Javascript techniques, often involving iframes, but I think in this situation you need to question why you're using AJAX. Is it actually going to make the site any easier to use for the user? It sounds to me like you're using it cos you think its cool (which in itself isn't always a bad thing) not because it will actually add any value to your visitors. From any normal website, normal hyperlinked documents are nearly always the right thing for the primary navigation. Its what people expect and I wouldn't recommend you go around breaking those expectations based on some fancy technology.
AJAX is awesome and allows you to do many great things, changing a websites navigation is not one of them.
Well done for picking up on this problem though, theres a lot of sites out there that just go ahead with AJAX and don't even think about this!
试试这个简单的& 轻量级 PathJS lib。 它允许将侦听器直接绑定到锚点。
例子：
Try this simple & lightweight PathJS lib. It allows to bind listeners directly to anchors.
Example:
由于您所描述的原因，AJAX 并不是最佳的导航解决方案。 与破坏浏览器导航 UI 的麻烦相比，重新加载标题和导航栏的麻烦是最小的。
AJAX 的一个更合适的示例是允许用户在主窗口中玩游戏，同时可以浏览导航窗格中的其他内容列表。 您可以通过 AJAX 在导航窗格中加载其他项目，而不会影响游戏玩法。
AJAX is not the best solution for navigation for exactly the reason you describe. The hit for reloading the header and navbar is minimal compared to the hassle of breaking the browser's navigation UI.
A more appropriate example of AJAX would be to allow users to play the game in the main window while they can browse through a list of other content in a nav pane. You could load additional items in the nav pane via AJAX without disturbing the gameplay.
我会坚持使用简单的超链接。 您的页面结构不应占 HTML 的很大一部分，因此将其从页面请求中排除并不是一个巨大的胜利。 使每个资源都可寻址（即用户可能感兴趣的每个内容的 URL）是 Web 的一个关键设计功能。 这意味着缓存可以工作，并且意味着用户可以共享书签。 它使谷歌以及社交书签网站得以运转。
在我看来，从后续页面更改中删除几个 HTML 字节并不值得。
I’d stick with simple hyperlinks. Your page furniture shouldn’t account for a big portion of the HTML, so it’s not a big win excluding it from page requests. Making each resource addressable (i.e. a URL for each bit of content a user might be interested in) is a key design feature of the web. It means caching can work, and means users can share bookmarks. It makes Google work, as well as social bookmarking sites.
Shaving a couple of HTML bytes off subsequent page changes isn’t worth the effort, in my opinion.