Question

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

我的解决方案（不太合适）： 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" />

仍然没有成功。

Answer 1

您应该使用隐藏的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代码将触发刷新。

Answer 2

在尝试了各种不同的解决方案后，我发现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?

Answer 3

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

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

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

Answer 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";
                    else{e.value="no";location.reload();}
                  }
                </script>';
        }
  ?>

有人贴了here：谢谢，我希望它对你也有帮助。

Answer 5

有帮助吗？

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 -->

不确定，meta会有所帮助，但你可以测试它。

Answer 6

我找到了一个解决方案：将no-store添加到Cache-Control标头中。我在http标头中做到了，但我想它也可以用于meta标签。在Chromium和Firefox中测试过。

另见How to stop chrome from caching

Answer 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");

//过去的日期

Answer 8

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

float: left

Answer 9

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

func setupBackgroundViews()
{
    tableView.backgroundView = customBackgroundView
    anotherView.topAnchor.constraint(equalTo: customBackgroundView.safeAreaLayoutGuide.topAnchor).isActive = true
}

Answer 10

我认为this question会对你有帮助。

[编辑（Nickolay）：这就是为什么它的工作原理：webkit.org， developer.mozilla.org。请阅读这些文章（或我的摘要在下面单独回答）并考虑你是否真的需要这样做并使用户的网页加载速度变慢。]

Nickolay's answer

Answer 11

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

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

然后在css和js文件中打印出来。

通过浏览器返回按钮到达时重新加载站点

11 个答案: