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

StackOverflow https://stackoverflow.com/questions/18739655

题

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

http://blog.integryst.com/webcenter-interaction/files/2011/10/ie9-support-confluence.png

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

有帮助吗？

解决方案

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.

其他提示

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

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);
}

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

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

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.

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

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
  1. Browser is IE but is version 8 or earlier
  • use browseris.ie8down

(tested in SP2013 on-prem)

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>

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.');
        }

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/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top