返回上一页时 Javascript 仍然有效

Question

我们有一个页面，用户可以将他们的 Facebook 帐户链接到我们的网站。由于这个过程可能需要一段时间，我决定在用户​​按下“与 Facebook 连接”按钮后使用以下 Javascript 模糊容器 div 并添加一个加载图标：

$(function() {
    $('#linkedin').click(function() {
        $('#loading-button').css('display', 'block');
        $('.feature-container').css('filter', 'blur(1px)');
    });
});

一旦用户被重定向到下一页，并决定通过按浏览器中的最后一页按钮返回上一页（意味着浏览器不发出 GET 请求），模糊和加载图标将仍然活跃。

我怎样才能使 Javascript 不会被激活，即使在用户按下浏览器中的最后一个页面按钮之后？这甚至可能吗？

Answer 1

您可以在用户返回您的网站后重置 css：

window.onpageshow = function(e){
  $('#loading-button').css('display', 'none');
  $('.feature-container').css('filter', 'none');
}

每次用户导航到您的页面时都会触发onpageshow 事件，即使是从缓存中：

onpageshow 事件与onload 事件类似，只是它在页面首次加载时的 onload 事件之后发生。此外，每次页面加载时都会发生 onpageshow 事件，而从缓存加载页面时不会发生 onload 事件。

参考：

1. Reload the site when reached via browsers back button
2. Is there a cross-browser onload event when clicking the back button?
3. pageShow event in javascript
4. How to control web page caching, across all browsers?