How to detect IE8 and display a page or alert

Question

I've got a website which was built using Jekyll. It doesn't render correctly in IE 8, therefore, I want a way to detect if they are using IE 8 and display an appropriate page / alert.

I've got a function which detects the browser and replaces the page displayed:

"use strict";
define([], function () {
    function ieVersion() {
        var myNav = navigator.userAgent.toLowerCase();
        return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : -1;
    }
    var v = ieVersion();
    if (ieVersion() > -1) {
        document.location.replace("ie8.html");
    }
});

I am calling it within the HEAD tag:

<!DOCTYPE html>
<html class='no-js' lang='en'>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>{{ page.title }}</title>
      <meta content='width=device-width, initial-scale=1.0' name='viewport'>
      <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
      <link href='{{ site.url }}/css/framework.css' rel='stylesheet'>
      <link href='{{ site.url }}/css/syntax.css' rel='stylesheet'>
      <link href='{{ site.url }}/css/style.css' rel='stylesheet'>
      <link href='{{ site.url }}/css/fontello.css' rel='stylesheet'>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
      <script src='{{ site.url }}/js/IE.js'></script>
      <script src='{{ site.url }}/js/modernizr.js'></script>

    </head>

However, it doesnt appear to work.

I opened it within IE8 and there is a error saying:

'$' is undefined 
IE.js

Mi-Creativity · Answer 1 · 2016-02-17T18:23:05.917

3

Alternatively, you can use this:

if (IE10orBelow() < 9) {
  alert('damn!');
}else{
  document.body.innerHTML = "you're safe";
  }

function IE10orBelow() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }
}

edited Feb 17 '16 at 18:23

answered Feb 17 '16 at 17:47

Mi-Creativity

9,554
10
38
47

score 2 · Answer 2 · answered Feb 17 '16 at 10:30

2

If your pages not displaying fine in IE8 then you need to correct css for disturbed elements by adding extra css properties.

Do add new css file for IE8 using code below

<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="styles/ie8.css" />
<![endif]-->

In this file you can write css to make correct disturbed elements.

answered Feb 17 '16 at 10:30

PHPExpert

945
5
9

Why support ie8 when microsoft doesn't anymore - https://www.microsoft.com/en-gb/WindowsForBusiness/End-of-IE-support – Pete Feb 17 '16 at 10:34
Please check [this](http://www.themepunch.com/general/internet-explorer-8-usage-report-2015-poll/) and [this one](http://www.sitepoint.com/browser-trends-february-2015-us-ie8-rebound/) as well. Still some users are using IE8. And as every user or customer is valuable, lots of website owner don't want to loose them. So they try to keep site upto date for IE as well. – PHPExpert Feb 17 '16 at 10:38
Your stats are out of date they show usage before the browser support was pulled - it doesn't even make the top 10 in January: https://www.w3counter.com/globalstats.php?year=2016&month=1 – Pete Feb 17 '16 at 10:40
Yes, but we never know how many IE users updated their Windows version. It might be possible that some one using old version of Windows like XP. – PHPExpert Feb 17 '16 at 10:42
Well if you want to support something that the company that wrote it doesn't even support, then good luck to you as it is a waste of time and resources, and you should be redirecting them to upgrade the browser as the OP is trying to do – Pete Feb 17 '16 at 10:47
1

There are many government offices in some countries still use Windows7 with it's default IE8 and the update is disabled, most of these users are not tech savvy and doesn't know why IE8 and below browsers are worthless, I know several people still using Windows XP – Mi-Creativity Feb 17 '16 at 17:32

Chintan Mirani · Answer 3 · 2016-02-17T11:33:44.250

0

Load js when less then ie8

    <!--[if lt IE 9 ]> -->
    <script src='{{ site.url }}/js/IE8.js'></script> 
    <!-- <![endif]--> 

Load js when greater then ie8 and other browser

    <!--[if (gt IE 8)|!(IE) ]> -->   
        <script src='{{ site.url }}/js/IE.js'></script> 
    <!--<![endif]-->

Now in IE8.js you can make your code to alert or replace html.

edited Feb 17 '16 at 11:33

answered Feb 17 '16 at 10:38

Chintan Mirani

1,464
9
18

Hi Chintan, I've added the top line to the website but for some reason it still doesnt do anything when it's opened in IE 8 – David Smith Feb 17 '16 at 11:30
Hi David, I have made correction in my answer. Please try this new one. This will work for sure. I tried locally. – Chintan Mirani Feb 17 '16 at 11:34

score 0 · Answer 4 · answered Feb 17 '16 at 11:58

0

Try this:

http://jreject.turnwheel.com/

jReject is a simple, light-weight library designed to display a popup based on a the browser, specific browser version, specific platforms, or rendering engine. Provides full customization of the popup. Uses a small CSS file, and can easily be used on page load or during a specific page event. Also provides a flexible way to beautifully and cleanly display custom browser alternatives in the popup.

answered Feb 17 '16 at 11:58

Surender Lohia

349
3
12

Interseting ... Would this work for IE8? I've noticed it needs JQuery 1.7 – David Smith Feb 17 '16 at 12:18
Yep, In options you can specify ' msie: 8 ' Checkout the options for more detail. Ya, It needs jQuery 1.7+ Note: I am not checked in IE8 yet. But I am used this for reject all IE browser for my project. It works awesome. – Surender Lohia Feb 17 '16 at 12:33

How to detect IE8 and display a page or alert

4 Answers4