时间戳

首页 > 解决方案 > 使用 History-Back 功能时 Firefox 的行为变化

javascript - 使用 History-Back 功能时 Firefox 的行为变化

问题描述

我在 Firefox 上遇到问题。我们网站上有一些页面的加载时间为 2-3 秒。如果单击这些页面的链接，则会在页面正文中添加一个类，该类会更改布局。

我注意到，如果您使用 Firefox 中的历史记录返回按钮，则页面会在添加类时加载，但仍会添加到 body-tag 中。在 Chrome 中，布局就像是新加载的页面。

我确定 Firefox 曾经与 Chrome 具有相同的行为。但是重发这个缝就已经呗。我这里有一个微型脚本来说明问题：

<html>

  <head>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
    
    <script>
    $( document ).ready(function() {
        $('a.withWaitscreen').on({
            click:  function() { $("body").addClass("waiting");waitscreenCountdownInit();  }
        });
        $('button.withWaitscreen').on({
            click:  function() { $("body").addClass("waiting"); waitscreenCountdownInit();  }
        });
        $('form.withWaitscreen').on({
            submit:  function() { $("body").addClass("waiting"); waitscreenCountdownInit();  }
        });
    });
    </script>

    <style>
      .waiting{
        background-color: red;
      }
    </style>

  <body  >

  </body>

  <a class="withWaitscreen" href="https://www.google.com/">
  test
  </a>

</html>

如果您在 Firefox 中单击测试链接并单击浏览器中的“后退”按钮，页面将变为红色。如果您在 Chrome 中执行相同操作，则页面将为白色。

是什么导致了这种行为差异？这怎么可能改变？

标签： javascripthtmlfirefoxbackbrowser-history

解决方案

我通过将以下内容添加到文件的 JS-Part 解决了这个问题；

$( window ).unload(function() {
  return "";
});

我不确定为什么会这样，但它具有预期的效果。（至少在 Firefox 62.0 中）

推荐阅读