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

Question

有什么方法可以检测当前页面是否来自返回按钮？

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

Answer 1

注意：据报道，这在最新版本的 Chrome 中不再有效。

当用户返回页面时，所有可见的表单数据都会被保留，而所有 JavaScript 变量都会被重置。我说“可见”表单数据，因为隐藏字段似乎没有被保留，但不可见的输入却被保留了。

您可以利用它来检测页面是初始加载，还是之前已经加载过，例如通过单击后退按钮。

创建一个值为“0”的不可见输入字段（不是输入“隐藏”），并在准备好的 DOM 加载器中检查该值是否已设置为“1”；如果它知道页面已经加载，例如从后退按钮；如果它仍然是 '0' 则页面最初是第一次加载，将值设置为 '1'。

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

• 需要加载DOM；并非所有就绪功能都有效。唯一的那个 下面是这样，JQuery 也准备好了；但是 (function() { }) 在我的实例中没有。
• 输入不能是“隐藏”类型。设置样式=“显示：无；” 而是在输入上。

.

<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

为了更简单的检查，有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 3

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

Answer 4

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

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

更多详情您可以查看here中的pageshow事件。

Answer 5

除了@Radderz 回答之外，我还必须添加setTimeout 才能使他们的解决方案在 chrome 83 中运行。否则，我只会看到“首次加载”警报。

document.addEventListener('DOMContentLoaded', function () {

    var ibackbutton = document.getElementById("backbuttonstate");

    setTimeout(function () {

        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');
        }

    }, 200);

}, false);

Answer 6

如果您正在处理项目中的页面，我认为这可以通过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 7

基本上，由于浏览器限制，您不能这样做。 HTML5 历史API，导航到返回页面时会触发onpopstate 事件。但即使您使用应用程序导航，这也会触发。

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