如何在单击后退按钮时刷新页面？答案

【问题标题】：How to refresh page on back button click?如何在单击后退按钮时刷新页面？
【发布时间】：2014-01-20 20:45:05
【问题描述】：

我使用 .htaccess 将我的所有流量路由到单个 index.php 文件。下面的代码用于引导流量，但由于某种原因，它不能与后退按钮一起使用。我不知道该怎么做才能使后退按钮正常工作。我已经尝试了各种方法并在 Google 上搜索了很多东西，但都没有奏效，所以我希望这里有人可以提供帮助！

<?php
   if(isset($_GET['parameters'])) {
      if($_GET['parameters'] == "repair")
         include 'repair.html';
      else if($_GET['parameters'] == "training")
         include 'training.html';
      else if($_GET['parameters'] == "products")
         include 'products.html';
      else if($_GET['parameters'] == "about")
         include 'about.html';
      else if($_GET['parameters'] == "employees")
         include 'employees.html';
      else if($_GET['parameters'] == "training")
         include 'training.html';
      else if($_GET['parameters'] == "newaccount")
         include 'newaccount.html';
      else if($_GET['parameters'] == "contact")
         include 'contact.html';
      else if($_GET['parameters'] == "recommended")
         include 'recommended.html';
      else if($_GET['parameters'] == "careers")
         include 'careers.html';
      else
         include 'home.html';
   }
   else
      include 'home.html';
?>

到目前为止，我已经尝试并未能使用：window.onbeforeunload body onunload=""

一定有办法去onunload=location.reload() 什么的！不知何故必须知道语法！

【问题讨论】：

后退按钮...对于我们每个 Web 程序员来说，在某些地方都是一种痛苦...
hahahaha 这真是太好了，尽管它没有回答我的问题。我以为只有我 :)
问题是当你按回的时候，浏览器显示的是最后一个url，但是却返回到最后一次实际加载的页面。任何 AJAX 内容都会被遗忘，因此您必须重新加载它。
完全如此，这就是为什么我有 php 来处理这些东西但不知何故它失败了！
if(!self.z){self.z=1; [].slice.call(document.links).filter(/./.test, RegExp(location))[0].click();}

标签： javascript php jquery ajax .htaccess

【解决方案1】：

试试这个...未经测试。我希望它对你有用。

创建一个新的 php 文件。您可以使用后退和前进按钮，页面上的数字/时间戳会始终更新。

<?php
header("Cache-Control: no-store, must-revalidate, max-age=0");
header("Pragma: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
echo time();
?>
<a href="http://google.com">aaaaaaaaaaaaa</a>

或者

找到另一个解决方案

当用户点击返回按钮时应该触发 onload 事件。不是通过 JavaScript 创建的元素将保留它们的值。我建议在 INPUT TYPE="hidden" 设置为 display:none 中保留动态创建的元素中使用的数据的备份，然后使用输入的值进行 onload 以将动态元素重建为原来的样子。

<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();}
}

【讨论】：

啊，是的，这是我尝试的第三个解决方案，但我不断收到一些愚蠢的错误，我无法弄清楚页面已经被加载。我应该在哪里包含这些标题？当我尝试将它们包含在我的 index.php 文件中的所有内容之上时，我仍然出错
如果担心，请考虑包含Pragma: no-cache 以实现 HTTP 1.0 兼容性。
我收到此错误Cannot modify header information - headers already sent by.....。在我问这个问题之前我已经用谷歌搜索并试图找出这个错误并且未能找到解决方案......那么我该怎么做才能解决它？
@CodeManiak 如果 PHP 已经发送了 HTTP 响应的正文，则无法修改标头信息。调用header 应该在任何输出被发送到浏览器之前完成：检查任何文件包括 echo/print 语句、恶意空格和没有被 PHP 封装的 HTML。
+1 +1 +1 希望我能对这个简单的解决方案进行更多投票。给定由 Javascript 设置的值的非动态创建的输入元素，在按下后退按钮时保留其值！！杰出的！因此，通过设置隐藏元素的值，即使按下后退按钮时从头开始重新初始化 javascript，也可以保存最后的 javascript 状态。杰出的！！！ +1 +1 +1

【解决方案2】：

最近的解决方案是使用The PerformanceNavigation interface：

