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

Question

在标准的Java/SpringMVC/JSP/jQuery web-app中,我试图检测"Back"(或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控制台中看到这一点,以及从上面的代码弹出的警报).每次,我的意思是,无论是从服务器加载还是通过后退按钮(或"后退"链接)再次显示.

我的目的是进行AJAX调用,如果通过"后退"按钮或history.go(-1)调用显示页面,则使用服务器的更新数据重新加载摘要组件/面板.

我也试过设置一个卸载处理程序(什么也不做),以防止页面被放入bfcache,但它似乎仍然显示bf-cached版本,并且event.persisted(或event.originalEvent.persisted)设置为false.

这个属性在Linux上是否正确管理？我在代码中做了些什么蠢事吗？任何帮助或想法将不胜感激,谢谢!

Answer 1

这似乎是Chrome中的一个错误(也出现在IE11中).

我找到了以下解决方法:

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

这利用了这样的事实:在大多数浏览器中,当从缓存加载页面时,表单字段值也是守恒的.

Answer 2

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

正如GrégoireClermont所指出的那样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);
}

Answer 3

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

window.onpageshow = function(e) {

    if (e.persisted) {

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

我认为您在文档就绪功能中不需要它，只需使用上面的普通版本即可。