Правильный способ использования Modernizr для обнаружения IE?

Это может быть глупый вопрос, но я хотел использовать библиотеку Modernizr JS для обнаружения некоторых свойств браузера, чтобы определить, какой контент показывать или не показывать.

У меня есть приложение под названием Pano2VR который выводит как HTML5, так и SWF. Мне нужен HTML5 для пользователей устройств iOS.

однако IE вообще не отображает этот вывод "HTML5". Кажется, их выход использует CSS3 3D-преобразования и WebGL, один или несколько явно неподдерживаемых в IE9.

Итак, для этих пользователей мне нужно отобразить версию Flash. Я планировал использовать IFRAME и либо передать SRC через сценарий Modernizr, либо документ.выпишите правильный код IFRAME в зависимости от браузера.

все это приводит к тому, как я могу использовать Modernizr для обнаружения просто IE или не IE? Или обнаружить для CSS 3d преобразования?

или есть другой способ сделать это?

7 77
html5 cross-browser modernizr

7 ответов:

Modernizr не обнаруживает браузеры как таковые, он определяет, какие функции и возможности присутствуют, и это вся суть того, что он пытается сделать.

вы можете попробовать подключить простой скрипт обнаружения, как это, а затем использовать его, чтобы сделать свой выбор. Я включил обнаружение версий, а также на всякий случай, что это необходимо. Если вы хотите только проверить любую версию IE, вы можете просто найти навигатор.userAgent, имеющий значение "МСИ".

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

затем вы можете просто проверить: 

BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;
176

можно использовать Modernizr чтобы обнаружить просто IE или не IE, проверяя SVG SMIL поддержка анимации.

Если вы включили SMIL обнаружение функций в вашей настройке Modernizr вы можете использовать простой подход CSS и нацелиться на.no-smil класс, который Modernizr применяет к html элемент:

html.no-smil {
  /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}

кроме того, вы можете использовать Modernizr с простым подходом JavaScript, например Итак:

if ( Modernizr.smil ) {
  /* set HTML5 content */
} else {
  /* set IE/Edge/Flash content */
}

имейте в виду, IE/Edge может когда-нибудь поддержать SMIL, но в настоящее время нет никаких планов сделать это.

Для справки, вот ссылка на SMIL диаграмма совместимости на caniuse.com.

19

обнаружение CSS 3D преобразования

Modernizr можно обнаружить CSS 3D преобразования, да. В truthiness о Modernizr.csstransforms3d скажет вам, если браузер поддерживает их.

приведенная выше ссылка позволяет выбрать, какие тесты следует включить в сборку Modernizr, и опция, которую вы ищете, доступна там.

обнаружение IE конкретно

как вариант, как ответил user356990, вы можете использовать условные комментарии если вы ищете IE и IE в одиночку. Вместо того, чтобы создавать глобальную переменную, вы можете использовать HTML5 Boilerplate в <html> условные комментарии трюк, чтобы назначить класс:

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

если вы уже инициализировали jQuery, вы можете просто проверить с $('html').hasClass('lt-ie9'). Если вам нужно проверить, в какой версии IE вы находитесь, чтобы вы могли условно загрузить либо jQuery 1.x или 2.X, вы можете сделать что-то вроде этого:

myChecks.ltIE9 = (function(){
    var htmlElemClasses = document.querySelector('html').className.split(' ');
    if (!htmlElemClasses){return false;}
    for (var i = 0; i < htmlElemClasses.length; i += 1 ){
      var klass = htmlElemClasses[i];
      if (klass === 'lt-ie9'){
        return true;
      }
    }
    return false;
}());

N. B. IE условные комментарии поддерживаются только до IE9 включительно. Начиная с IE10, Microsoft рекомендует использовать обнаружение функций, а не обнаружение браузера.

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

if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
    // iframe or flash fallback
}

не бери это || в буквальном смысле, конечно.

12

Если вы ищете версию JS (используя комбинацию обнаружения функций и обнюхивания UA) того, что использовал шаблон html5:

var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}
9

CSS трюки имеют хорошее решение для целевой IE 11:

http://css-tricks.com/ie-10-specific-styles/

.NET и Trident / 7.0 уникальны для IE, поэтому их можно использовать для обнаружения IE версии 11.

затем код добавляет строку агента пользователя в HTML-тег с атрибутом "data-useragent", поэтому IE 11 может быть специально нацелен...

2

можно использовать < !-- [if IE] > взломать, чтобы установить глобальную переменную js, которая затем проверяется в вашем обычном коде js. Немного некрасиво, но хорошо работает для меня.

1

Мне нужно было обнаружить IE против большинства других, и я не хотел зависеть от строки UA. Я обнаружил, что с помощью es6number с Modernizr сделал именно то, что я хотел. Я не очень беспокоюсь об этом изменении, поскольку я не ожидаю, что IE когда-либо поддержит номер ES6. Так что теперь я знаю разницу между любой версией IE vs Edge/Chrome/Firefox/Opera/Safari.

подробнее здесь:http://caniuse.com/#feat=es6-number

обратите внимание, что я не сильно беспокоюсь о ложных негативах Opera Mini. Может быть и так.

1