点击后退按钮如何刷新页面？

Question

我使用 .htaccess 文件将所有流量路由到单个 index.php 文件。以下代码用于指导流量，但出现了无法使用回退按钮的问题。我不知道该怎么做才能让回退按钮正常工作。我尝试了各种方法并进行了大量的谷歌搜索，但都没有解决问题，因此希望这里的某个人能提供帮助！

<?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() 或其他类似的功能！只是需要知道正确的语法!!

- CodeManiak

---

返回按钮对于我们每一个Web程序员来说都是个痛点... - Goikiu

哈哈哈哈，听到这个消息真是太好了，尽管它并没有回答我的问题。我还以为只有我这样呢 :) - CodeManiak

问题在于当你点击返回按钮时，浏览器会显示上一个URL，但实际上会返回到上一个页面加载。任何AJAX内容都会被遗忘，因此您需要重新加载它。 - GolezTrol

@dandavis试过那个了，没有运气。你现在碰巧在build工作吗？ - CodeManiak

我应该提到，你的问题与PHP无关，而是与你使用的历史脚本及其缺陷有关。如果你声明一个变量并点击返回，那么这个变量仍然存在：页面永远不会重新加载，因此也不会再次ping PHP / Apache。此外，当你点击返回时，onload / ready / onbeforeunload不会重新触发，因为页面实际上并没有重新加载。请参见https://developer.mozilla.org/en-US/docs/Web/API/Window.onpopstate。 - dandavis

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

- Gopal

---

如果需要考虑HTTP 1.0兼容性，请考虑包含“Pragma: no-cache”。 - zamnuts

如果PHP已经发送了HTTP响应体，则无法修改标头信息。调用 header 应该在向浏览器发送任何输出之前完成：检查任何文件包含的 echo/print 语句，不良空格和未封装在PHP中的HTML。 - zamnuts

同意 @zamnuts 的观点，或者尝试实现另一个解决方案...请参见编辑。 - Gopal

@CodeManiak，如果有很多HTML也没关系，只要确保你的头部调用在所有HTML之前！ :) - zamnuts

+1 +1 +1 但愿我能给这个简单的解决方案投更多的赞。一个非动态创建的输入元素，通过Javascript设置其值，在按下返回按钮后仍然保持其值！太棒了！因此，通过设置隐藏元素的值，即使在按下返回按钮后JavaScript被重新初始化，也可以保存最后的JavaScript状态。太棒了！+1 +1 +1 - i_a

Answer 2

一个更近期的解决方案是使用PerformanceNavigation接口：

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

当值为2时，意味着“通过浏览历史记录访问了该页面”。

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

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

- sfscs

---

我的 IDE 提示我这个已经不建议使用了，而应该使用 window.performance.getEntriesByType('navigation')[0].type === "back_forward"。 - SeinopSys

@SeinopSys 很好知道！我深入挖掘了一下，发现这个method是Navigation Timing Level 2的一部分，该规范仍处于草案阶段，但将来很可能成为标准。 - sfscs

是的，是的，千遍万遍的是。甚至IE9也支持。 - UXCODA

两年后再来看，导航计时2仍然是一份工作草案 :/。网络速度太慢了。 - sfscs

Answer 3

隐藏输入解决方案在Safari浏览器中对我无效。下面的解决方案有效，并来自于这里。

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

- t0vana

Answer 4

我找到了两种处理这个问题的方法。根据你的情况选择最好的方式。 这些解决方案在Firefox 53和Safari 10.1上进行了测试。

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

if (!!window.performance && window.performance.navigation.type === 2) {
    // 值为2表示“通过浏览历史访问了页面”
    console.log('重新加载');
    window.location.reload(); // 重新加载整个页面
}

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

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

- Javan R.

Answer 5

这里发布的简单解决方案强制刷新后退按钮页面有效...

我试图通过浏览器强制重新下载页面，使用户在单击后退按钮时重新下载页面，但是没有任何效果。现代浏览器似乎有单独的页面缓存，可以存储页面的完整状态（包括JavaScript生成的DOM元素），因此当用户按下后退按钮时，以前的页面会立即显示在用户离开它的状态中。如果您想要强制浏览器在后退按钮上重新加载页面，请将onunload =“”添加到您的（X）HTML body元素：

<body onunload="">

这将禁用特殊缓存并在用户按下后退按钮时强制重新加载页面。在使用之前请三思。需要这样的解决方案是提示您的网站导航概念存在缺陷。

- jahackbeth

---

太好了，它起作用了。非常感谢，这解决了我长期以来一直面临的问题，我找不到解决方案。 - sadia

@bummi 这个解决方案在IE上不起作用，你有什么其他的想法或替代方案吗？ - sadia

Answer 6

您可以使用以下代码来通过点击“后退”按钮刷新页面：

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

- Rohan Venapusala

Answer 7

您是否尝试过像这样的方法？未经测试...

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

- reyaner

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

- Ivan Laharnar mink.si

Answer 9

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

- Agustin Gandara

---

请问您能解释一下这段代码的作用吗？因为看起来如果您试图离开当前页面，它会触发一个“返回”操作。所以如果我想要导航到另一个页面，它会覆盖掉我的操作吗？ - Lee Oades

当页面返回按钮事件被调用时（它被覆盖），我们将重定向到当前页面的历史记录。 - Agustin Gandara

Answer 10

Ahem u_u

正如我所说，返回按钮对我们每个人都是一个痛点......也就是说......

只要您正常加载页面，它会带来很多麻烦......对于标准的“网站”，它不会有太大变化......但我认为你可以做出这样的东西

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

但长期的解决方案将在“onload”事件中放置代码以通过Ajax获取数据，这样您就可以（使用Javascript）运行所需的代码，例如刷新页面。

- Goikiu