如何强制重新加载页时，使用浏览器的后退按钮？

我需要以某种方式检测用户是否已经按下了浏览器返回按钮，并使用 jquery 以刷新(重新加载内容和 CSS)的方式重新加载页面。

如何通过 jquery 检测这样的操作？

因为现在如果我在浏览器中使用返回按钮，有些元素不会重新加载。但是如果我在网站中使用链接，一切都会刷新并正确显示。

重要！

有些人可能误解了我想要的东西。我不想刷新当前页面。我想刷新页面后，我按后退按钮加载。以下是我更详细的解释:

  1. 用户正在访问第1页。
  2. 而在第一页-他点击链接到第二页。
  3. 他被重定向到第2页
  4. 现在(重要的部分!)他在浏览器中点击后退按钮，因为他想回到第一页
  5. 他回到了第一页——现在第一页正在重新加载，并且会有类似“你回来了!”这样的提示
200314 次浏览
小开

您应该使用一个隐藏的输入作为刷新指示器，其值为“ 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”。当您返回到页面时，它将是“ yes”，并且您的 JavaScript 代码将触发刷新。

小开

重新加载很容易，你应该使用:

location.reload(true);

而检测回来的是:

window.history.pushState('', null, './');
$(window).on('popstate', function() {
location.reload(true);
});
小开

当浏览器通过历史遍历导航到您的页面时，您可以使用 pageshow事件来处理以下情况:

window.addEventListener( "pageshow", function ( event ) {
var historyTraversal = event.persisted ||
( typeof window.performance != "undefined" &&
window.performance.navigation.type === 2 );
if ( historyTraversal ) {
// Handle page restore.
window.location.reload();
}
});

请注意，也可能涉及到 HTTP 缓存。您需要在服务器上设置适当的缓存相关 HTTP 头，以便只缓存需要缓存的资源。您还可以强制重新加载来指示浏览器忽略 HTTP 缓存: window.location.reload( true )。但我不认为这是最好的解决办法。

查看更多信息:

小开

只要使用 jquery:

jQuery( document ).ready(function( $ ) {


//Use this inside your document ready jQuery
$(window).on('popstate', function() {
location.reload(true);
});


});

以上将工作100% 时，后退或前进按钮已被点击使用阿贾克斯以及。

如果没有，那么脚本的其他部分一定是配置错误。

例如，如果使用 window.history.pushState('', null, './');，它可能不会重新加载类似上一篇文章中的示例之一

所以当你使用 history.pushState();的时候 确保你正确地使用它。

建议在大多数情况下，你只需要:

history.pushState(url, '', url);

没有窗口。历史... 并确保 网址被定义。

希望这能帮上忙。

小开

这已经是一段时间以来，因为这张贴，但我发现了一个更优雅的解决方案，如果你不需要支持旧的浏览器。

你可以检查一下

performance.navigation.type

包括浏览器支持在内的文档如下: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

因此，看看页面是否从历史加载使用回来，你可以这样做

if(performance.navigation.type == 2){
location.reload(true);
}

2表示通过导航到历史记录来访问该页

通过下面的链接、书签、表单提交或脚本，或者通过在地址栏中键入 URL 来访问页面。

通过单击 Relload 按钮或通过 Location.Reload ()方法访问页面。

还有别的办法吗

这里有详细资料: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

注意: Performance.Navigation.type现在已经被弃用，取而代之的是 类型，它返回‘导航’/‘ reload’/‘ back _ forward’/‘ prerender’: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type

小开

我找到了最好的答案，它对我来说非常有效

只要在你的链接中使用这个简单的脚本

<A HREF="javascript:history.go(0)">next page</A>

或按钮点击事件

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

当你使用它的时候，你首先刷新你的页面，然后转到下一个页面, 当您返回时，它将处于最后一个刷新状态。

我已经在 CAS 登录中使用了它，并且给了我我想要的。 希望能有所帮助。

从 给你找到的详细资料

小开

因为 performance.navigation现在已经被弃用，所以您可以尝试这样做:

var perfEntries = performance.getEntriesByType("navigation");


if (perfEntries[0].type === "back_forward") {
location.reload(true);
}
小开

对我来说，解决这个问题的另一种方法是禁用页面的缓存。使浏览器从服务器获取页面而不是使用缓存版本:

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");
小开

在 html 头文件中使用以下元标记，这对我很有用。

<meta http-equiv="Pragma" content="no-cache">
小开

