Show a message if the browser is not internet explorer 9 or greater

Question

I would like to show my users a bar that looks like this, if:

1. Browser is not IE; or
2. Browser is IE but is version 8 or earlier

(Note that the screenshot is just for illustration - IE 9 is supported for my site.)

I found this nice jQuery plugin, but I don't want to use popups.

http://jreject.turnwheel.com/

The site where I will implement this is a Sharepoint 2013 site, so I will use a content editor webpart to include the HTML content you provide and the bar should be at the top of everything else.

Please include CSS if needed to make it look as the screenshot?

Ricardo

See how you can identify USER agent of the browser. You need to write custom code for this then. Search around you will find the way around. – Differentiation

So you site requires IE 9 or later? It doesn't support earlier versions of IE, or other browsers? – Contemplative

its Sharepoint 20130 2013 site, older version works, but IE 9 looks better. – Ricardo

I'm surprised anyone uses Sharepoint in an environment where the browser people use isn't under the control of a corporate IT department. – Reincarnate

Check $.support in jquery docs.. – Fabrikoid

@LuisValencia: do you want to cater for users viewing the site in browsers that aren't Internet Explorer (e.g. Chrome, Firefox), or do you just want to warn users using older versions of Internet Explorer? – Contemplative

@PaulD.Wait its just a warning, by policy IE 9 is pushed when people start the laptops, but sometimes apparently its not getting pushed. so I want to put the warning for people to contact the help desk for IE9 installation. – Ricardo

@Reincarnate its, its just that sometimes on some laptops IE9 doesnt get installed automatically with the policies, I guess there is something wrong on the policies lol – Ricardo

keep the bar already and hide it just for IE9 and greater versions. Have a look at this link. – Fabrikoid

I added a complete example below that extended Dany's example and works in IE 6,7,8,9,10,11, Chrome, FF, and Edge. – Haymow

Answer 1

HTML

IE 9 and earlier (down to, I think, IE 4) can be identified using conditional comments in HTML.

As @Jost noted, you could use them to warn IE users on IE 8 and earlier, like this:

<!--[if lte IE 8]>
    BANNER HERE
<![endif]-->

However, as IE 10 dropped support for these, you can't use them to identify non-IE browsers.

jQuery

jQuery used to include a browser detection module ($.browser), but it was removed in jQuery 1.9. If you can use an earlier version of jQuery (e.g. 1.8.3) or the jQuery Migrate plugin, then you could use this to show the banner.

if ( !$.browser.msie || $.browser.version < 9 ) {
    // Add banner to the page here.
}

Browser Detection in general

Please note that browser detection is difficult. New browsers are coming out all the time, so any browser support plugin can rapidly become out of date, as can the premise on which you base your warning messages. jQuery's browser detect was the most consistently maintained, and even they gave up on it in the end.

These days, web developers are generally expected to write code that works cross-browser, and use feature-detection to deal with browsers that don't support the features they want to use.

As you're working on a SharePoint site, presumably it's for internal company use, and the company is Microsoft-centric. It sounds like you're developing the site to work in IE, and ignoring other browsers during development.

If you can reasonably expect most of your users to be on some version of IE, maybe the conditional comment warning is enough.

Contemplative

