[JavaScript]Load different webpage depending on browser type

taha116 · Jun 7, 2009

The script is tiny and simple and all i need is a small manual edit so it detects other common browsers like chrome, safari, and if u can that other one that starts with an o :biggrin:

This is were i found it
http://www.rgagnon.com/jsdetails/js-0003.html

This is the code

Code:

<SCRIPT>
if (navigator.appName == "Microsoft Internet Explorer")
  document.write('<META HTTP-EQUIV="REFRESH" CONTENT="1;URL=msie.html">');
else
  document.write('<META HTTP-EQUIV="REFRESH" CONTENT="1;URL=netscape.html">');
</SCRIPT>

Thanks for the help

garrettroyce · Jun 7, 2009

This is a bit overkill, but it should work

http://www.quirksmode.org/js/detect.html

Then you can do something like:

Code:

switch(BrowserDetect.browser) {
     case 'MSIE': document.write(....); break;
     case 'Mozilla': document.write(...); break;
     case etc....
     default: document.write(....); }

taha116 · Jun 7, 2009

You seem to have over estimated me, i cant do anything in java

Could you please give me the exact code, so that it does the exact same thing for mozila safari etc and the only thing i want to edit myself is were it redirects 2...

Sorry, i know im an idiot

garrettroyce · Jun 7, 2009

This shouldn't be too hard. And, if you can do this yourself, you can add or remove different browser types as you want

Look at this part:

Code:

dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			[B]identity: "Chrome"[/B]
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			[B]identity: "OmniWeb"[/B]
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			[B]identity: "Safari",[/B]
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			[B]identity: "Opera"[/B]
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			[B]identity: "iCab"[/B]
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			[B]identity: "Konqueror"[/B]
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			[B]identity: "Firefox"[/B]
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			[B]identity: "Camino"[/B]
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			[B]identity: "Netscape"[/B]
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			[B]identity: "Explorer",[/B]
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			[B]identity: "Mozilla",[/B]
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			[B]identity: "Netscape",[/B]
			versionSearch: "Mozilla"
		}
	]

The "identity" part is what the user's browser is identified. So, we need to use a "switch" to find a match to what the user's browser is and where you want to send them.

Code:

switch(BrowserDetect.browser) {
     case 'Chrome':
          document.write('<meta http-equiv="refresh" content="1;url=chrome.html">');
          break;
     default:
          document.write('<meta http-equiv="refresh" content="1; url=firefox.html">');
}

The default is if we can't figure out what the browser is. You can redirect them anywhere. I chose firefox, but you could create a custom page for unknown browsers even.

So, for every "identity" in the first section you want to support, you have to add this in the second section:

Code:

     case [b]'IDENTITY'[/b]:
          document.write('<meta http-equiv="refresh" content="1; url=[b]URL.HTML[/b]">');
         break;

Identity is the identity from above and url is the url you want to send the user to.

Copy the entire code from the link I gave you and put that in the <head> of your document. Then copy the second part after that:

Code:

<script type="text/javascript">{all the code from the link goes here}
switch(BrowserDetect.browser) {
     {all the case 'identity' go here}
}</script>

I'll help you try to piece this all together

taha116 · Jun 7, 2009

ok well im trying it now, ill post back with whatever i could manage
Edit:

Code:

<head>

var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();


</head>

<body>


<script type="text/javascript"> {var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();
}
switch(BrowserDetect.browser) {
  { case 'IDENTITY':
          document.write('<meta http-equiv="refresh" content="1; url=URL.HTML">');
         break; } }</script>

Am i doing this properly? I know u need to change identy to the name of whatever browser and the url="" into whatever i want but is that right?

garrettroyce · Jun 7, 2009

Code:

<head>
<script type="text/javascript"> {var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();
switch(BrowserDetect.browser) {
     case 'IDENTITY':
          document.write('<meta http-equiv="refresh" content="1; url=URL.HTML">');
         break; }</script>

The whole thing goes in the head section. I fixed a few other little errors, but I think you understand what you're doing

taha116 · Jun 7, 2009

Ok honestly i cant do this so im gona ask you to do it and then ill give u 150 credits cuz im already far from rich...

HEre is my exact html document that i use
Top to bottom

Code:

<body background="/images/background1.jpg">
 
<SCRIPT>
if (navigator.appName == "Microsoft Internet Explorer")
  document.write('<META HTTP-EQUIV="REFRESH" CONTENT="1;URL=http://koc.x10hosting.com/index3.html">');
else
  document.write('<META HTTP-EQUIV="REFRESH" CONTENT="1;URL=http://koc.x10hosting.com/index2.html">');
</SCRIPT>
 
 
<p align=center><font color=green size=5>Rendering Browser</font></p><p align=center><img src="[URL]http://www.lacosta-seaisle.com/images/loading_aqua.gif"></p[/URL]>

I could not get what you suggested to work so can you now please use coding magick to make this idiot proof and add what is required to make it detect firefox, chrome etc.

There is no othe code i use and this script works awesome.

(and yes this is the whole script)

garrettroyce · Jun 7, 2009

Code:

[B]<html>[/B]
<head>
[B]<title>Redirecting</title>[/B]
[B]<meta http-equiv="Content-Type" content="text/html; charset=utf-8">[/B]
<script type="text/javascript"> {var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "unknown";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();
var browser = BrowserDetect.browser;
browser = browser.toLowerCase();
var link = browser + '.html';
document.write('<meta http-equiv="refresh" content="1; url=' + link + '"/>');
</script>
</head>
<body background="/images/background1.jpg">
<p align=center><font color=green size=5>Rendering Browser</font></p>
<p align=center><img src="[B]http://www.lacosta-seaisle.com/images/loading_aqua.gif[/B]" [B]alt="loading"[/B]></p>
[B]</body>[/B]
[B]</html>[/B]

A couple of quick pointers (I've bolded some so you can see them easier):
1) missing <html> tags. All html documents should have these
2) missing </body> closing tag
3) <img must have an alt attribute
4) You are hotlinking someone else's image. If it is allowed, you should download your own copy or get your own image. eg, don't use http://site.com/image unless the site is an image hosting site like photobucket or imageshack
5) missing <title> in the head section
6) missing <meta http-equiv="Content Type"
7) you must have files for each of these browsers, named browser.html, for example firefox.html, explorer.html, etc.
a) chrome
b) safari
c) opera
d) konqueror
e) firefox
f) netscape
g) explorer
h) mozilla
i) unknown
If you don't want to support one or more of these, delete the section that looks like:

