К примеру, есть задача отсеять браузеры, с которых заходит пользователь, чтобы дать предупреждение о том, что всё поедет, в случае если пользователь зашёл с древнего браузера. К примеру, имеем такой список отсеивания: http://caniuse.com/#feat=flexbox.
Существует ли поддерживаемый плагин для голого JS или jQuery, чтобы влепить попап вроде такого?
На скриншоте плагин http://jreject.turnwheel.com, но он, к сожалению, последний раз обновлялся в 2014 году — нету поддержки мобильных браузеров.
Ответ
Как правильно прокомментировали - эта задача делится на две. Первая - определить, что браузер пользователя не поддерживается сайтом. Вторая - отобразить окно, максимально совместимое со всеми древними браузерами.
Вторая задача по прежднему прекрасно решается плагином 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 .
Комментариев нет:
Отправить комментарий