Question

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

P.S。如果你需要看，我会发布任何代码。从昨天看我的问题可能有所帮助。 How to refresh page on back button click?

Answer 1

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

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

Answer 2

已编辑，添加了自己的代码示例

如果你还在努力：我建议你看看这篇文章 change-browser-url-without-page-reload

我认为它解释了一种不太复杂的方法，无法利用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);
        }
    });
});

如何使用ajax单击单页网站上的后退按钮来解析页面导航的URL？

2 个答案: