JavaScript
Article

jQuery refresh page on browser resize

By Sam Deering

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);
});
Sam Deering
Meet the author
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
  • 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?

  • nickiweber

    Thanks Sam. I really don’t know how i implement this into my html. Do i just create a js-file?

  • Santosh

    What does window.RT means this context ?

  • Avalonica

    My page refreshes but on refresh it keeps certain values in a query string that I would ideally like zeroed out again. How could I refresh to the page location without the query string?

  • Joseph_Bona

    How would you limit this to only horizontal screen changes?

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!