history.js后退按钮出现问题 [英] Problems with history.js back button

问题描述

我正在使用history.js更新我的网站，效果很好.这是一个基于PHP的网上商店，如果它检测到ajax请求，则仅将JSON与主要div的数据一起提供:

I'm using history.js to update my site, which works great. It is a PHP based webshop, that, if it detects an ajax request, only serves JSON with the main div's data:

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) 
    && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {}

在加载时，我将链接关闭，此方法取自history.js的github: https://github.com/browserstate/History.js/

On load, I ajaxify my links, an approach taken from history.js' github: https://github.com/browserstate/History.js/

function ajaxify() {
var History = window.History;
$('a[rel="ajax"]').click(function(e){
    if(History.enabled) {
        e.preventDefault();
        var url = $(this).attr("href");
        var options = {};
        History.pushState(null, 'Shop', url);
    }
    else {
        window.location.replace(url);
    }
});
}

这里有事件处理程序:

History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    var returnLocation = history.location || document.location;
    var url = returnLocation.pathname;
    var options = searchString(returnLocation.search);
    shopUpdate(url,options)
});

这是ajax调用:

function shopUpdate(url,options) {
     $.ajax({
        url: url,
        type: "GET",
        dataType:'json',
        data: options,
        success: function(data, textStatus, jqXHR){
            $('#shop').html(data.page);
            ajaxify();  
        }
    });
}

有一种情况会破坏所有内容:有些链接不是"ajaxified"的，当我单击几个ajax链接，然后是"regular"的，然后是"back"时，我得到了原始的JSON输出.网址正确，当我重新加载时，我得到了想要的页面.就像PHP认为它是Ajax并提供JSON一样，但是History状态更改不会触发，因为我是通过常规链接到达的.我很困惑，感谢您的帮助！

There's on scenario that breaks everything: Some links aren't "ajaxified" and when I click a couple of ajax links, then a "regular" one, and then "back" I get the raw JSON output. The Url is right and when I reload, I get the page I want. It's like PHP thinks it's Ajax and serves JSON but History statechange doesn't fire since I got there via a regular link. I'm quite confused and appreciate any help!

谢谢，托马斯

推荐答案

事实证明，这与Chrome，后退按钮和缓存有关.我在JSON标头中添加了 Cache-Control:no-store ，现在可以使用了.

It turned out this was a problem with Chrome, the back button and the cache. I added Cache-Control: no-store to the JSON Header and now it works.

这篇关于history.js后退按钮出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！