Question

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

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

Answer 1

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

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

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

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

需要加载DOM;并非所有准备好的功能都有唯一的那个以下是，JQuery准备就绪;但是（我的实例中的function（）{}）却没有。
输入不能是类型=＆＃34;隐藏＆＃34;。设置样式=＆＃34;显示：无;＆＃34; 而在输入上。

<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

除了@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 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 事件。

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

7 个答案: