按下后退按钮时强制重新加载/刷新 - Force reload/refresh when pressing the back button

我会尽力解释这一点。

我有一个应用程序，在我的view页面中显示了50多个项目。用户可以单击单个项目并转到update页面以更新项目信息。除了用户完成单个项目信息的更新并在浏览器上点击"返回"按钮到上一个view page之后，一切都很好。旧的项目信息（更新前）仍然存在。用户必须点击刷新才能查看更新的信息。还不错，但我希望能提供更好的用户体验。有什么办法解决这个问题吗？非常感谢。

我使用以下四行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");

该键使用缓存控制标头的"no store"子句。

"fb缓存"可能真的很烦人。这里有一个简单的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中进行了测试。

我认为你必须使用JS才能实现这一点，因为PHP无法知道用户可以访问哪些浏览器控件…

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

幸运的是，我们不必支持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:上历史对象的信息

MDN-历史对象

MDN-操作浏览器历史

 if (window.name == "reloader") {
            window.name = "";
            location.reload();
        }
window.onbeforeunload = function() {
                window.name = "reloader"; 
            }

在每一页中添加这两个函数

以上所有解决方案都不适用于我。这个简单的解决方案张贴在这里工作。。。

当用户点击后退按钮时，我试图强制浏览器再次下载页面，但没有成功。现代浏览器似乎有单独的页面缓存，它存储页面的完整状态（包括JavaScript生成的DOM元素），所以当用户按下后退按钮时，上一个页面会立即显示为用户离开的状态。如果你想强制浏览器在后退按钮上重新加载页面，请将onunload="添加到你的（X）HTML主体元素：

<body onunload="">

这将禁用特殊缓存，并在用户按下时强制重新加载页面后退按钮。三思而后行解决方案是一个提示，您的网站导航概念是有缺陷的。

在网上搜索了几天后，我终于找到了解决方案，并添加了以下内容：

<script>
 window.onbeforeunload = function(){window.location.reload();}
</script>

这会很有魅力你会感谢我

每当您访问该页面时，此代码都会重新加载该页面。

好吧，你可以在更新页面上提供一个内置的后退按钮，将它们发送到新的页面（比如链接<a href="<?= $_SERVER['HTTP_REFERRER']; ?>">BACK</a>），或者在页面上放一些脚本，强制它在每次点击页面时提取数据，无论是新的印象，还是使用了后退按钮。

这里有一个我在一些页面中使用的解决方案。将此添加到在进行更改的页面中。

window.onbeforeunload = function() {
     window.name = "reloader"; 
        }

这会在您离开这些页面时触发。如果进行了更改，也可以触发它。以便它不会不必要地重新加载需要重新加载的页面。然后在浏览器"返回"使用后要重新加载的页面上。

if (window.name == "reloader")
      {
        window.name = "no";
        reloadPage(); 
      }

这将触发页面上的重新加载，您需要重新加载。。。希望这能有所帮助：）哦，顺便说一句，这是js。

这是我使用的解决方案：

<?php
session_start();
if (!$_SESSION['reloaded']) {$_SESSION['reloaded'] = time();}
else if ($_SESSION['reloaded'] && $_SESSION['reloaded'] == time()) { ?> 
<script> 
location.reload(); 
</script> 
<?php } ?>

制作一个隐藏的复选框并使用下面的代码（coffeescript）

window.location.reload()  if $("#refreshCheck")[0].checked
  $("#refreshCheck")[0].checked = true

我使用jquery和php脚本强制在backbutton上重新加载。window.unload部分仅在firefox中需要。未注释的超时1秒和正文附加部分仅用于说明功能。window.location.reload（true）将给出与window.locationhref=window.locationhref相同的结果；

jquery:

<script>
    $(window).unload(function() {});

        $.get('h.php',function(data){
            if($.trim(data)=='first'){
               // $('body').append(data)
               // setTimeout(function(){
               window.location.href = window.location.href;
               // },1000)
            }
            else {
                // $('body').append(data)
            }
        });
</script>

h.php:

<?php session_start(); ?>
<?php 
if(!$_SESSION['reloaded']){
    echo 'first';   
    $_SESSION['reloaded']=1;
}
else {
    echo 'second';
    unset($_SESSION['reloaded']);   
}
?>

您可以在视图页面上发送HTTP头，告诉浏览器页面无法缓存。这意味着浏览器每次访问页面时都需要从服务器请求页面，这意味着它总是显示最新信息。

页眉需要在发送任何其他内容之前发送，因此请将以下内容放在视图页面的顶部。

header("Cache-Control: no-cache, must-revalidate");