关于后退按钮：JavaScript-bfcache / pageshow事件-event.persisted始终设置为false吗？


JavaScript - bfcache/pageshow event - event.persisted always set to false?

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

我在JavaScript中尝试了以下操作(以下关于StackExchange的帖子介绍了如何实现此目的)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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");
        }
    });
});

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

我的意图是进行AJAX调用，以便通过返回按钮或history.go(-1)调用显示页面时，使用服务器中的更新数据重新加载摘要组件/面板。

我还尝试设置一个卸载处理程序(不执行任何操作)以防止将该页面放入bfcache，但是它似乎仍显示bf缓存的版本，并且设置了event.persisted(或event.originalEvent.persisted)到false。

此属性在Linux上是否正确管理？我在代码中做蠢事吗？任何帮助或想法将不胜感激，谢谢！

相关讨论

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

如Gr ?? goire Clermont所述，event.persisted在chrome(和IE)中有问题，截至2017年2月，这两种浏览器均尚未修复。好消息是您可以依赖适用于chrome和IE。具有讽刺意味的是，Firefox对于后者并不可靠，但它并不重要，因为它对于event.persisted是可靠的。以下代码为我工作：

1
2
3
4
5
6
7
8
9
10
if (document.addEventListener) {
    window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance &&
            window.performance.navigation.type == 2)
        {
            location.reload();
        }
    },
   false);
}

相关讨论

这似乎是Chrome中的错误(也存在于IE11中)。

我发现以下解决方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input type="hidden" id="cacheTest"></input>

  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"

这利用了以下事实：在大多数浏览器中，当从缓存加载页面时，表单字段的值也被保留。

相关讨论

我知道这有点晚了，但这对我有用：

1
2
3
4
5
6
7
8
window.onpageshow = function(e) {

    if (e.persisted) {

        alert("Page shown");
        window.location.reload();
    }
};

我认为您不需要在文档准备功能中使用它，只需如上所述使用vanilla。

相关讨论