[JavaScript]Load different webpage depending on browser type

**taha116** · 06-07-2009 09:23 AM

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

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** · 06-07-2009 09:47 AM

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** · 06-07-2009 01:44 PM

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** · 06-07-2009 02:21 PM

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",
			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"
		}
	]

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 'IDENTITY':
          document.write('<meta http-equiv="refresh" content="1; url=URL.HTML">');
         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** · 06-07-2009 02:40 PM

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** · 06-07-2009 02:44 PM

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** · 06-07-2009 04:19 PM

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="http://www.lacosta-seaisle.com/image..._aqua.gif"></p>

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** · 06-07-2009 07:10 PM

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>

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.

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="###; 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

**taha116** · 06-07-2009 10:14 PM

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

**garrettroyce** · 06-07-2009 10:15 PM

Thank you very much. I'm glad to help

Thread: [JavaScript]Load different webpage depending on browser type

LinkBack

Thread Tools

Display

[JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Re: [JavaScript]Load different webpage depending on browser type

Similar Threads

Is Safari better then all other browsers?

dont load my webpage.

Please Help. Website won't load properly in any browser.

Help...........how to up load stuff and start my webpage ar?

vBulletin - Optimization !!!!!

Posting Permissions