load different html file based on browser?

Question

I am not sure if this is even possible, but googling has lead me to no clear answer. Is there a way to load a different set of html based on browser type?

This is seriously the only option for my unique case. I've tried everything else and the only way I'm going to be able to make it work is by putting in an entirely different html file with entirely different scripts and resources for Internet Explorer 10 and below. I have a script that needs to remain at the top of the load order in order to function correctly (google polymer js file) and I need to also detect if the browser is ie10 or below and be able to tell the browser to not load that file if so, as it's causing so many errors that nothing else will load below it on the page.

So, yes -- any way to switch which html loads based on browser? Preferably something that would work with ie10 and below? Any info or links would be appreciated. Thank you!

edit I cannot use a conditional comment because I need it to work with ie10 and they removed support for conditionals. :(

edit I can now detect IE10 and below fine thanks to Siropo, but I am not sure how to get the file to load before the rest of the page.. Like I need to check if the browser is IE10 and below, and then load the file in with everything else. Is there maybe a way to tell everything to wait until I've checked browser type?

you can load html file through ajax call based on browser version! or views as per angular js! it might be helpful! — developerCK, Oct 08 '14 at 07:04
possible duplicate of [How not to load a script in IE?](http://stackoverflow.com/questions/5505155/how-not-to-load-a-script-in-ie) — parchment, Oct 08 '14 at 07:05
What a program language you want to use to check the client browser? Javascript, PHP...? — siropo, Oct 08 '14 at 07:07
the only language that could do something like this that I am familiar with is javascript, so I would prefer using that if I can! — shan, Oct 08 '14 at 07:09
ok, then check this link - http://www.javascriptkit.com/javatutors/navigator.shtml. In below you have a section: Detecting IE x.x — siropo, Oct 08 '14 at 07:14
thank you this is a good method of detecting ie10, now i just need to solve my other problem :-) — shan, Oct 08 '14 at 07:21

score 3 · Answer 1 · answered Oct 08 '14 at 07:06

3

If you only need to detect different versions of IE and not other browsers, you could go for the IE specific HTML conditionals:

http://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/

If you are using a framework to build your site that supports some sort of templating system, you could rely on the User-Agent in the request to render different HTML templates for different browsers.

answered Oct 08 '14 at 07:06

marekful

14,986
6
37
59

Thanks for the link :-) I'm using these for the IE's below 10 but I also need one that works for ie10 and I believe they removed conditional support – shan Oct 08 '14 at 07:09

score 0 · Answer 2 · answered Oct 08 '14 at 07:07

This trick works for all browsers.

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

Here is more data about this feature: https://community.x10hosting.com/threads/javascript-load-different-webpage-depending-on-browser-type.98287/

load different html file based on browser?

2 Answers2

Linked

Related