Плагин JS для отсеивания по версии браузера

#javascript #jquery #browsers

К примеру, есть задача отсеять браузеры, с которых заходит пользователь, чтобы дать
предупреждение о том, что всё поедет, в случае если пользователь зашёл с древнего браузера.
К примеру, имеем такой список отсеивания: http://caniuse.com/#feat=flexbox. 

Существует ли поддерживаемый плагин для голого JS или jQuery, чтобы влепить попап
вроде такого?



На скриншоте плагин http://jreject.turnwheel.com, но он, к сожалению, последний раз
обновлялся в 2014 году — нету поддержки мобильных браузеров.
    

Ответы

Ответ 1

Как правильно прокомментировали - эта задача делится на две. Первая - определить,
что браузер пользователя не поддерживается сайтом. Вторая - отобразить окно, максимально
совместимое со всеми древними браузерами. 

Вторая задача по прежднему прекрасно решается плагином http://jreject.turnwheel.com
. Для первой задачи, как написал @Alexey Ten , необходимо проверить доступность критичных фич.

К примеру решение по вопросу (попап при отсутсвии поддержки flexbox):

var tst = document.createElement("div");
var flexSupportCaps = [
    tst.style.flex, 
    tst.style.flexWrap, 
    tst.style.flexFlow,
    tst.style.flexGrow,
    tst.style.alignContent, 
    tst.style.alignItems, 
    tst.style.alignSelf, 
    tst.style.justifyContent, 
    tst.style.order
];
if (flexSupportCaps.indexOf(undefined)!=-1){
    $(document).ready(function(){
        $.reject({
            reject: { all: true }, // Reject all renderers for demo  
            header: 'Браузер не поддерживается', // Header Text  
            paragraph1: 'Вы используете устаревший браузер.', // Paragraph 1  
            paragraph2: 'Для корректной работы портала vashsite.ru рекомендуем установить
один из следущих браузеров, или обновить ваш до последней версии.',
            closeLink: 'Закрыть окно',  
            closeMessage: 'Я согласен с тем, что отображение сайта может быть некорректно.',
            imagePath: '/externals/jReject-master/images/',  
            closeCookie: true,
            browserInfo: {
                msie: {
                    text: 'Microsoft Edge',  
                    url: 'https://www.microsoft.com/ru-ru/windows/microsoft-edge'  
                }
            }
        }); 
    });
}
delete tst;


Выявляется поддержка flexbox, если её нет, то выплёвывается попап плагина jReject.
Выплёвывается он единожды, о чём говорит параметр closeCookie: true .


Ответ 2

1. Bowser

Если мне необходимо


Написать предупреждение для некоторых устаревших браузеров, что контент страницы
сайта может отображаться некорректно;


или


Выводить в одном браузере один текст, во втором другой — реальный пример;


Пользуюсь библиотекой bowser.



2. Характеристики bowser


Возможность отсеивания по типу браузера — мобильный или десктопный, — операционным
системам, движкам и наименованиям.
Поддержка не самого популярного ПО: например, Sailfish OS, Tizen, K-Meleon или Sleipnir.
Простота использования. Подключаем bowser без дополнительных зависимостей через атрибут
src тега script и пишем скрипты. Синтаксис скриптов:


if (bowser.$флаг для браузера, движка, ОС или типа устройства) {
    // Здесь пишем поведение, которое будет только у пользователей браузеров, объявленных
флагом.
}


if (bowser.$флаг для браузера, движка, ОС или типа устройства && bowser.version <=
$Номер версии: поведение, описанное ниже между {фигурными скобками}, будет применяться
к версии под данным номером и версиям, которые ниже её. ) {
// Здесь пишем поведение, которое будет только у пользователей браузеров, объявленных
флагом, в версиях, ниже или равной указанной.
    }




3. Демонстрация

В данном примере


во всех версиях браузеров на движке Trident, как то Internet Explorer, будет выводиться
один текст;
в браузерах на движке Gecko, начиная с 50 версии, другой;
пользователям браузеров на Gecko ниже 50 версии будет показано модальное окно с предложением
использовать более новую версию;
юзеры остальных браузеров увидят пустой результат.















Как выглядит результат выполнения данного кода в браузерах:

Internet Explorer 11.576.14393.0



Firefox 31.0



Firefox 50.1.0





4. Дополнительная ссылка


API bowser.


Ответ 3

Вместо отсеивания браузеров, лучше определять поддержку той или иной фичи, например
с помощью modernizr.

В противном случае придется поддерживать актуальность вашей базы совместимых браузеров.
К примеру браузер X не поддерживает нужной вам возможности, вы его добавляете в "черный
список", через полгода выходит свежая версия с нужной фичей, и если теперь не обновить
условия, он по прежнему будет считаться "не подходящим" для вашего сайта. Другая ситуация
- выйдет очередной "яндекс" браузер, про который ваш сайт ничего не знает.

Для упомянутого вами flexbox проверка через modernizir может выглядить так (с дополнительным
условием - поддержкой flexwrap):

if (Modernizr.flexbox && Modernizr.flexwrap) {
  // Modern Flexbox with `flex-wrap` supported
}
else {
  // Either old Flexbox syntax, or `flex-wrap` not supported
}