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?

Solution 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.

Solution 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>

Solution 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.

Solution 4

This worked for me wonderful! (tried in chrome)

window.stop();

Solution 5

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. :)

View more solutions

Comments

[Elias Zamaria]

How are meta tags awful? I am not trying to use them to redirect. I am just using them to refresh the page, as a fallback for users without Javascript support. I don't see how that would affect search engines. I am not completely sure if this is what I want to do, but I am still curious as to how I would do it.

[gblazex]

you couldn't figure out how you should do it, isn't it enough for you? :) Have you checked the link???

[Elias Zamaria]

I checked the link. It seems kind of tricky to complicate the code on my server to serve the data in 2 ways. If I do it, I'll have to deal with some quirks. If I put an important part of the URL after the # sign, and someone bookmarks the page and tries to access it, it won't load as usual unless I have some JS to load the content. Same thing if the user hits the back button. I'm not sure if it would be good for search engines to make my URLs this way. They may see the # and think it is just links to different parts of the same page. I think it may be simpler with the meta refresh tag.

[gblazex]

you haven't read a bit of my post then :)) The urls should point to full working sites not hashes. Event handlers are attached to the links. They will make the ajax request and change the hash in the url. And if you've read it the full, you would know that the ajax generated urls are working when someone comes to them from the outside. And it is handled on the server side not on the client side. The example even demonstrates that. Please read it carefully next time...

[Hrishi]

Meta tags cannot be overridden by JavaScript.

[Hrishi]

I mean instead redirecting JavaScript-disabled browsers, you can redirect the JavaScript-enabled ones.

[Elias Zamaria]

I tried that in Firefox (after putting the "i in metaTags" in parentheses). I got a Javascript error saying "metaTags[i].getAttribute". I guess it can't be done, at least not that way.

[LandonSchropp]

That's pretty clever. It's clean, simple, and solves the problem.

[bluesmoon]

you can't use a for(i in ...) loop here. the in operator iterates through the keys of an object. In this case you need to use a regular numeric loop: for(i=metaTags.length-1; i>=0; i--) { ... } You iterate backwards because a removeChild will change metaTags.length

[bluesmoon]

this messes with the back button though. a user clicking the back button with javascript enabled will get stuck in a redirect loop. they'd need to double click the back button to escape from it.

[Jeremy]

to adjust the back button use javascript to alter the history of the browser

[TimoSolo]

does this work? maybe browsers have become stricter, doesnt seem to work anymore. Pity

[XP1]

@Timothy 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. See my answer: http://stackoverflow.com/questions/3252743/using-javascript-‌​to-override-or-disab‌​le-meta-refresh-tag/‌​13656851#13656851.

[Alin Mircea]

I did not test this but theoretically, I don't think this can work. Meta refresh uses the http-equiv meta tag to emulate the Refresh HTTP header, and as such can also be sent as a header by an HTTP web server. Since js comes after the response is sent , the redirect header is long gone

[XP1]

@AlinMirceaCosma The question talks about the "tag" contained within markup, not the HTTP header. As long as the markup contains meta refresh, which is not as a header, meta refresh can be removed if JavaScript has time to execute.

[TimoSolo]

Will have to test this out.. Thanks!

[a paid nerd]

This answer is partially incorrect. If you execute window.onbeforeunload = function() { return 'test' };, you can pop up a window and click "Stay on this page" to abort the refresh. It's a terrible choice from a UX perspective, but it's a hack that stops the refresh.

[scscsc]

Can you provide more details about your use? I've used this successfully on several sites and tested on many desktop and mobile browsers.