0

My client wants to show a banner when the user is using IE 11 but they only want it to show on the page that the user enters on. If they navigate to other pages, it should disappear. And, if they leave the site and come back, it should show the banner again. I have the detecting IE 11 figured out but I don't really know where to start to get the other part working. Any help?

Here's what I have so far:

function isIE(){
  return window.navigator.userAgent.match(/(MSIE|Trident)/);
}

//function to show alert if it's IE
function ShowIEAlert(){
    if(isIE()){
       document.getElementById('ie11-banner').classList.remove("hidden");
    }
}
taylor018
  • 351
  • 2
  • 16
  • Use a cookie that expires per session – Dominik Nov 09 '20 at 20:51
  • `navigator.userAgent` regexes are the weakest way that you can possibly attempt to determine if the client browser is IE11. –  Nov 09 '20 at 20:51
  • I would use `window.localStorage;` personally -- Since it's just storing a "site preference" .. A cookie seems unnecessary. – Zak Nov 09 '20 at 20:56
  • Now, I must ask, as IE11 is a dead browser, just like Amaya and Netscape Navigator, what brings you to do this anyway? –  Nov 09 '20 at 20:57
  • @xxh so what's a stronger way to check if the browser is IE11? also, I'm only doing this because the client wants it. – taylor018 Nov 09 '20 at 22:30
  • There's a thousand questions on browser detection on SO already, https://stackoverflow.com/questions/27084036, https://stackoverflow.com/questions/9847580. Many will warn that UA sniffing is never safe. –  Nov 10 '20 at 00:15

1 Answers1

0

One possible solution to this could be using sessionStorage, which is supported in IE8+.

// example of feature detection for an old browser like IE11
const isIE11 = "documentMode" in document && !("includes" in String.prototype);

// the key that you store upon first entering the site
const firstVisit = sessionStorage.getItem("firstVisit") !== null;

if ( firstVisit === true ) {
    // this should be their second+ time visiting; do nothing
} else {
    sessionStorage.setItem("firstVisit", true);
    // can be any value, even `undefined`, just not `null`, as that is the default value for Storage values

    // this should their first time visiting
}