处理 AJAX 站点的哈希 URL 的更好方法
除非是 HTML 5，当 AJAX 加载额外的页面时，我可以轻松地使用 History.pushState() 来操作 URL，否则我发现处理在 URL 地址栏中使用哈希标记注册的页面很不方便。
例如，加载页面 item1.html。用户单击下一个项目 - item2.html 页面使用 AJAX 加载。地址在浏览器中更改为 item1.html#item2.html。
现在，当用户将此 URL 发送给朋友或为其添加书签时，我想确保 item2.html 已加载。
方法 1) JavaScript 将 URL item1.html#item2.html 重定向到 item2.html。缺点：item1.html 已加载并在重定向之前闪烁一秒钟。
方法2）加载item1.html并隐藏item1内容，然后使用Ajax请求加载item2.html。缺点：item1 内容仍然可见（除非我将其隐藏为不可见，这可能对 SE 不利）
更好的方法吗？一定有一个我错过的许多大网站实施的出色解决方案。
Unless this is HTML 5 where I can easily use history.pushState() to manipulate URL when AJAX loads additional piece of page, I find it inconvenient to handle pages registered with hash mark in URL address bar.
For example, page item1.html is loaded. User clicks next item - item2.html page is loaded with AJAX. Address is changed in the browser to item1.html#item2.html.
Now as user sends this URL to a friend or bookmarks it, I want to make sure item2.html is loaded.
Approach 1) JavaScript will redirect URL item1.html#item2.html to item2.html. Disadvantage: item1.html is loaded and flickers for a second before redirect.
Approach 2) load item1.html and hide item1 content, then load item2.html with Ajax request. Disadvantage: item1 content can still be visible (unless I hide it with visibility none which may be bad for SE's)
Better approach? There must be a great solution I am missing that many big sites implement.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不要将 # 部分视为文件的 url。这是页面所处的逻辑状态。
对于您来说，我认为这意味着有一个 page.html，它本身可能没有真正的内容。然后你有 page.html#item1 和 page.html#item2 等。 url 总是一致的。您永远不会真正直接导航到 item1.html 或 item2.html。
Don't think of the # part as a url to a file. It's a logical state for the page to be in.
For you I think that means having like a page.html, which maybe has no real content on its own. Then you have page.html#item1 and page.html#item2, etc. The urls are always consistent. You'd never really directly navigate to item1.html or item2.html.
正如上面 IL 所概述的，您希望 AJAX 应用程序的“外壳”（紧邻 URL 中的哈希标记之前的文件，例如：page.html）充当加载 item1.html、item2.html 的容器。等通过AJAX。为了确保当用户第一次到达您的应用程序时，哈希标签后引用的资源被加载到空壳中，您需要在 window.onload （或 $(document).ready() 处调用一个函数，如果（您正在使用 jQuery）将 location.hash 读取到适当的 AJAX 调用中，如果 location.hash 未定义、空白或返回 AJAX 错误的值，则使用默认方案。
为了“美化”您的 URL 以便在搜索引擎中轻松输入和索引，您需要在站点的根目录中设置一个 .httaccess 文件来重写干净的 URL（例如： http://example.com/item1) 到具有哈希值的文件位置（例如：http://example.com/page.html#item1) 以便您的引擎能够理解它并加载适当的资源。
As IL outlined above, you want the 'shell' of your AJAX application (the file immediately preceding the hash tag in the URL, e.g: page.html) to serve as nothing more than a container which loads item1.html, item2.html, etc. via AJAX. In order to ensure that the resource referenced after the hash tag is loaded into the empty shell when the user first arrives at your application, you'll want to call a function at window.onload (or $(document).ready() if you're using jQuery) that reads location.hash into the appropriate AJAX call, with a default scenario if location.hash is undefined, blank, or a value that returns an AJAX error.
In order to 'prettify' your URL for easy entry and indexing in search engines, you'll want to set up a .httaccess file at the root of your site that rewrites a clean URL (e.g: http://example.com/item1) into a file location with a hash value (e.g: http://example.com/page.html#item1) so that your engine can understand it and load the appropriate resource.