Does my Answer explain why i thought it might be easier to do it the other way round? (refering to your comment on @Josts' deleted Answer) – Pears

Conditional comment are gone, $.browser is dropped, browsers detection is bad. Where is an answer to the actual question? – Teredo

@C5H8NNaO4: Yup - I can see that setting display:none is easier than adding the banner via JavaScript. However, I would note that when you do it that way round, then if the detection script fails, the user sees the warning. From what the OP says I think a false positive (showing the warning in a new browser) is worse than a false negative (not showing the warning in an old browser). – Contemplative

@Pavlo: the answer to the actual question is under the “Browser Detection in general” heading, where it points out that it’s impossible to write any code today that’s guaranteed to successfully identify browsers that don’t exist yet. – Contemplative

Answer 2

I found the question interesting. So i worked out a script for myself, but maybe someone else can benefit from it. So that's why I posted it as an answer. It returns an object with browser and OS information.

browser = {};
if (/edge\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "edge";
    browser.majorVersion = parseInt(/edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /edge\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "chrome";
    browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "firefox";
    browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
    browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "opera";
    browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = 11;
    browser.version = "11";
} else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {
    browser.agent = "safari";
    browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
    browser.agent = false;
    browser.majorVersion = false;
    browser.version  = false;
}

if (/Windows\ NT/.test(navigator.userAgent)) {
    browser.os = "windows";
    var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);
    switch(winver) {
    case 6.0:
        browser.osversion = "Vista";
        break;
    case 6.1:
        browser.osversion = "7";
        break;
    case 6.2:
        browser.osversion = "8";
        break;
    case 6.3:
        browser.osversion = "8.1";
        break;
    case 10.0:
        browser.osversion = "10";
        break;
    default:
        browser.osversion = false;
    }
} else if (/OS\ X\ /.test(navigator.userAgent)) {
    browser.os = "os x"; // 
    browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "linux";
    browser.osversion = false;
}

Tearjerker

Won't work for IE 11, as it doesn't contain 'MSIE' part: nczonline.net/blog/2013/07/02/… – Teredo

Edited to support IE 11 and Opera. – Tearjerker

IE 10 shows as IE 1 the fix is to change the MSIE line to: (Note the '{1}' has been changed to '+' browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]); – Haymow

Edited to add support for new versions of Opera, Safari, Edge, and Windows, and to fix OS X versioning. – Disposition

there is limitation in majorVersion as it was based on a few years back versions of browsers, to make it future proof it should be: ([0-9]{1,2}) or even ([0-9]{1,3}) – Credence

Add edg for the new Edge Chromium based if (/edg\/[0-9]{2}/i.test(navigator.userAgent)) – Unwatched

Answer 3

EDIT: This directly answers the OP.

I have updated Dany's answer with two updates tested in (IE 6,7,8,9,10,11), Chrome, and Edge. Primarily because the updates are very hard to read in the comments.

• Pure javascript - No jQuery required
• IE10 reports IE 10 vs IE 1
• This now reports Edge
• No specific HTML elements required to pre-exist (other than a body)
• Tested in IE6, IE7, IE8, IE9, IE11, Chrome v62, and Edge
• TODO: get it working properly in OSX Sierra, and iPhone

The test for edge must be first as it claims to be everything. :/

All this being said Browser detection "is what it is" and we can hope that the need for it will go away soon.

browser = {};
if (/(Edge\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
    browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
    browser.agent = "MSIE";
    browser.version = 11;
} else {
    browser.agent = false;
    browser.version = false;
}

if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "Windows";

    switch (parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
        case 6.0:
            browser.osversion = "Vista";
            break;
        case 6.1:
            browser.osversion = "7";
            break;
        case 6.2:
            browser.osversion = "8";
            break;
        default:
            browser.osversion = false;
    }
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "OS X";
    browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "Linux";
    browser.osversion = false;
}

if (browser.agent === "MSIE" && browser.version <= 9) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
    newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
    document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing 
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
    newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
    document.body.insertBefore(newDiv, document.body.firstChild);
}

Haymow

Dear downvoter: this works. And it's what the OP asked about. So I downvote your downvote. – Haymow

Answer 4

I like the simple conditional html. (Simpler always seems better.)

Another more comprehensive javascript alert can be found at: http://www.browser-update.org

Lonee

Answer 5

You could use conditional compiling in conjunction with conditional comments

Here a short overview of how this could work.

1. Always show the bar
2. Set a flag in javascript. IEMinor=false
3. Set the flag to true if IE <= 9, by using a script tag and conditional comments
4. Use conditional compiling to hide the bar if @_jscript_version > 9 (actually not needed) and IEMinor===false

---

