JavaScript - bfcache/pageshow 事件 - event.persisted 总是设置为 false？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17432899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript - bfcache/pageshow event - event.persisted always set to false?
提问by Eoin
In a standard Java / SpringMVC / JSP / jQuery web-app, I'm trying to detect a "Back" (or history.go(-1)) event, in order to refresh (AJAX) a summary component/panel content when I return to a page (where we can change the backend data that is displayed by the summary component).
在标准的 Java / SpringMVC / JSP / jQuery web 应用程序中，我试图检测“返回”（或 history.go(-1)）事件，以便在以下情况下刷新（AJAX）摘要组件/面板内容我返回到一个页面（我们可以在其中更改摘要组件显示的后端数据）。
I tried the following in JavaScript (following some posts on StackExchange re how to achieve this):
我在 JavaScript 中尝试了以下操作（按照 StackExchange 上的一些帖子重新实现这一点）：
<script type="text/javascript">
$(document).ready(function() {
window.onpageshow = function(event) {
console.log("Event:");
console.dir(event);
if (event.persisted) {
alert("non-jQuery - back to page - loaded from bfcache");
} else {
alert("non-jQuery - loaded page from server");
}
};
$(window).on("pageshow", function(event){
console.log("Event:");
console.dir(event);
if (event.originalEvent.persisted) {
alert("jquery - back to page - loaded from bfcache");
} else {
alert("jquery - loaded page from server");
}
});
});
</script>
I am running OpenSUSE Linux and have tried this with FireFox and Chrome (latest versions), but every time the event's persistedattribute is set to false(I can see this in the JavaScript console and by the alerts that pop-up from the above code). By every time, I mean, regardless of whether it was loaded from the server or shown again via the Back button (or a 'Back' link).
我正在运行 OpenSUSE Linux 并在 FireFox 和 Chrome（最新版本）上尝试过这个，但是每次事件的persisted属性设置为false（我可以在 JavaScript 控制台和从上面的代码弹出的警报中看到这一点）。每次，我的意思是，无论它是从服务器加载还是通过后退按钮（或“后退”链接）再次显示。
My intention was to make an AJAX call to reload the summary component/panel with the updated data from the server if the page was showing via the Back button or history.go(-1)call.
如果页面是通过“后退”按钮或history.go(-1)调用显示的，我的目的是进行 AJAX 调用以使用来自服务器的更新数据重新加载摘要组件/面板。
I also tried setting an unload handler (that does nothing) to prevent the page from being put into the bfcache but it still seems to be showing a bf-cached version and the event.persisted(or event.originalEvent.persisted) is set to false.
我还尝试设置卸载处理程序（什么都不做）以防止页面被放入 bfcache，但它似乎仍然显示 bf-cached 版本并且event.persisted(or event.originalEvent.persisted) 设置为false.
Is this property managed correctly on Linux? Am I doing something stupid in my code? Any help or ideas would be much appreciated, thanks!
此属性在 Linux 上是否正确管理？我在我的代码中做了一些愚蠢的事情吗？任何帮助或想法将不胜感激，谢谢！
回答by Tom Davenport
I have found hidden input buttons are not a reliable solution since they may hold the wrong value when the user navigates back to the page and then hits refresh. Some browsers (Firefox) retain input values on refresh so every time the user hits refresh it will refresh again since the input button holds the wrong value. This is a typical scenario for forums (user views a topic, hits the back button to go back to the list of topics, and may continue to hit refresh to check if there are new topics).
我发现隐藏的输入按钮不是一个可靠的解决方案，因为当用户导航回页面然后点击刷新时，它们可能保存错误的值。一些浏览器 (Firefox) 在刷新时保留输入值，因此每次用户点击刷新时，它都会再次刷新，因为输入按钮保存了错误的值。这是论坛的典型场景（用户查看主题，点击后退按钮返回主题列表，可能会继续点击刷新检查是否有新主题）。
As noted by Grégtheitroade Clermont, event.persistedis buggy in chrome (and IE) and this still hasn't been fixed for either browser as of Feb 2017. The good news is you can rely on window.performance.navigation.type == 2for chrome and IE. Ironically Firefox is unreliable for the latter but it shouldn't matter since it is reliable for event.persisted. The following code worked for me:
正如 Grégtheitroade Clermont 所指出的event.persisted，Chrome（和 IE）存在问题，截至 2017 年 2 月，这两种浏览器仍未修复。好消息是您可以依赖window.performance.navigation.type == 2chrome 和 IE。具有讽刺意味的是，Firefox 对后者不可靠，但它应该无关紧要，因为它对event.persisted. 以下代码对我有用：
if (document.addEventListener) {
window.addEventListener('pageshow', function (event) {
if (event.persisted || window.performance &&
window.performance.navigation.type == 2)
{
location.reload();
}
},
false);
}
回答by gregclermont
This appears to be a bug in Chrome(also present in IE11).
这似乎是Chrome 中的一个错误（也存在于 IE11 中）。
I have found the following workaround:
我找到了以下解决方法：
<input type="hidden" id="cacheTest"></input>
<script>
var input = document.querySelector('#cacheTest')
if (input.value === "") {
// the page has been loaded from the server,
// equivalent of persisted == false
}
else {
// the page has been loaded from the cache,
// equivalent of persisted == true
}
// change the input value so that we can detect
// if the page is reloaded from cache later
input.value = "some value"
</script>
This exploits the fact that in most browsers, when the page is loaded from the cache, form fields values are also conserved.
这利用了这样一个事实，即在大多数浏览器中，当页面从缓存加载时，表单字段值也被保留。
回答by Chez
I know this is a bit late but this works for me:
我知道这有点晚了，但这对我有用：
window.onpageshow = function(e) {
if (e.persisted) {
alert("Page shown");
window.location.reload();
}
};
I don't think you need it in the document ready function, just use vanilla as above.
我认为您不需要在文档就绪功能中使用它，只需像上面一样使用 vanilla。
