主页 / 问题 / 549673
Accepted
Гончаров Александр
Asked:2020-07-29 03:54:48 +0000 UTC2020-07-29 03:54:48 +0000 UTC

按浏览器版本筛选的JS插件

  • 772

例如，有一项任务是清除用户输入的浏览器，以便发出警告，如果用户从旧浏览器输入，一切都会消失。例如，我们有以下过滤列表：http ://caniuse.com/#feat=flexbox 。

是否有支持纯 JS 或 jQuery 的插件来弹出这样的弹出窗口？

在此处输入图像描述

屏幕截图显示了插件http://jreject.turnwheel.com，但不幸的是，它最后一次更新是在 2014 年——不支持移动浏览器。

javascript

3 个回答

  1. Best Answer

    正如正确评论的那样 - 此任务分为两部分。首先是确定网站不支持用户的浏览器。第二个是显示一个尽可能兼容所有旧浏览器的窗口。

    第二个任务还是通过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。

    • 3

  2. 1 鲍泽

    如果我需要

    1. 为一些过时的浏览器编写警告，可能导致网站页面内容无法正确显示；

    或者

    1. 在一个浏览器中显示一个文本，在第二个浏览器中显示另一个文本——一个真实的例子；

    我正在使用 bowser库。

    2. bowser的特点

    1. 按浏览器类型（移动或桌面）、操作系统、引擎和名称进行过滤的能力。
    2. 支持不太流行的软件：例如，Sailfish OS、Tizen、K-Meleon 或 Sleipnir。
    3. 使用方便。src我们通过tag属性连接bowser，无需额外依赖script，编写脚本。脚本语法：
    if (bowser.$флаг для браузера, движка, ОС или типа устройства) {
    // Здесь пишем поведение, которое будет только у пользователей браузеров, объявленных флагом.
}

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

    3.演示

    在这个例子中

    • 在Trident引擎的所有版本的浏览器中，例如Internet Explorer，将显示一个文本；
    • 在基于 Gecko 引擎的浏览器中，从版本 50 开始，另一个；
    • Gecko 50 以下浏览器的用户将看到一个模式窗口，提示他们使用更新的版本；
    • 其他浏览器的用户将看到一个空的结果。

    <meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<script src="http://fenixrepo.fao.org/cdn/faostat3/js/bowser/1.0/bowser.min.js"></script>
<style type="text/css">
#SashaBowserExplorer,
#SashaBowserFirefox {
    color: mediumvioletred;
    font-size: 2rem;
}
</style>
<div id="SashaBowserFirefox"></div>
<div id="SashaBowserExplorer"></div>
<script type="text/javascript">
// Отображение в браузерах на движке Trident <= 11 MSHTML.dll версии
if (bowser.msie) {
    var SashaBowserExplorer = document.getElementById("SashaBowserExplorer");
    SashaBowserExplorer.innerHTML = "Саша умнейшая, Она не станет пользоваться Internet Explorer.";
    // Отображение в браузерах на движке Gecko <= 49
}
// Отображение в браузерах на движке Gecko <= 49
else if (bowser.gecko && bowser.version <= 49) {
    alert('Пожалуйста, используйте новые версии браузеров на движке Gecko, чтобы прочесть, насколько же Саша совершенна.');
}
// Отображение в браузерах на движке Gecko > 49
else if (bowser.gecko) {
    var SashaBowserFirefox = document.getElementById("SashaBowserFirefox");
    SashaBowserFirefox.innerHTML = "Саша легендарная!";
}
</script>

    在浏览器中执行此代码的结果如下所示：

    互联网浏览器 11.576.14393.0

    IE

    火狐 31.0

    老火狐

    火狐 50.1.0

    新火狐

    4.附加链接

    • 1

  3. 与其筛选浏览器，不如定义对特定功能的支持，例如使用modernizr。

    否则，您将必须使兼容浏览器的数据库保持最新。比如浏览器X不支持你需要的功能，你把它加到“黑名单”，六个月后有新版本出来，如果你现在不更新条件，它仍然是被认为“不适合”您的网站。另一种情况 - 将发布另一个“Yandex”浏览器，您的网站对此一无所知。

    对于您提到的 flexbox，通过 modernizir 检查可能看起来像这样（有一个附加条件 - flexwrap 支持）：

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

相关问题