if(!!window.performance && window.performance.navigation.type === 2)
{
    console.log('Reloading');
    window.location.reload();
}

其中值 2 表示“通过导航到历史记录访问该页面”。

在此处查看浏览器支持： http://caniuse.com/#search=Navigation%20Timing%20API

Reload the site when reached via browsers back button

【讨论】：

我的 IDE 告诉我这已被弃用，我不得不改用 window.performance.getEntriesByType('navigation')[0].type === "back_forward"。
@SeinopSys 很高兴知道！我挖得更深了，method 是Navigation Timing Level 2 的一部分，这仍然是一个工作草案，但将来可能会成为标准。
是的，是的，一千次是的。甚至受 IE9 支持。
两年后才回来查看，Navigation Timing Level 2 仍然是一个工作草案：/。网络移动太慢了。

【解决方案3】：

隐藏输入解决方案在 Safari 中对我不起作用。下面的解决方案有效，来自here。

window.onpageshow = function(event) {
if (event.persisted) {
    window.location.reload() 
}
};

【讨论】：

【解决方案4】：

我找到了两种方法来处理这个问题。选择最适合您的情况。在 Firefox 53 和 Safari 10.1 上测试的解决方案

1.检测用户是否正在使用后退/前进按钮，然后重新加载整个页面

if (!!window.performance && window.performance.navigation.type === 2) {
            // value 2 means "The page was accessed by navigating into the history"
            console.log('Reloading');
            window.location.reload(); // reload whole page

        }

2。如果页面被缓存，则重新加载整个页面

window.onpageshow = function (event) {
        if (event.persisted) {
            window.location.reload();
        }
    };

【讨论】：

【解决方案5】：

这里发布的这个简单的解决方案Force page refresh on back button 工作...

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

<body onunload="">

这将禁用特殊缓存并在用户按下时强制页面重新加载返回键。使用前请三思。需要这样的事实解决方案暗示您的网站导航概念存在缺陷。

【讨论】：

它的工作。非常感谢，这解决了我长期以来面临的问题，但没有找到解决方案。
@bummi 这个解决方案在 IE 中不起作用，知道任何替代解决方案吗？

【解决方案6】：

你尝试过这样的事情吗？未测试...

$(document).ready(function(){
    $('.ajaxAnchor').on('click', function (event){ 
        event.preventDefault(); 
        var url = $(this).attr('href');
        $.get(url, function(data) {
            $('section.center').html(data);
            var shortened = url.substring(0,url.length - 5);
            window.location.hash = shortened;
        });
    });
});

【讨论】：

【解决方案7】：

您可以通过单击返回按钮使用以下方法刷新页面：

window.addEventListener('popstate', () => {
  location.reload();
}, false);

【讨论】：

【解决方案8】：

首先在代码中插入字段：

<input id="reloadValue" type="hidden" name="reloadValue" value="" />

然后运行 jQuery：

<script type="text/javascript">
   jQuery(document).ready(function()
    {
            var d = new Date();
            d = d.getTime();
            if (jQuery('#reloadValue').val().length === 0)
            {
                    jQuery('#reloadValue').val(d);
                    jQuery('body').show();
            }
            else
            {
                    jQuery('#reloadValue').val('');
                    location.reload();
            }
    });

【讨论】：

【解决方案9】：

window.onbeforeunload = function() { redirect(window.history.back(1)); };

【讨论】：

请你解释一下这是做什么的？因为看起来如果您尝试离开页面，则会触发“返回”。所以如果我试图导航到另一个页面，它会覆盖它吗？
当页面返回按钮事件被调用（它覆盖）我们重定向到历史当前页面

【解决方案10】：

咳咳你_u

正如我所说的，后退按钮在某些地方对我们每个人来说都是一种痛苦……也就是说……

只要你正常加载页面，它就会带来很多麻烦......对于一个标准的“网站”，它不会改变那么多......但是我认为你可以做这样的事情

用户每次访问您的页面 .php 以选择要加载的内容。您可以尝试使用缓存（不缓存页面）并可能过期。

但长期的解决方案是在“onload”事件上放置一个代码来获取数据到 Ajax，这样你就可以（使用 Javascript）运行你想要的代码，例如刷新页面。

【讨论】：