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

Javascript still active when returning to previous page

本文关键字：活动状态 Javascript 返回上一页      更新时间：2023-09-26

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

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

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

如何使Javascript即使在用户按下浏览器中的最后一页按钮后也不会处于活动状态？这可能吗？

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

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

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

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

参考：

  1. 通过浏览器返回按钮重新加载网站
  2. 单击后退按钮时是否存在跨浏览器加载事件
  3. page用javascript显示事件
  4. 如何在所有浏览器中控制网页缓存
相关文章：