Refresh page on resize with javascript or jquery

Question

I want to force the browser to refresh the page when the user resizes it. I have following code:

function refresh() { location.reload(); }

<body onResize="refresh()">

but it does not work. Does anyone of you has a solution? Thanks

thats given by dreamweaver, i dont think its wrong! but i also tested "onresize" before posting this! — supersize, Feb 16 '13 at 22:12
HTML attributes are case-insensitive. But in JavaScript those properties are lowercased. — Fabrício Matté, Feb 16 '13 at 22:13
technically uppercase html attributes are "invalid" according to visual studio (or maybe it's resharper). They aren't, but it does look pretty ugly when they're capitalized. — Phillip Schmidt, Feb 16 '13 at 22:15

Phillip Schmidt · Accepted Answer · 2013-02-16T22:28:30.687

70

Do it with javascript/jquery:

just javascript:

window.onresize = function(){ location.reload(); }

with jquery:

$(window).resize(function(){location.reload();});

or

$(window).on('resize',function(){location.reload();});

edited Feb 16 '13 at 22:28

answered Feb 16 '13 at 22:12

Phillip Schmidt

8,805
3
43
67

Vanilla JS is `onresize` btw, as also previously commented by JohnFx. – Fabrício Matté Feb 16 '13 at 22:15
2

worked, but not on firefox! do you have a clou why? – supersize Feb 16 '13 at 22:19
@TedMosby nope, that's weird. I'm not sure why it wouldn't work. It's possible that you have another javascript error somewhere on the page that comes up in firefox, and it's causing this javascript not to run. Hit f12 and check the console window for errors. – Phillip Schmidt Feb 16 '13 at 22:21
Fair enough. Been a while since I used the native javascript ones. – Phillip Schmidt Feb 16 '13 at 22:28
No problem. I believe it is a fair mistake as you use solely the event name for `addEventListener` / `jQuery` but have to prefix it with `on` when using the property. – Fabrício Matté Feb 16 '13 at 22:29
Hello, this is an old post but thought to write this anyhow, the first and last version will make IE9 constantly refresh, the middle one though will work as expected :) – Alin Mar 11 '15 at 16:36
`window.onresize = function(){ location.reload(); }` doesn't do anything as far as I can see. – Aaron Franke Dec 06 '19 at 10:51
Remember that safari on mobile devices slightly changes the resolution when the user starts scrolling. This makes a page unusable because it hangs in an reload loop every time the scrolling event starts. To avoid this, set a `threshold` for resolution changes (see this answer: https://stackoverflow.com/a/66530647/2056125 ). – mhellmeier Mar 08 '21 at 13:26
I am facing an issue though, when I am using this on mobile and someone scrolls down then the window reloads as well for some reason. – JohnnyD Jul 08 '22 at 06:03

score 29 · Answer 2 · answered Jan 10 '14 at 06:24

29

The following code seems to work with all browsers,

$(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 */
  }, 100);
});

Hope it helps everyone. I found this information here: http://www.jquery4u.com/snippets/jquery-refresh-page-browser-resize/

answered Jan 10 '14 at 06:24

JCBrown

1,062
10
11

1

What does window.RT means this context ? – Santosh Nov 07 '14 at 07:22
On the window.RT question. I not exactly sure. I found the solution at the link I provided and it worked so I didn't ask many questions. ;) I simply shared this for others to use. I'd suggest if you have specific code questions you reference the link and ask the person who posted it. It may have something to do with Windows RT, but like I said I'm not sure. Sorry I couldn't be more help. – JCBrown Dec 05 '14 at 00:54
It appears that this code is creating a property called `RT` on the `window` object. It is using that to check whether it needs to clear the timeout before it creates a new one. Many would've simply let it (silently) error the first time through but this is probably better. – krowe2 Nov 22 '16 at 15:22
Would you be so kind as to explain to me what this code is doing? This is the **only** variant that has worked for me so far, but I would have been incapable of coming with it myself as I do not understand it. – Johncowk Mar 11 '22 at 13:13
setTimeout returns an ID for the timer created. This code variation saves that ID in a property, so if the user is resizing window before 1st timer had chance to run, subsequent run of the same event aborts existing timer (clearTimeout) - before creating a new one. When the user is finished resizing, event will stop triggering and reload finally called. As to what RT means, maybe reload timer? You can use whatever you like as property name, as long as it is not reserved or used somewhere else. – Edelmar Ziegler May 17 '23 at 18:34

score 3 · Answer 3 · answered Feb 16 '13 at 22:12

3

try this:

$(window).resize(function() {
        location.reload();
});

answered Feb 16 '13 at 22:12

henser

3,307
2
36
47

Refresh page on resize with javascript or jquery

3 Answers3

Linked