Question

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

$(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事件。

参考：

Reload the site when reached via browsers back button

Is there a cross-browser onload event when clicking the back button?

pageShow event in javascript

How to control web page caching, across all browsers?

返回上一页时，Javascript仍处于活动状态

1 个答案: