getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2019
getButterfly

How to show an outdated browser alert on Internet Explorer 11

Here’s a nice overview on why Internet Explorer 11 should be phased out and users blocked from viewing the site content when using the aforementioned browser.

Next, as the title says, here’s how to detect an IE 11 browser:

// Method #1: Detect IE 10 and IE 11
function isIE() {
    // IE 10 and IE 11
    return /Trident\/|MSIE/.test(window.navigator.userAgent);
}

Or IE 11-only:

let isIE11 = (function () {
    // true on IE11, false on Edge and other IEs/browsers.
    let isIE11 = !!window.MSInputMethodContext && !!document.documentMode,
        ua = window.navigator.userAgent;

    if (ua.indexOf("AppleWebKit") > 0) {
        return false;
    } else if (ua.indexOf("Lunascape") > 0) {
        return false;
    } else if (ua.indexOf("Sleipnir") > 0) {
        return false;
    }

    array = /(msie|rv:?)\s?([\d\.]+)/.exec(ua);
    version = (array) ? array[2] : '';

    return (version === 11) ? true : false;
});

Next, we need to display an outdated/unsupported browser alert:

let showBrowserAlert = (function () {
    if (document.querySelector('.unsupported-browser')) {
        let d = document.getElementsByClassName('unsupported-browser');

        is_IE11 = isIE11();

        if (is_IE11) {
            d[0].innerHTML = '<b>Unsupported Browser!</b> This website will offer limited functionality in this browser. We only support the recent versions of major browsers like Chrome, Firefox, Safari, and Edge.';
            d[0].style.display = 'block';
        }
    }
});

document.addEventListener('DOMContentLoaded', showBrowserAlert);

Don’t forget to add an empty <div class="unsupported-browser"></div> right after the opening <body>.

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Added by Ciprian on Thursday, August 22, 2019 in JavaScript

Do you want better SEO? More traffic? More conversions? More growth? We help companies exponentially grow their traffic and conversions, while outranking their competitors. With more than 10 years of experience, we’ve learned what is valuable to our clients.
SEO Dublin | SEO Malta

Related Articles

My Battle Tested Recommendations
Disclaimer: These recommendations contain affiliate links.

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush
SEMrush

Privacy Policy