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

I've found that the noscript tag works quite nicely for this. For example, you can place this just after you close the head element:

<noscript>
    <meta http-equiv="refresh" content="5;URL=http://www.example.com">
</noscript>

No need to remove the meta tag with script, since a browser that has script support will ignore everything inside the noscript element.

Answer 2

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 3

Unfortunately, from @bluesmoon's answer , manipulating the DOM does not work anymore.

The workaround is to retrieve the original markup, find and replace the meta refresh element, and then write the new document with the replaced markup.

I am not sure how to retrieve the original markup using JavaScript except for sending an additional request using XMLHttpRequest .

In Opera, here is what I am using:

Disable meta refresh 1.00.js :

// ==UserScript==
// @name Disable meta refresh
// @version 1.00
// @description Disables meta refresh.
// @namespace https://stackoverflow.com/questions/3252743/using-javascript-to-override-or-disable-meta-refresh-tag/13656851#13656851
// @copyright 2012
// @author XP1
// @homepage https://github.com/XP1/
// @license Apache License, Version 2.0; http://www.apache.org/licenses/LICENSE-2.0
// @include http*://example.com/*
// @include http*://*.example.com/*
// ==/UserScript==

/*
 * Copyright 2012 XP1
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*jslint browser: true, vars: true, maxerr: 50, indent: 4 */
(function (window, XMLHttpRequest) {
    "use strict";

    if (window.self !== window.top) {
        return;
    }

    window.stop();

    var uri = window.location.href;

    var request = new XMLHttpRequest();
    request.open("GET", uri, false);
    request.send(null);

    if (!(request.readyState === 4 && request.status === 200)) {
        return;
    }

    var markup = request.responseText;
    markup = markup.replace(/<meta http-equiv="refresh".*\/?>/gi, "");

    var document = window.document;
    document.open();
    document.write(markup);
    document.close();
}(this, this.XMLHttpRequest));

Opera also has a built-in feature that disables meta refreshes. No need for JavaScript.

• Right click on webpage > Edit Site Preferences... > Network > Disable "Enable automatic redirection" > OK.

Answer 4

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

What you should do is to make it something like I've outlined here . Your links should point to full working sites as if it were a web 2.0 page. Then with event handlers (onclick) 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 5

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.

Edit 2012-10-23 This does not appear to work any more. The node still gets removed, but it appears that browsers parse and hold in memory all meta tags any way.

Answer 6

This worked for me wonderful! (tried in chrome)

window.stop();

Answer 7

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 8

This is an example of what I use and it works perfectly (especially on Firefox)!

<html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Redirecting</title>
</head>
<body onload="location.replace('http://www.live.comeseetv.com'+document.location.hash)">
<a href="http://www.live.comeseetv.com">Redirecting you to http://www.live.comeseetv.com</a>
</body></html>