检测页面是否从后退按钮加载

Question

有没有办法检测当前页面是否来自后退按钮？

我想只在当前页面来自后退按钮时从cookie加载数据。

Answer 1

当用户返回页面时，将保留任何可见的表单数据，同时重置任何JavaScript变量。我说'可见'表单数据，因为隐藏字段似乎不被保留，但隐形输入是。

您可以使用此优势来检测页面是初始加载，还是先前已加载，例如从后退按钮单击。

创建一个值为'0'的不可见输入字段（不是'hidden'类型），并在DOM ready loader中检查该值是否已设置为'1';如果您知道页面已经加载，例如从后退按钮;如果它仍为“0”，则页面首次加载，将值设置为“1”。

注意：它的工作方式有点微妙，可能并不适用于所有浏览器;我用Chrome构建了它。

• 需要加载DOM;并非所有准备好的功能都有下面的那个，JQuery准备好了;但是（我的实例中的function（）{}）却没有。
• 输入不能是type =“hidden”。设置style =“display：none;”在输入而不是。

.

<input id="backbuttonstate" type="text" value="0" style="display:none;" />
<script>
document.addEventListener('DOMContentLoaded', function () {
   var ibackbutton = document.getElementById("backbuttonstate");
   if (ibackbutton.value == "0") {
     // Page has been loaded for the first time - Set marker
     ibackbutton.value = "1";
     alert('First time load');
   } else {
     // Back button has been fired.. Do Something different..
     alert('Previously loaded - Returned from Back button');
   }
}, false);
</script>

Answer 2

 if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
        $('.formName').get(0).reset();
    }

Answer 3

为了更简单的检查，有Navigation Timing API Spec（已经弃用，但广泛支持）和Navigation Timing Level 2 API Spec（工作草案，主要浏览器支持）

if (window.performance) {
     var navEntries = window.performance.getEntriesByType('navigation');
     if (navEntries.length > 0 && navEntries[0].type === 'back_forward') {
          console.log('As per API lv2, this page is load from back/forward');
     } else if (window.performance.navigation
          && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
          console.log('As per API lv1, this page is load from back/forward');
     } else {
          console.log('This is normal page load');
     }
} else {
     console.log("Unfortunately, your browser doesn't support this API");
}

Answer 4

基本上，你不能因为浏览器的限制。 HTML5历史记录API，导航到返回页面时将触发onpopstate事件。但即使您使用应用程序导航，这也会触发。

替代解决方案参考 - How to Detect Browser Back Button event - Cross Browser

Answer 5

如果您正在处理项目中的页面，我认为这可以通过sessionStorage完成（这不会考虑外部页面）。当你在“主页面”上时，我会点击链接然后转到下一页。

在下一页上，您可以在sessionStorage中设置一个值，如：

sessionStorage.setItem('doSomething', 'yes');

然后回到主页面，你可以得到如下条件：

const sCheckSession = sessionStorage.getItem('doSomething');
if(sCheckSession == 'yes') {
  // do something crazy, then reset your reference to no
  // so it wont interfere with anything else
  sessionStorage.setItem('doSomething', 'no');
}

Answer 6

使用pageshow事件来检测后退或前进按钮：

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        Alert("User clicked on back button!");
    }
});

有关详细信息，您可以在here中查看pageshow事件。