Using Javascript to override or disable meta refresh tag

Question

I have a website, where I am trying to use Ajax to update some stuff on the page without reloading it. However, there is a good chance that many of my users will be using mobile browsers that don't support Javascript so I am trying to design the page with meta refresh tags, that somehow work only for users without Javascript. Is there any way to do this?

I tried putting the tag within a noscript element, but my primitive cell phone browser wouldn't acknowledge it. I am thinking of maybe setting a cookie to remember if the user's browser supports Javascript, or having one version of the page that works without Javascript, and tries to use Javascript to redirect the user to a more sophisticated version, but I am wondering if there is a more elegant way to do it. Does anyone have any ideas?

Answer 1

Meta tags are awful in this case. What about search engines??

What you should do is to make is something like I've outlined here. Your links should point to full working sites as it were a web 2.0 page. Then with event handlers (onlcick) you enhance the user experience by using ajax.

So ajax users will not go to links, the link is rather processed when clicked and sent an ajax request to the exact same url but with an ajax GET parameter.

Now on the server side you have to be able to generate the whole site by some method. If it is an ajax request you send the related content. If it is not an ajax request, yo generate the full site with the related part embedded.

Your site will be SEO friendly, available to mobile users, and progressively enhanced for people on modern browsers and platforms. Finally ajax generated hash links will be usable, even as links.

Awesomeness. :)

Answer 2

I agree that meta refresh is not the right way forward here. In addition to galambalazs' link, search on "progressive enhancement".

However, in the spirit of answering the question, you could try the following. It's untested, may not work in all browsers, but should be along the right lines:

var i, refAttr;
var metaTags = document.getElementsByTagName('meta');
for i in metaTags {
    if( (refAttr = metaTags[i].getAttribute("http-equiv")) && (refAttr == 'refresh') ) {
        metaTags[i].parentNode.removeChild(metaTags[i]);
    }
}

Whether removing it would stop the browser from refreshing in time remains to be seen.

Answer 3

You cannot override meta refresh tag with JavaScript.

However you can do this

Suppose your page is at ->

http://example.net/mike.html Put the following code there->

<script type="text/javascript">
window.location = 'http://example.net/mike/for_Those_With_JavaScript_Enabled.html';
</script>

Answer 4

Just remove the meta tag with javascript:

<meta http-equiv="refresh" content="2;http://new-url/" id="meta-refresh">

<script type="text/javascript">
var mr = document.getElementById("meta-refresh");
mr.parentNode.removeChild(mr);
</script>

I've set the refresh timeout to 2 seconds above just as an example. You could probably get away with 1 second as well, but don't set it to 0 because the javascript won't get a chance to execute in that case. 0 is also annoying because it breaks back-button usability.