Javascript 在使用ajax的单页面站点上单击后退按钮时，如何解析页面导航的URL？

我在这个网站上工作，它使用ajax和.htaccess来更新单个index.php页面，问题是我无法让后退按钮工作。例如，如果单击两个单独的顶部标题链接，然后单击“上一步”，则即使url将被更新，也不会更改您正在查看的内容。这是因为我的逻辑是使用php将用户引导到正确的web页面，但是当用户单击“后退”按钮时，他们会收到页面的缓存副本，因此没有服务器请求。事实上，您会注意到，如果在单击“上一步”按钮后单击“刷新我的站点”，它将加载正确的内容，因为它将发送服务器请求。我的第一个想法是在用户单击后退按钮时强制刷新，但我无法用它来解决问题。我尝试使用头文件，我尝试使用javascript，但我失败了，所以我再次请求帮助。我只需要能够解析URL并将它们定向到适当的页面，但通常我使用php来执行此操作，而且由于“后退”按钮使用缓存，我不确定我是否需要javascript解决方案，或者我是否需要更努力地找出强制刷新方法。。。。您会怎么做，或者其他使用单个index.php文件的站点会怎么做

---

另外，如果你需要的话，我会发布任何代码。看看我昨天的问题可能会有所帮助

您的问题与缓存机制无关。 我刚刚使用firebug检查了您的网站，我注意到在加载主页（没有ajax）后，您使用ajax异步加载请求的页面并更改地址中的URL，URL更改是由您的代码完成的，firefox忽略了这一点

---

使用代码更改的URL不会保留在浏览器的历史记录中，这就是为什么在您的情况下“后退”按钮不起作用的原因

编辑并添加了自己的工作代码示例

如果您仍在处理此问题： 我建议你看看这篇文章

我认为这解释了一个很好的方法，它不太复杂，可以利用HTML5的历史可能性

---

这是我最终在我的网站上实现的代码，我唯一的问题是回顾历史时我的可扩展菜单状态

HTML只使用index.HTML上带有#content main的DIV，因为所有外部HTML文件内容都将加载到其中。 应该指向该DIV的链接（锚点）被分配了一个类：ajaxLink 在引用的html文件中，只需编写内容，而不必编写头部或正文。 不过，如果不将脚本放在索引页上是有意义的，则可以包含脚本

$(function () {
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support

    /*unnecessary? I don't use the next 3 lines of code
    //To override the default action for the link(anchor tag), use the following jQuery code snippet.
    $("a.ajaxLink").on('click', function (e) {
        //code for the link action
        return false;
    });
    */

    //Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
    $("a.ajaxLink").on('click', function (e) {
        e.preventDefault();
        /*
        - if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
        - if commented, html5 nonsupported browers will reload the page to the specified link.
        */

        //get the link location that was clicked
        pageurl = $(this).attr('href');

        //to get the ajax content and display in div #content-main
        $('#content-main').load(pageurl);

        //to change the browser URL to the given link location
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);
        }
        //stop refreshing to the page given in
        return false;
    });

    //the below code is to override back button to get the ajax content without page reload
    //added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
    $(window).on('popstate', function(e) {
        if (e.originalEvent.state !== null) {
            $('#content-main').load(location.pathname);
        }
        else {
            $('body').load(location.pathname);
        }
    });
});

---

我认为这意味着我使用的history.js插件是错误的，因为它应该会解决这个问题，非常感谢您的侦探工作。请在您的答案中添加链接最相关的部分，并提供链接供参考。这确保了在链接过期的情况下答案的可用性。我暂时放弃了这个问题，但我会看看你的文章，看看它是否有帮助！