<div id="bar"><center>Not Supported</center></div>
<script>
  var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
  /*@cc_on @*/
  /*@if (@_jscript_version > 9)
     if (!IEMinor)
       document.getElementById("bar").style.display = "none";
  /*@end @*/
</script>

_{I was too lazy to add the script type...}

Here is an example on JSBin which doesn't show the bar in IE 10+ (untested). And shows it in other cases.

Note: I didn't make it look exactly like in the screenshot, you should get that part working

Edit: Using the browsermode of IE to test against IE<10 seems to work
Edit2: Whoops i thought from the picture IE9 is unsupported too, to allow IE9 change lte IE 9 to lt IE 9 and @_jscript_version > 9 to >= 9

Pears

@Teredo I don't have an IE 11. But it shouldn't have conditional comments, so the flag should be false and the bar should hide, except if they would remove conditional compiling support – Pears

Answer 6

Checking if browser engine is Trident 6+ (IE 9, 10, 11) should do (demo):

(function () {
  var trident = {
    string: navigator.userAgent.match(/Trident\/(\d+)/)
  };

  trident.version = trident.string ? parseInt(trident.string[1], 10) : null;

  if (!trident.string || trident.version < 6) {
    document.body.innerHTML = '<div class="alert">Not supported.</div>' +
      document.body.innerHTML;
  }
})();

However, the sniffing may break in IE 11 final or future versions if Microsoft will decide to change userAgent string.

Teredo

Answer 7

Actually in SharePoint (OP mentioned that) there is a built-in variable browseris. It's available in the global window scope. Answering OP question:

1. Browser is not IE;

• use browseris.ie

2. Browser is IE but is version 8 or earlier

• use browseris.ie8down

(tested in SP2013 on-prem)

Arithmomancy

Answer 8

This is tested for IE 10 and 11. Head on to this link for more description.

 <div id="noSupport"></div>
 <script>
    function isIE() {
        return /Trident\/|MSIE/.test(window.navigator.userAgent);  // IE 10 and IE 11
    }
    if (isIE()) {
        document.getElementById('noSupport').innerHTML = 'IE not supported'
    }
</script>

Limicolous

Answer 9

check this code, its working as expected.

        if (navigator.userAgent.includes('Trident')) {
            alert('This site is not supported by your Internet Explorer, please use Microsoft Edge or Google Chrome.');
        }

Crist

A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it. – Zebada

Answer 10

I don't suggest you to use client side as some browsers might trick you by passing wrong values to pass website tests.

So i guess your using PHP as a server side you can detect the browser using the get_browser() function that give you a lot of information about the browser here is a nice turtoeial:

Part 1:

http://thenewboston.org/watch.php?cat=11&number=67

Part 2:

http://thenewboston.org/watch.php?cat=11&number=68

if your using another language all server side language has this functunality just google it or reference some sort of a turtorial

From the client side you can detect if it is compatible like that:

function Is_Compatible(){
var browser = navigator.appName;
var Fvar = document.getElementById('test').style.borderRadius;
if(browser !== 'Microsoft Internet Explorer'){
return false;
}
if(Fvar == undefined){
//Not IE9+
return false;
}else{
//Is IE9+
return true;
}
}
if(Is_Compatible() == true){
alert('Compatible');
}else{
alert('uncompatible');
}

HTML:

<div style="border-radius:20px;opacity:0;z-index:-500;" id="test"></div><!--It willl not inflect your design-->

FIDDLE:

Test it and it works:

http://jsfiddle.net/Z7fvb/

Cobbett

Server side browser detection is the thing that is bound to be tricked by browsers - It is much easier and safer to do it client side, especially for IE, since they have conditional comments. – Downy

@Jamil: "some browsers might trick you by passing wrong values to pass website tests" - every browser passes a partially fake user agent string to the server. (They all start with "Mozilla", even though Mozilla doesn't exist any more.) – Contemplative

@Teredo it alert Compatible when it is chrome , FireFox , IE9 , IE 10 do you want to return false when it is on chrome firefox safari or opera too ??? – Cobbett

@Pavio the question will be edited to meet your need it is simple – Cobbett