0

谁能告诉网站http://www.outsharked.com/imagemapster/default.aspx?what.html是如何以这种方式工作的？在不加载/重新加载页面的情况下修改 url。我认为这不是由 html5 完成的。因为它适用于不支持 html5 的 IE6。

4

1 回答 1

1

我创建了那个网站。评论者是正确的，它使用 Javascript 来更改 URL。对于 IE6，导航的工作方式没有什么不同 - 浏览器支持执行此类操作所需的客户端功能。基本功能包括：

  1. 捕获导航上的点击事件，并通过 AJAX 加载内部内容
  2. 更新 URL 以反映要定位的有效直接 URL。

这些链接也是有效的锚链接，在没有 Javascript 的情况下，它们会转到同一页面（但会加载整个内容）。这是您的基本 AJAX 网站设置，但有一点不同。在 AJAX/单页网站中使用这样的 URL 是一种常见的做法：

http://mysite.com/home#somepage

甚至只是

http://mysite.com/#somepage

主题标签部分代表用户导航到的实际页面。如果有人直接访问该 url，例如从站点外部，则站点将在页面加载后使用 Javascript 根据主题标签加载正确的内容。这意味着内部内容可能会有一点延迟来反映正确的页面，因为它必须在从浏览器加载初始页面后运行另一个请求才能通过 AJAX 获取内部内容。

我试图通过创建一个完全使用和不使用 Javascript 的设置来避免这种情况。如果您直接访问站点内的 URL，例如http://www.outsharked.com/imagemapster/default.aspx?faq.html，您会注意到它会直接加载内容。即使禁用了 Javascript，此 URL 也可以使用。您实际上不能使用主题标签来执行此操作，因为主题标签内容不会发送到服务器。只有客户端知道 URL 中主题标签之后的内容。这就是为什么我使用查询字符串来表示内页。

这个网站架构在当时是一种实验。它工作得很好，但代码不是很好，我并没有真正用它做任何其他事情，而且我确信还有其他更好的充实/测试/功能齐全的框架可以做同样的事情事物。

但它可能不是一个关于创建基本 AJAX 导航设置的具体例子，作为一种学习工具，因为它非常简洁，并且还可以进行 HTML5 历史导航（例如，后退按钮适用于现代浏览器）。

于 2012-09-11T14:05:04.937 回答