Показываем пользователю IE6-7, что он использует устаревший браузер

Блог им. Loci
По мотивам топика. Показываем пользователю IE6-7, что он использует устаревший браузер. И предлагаем список из современных браузеров.



ДЕМО (заходим с IE6-7)

1. Подключаем

Чтоб код заработал, нам нужно вставить его в шаблон сайта. Например в header.tpl
Идем в /templates/skin/new/header.tpl ~83строка

Ищем
<body onload="prettyPrint()">


И сразу под ним вставляем наш код
<script type="text/javascript"> 
var ki_ua = window.navigator.userAgent;
if (ki_ua.indexOf ("MSIE") >= 0) {
    if( parseInt(ki_ua.substr(ki_ua.indexOf("MSIE")+5, 3)) < 8 ){
        document.write('<center><div id="kickie" style="position:absolute;top:0px;right:0px;width:100%;height:100%;background-color:#F2F4FF;color:#0f0f0f;font-family:tahoma,arial,verdana;font-size:11px;padding-top:100px;">Вы используете устаревший браузер.
Чтобы использовать все возможности сайта, загрузите и установите один из этих браузеров:

<table style="width: 400px; height: 100px; text-align: center; margin-left: auto; margin-right: auto; background-color: #F2F4FF; color: #2B587A; font-size: 11px; font-family: tahoma, arial, verdana;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="width: 25%;"><a href="http://www.google.com/chrome/?hl=ru" target="_blank"><img src="http://vkontakte.ru/images/chrome.gif" style="border: none;"/></a></td><td style="width: 25%;"><a href="http://www.mozilla-europe.org/ru/" target="_blank"><img src="http://vkontakte.ru/images/firefox.gif" style="border: none;"/></a></td><td style="width: 25%;"><a href="http://www.opera.com/browser/" target="_blank"><img src="http://vkontakte.ru/images/opera.gif" style="border: none;"/></a></td><td style="width: 25%;"><a href="http://www.apple.com/ru/safari/download/" target="_blank"><img src="http://vkontakte.ru/images/safari.gif" style="border: none;"/></a></td></tr><tr><td>Google Chrome</td><td>Mozilla Firefox</td><td>Opera</td><td>Safari</td></tr></tbody></table>

<a href="#" onclick="document.getElementById(\'kickie\').style.display = \'none\';" style="color:#000;text-decoration:none;">(X) ЗАКРЫТЬ</a></div></center>');
    }
}
</script>

Обновлено. LS почему-то портит код. Поэтому чтоб скопировать корректно, переходим сюды, и копируем код

И не забываем код обернуть в теги {literal}тут_наш_код{/literal}

Тоесть в итоге должно быть так:
<body onload="prettyPrint()">

{literal}
<script type="text/javascript"> 
var ki_ua = window.navigator.userAgent;
if (ki_ua.indexOf ("MSIE") >= 0) {
    if( parseInt(ki_ua.substr(ki_ua.indexOf("MSIE")+5, 3)) < 8 ){
        document.write('<center><div id="kickie" style="position:absolute;top:0px;right:0px;width:100%;height:100%;background-color:#F2F4FF;color:#0f0f0f;font-family:tahoma,arial,verdana;font-size:11px;padding-top:100px;">Вы используете устаревший браузер.
Чтобы использовать все возможности сайта, загрузите и установите один из этих браузеров:

<table style="width: 400px; height: 100px; text-align: center; margin-left: auto; margin-right: auto; background-color: #F2F4FF; color: #2B587A; font-size: 11px; font-family: tahoma, arial, verdana;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="width: 25%;"><a href="http://www.google.com/chrome/?hl=ru" target="_blank"><img src="http://vkontakte.ru/images/chrome.gif" style="border: none;"/></a></td><td style="width: 25%;"><a href="http://www.mozilla-europe.org/ru/" target="_blank"><img src="http://vkontakte.ru/images/firefox.gif" style="border: none;"/></a></td><td style="width: 25%;"><a href="http://www.opera.com/browser/" target="_blank"><img src="http://vkontakte.ru/images/opera.gif" style="border: none;"/></a></td><td style="width: 25%;"><a href="http://www.apple.com/ru/safari/download/" target="_blank"><img src="http://vkontakte.ru/images/safari.gif" style="border: none;"/></a></td></tr><tr><td>Google Chrome</td><td>Mozilla Firefox</td><td>Opera</td><td>Safari</td></tr></tbody></table>

<a href="#" onclick="document.getElementById(\'kickie\').style.display = \'none\';" style="color:#000;text-decoration:none;">(X) ЗАКРЫТЬ</a></div></center>');
    }
}
</script>
{/literal}


2. Настройка

В настройках можно указать для каких версий IE, будет уведомление. По дефолту указанно чтоб показывалось для 6 и 7 версии.

Цифра 8 в коде, указывает на то, что пользователь с IE8 нечего не увидит. Цифра 7, укажет на то, что пользователь с IE7 нечего не увидит. И так далее.
if( parseInt(ki_ua.substr(ki_ua.indexOf("MSIE")+5, 3)) < 8 ){

14 комментариев

avatar
А почему бы не обернуть это в плагин дабы не курочить шаблон?
avatar
По идеи да, так правильней. Но я без понятия как его упаковывать. Если кто приложит руки и сделает, то гуд =)
avatar
Уговорили :)
avatar
=)
avatar
И поставить проверку не только на старый эксплорер, но и на другую мертвячинку.
avatar
код хтмл невалиден, сверстано как раз как во времена ие5.5
avatar
Ну мы-же стараемся для IE6, всё тип-топ =)
avatar
как-то глупо смотрятся внешние ссылки на картинки браузеров. особенно на вконтакте — Вам не кажется?
avatar
Не понял. Вы против того что картинки грузятся с ВК? Если да, то не вижу тут ничего сложного, всё меняется ручками.
avatar
А давайте сделаем плагин, говорящий пользователю осла(любого), что он лох) В поддержку движения «No IE». Шутка, конечно, но в ней есть доля смысла.
avatar
В ls 1.x текст не видно, исправить так:
{$aLang.old_ie_message}

Заменить на более корректный:
{$aLang.plugin.noie.old_ie_message}
и т.д.
avatar
И на новой версии табло вылезает под шаблоном а не перед как надо, исправить так:
в id=«kickie» в style добавить css строку:
z-index:9999;
avatar
Блин и еще кое что:) При прокрутке вниз, табло остается на верху, не закрыв то, что загрузилось и видно что под юбкой у неё: топики :) Исправлять там же в kickie.
Заменить 
position:absolute
на 
position:fixed
avatar
Не туда написал надо было где плагин:) Ну все равно:)
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.