通过浏览器后退按钮到达时重新加载网站

Posted 2023-03-09

【中文标题】通过浏览器后退按钮到达时重新加载网站

【英文标题】：Reload the site when reached via browsers back button

【发布时间】：2012-02-21 04:52:26

【问题描述】：

问题：我有一个包含动态内容的网站，每次用户看到它时都需要重新加载。这包括当用户点击另一个站点上的后退按钮并来到需要重新加载的站点时的用例。大多数（所有？）浏览器在此事件之后都不会刷新网站。

我的解决方案（不太有效）： http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_javascript

window.onbeforeunload = function () 
    // This function does nothing.  It won't spawn a confirmation dialog
    // But it will ensure that the page is not cached by the browser.

但它仍然没有刷新页面。

有什么想法可以影响/阻止所需的行为吗？对此问题还有其他解决方案建议吗？

编辑：

设置如下：

Cache-Control   private, must-revalidate, max-age=0
Expires Sat, 26 Jul 1997 05:00:00 GMT
Pragma  no-cache

和：

<meta name="cache-control" content="no-cache" />
<meta name="expires" content="0" />
<meta name="pragma" content="no-cache" />

还是没有成功。

【问题讨论】：

您不应试图阻止浏览器缓存页面。当我使用后退按钮时，我希望我所在的页面会重新出现，就像我离开时一样。但如果该页面有自动更新元素，那么当我返回时，这些元素应该会继续更新。

很遗憾，有时您需要这样做，例如：quora.com/…

【参考方案1】：

有帮助吗？

Reload the page on hitting back button

或使用元标记，

<meta http-equiv="cache-control" content="no-cache"> <!-- tells browser not to cache -->
<meta http-equiv="expires" content="0"> <!-- says that the cache expires 'now' -->
<meta http-equiv="pragma" content="no-cache"> <!-- says not to use cached stuff, if there is any -->

不确定，元数据会有所帮助，但您可以测试一下。

【参考方案2】：

我认为this question 会帮助你。

[edit(Nickolay)：这就是它以这种方式工作的原因：webkit.org， developer.mozilla.org。请阅读那些文章（或我的摘要） 下面的单独答案）并考虑您是否真的需要这样做 并使您的用户的页面加载速度变慢。]

Nickolay's answer

【参考方案3】：

我认为您需要重新加载 - window.location.reload()。但主要问题是跨浏览器的简单解决方案。 php上的代码：

$inline_javascript = 'var uniqueString = ' . time() . ';' .
                     'if (uniqueString === window.name) ' .
                     '  window.location.relace();' .
                     ' else ' .
                     '  window.name = uniqueString;' .
                     '';

并在 .css 和 js 文件之前打印出来。

【参考方案4】：

这对我有用，在 drupal 7 (php) 中，每当用户注销时，他可以按后退按钮并能够访问特权页面。如果页面被刷新，那么他会被引导到首页，在那里他无能为力。

    <?php 
        //refresh the page after log-out and back button
        if (!user_is_logged_in())
        

          print '<input type="hidden" id="refreshed" value="no">
                 <script type="text/javascript">
                  onload=function()

                    var e=document.getElementById("refreshed");
                    if(e.value=="no")e.value="yes";
                    elsee.value="no";location.reload();
                  
                </script>';
        
  ?>

有人发帖here：谢谢，希望对你也有帮助。

【参考方案5】：

您应该使用隐藏的input 作为刷新指示器，其值为“no”：

<input type="hidden" id="refresh" value="no">

现在使用 jQuery，你可以检查它的值：

$(document).ready(function(e) 
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
);

当您单击返回按钮时，隐藏字段中的值将保持与您最初离开页面时相同的值。

所以当您第一次加载页面时，输入的值为“no”。当您返回该页面时，它会显示“是”并且您的 JavaScript 代码将触发刷新。

【讨论】：

为我工作。我不得不使用 location.reload(true) 来强制服务器重新加载，否则它只是从缓存中重新加载。

这意味着整个页面必须加载，才能决定是否需要重新加载，对吧？

如果您的页面可能是 POST 请求的结果，请不要使用 location.reload()。在这种情况下，请改用location.href = location.href 以避免浏览器警告有关重新提交表单。如果需要，您可以添加缓存破坏器（例如 ?_cache=123）和/或使用 HTTP 缓存控制标头。

@Archimedix : 使用 reload(true) 将强制从服务器重新加载当前页面，因此不会有问题。

对于 Chrome，input type="hidden" 不起作用。你必须使用input type="text" style="display:none"。

【参考方案6】：

我找到了解决方案：将no-store 添加到Cache-Control 标头。我在 http 标头中做到了，但我想它也可以与元标记一起使用。在 Chromium 和 Firefox 中测试。

另见How to stop chrome from caching

【参考方案7】：

试试这个：

header("Cache-Control: no-store, must-revalidate, max-age=0");
header("Pragma: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");

// 过去的日期

【参考方案8】：

您可以在自定义模块中使用此代码：

<?php 
/**
 * Implements hook_init().
 */
function MY_MODULE_init() 
  drupal_add_http_header('Cache-Control', 'no-cache, no-store, max-age=0, must-revalidate, post-check=0, pre-check=0');

?>

【参考方案9】：

在尝试了各种不同的解决方案后，我发现 JavaScript Navigation Timing API 最适合检测与后退按钮的交互。

你所要做的就是：

if(!!window.performance && window.performance.navigation.type == 2)

    window.location.reload();

它适用于所有主流浏览器：http://caniuse.com/#search=Navigation%20Timing%20API

Is My Page Being Loaded from the Browser Cache?

【讨论】：

感谢@Hasan-akhtar，它对我有用，我相信它也适用于其他人

【参考方案10】：

您可以使用 window.onpageshow 事件来测试页面是否来自缓存。

window.onpageshow = function (event) 
  if (event.persisted) 
    window.location.reload(); //reload page if it has been loaded from cache
  
;

请注意，这需要比以前的一些答案（例如 IE11+）更现代的浏览器。有关浏览器支持的更多信息，请参阅here

【讨论】：

这是唯一的答案 - 当您单击后退或前进时，页面从 BFCache（而不是 HttpCache）加载，这是页面的一种“冻结”图像你离开了它。 pageshow 事件将在设置该标志的情况下触发。不幸的是，如果页面是从用户导航加载并由“http 缓存”缓存的，它不会触发。

【参考方案11】：

这是我用来在浏览器后退按钮上重新加载页面的：

if(performance.getEntriesByType("navigation")[0].type == "back_forward")
    location.reload();