O'Reilly

META Refresh vs. JavaScript Refresh

By on  

A few days back I was perusing the ESPN.com source code when I found the following snippet of code:

<script>
	ESPN_refresh=window.setTimeout(function(){window.location.href=window.location.href},900000);
</script>
<noscript>
	<meta http-equiv="refresh" content="900" />
</noscript>

I understand what the code was supposed to do but was confused as to why they'd use JavaScript as a primary method and META as a fallback method. Why not just use the META method? I did some research and found the answer at Wikipedia:

Use of meta refresh is discouraged by the W3C, since unexpected refresh can disorient users. Meta refresh also impairs the web browser's "back" button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Mozilla Firefox, Opera, Internet Explorer 7).

So there you have it. Use JavaScript as your primary means for automatic page refreshes and a META tag as your fallback.

Track.js Error Reporting

Recent Features

  • 7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • AJAX For Evil:  Spyjax with jQuery

    Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax": Spyjax, as I know it, is taking information from the user’s computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I...

  • Create an Animated Sliding Button Using MooTools

    Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a...

Discussion

  1. Gonzalo González Mora

    That doesn’t mean that you should use JavaScript, because in this case the effect would be the same. What it means, is that you should use a 30X redirect.

  2. The text should’ve read “Use of meta refresh and/or javascript refresh is discouraged by the W3C, since unexpected refresh can disorient users. Meta refresh also impairs the web browser’s “back” button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Mozilla Firefox, Opera, Internet Explorer 7).”

    Javascript is problematic in the same way as meta refresh is

  3. btw, noscript tag is not allowed in header.

  4. @Bilal Çınarlı: The WorldWide Leader in Sports disagrees. :)

  5. @David Walsh: also gmail and some of google’s javascript based apps neverminds this thing, but it invalidates the page :)

  6. @Bilal Çınarlı: Functionality > validation.

  7. @David Walsh: of course that is true.

    But I also hate timed refreshed in a page. Sometimes it becomes very frustrating while reading a very long article in a newspaper’s site.

  8. Gonzalo González Mora

    “@Bilal Çınarlı: Functionality > validation.”

    Which reinforces the point on not using JavaScript or META refresh for redirecting. It’s really annoying for regular users, but specially for screen-reader users. A “meta refresh screen reader” will surely clear any doubts you have.

  9. Liam

    @Gonzalo: If you look at the code you can see this simply refreshes the page, not redirects.

  10. Gonzalo González Mora

    @Liam: Sorry, my mistake. But the same thing applies as with the redirects, it interrupts the experience of the user, and it’s certainly a lot more annoying for screen-reader users, who will have a hard time to resume from the point where they were reading.

  11. And what if I’m on 3G, paying big bucks for bandwidth. Don’t use any means of automatic page refreshes…

  12. We’re a bit off track here people. The point isn’t whether or not you should use them — it’s the method by which you use when you do use them.

  13. You should use meta, because javascript suffers from the same problems as meta, but with meta the user can stop the refreshing by hitting escape. (in most browsers), while to stop the javascript, you’ll have to disable javascript all together.

  14. @David Walsh: I also am a big fan of this statement… :) btw i like the new style of the comment panel (ooo yes i admit i wasn’t around for a while).

  15. @Can Berkol: oops! this statment… Functionality > validation.

  16. You need threaded comments on this blog. There’s lots of useful stuff in the comments but it gets confusing.

  17. “We’re a bit off track here people.” – mmhhmm…
    While I see the value of Functionality > validation, I don’t think we should be looking looking for reasons to invalidate the page. Why not set the redirect headers server-side? Should we be using a client-side snippet when it has the same problems as the noscript alternative? Why not use MooTools fn.delay for the redirect? Where is the morning coffee I so desperately need?

  18. This turns out to be a nice debate. I guess server side redirection is the right technique for redirection. Both Meta and javascript redirection would break back button.

  19. Redirecting a page to its new address ok but refreshing the page without my will, i totally disagree.

  20. “We’re a bit off track here people. The point isn’t whether or not you should use them — it’s the method by which you use when you do use them.”

    Absolutely, go ahead and use automatic refreshes. Including the exact same functionality and its bugs twice and in a non-standard way is a different matter however.

    If you absolutely have to do an automatic refresh, meta tags or http headers are the way to go. Not Javascript (unless it has to be done from code) and not a mishmash.

  21. It goes without saying if its possible to use HTTP Headers instead, you would. The point here is about how to fire redirects in the client and for that there are two ways.

    The reason you combine the two is simple. META does not work on all browsers and JavaScript can be disabled in some. By using both methods you are increasing the likely-hood of support drastically as its very unlikely you will find a browser that does not support either.

    You might think there is never a reason to use client-side refreshes, but when you work in a corporate world where idiots make the rules, you have to use their systems, follow their orders and produce crap. If I can make my crap work a little bit better, I am all for it.

  22. Daniel Oliveira

    To me, the ESPN’s code sounds fine…

  23. To go into an entirely new direction, why not get the document’s head and inject a new element (meta) with those values! :P

    Sometimes you CAN have your cake eaten in two.

  24. @Mark: That would require a user to have JavaScript enabled AND META support, which would negate the entire point of having both methods included.

    One should be used as a fall-back for the other, not both expected as requirements.

  25. Name me a browser that’s worth supporting that supports Javascript but not http-equiv meta tags.

  26. This is a good snippet of information, its good to go through the source code of your competitor or of a bigger site to see what they do differently. Its good to know about the meta refresh though.

  27. Cosmofur

    I have a specialized need for refresh that has nothing to do with standard compliance or google searches since its not for a public server.
    Rather for internal use, I create a status display for a number projects/applications, and use meta refresh to update the display so we can keep this status display scrolling at a number of internal displays.
    All plain and simple, running on a tiny computer with no HA or clusters needed.
    The problem is, if the server should fail for any reason and the reboot takes longer than the refresh time, I then have to go around to all the displays and manually refresh the local web browsers to get the displays scrolling again.
    Is there a way to use java-script to refresh and try again, even if the server 404ed? (I don’t mind it showing an error while the server is down, but it shoudl start refreshing again once it’s back up)
    Perhaps keeping the java-script in a frame? (but I hate frames!)

  28. Maarten

    I use meta refresh when i want to go to a page which takes long to load (dynamic session and stuff), when using javascript window.location my spinner doesn’t do any animation, with meta refresh this animated gif still works so the user sees it is actually doing something. So not always use JavaScript at all :-)

  29. Kirby L. Wallace

    The reason I use setTimeout() is because the meta refresh tag cannot be stopped or altered. I have pop up forms (in a jquery lightbox) that when they open, I need to make sure the page doesn’t refresh while the user is working with that form. Since it is part of the page, the form will vanish from in front of their eyes if the refresh comes around. Once the windows closes, the page can go back to it’s normal refresh. It’s basically a continuously updating “Status Board” that occasionally needs to be interrupted to fill in a form.

  30. Bozari

    Ethically, why do a refresh? The only reason to do one is to scam extra pageviews, right?

  31. i want to know a step by step insructions of how to insert java script and meta refresh tag can you show me the step on how to do this, im using the google chrome with the dev tools and inspect element please get back to me

  32. I use this on a page displayed on big screens with no user input, so it’s very useful here. If there’s a better way please let me know.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...