JavaScript-bfcache/pageshow事件-event.persisted始终设置为false吗? [英] JavaScript - bfcache/pageshow event - event.persisted always set to false?

问题描述

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

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

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

I tried the following in JavaScript (following some posts on StackExchange re how to achieve this):

<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控制台和警报中看到它从上面的代码弹出).我的意思是每次，无论是从服务器加载还是通过后退"按钮(或后退"链接)再次显示.

I am running OpenSUSE Linux and have tried this with FireFox and Chrome (latest versions), but every time the event's persisted attribute 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).

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

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.

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

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.

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

Is this property managed correctly on Linux? Am I doing something stupid in my code? Any help or ideas would be much appreciated, thanks!

推荐答案

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

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

如GrégoireClermont所述，event.persisted在chrome(和IE)中存在问题，截至2017年2月，这两种浏览器均尚未修复.好消息是您可以依赖window.performance.navigation.type == 2来实现chrome和IE.具有讽刺意味的是，Firefox对于后者并不可靠，但这无关紧要，因为它对于event.persisted是可靠的.以下代码对我有用:

As noted by Grégoire Clermont, event.persisted is 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 == 2 for 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:

if (document.addEventListener) {
    window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance && 
            window.performance.navigation.type == 2) 
        {
            location.reload();
        }
    },
   false);
}

这篇关于JavaScript-bfcache/pageshow事件-event.persisted始终设置为false吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！