Browser specific redirect with delay

Question

I've looked quite a bit for the answer to this question, but most of what I've found is either really outdated or doesn't quite do what I need. Here's my scenario:

I have a site that looks great in webkit browsers, but I'm still a couple of weeks away from having it looking perfect in other browsers. I'm already using CSS and Javascript to identify which browser they're using and load the appropriate content. If someone visits from a non-webkit browser, they see a message explaining that the site is not quite ready in the browser they are using. The site is live, and here is what I need the redirect to do:

If someone visits the site on a webkit browser, they see a short intro. I'd like to automatically redirect to a certain page on the site after 8 seconds. If they view the site from a non-webkit browser, this redirect shouldn't happen.

I'm thinking a Javascript solution would work best, but I'm not quite sure what to do. Any help would be greatly appreciated.

Technically, you could use `if (/webkit/.test(navigator.userAgent)) setTimeout(function () { window.location.href = "new url"; }, 8000); }`. But you really shouldn't be detecting browsers. What are you developing that is resulting differently in webkit vs. non-webkit browsers? — Ian, Apr 29 '13 at 17:13
This is really just a temporary fix until I get the layout right on non-webkit browsers. I'm using a lot of progressive CSS so there are some inconsistencies with how webkit renders certain things vs other engines. I won't need to detect browsers once I finish getting this CSS ironed out. — Lee H, Apr 29 '13 at 18:30
@Ian Hum I just noticed your comment. :p Two things about it: 1. you forgot the i option after the regular expression, because it can be "WebKit" (I know default Chrome user agent has it). 2. `window.location.replace()` would be better in this case (see [here](http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-in-jquery-javascript)). Otherwise nice. XD — Sk8erOfBodom, May 02 '13 at 16:39
@Sk8erOfBodom I meant to reply to this awhile ago - you're right about the `i` flag, I threw that together and didn't test, but the point was to start the OP on the right track. Also, using `.replace()` over `.href` is specific to the situation - they do two different things — Ian, May 31 '13 at 03:13

score 0 · Accepted Answer · edited May 23 '17 at 12:12

Well, first, it's never such a good idea to detect browsers, partially because you have to use the User-Agent which can't be trusted (as anything coming from the user). You should be sure that you need to do it. It can seem simpler to simply do different things for each browser, but it's not, and usually, you don't need to do that (except in rare occasions and for IE, because yeah the old IE...).

If you know what you're doing though, you can use window.location.replace() coupled with a setTimeout(), like that:

setTimeout( function(){ window.location.replace("redirectionpage"); }, 8000 );

Or you could use the meta refresh, which might be more logic (and you could put it in Javascript, or even PHP if you can, which might be better). Like:

<meta http-equiv="refresh" content="8;URL='redirectionpage'" />

It would be nice if you could give more details, but that should be enough.

EDIT: How to put the meta tag depending on the browser.

So as I said in the comment, there are two solutions to add the meta tag. Add it in the HTML, then delete it for non-webkit browsers, or add it only for webkits browsers when the page is loading.

The former is pretty simple, you put the tag above in the <head>, preferably with an id (for easier access). For example:

<meta http-equiv="refresh" content="8;URL='redirectionpage'" id="webkit_meta" />

Then simply remove it in Javascript when the page is loading (just put it in a <script> tag in the <head>, after the <meta>) with something like

var webkit_meta = document.getElementById("webkit_meta");
webkit_meta.parentNode.removeChild(webkit_meta);

Concerning the second solution, it avoids having a <meta> tag which is going to be useless for some browsers in your HTML. You just need to create a meta tag, set its attributes, then put it in the <head>.

var meta = document.createElement("meta");
meta.httpEquiv = "refresh";
meta.content = "8;URL='redirectionpage'";       
document.getElementsByTagName("head")[0].appendChild(meta);

For the webkit test, you can simply do if ( /webkit/i.test(navigator.userAgent) ) (to test if it's a webkit browser, add a ! if you want to test non-webkit browsers). Once again, don't forget that info can't be trusted. :)

So, to summarize, all you have to do is choose either of these methods, then put a script to either delete/add you <meta> tag, depending on the browser.

<script type="text/javascript">
if ( /webkit/i.test(navigator.userAgent) )
{
    var meta = document.createElement("meta");
    meta.httpEquiv = "refresh";
    meta.content = "8;URL='redirectionpage'";       
    document.getElementsByTagName("head")[0].appendChild(meta);
}
</script>

Or

<script type="text/javascript">
if ( !/webkit/i.test(navigator.userAgent) )
{
    var webkit_meta = document.getElementById("webkit_meta");
    webkit_meta.parentNode.removeChild(webkit_meta);
}
</script>

That should be enough. ^^ (yes lots of code)

I know it's not the best practice, but it's really just a stopgap solution until I fix the layout on these other browsers. I'm using a lot of progressive CSS and there are just a ton of inconsistencies between webkit and others. The meta refresh is what I had been using previously, as it does exactly what I need, but I wasn't sure how to target that to only webkit browsers. What javascript could I use to insert that meta tag only in webkit? — Lee H, Apr 29 '13 at 18:26
@LeeH Well, you could either put that meta and delete it on other browsers, or do the inverse operation, add it only on webkits browsers (the second is more logical, but not necessarily the simpler). I'll edit my answer. — Sk8erOfBodom, May 02 '13 at 16:06
I've removed the need for the redirect, but this is actually great as I do I want to dynamically insert different content on different browsers, so this answers my question for that. And again... this is just a temporary fix. But this is great. Thanks for your help. — Lee H, May 02 '13 at 20:38
@LeeH Nice. And you're welcome. I am glad I also helped you with further coding. ^^ Note that the way I added the `` should work with any tag the same way. If you have to add a lot though, using AJAX might be better (jQuery offers a simple and nice way to do that). — Sk8erOfBodom, May 02 '13 at 21:51

Browser specific redirect with delay

1 Answers1