首页 > 解决方案 > 最大化和按下恢复按钮时刷新网站jquery

问题描述

当用户缩小浏览器窗口时,我想重新加载网站。我已经让它工作了,但是当你在缩小浏览器窗口的大小后按下最大化按钮时,它不会恢复正常,它会停留在移动视图中。

我找到了一个有效但不是 100% 的代码。如果这里有人可以帮助我,我将不胜感激。我对 javascript/jQuery 真的很陌生。下面是 jQuery 代码,我觉得它不是最好看的,但它有点工作。

$(window).on('resize', function(event) {
  var windowSize = $(window).width(); // Could've done $(this).width()
  //Smartphones, Portrait iPhone, Portrait 480x320 Phones (Android)
  if (windowSize < 320) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

    //Smartphones, Android Phones, Landscape iPhone
  } else if (windowSize < 480) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

  }
  //Portrait Tablets, Portrait iPad, E-readers (Nook/Kindle), Landscape 800x480 Phones (Android)
  else if (windowSize < 600) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

  } else if (windowSize < 690) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

  }
  //Tablet, Landscape iPad, Lo-res Laptops and Desktops
  else if (windowSize < 801) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

  } else if (windowSize < 995) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

  }
  //Big Landscape Tablets, Laptops, and Desktops 
  else if (windowSize < 1025) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

  }
  //Hi-res Laptops and Desktops 
  else if (windowSize < 1281) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

  } else if (windowSize < 1440) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 200);
    });

  } else if (windowSize > 1440) {
    //Refresh page on browser resize
    $(window).bind('resize', function(e) {
      $('body').prepend('<div>' + $(window).width() + '</div>');
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
      }, 10);
    });

  } else {
    $('html').css('color', 'black');
  }
});

标签: jquerywindow-resize

解决方案


所以我现在已经完成了大部分工作。但是当我说 1050 像素时,它会不断更新。有谁知道它是否可以在精确分辨率匹配时更新?我坚持我已经用 === 做到了,但没有。

jQuery:

$(window).on('resize', function(event) {
     var windowSize = $(window).width(); // Could've done $(this).width()
     if ($('.toggle-menu').width() === 1599) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     } else if ($('.toggle-menu').width() === 1300) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     } else if ($('.toggle-menu').width() === 820) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     } else if ($('.toggle-menu').width() === 821) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     } else if ($('.toggle-menu').width() === 1024) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     } else if ($('.toggle-menu').width() === 900) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     } else if ($('.toggle-menu').width() === 768) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     } else if ($('.toggle-menu').width() === 769) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     }
       else if ($('.toggle-menu').width() === 1050) {
      //Refresh page on browser resize
      $(window).bind('resize', function(e) {
       if (window.RT) clearTimeout(window.RT);
       window.RT = setTimeout(function() {
        this.location.reload(false); /* False to get page from cache */
       }, 1000);
      });
     }
    });
//Update the website when you press the maximize button
$(window).resize( function(e) {
   if (window.RT) clearTimeout(window.RT);
   window.RT = setTimeout(function() {
      this.location.reload(false); /* False to get page from cache */
   }, 10);
});

推荐阅读