目前，这是最新的方式重新加载页面，如果用户单击后退按钮。

const [entry] = performance.getEntriesByType("navigation");


// Show it in a nice table in the developer console
console.table(entry.toJSON());


if (entry["type"] === "back_forward")
location.reload();

请参阅 给你了解源代码

小开

我有同样的问题，后退按钮会更新显示在位置字段的网址，但页面内容没有改变。

正如其他人指出的那样，通过捕获“ pageshow”-event，可以检测 document.location 中的更改是由后退按钮还是其他什么原因引起的。

但我的问题是，当我点击后退按钮时，“页面显示”根本没有触发。唯一发生的情况是位置字段中的 URL 发生了变化(应该是这样) ，但页面内容没有变化。为什么？

我找到了理解是什么导致了这种情况的关键: https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event。

它说“页面显示”-事件是由“从同一个窗口或选项卡中的另一个页面导航到该页面”或“使用浏览器的前进或后退按钮返回该页面”引起的

这让我不禁问道: “我真的回到了那一页吗?”.“是什么标识了一个页面?”.如果我的后退按钮不是“返回页面”，那么当然不会触发“显示页面”。所以我真的是“回到一页”吗？还是我一直都在同一个“页面”上？什么是“一页”？如何识别页面？通过网址吗？

事实证明我点击后退按钮并没有“改变页面”。它只是改变了我的 url 中的 HASH (# + something)。当 URL 中唯一改变的是散列时，浏览器似乎并不认为它是另一个页面。

因此，我修改了在单击按钮时操纵 URL 的代码。除了更改散列之外，我还添加了一个查询参数，其值与散列相同，但没有“ #”。所以我的新网址看起来像:

/some Url? id = something # something

我的应用程序认为是“不同页面”的每个页面现在都有不同的查询字符串参数‘ id’值。就浏览器而言，它们是不同的“页面”。这解决了问题。“页面显示”-事件开始触发和后退按钮工作。

小开

适用于大多数浏览器的 JS 解决方案

这个页面上的许多其他方法对我来说都不起作用，也许是因为当用户导航回页面时，“ bfcache”阻止了任何事情的发生。然而，我发现注册一个 window.onbeforeunload处理程序在大多数浏览器中对我都有效，我相信这是因为它是 隐式地使“ bfcache”无效。密码是这样的:

window.onbeforeunload = function() {
window.location.reload(true);
}

这个事件可能会在其他情况下触发，而不是“返回”按钮导航，但这与我的情况无关。2021年8月，我在以下平台上测试了最新版本的上市浏览器:

  • Linux: 在 Chrome 和 Firefox 中工作。
  • Android: 可以在 Chrome，Firefox 和 Opera 中使用。
  • OS X: 在 Chrome 和 Safari 中工作。
  • IOS: Safari 中的 没用。

就我而言，我并不真正关心手机。我确实关心 IE，但是我没有 IE 的访问权限，所以我不能测试它。如果有人在 IE 上尝试这个，并且可以在评论中报告结果，那将会很有帮助。

修复 iOS Safari 的服务器端响应头

我发现，如果我使用 Cache-Control响应头使浏览器缓存失效，iOS Safari 也可以工作

Cache-Control: no-store, must-revalidate

修复 iOS Safari。请参阅 这么回答了解如何在各种平台上设置 Cache-Control响应头。

小开

这可以在11月21日最新的 Firefox 和 Chrome 中使用。

    window.addEventListener( "pageshow", function ( event ) {
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
location.reload();
}
});
小开

在 Chrome96中，当你使用后退按钮时，类型是‘ reload’

小开

我试了以前所有的答案，没有一个有用。

最终我找到了这个解决方案，它确实奏效了:

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

下面是一个用于 Safari 检测的版本，如果检测到，则执行官方已经废弃的旧代码(但仍在 Safari 中)。

let isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') == -1 &&
navigator.userAgent.indexOf('FxiOS') == -1;


if(isSafari) {
window.addEventListener( "pageshow", function ( event ) {
let historyTraversal = event.persisted ||
( typeof window.performance != "undefined" &&
window.performance.navigation.type === 2 );
if (historyTraversal) {
// Handle page restore.
window.location.reload();
}
});
} else {
let perfEntries = performance.getEntriesByType("navigation")
if (perfEntries[0].type === "back_forward") {
window.location.reload(true);
}
}

提交答案