如何延迟使用 Javascript 制作的警报框？

Question

I have an alert box that pops up if someone enters a website using Internet Explorer. The problem I am having is that the alert shows up instantly, so sometimes the previous website is still visible when the alert shows up. I need to put on a delay, so that the website can load up before the alert shows up - or make it only show once everything is loaded. I use Wordpress.

I have tried numerous pieces of code that I found online, but unfortunately none of them has worked for me, mainly because I dont know how to "include it" with the code I already have (which I got from a different Stack Overflow thread)

function isIE() {
  ua = navigator.userAgent;

  /* MSIE used to detect old browsers and Trident used to newer ones*/
  var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

  return is_ie; 
}
/* Create an alert to show if the browser is IE or not */
if (isIE()){
    alert('MY ALERT MESSAGE');
}

I want the alert to show up after the page has been loaded, either in form of a delay or by using onload. Javascript "only" is prefered since I work with a webpage builder that does not like jQuery.

Answer 1

Wrap you statement in setTimeout. Time is in miliSeconds

if (isIE()){
    setTimeout(function () {
        alert('MY ALERT MESSAGE');
    }, 1000);
}

Answer 2

I recommend adding the script tag at the bottom of the page, or use the onload of the body element.

In both cases, the alert will come after the html has reached the user.

---

Another more elegant way could be to make a small modal yourself, ie create your own "alert". By default, you hide it, and show it when the user has IE:

// CSS
#browserWarning{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    background: #FFF;
    padding: 25px;
}

// Javascript
if (isIE()){
    document.getElementById("browserWarning").style.display = 'block';
}

You can now crate something that looks a bit better, allows for a bit more explanation (I'm assuming "IE not supported because" messages here), and because it's non-blocking, the rest of your page keeps on loading.