jQuery refresh page on browser resize

Sam Deering
Tweet

Basic code snippet to refresh the page on a browser resize using JavaScript.

//refresh page on browser resize
$(window).bind('resize', function(e)
{
  console.log('window resized..');
  this.location.reload(false); /* false to get page from cache */
  /* true to fetch page from server */
});

If window.location.reload() not working in Firefox then try the following.

//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);
});

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jeremy Brown

    Would there be a way to only refresh if resolution is below or above a certain amount of pixels? The site I’m working with would require 3 refresh points. For example, when the browser is full screen on my computer at home it’s at 1920×1080, 1920 pixels wide, I’d need it to recognize when it hits a certain pixel width, lets say 780 pixels, it refreshes the page. It would then only refresh if it went above or below that pixel width of 780, then I’d need it to do the same for pixel width 600px and 300px for example. So I guess it would be like an invisible line and as the view port passed that pixel setting or settings (would be nice to be able to add as many settings as needed), either up or down it would refresh the site. Possible?