JavaScript - bfcache/pageshow 事件 - event.persisted 总是设置为 false？

Question

在标准的 Java/SpringMVC/JSP/jQuery 网络应用程序中，我试图检测“返回”(或 history.go(-1))事件，以便刷新(AJAX)摘要组件/当我返回页面时面板内容(我们可以在其中更改摘要组件显示的后端数据)。

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

我正在运行 OpenSUSE Linux 并在 FireFox 和 Chrome(最新版本)上尝试过，但每次事件的 persisted 属性都设置为 false(我可以看到这在 JavaScript 控制台和从上面的代码弹出的警报中)。我的意思是每次，无论它是从服务器加载还是通过“后退”按钮(或“后退”链接)再次显示。

如果页面是通过“后退”按钮或 history.go(-1) 调用显示的，我的意图是进行 AJAX 调用以使用来自服务器的更新数据重新加载摘要组件/面板.

我还尝试设置一个卸载处理程序(什么都不做)以防止页面被放入 bfcache 但它似乎仍然显示一个 bf 缓存版本和 event.persisted (或 event.originalEvent.persisted) 设置为 false。

此属性在 Linux 上是否得到正确管理？我在我的代码中做了一些愚蠢的事情吗？任何帮助或想法将不胜感激，谢谢!

Answer 1

我发现隐藏的输入按钮不是一个可靠的解决方案，因为当用户导航回页面然后点击刷新时，它们可能持有错误的值。某些浏览器 (Firefox) 在刷新时保留输入值，因此每次用户点击刷新时它都会再次刷新，因为输入按钮持有错误的值。这是论坛的典型场景(用户查看一个主题，点击后退按钮返回主题列表，并可能继续点击刷新以检查是否有新主题)。

正如 Grégoire Clermont 所指出的，event.persisted 在 chrome(和 IE)中存在错误，截至 2017 年 2 月，这两种浏览器仍未修复。好消息是您可以信赖在 window.performance.navigation.type == 2 上用于 chrome 和 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);
}

2022 年更新:

因为 window.performance.navigation.type 已弃用(引用:MDN)，我更新了代码来做同样的事情:

if (document.addEventListener) {
    window.addEventListener('pageshow', function (event) {
        if (event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward') {
            location.reload();
        }
    },
    false);
}