Code:

 {
            string: navigator.userAgent,
            subString: "BROWSER",
            identity: "BROWSER"
        },

You should not get rid of "unknown" People intentionally change their browsers so they cannot be detected in this way. You don't want them to stop visiting your site.
8) Your page will only appear for 1 second before it is refreshed. Maybe you want to increase this time. You can do so by editing this line in the code above:

Code:

document.write('<meta http-equiv="refresh" content="[b]###[/b]; url=' + link + '"/>');

Replace ### with the number of seconds until a refresh happens.
9) Consider this: do you need a whole different page for each browser? You can see how much work it is already. Most of the time, you only need to change the CSS code to make the page look the same no matter what browser. Unless you have completely different code for each browser, you're repeating a lot. Consider using conditional comments: http://www.quirksmode.org/css/condcom.html
10) Good luck :biggrin:

taha116 · Jun 7, 2009

Awesome, Thanks added to your rep and giving you 150 creds

garrettroyce · Jun 7, 2009

Thank you very much. I'm glad to help

taha116 · Jun 8, 2009

No serisly that is just awesome!!!!!! if i wasnt low on creds i would pay u more, Thanks alot!
Edit:
Hey im having trouble getting the script to work, i havent created all the html pages yet but it should still attempt to redirect, witch it dosent, although it does load the page itself.

Any ideas?

This is what i used

Code:

<html>
<head>
<title>Redirecting</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript"> {var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "unknown";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();
var browser = BrowserDetect.browser;
browser = browser.toLowerCase();
var link = browser + '.html';
document.write('<meta http-equiv="refresh" content="1; url=' + link + '"/>');
</script>
</head>
<body background="/images/background1.jpg">
<p align=center><font color=green size=5>Rendering Browser</font></p>
<p align=center><img src="http://www.lacosta-seaisle.com/images/loading_aqua.gif" alt="loading"></p>
</body>
</html>

Then i tried to load the page in Firefox and made a firefox.html file , but it didnt redirect

garrettroyce · Jun 8, 2009

sorry, there is an extra { on this line:

Code:

<script type="text/javascript"> {var BrowserDetect = {

should be

Code:

<script type="text/javascript">var BrowserDetect = {

taha116 · Jun 8, 2009

OOOOO !!!! Success, finally , Buhahaha!

Thank you again!

It works, and i think that is as many problems i will find with it since i use firefox and IE.

Just in case are you sure you used the right terms for detecting browsers, by that i mean names and stuff, cause id rather not find a problem 2 months later and bug u about it then

garrettroyce · Jun 8, 2009

Well, like I mentioned before, browser detection is actually impossible to be 100% accurate. It depends on information that any knowledgeable user can change at any time. I can tell my browser to say I'm using IE4 on an IPhone (which is not the case

) and no script in the world can tell the difference. User-agent strings will change as new browsers are released. All we can do is hope that the people developing the browser will stick with the same system they've used for the last 10 years.

taha116 · Jun 8, 2009

K, so were would i need to go in firefox to find out the name is "mozilla" not mozilla firefox or something like that?

garrettroyce · Jun 8, 2009

"Mozilla" is for Mozilla based browsers that are not Firefox, by the way.

I set it to automatically lowercase everything. You just need to match up with the part that says identity: browser

Here are the browsers I programmed in:
a) chrome
b) safari
c) opera
d) konqueror
e) firefox
f) netscape
g) explorer
h) mozilla
i) unknown

taha116 · Jun 8, 2009

You should post the completed script with like step instructions somewhere were its more publicly accessible, its useful piece of code

vol7ron · Jun 8, 2009

You really should do this server side, rather than with javascript.

taha116 · Jun 9, 2009

Why?

And how?

garrettroyce · Jun 9, 2009

taha116 said:
Why?

And how?

If you aren't doing any other server side programming at all, it wouldn't make sense to do this one page. They will do exactly the same the exact thing. The only difference is the server side option will not have a loading page.

I've used this script before with some success http://techpatterns.com/downloads/php_browser_detection.php

[JavaScript]Load different webpage depending on browser type

Member

Community Support

Member

Community Support

Member

Community Support

Member

Community Support

Member

Community Support

Member

Community Support

Member

Community Support

Member

Community Support

Member

New Member

Member

Community Support

Free Web Hosting

Our Community

Legal