Question

这可能会让人感到震惊，但我想知道是否可以使用散列动态更改URl，而无需从浏览器调用http请求？

我的客户热衷于使用AJAX进行主导航。这很好，当最终用户首先进入首页时，但是当他们想要使用深层链接时，尽管它工作，它会在页面加载首页时强制额外加载时间，然后从哈希调用AJAX

更新：是否有可能，因为我想要避免的是页面重新加载（原因是它看起来很糟糕）通过在发送标头之前用PHP捕获哈希来阻止重新加载，并在重定向之前重定向页面加载。这样只加载一个页面，重定向对用户来说几乎是不可见的。不知道怎么做，但似乎有可能吗？

Answer 1

是的，这是可能的。我经常这样做是为了在URL的哈希部分中存储状态。结果是页面没有重新加载，但如果用户重新加载，则会将它们带到正确的页面。

使用此方法，URL将如下所示：“/ index＃page = home”或“/ index＃page = about”

你需要编写一个处理导航的JavaScript函数，你需要一个包含div，用来自AJAX的内容重写。

<a href="javascript:void(0);" onClick="link('home')">Home</a>
<a href="javascript:void(0);" onClick="link('about')">About</a>
<a href="javascript:void(0);" onClick="link('questions')">Questions</a>
<div id="content"></div>

<script type="text/javascript">
   function link(page) {
      location.hash = "page="+page;
      loadPage(page);
   }

   // NOTE: This is using MooTools.  Use the AJAX method in whatever
   // JavaScript framework you're using.
   function loadPage(page) {
       new Request.HTML({
           url: "/ajax/"+page+".html",
           onSuccess: function(tree, elements, html) {
               document.id('content').setProperty('html', html);
           }
       }).get();
    }
</script>

现在，您还需要在页面加载时检查哈希值，以便最初加载正确的内容。同样，这是使用MooTools，但使用JavaScript框架提供的任何onLoad方法。

<script type="text/javascript">
    document.addEvent('domready', function() {
        parts = location.hash.split('=');
        loadPage(parts[1]);
    }
</script>

Answer 2

这不是一个好的答案，但你可以在页面本身提供不同的链接;例如，如果地址栏显示/#xyz，则在页面的某个位置包含指向/xyz的链接。您还可以添加一个链接或按钮，使用脚本为页面添加书签，这将再次使用链接的非AJAX形式。

Answer 3

好的，问题是打开http://example.com/#xyz形式的AJAX链接会导致整个页面被下载到浏览器，然后一旦页面加载并检查哈希值就会更改AJAX更改的内容其网址的一部分。用户具有分离体验。

你可以通过制作一个只包含静态元素的页面 - 菜单等 - 以及在内容区域中加载GIF来大大改善这一点。此页面在加载时检查其URL并动态提取由散列部分指定的内容。该页面可以包含您想要的任何URL;我们将使用http://example.com/a。此页面的链接（http://example.com/a#xyz）现在为启用了脚本的用户提供了良好的用户体验。

但是，新用户不会通过提取http://example.com/a来访问该网站;他们将获取http://example.com。这很好 - 提供整页，包括主页内容和不需要编写脚本的链接（例如http://example.com/xyz）。加载此页面时运行的脚本应该将AJAXable链接的href更改为其AJAX表单（http://example.com/a#xyz）;因此，用户点击的第一个链接将导致整页加载，但后续的链接不会。

唯一剩下的问题是无脚本用户被发送一个AJAX链接。您可以向AJAX页面添加noscript块，其中包含解释问题的消息并提供返回主页的链接;您可以通过删除a#并按Enter键来包含有关如何启用脚本或甚至如何修改链接的说明。

有没有办法让AJAX加载页面并更改URL栏中的URL而不进行散列？

3 个答案: