使用不刷新但后退按钮仍然有效的 jquery 创建网站答案

【问题标题】：Create a website with jquery that doesn't refresh but the back button still works使用不刷新但后退按钮仍然有效的 jquery 创建网站
【发布时间】：2011-03-25 02:14:34
【问题描述】：

我正在尝试创建一个包含不同页面的网站，这些页面都使用 jquery 更改（可能还有 ajax，具体取决于最初加载所有内容所需的时间）

基本上，这个想法是，当您单击一个项目来查看它时，会发生某种动画，然后您可以在不刷新浏览器的情况下查看该项目/页面。每个新的“页面”都会与一个散列值相关联，所以这个想法是，每当散列值发生变化时，一些 js 函数会发生变化。我这样做是为了当你按下后退按钮时，哈希值会改变，从而改变页面的内容。

我很难弄清楚如何监控哈希值，所以当按下后退按钮并且哈希值更改时会发生一些事情......（我知道如何在点击时检查哈希值值，我只是卡在返回按钮上）

这个想法是功能看起来类似于我找到的这个网站http://thinkav.co.nz/

谢谢

（我最好不要使用插件）

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你可以试试 jQuery BBQ：返回按钮和查询库

jQuery BBQ: Back Button & Query Library

并阅读一些有关哈希爆炸网址的内容

Hash URIs

您必须考虑让您的 ajax 网站可抓取

Making AJAX Applications Crawlable

【讨论】：

【解决方案2】：

您要做的是新 HTML5 规范的一部分，并且本质上是使用 pushState() 方法。这允许网页像 URL 一样使用井号 (#) 作为参考，因此您可以正常使用后退和前进按钮。我从未使用过它，但this should point you 方向正确！快乐编码！

【讨论】：

【解决方案3】：

使用 Ben Almans hashchange plugin。它有一个 hashchange 事件，每次 hashchanges 都会触发。

$(document).ready(function() {

      // Bind the event.
      $(window).hashchange( function(){
        // Update page in here
      })

      // Trigger the event when the page first loads to handle the back button
      $(window).trigger("hashchange");
});

【讨论】：

我在你的未来看到了 10,000 条 else if 声明。

【解决方案4】：

页面顶部的 url 栏将始终记住锚点而无需刷新，因此只需通过 ajax 加载内容并让浏览器为您记住。

即：

//the js
function load(){
    var hash = window.location.hash;
    var url = hash+".html";
    $("body").load(url); 
}

$(document).ready(function(){
    $("a").click(function(){
        load();
    });
});

//the html
<a href="#test">click me</a>

这应该会在不刷新的情况下将 test.html 加载到正文中。

【讨论】：