13

在标准的 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 控制台和从上述代码中弹出的警报中看到这一点）。每次，我的意思是，无论它是从服务器加载还是通过后退按钮（或“后退”链接）再次显示。

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

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

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

4

3 回答 3

14

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

正如 Grégoire 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);
}
于 2017-02-06T08:40:06.200 回答
9

这似乎是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>

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

于 2014-02-18T15:25:03.437 回答
0

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

window.onpageshow = function(e) {

    if (e.persisted) {

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

我认为您在文档准备功能中不需要它，只需使用上面的香草即可。

于 2014-01-26T01:30:56.327 回答