按下后退按钮时强制重新加载/刷新

Question

我会尽力解释这一点.

我有一个应用程序,显示我的view页面中的50多个项目.用户可以单击单个项目并转到update页面以更新项目信息.除了用户完成更新单个项目信息并点击浏览器上的"返回"按钮到之前的状态后,一切正常view page.旧项目信息(更新前)仍然存在.用户必须点击刷新才能看到更新的信息.它并没有那么糟糕,但我希望提供更好的用户体验.有什么想法解决这个问题？非常感谢.

Answer 1

我使用这四行PHP代码:

// any valid date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// always modified right now
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
// HTTP/1.1
header("Cache-Control: private, no-store, max-age=0, no-cache, must-revalidate, post-check=0, pre-check=0");
// HTTP/1.0
header("Pragma: no-cache");

关键是使用Cache-Control标头的"no-store"子句.

Answer 2

"fb-cache"真的很烦人.这是一个简单的JavaScript方法:

window.onpageshow = function(evt) {
    // If persisted then it is in the page cache, force a reload of the page.
    if (evt.persisted) {
        document.body.style.display = "none";
        location.reload();
    }
};

在Safari 6和IE10中测试过.

Answer 3

我认为你必须与JS一起工作,因为PHP无法知道用户有权访问哪些浏览器控件...

也许这会有所帮助:http: //www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

Answer 4

幸运的是，我们不必支持 IE10 以下的浏览器，因此，如果您愿意或有足够的特权仅支持支持 HTML5 的浏览器，则以下操作应该可行：

/*
 * The following is intentional, to force Firefox to run 
 * this JS snippet after a history invoked back/forward navigation.
 */
window.onunload = function(){};    

function formatTime(t) {
    return t.getHours() + ':' + t.getMinutes() + ':' + t.getSeconds();
}

if (window.history.state != null && window.history.state.hasOwnProperty('historic')) {
    if (window.history.state.historic == true) {
        document.body.style.display = 'none';
        console.log('I was here before at ' + formatTime(window.history.state.last_visit));
        window.history.replaceState({historic: false}, '');
        window.location.reload();
    } else {
        console.log('I was forced to reload, but WELCOME BACK!');
        window.history.replaceState({
            historic  : true,
            last_visit: new Date()
        }, '');
    }
} else {
    console.log('This is my first visit to ' + window.location.pathname);
    window.history.replaceState({
        historic  : true,
        last_visit: new Date()
    }, '');
}

好吧，这是没有注释和松弛的代码：

window.onunload = function(){};

if (window.history.state != null && window.history.state.hasOwnProperty('historic')) {
    if (window.history.state.historic == true) {
        document.body.style.display = 'none';
        window.history.replaceState({historic: false}, '');
        window.location.reload();
    } else {
        window.history.replaceState({historic  : true}, '');
    }
} else {
    window.history.replaceState({historic  : true}, '');
}

将其放在结束正文标签之前，您将获得一个相当干净的解决方案。

这将适用于单击后退/前进的任意组合，并且当用户登陆新页面时，不会发生强制重新加载。

在 MDN 上阅读有关 History 对象的更多信息：

MDN - 历史对象

MDN - 操纵浏览器历史记录