Как сделать обнаружение браузера с помощью jQuery 1.3 с устаревшим $ .browser.msie?

jQuery 1.3 заменил тестирование браузера.

Честно говоря, я удивлен, как часто веб-разработчики обеспокоены тем, в каком браузере работает их сайт. За 10 с лишним лет веб-разработки я могу вспомнить несколько случаев, когда я заботился, не говоря уже о том, чтобы делать что-то другое. Самая распространенная причина заключалась в том, что размеры именованных шрифтов значительно различаются между Firefox и IE (font-size: large намного больше в IE, чем FF), поэтому я использовал файл IEfix.css, чтобы исправить это.

Возможно, вам стоит взглянуть на Что лучше: взлом CSS или обнаружение браузера? для более подробного обсуждения этой темы.

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

Трудно сказать что-либо еще, не зная, почему вам небезразличен IE, потому что вы, вероятно, найдете гораздо лучшее решение для того, что делаете.

.browser заменен на .support. Дополнительная информация здесь: jquery.support По сути, это означает, что вместо использования сниффинга браузера jquery теперь поддерживает обнаружение функций и позволяет более детально контролировать то, что браузер может делать.

Из описания:

Added in jQuery 1.3 A collection of properties that represent the presence of different browser features or bugs.

jQuery comes with a number of properties included, you should feel free to add your own. Many of these properties are rather low-level so it's doubtful that they'll be useful in general day-to-day development, but mostly used by plugin and core developers.

The values of all the support properties are determined using feature detection (and do not use any form of browser sniffing)

Я столкнулся с чем-то похожим, там нет $ .support.png (p.ej.), поэтому мне еще нужно использовать версию $ .browser.version, может быть, мы можем просто продолжать запрашивать дополнительные свойства $ .support.XXXX, как можно больше по мере необходимости.

Поддержка функций звучит неплохо, НО она будет работать так, как задумано, только если она поддерживает все возможные «ошибки». Как и у первого комментатора, здесь нет $ support.png, или $ support.stepping, или $ support.peekaboo, или, о, этот список можно продолжить. Проблема в том, что некоторый код для обеспечения совместимости одного браузера неизбежно будет выполняться браузером, которому он не нужен.

Попробуйте скрипт GeckoFix в http://code.labor8.eu/geckoFix, он обнаруживает Firefox ниже 3.0, поэтому вы можете настроить его, как хотите (т.е. добавив к нему больше правил, таких как обнаружение Firefox 2, Firefox 3, Opera и Safari). Думаю, это может быть то, что вы ищете. Чтобы проверить агент пользователя, просто введите в адресной строке javascript: alert (navigator.userAgent) и найдите некоторые конкретные символы, которые вам нужно будет ввести в скрипт.

Да, обнаружение браузера устарело, но устаревшие свойства, вероятно, не будут удалены из jQuery в ближайшее время. И когда они будут удалены, если вам все еще абсолютно необходимо выполнять обнаружение браузера, вы можете легко добавить те же функции с помощью небольшого простого плагина.

Итак, мой ответ - пока ничего не делать :)

edit: Я даже предоставлю вам плагин для использования в будущем (не протестирован, скопирован из источника jquery):

(function($) {
    var userAgent = navigator.userAgent.toLowerCase();

    $.browser = {
        version: (userAgent.match( /.+(?:rv|it|ra|ie)[/: ]([\d.]+)/ ) || [0,'0'])[1],
        safari: /webkit/.test( userAgent ),
        opera: /opera/.test( userAgent ),
        msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
        mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
    };

})(jQuery);

Я говорю, что перепроектируйте его из кодовой базы jQuery 1.2.

См. Этот раздел кода:

jQuery.browser = {
    version: (userAgent.match( /.+(?:rv|it|ra|ie)[/: ]([\d.]+)/ ) || [])[1],
    safari: /webkit/.test( userAgent ),
   opera: /opera/.test( userAgent ),
  msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
  mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Уважайте лицензии GPL и MIT и учитесь на коде. Не копируйте и не вставляйте.

Или специально для того, чтобы нюхать IE6. Вы могли сделать:

function IsThisBrowserIE6() {
    return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined))
}

У меня есть кусок Javascript, который отлично работает в браузерах Mozilla и Webkit, а также в IE8. Однако в 6 и 7 ломается. Это не имеет ничего общего ни с CSS, ни с плохим Javascript, но с дрянной поддержкой IE <8.

Я могу видеть, откуда люди приходят к проверке «функций», а не к обнюхиванию браузера, однако функции, для которых доступно обнюхивание, не имеют отношения к нарушающему коду, так в чем же тогда разница между обнюхиванием браузера и обнюхиванием функций до тех пор, пока ВСЕ функции доступны в объекте $ .support?

function browserLessThanIE7(){
   return (/MSIE ((5\\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
}

Может тоже нормально работать ... Этот проверяет версии 5, 5.5 и 6.

@Nate: замените (5 \ .5) | 6 на 7, и он проверит версию 7.

Обнаружение браузера не устарело в jQuery. Страница документа для jQuery.browser, в которой говорится:

Мы не рекомендуем использовать это свойство, попробуйте вместо этого использовать обнаружение функции (см. JQuery.support).

Устарение означает «планируется удалить в будущем». Этот совет о поиске возможностей, а не пользовательских агентов, является просто хорошим общим советом, не относящимся к jQuery. Все, что они говорят, - это то, что они упрощают правильные поступки.

Однако всегда будет необходимость в сниффинге пользовательского агента. Если jQuery.support не обновляется ежедневно армией разработчиков, он просто не сможет справиться с каждой ошибкой и каждой функцией в каждой второстепенной версии каждого браузера.

Я думаю, что путаница по этому поводу возникла из-за того, что внутри jQuery больше не отслеживает браузер. Но утилита API jQuery.browser продолжит свое существование.

Возможно, это не самый чистый способ для IE 6, но он определенно работает и его легко понять:

$(document).ready(function() {
    ie6catch = $.browser.msie + $.browser.version;
    if (ie6catch.indexOf("true6") == -1) {
        alert("This is not Internet Explorer 6");
    }
});

Обнаружение функций звучит хорошо и модно, но когда я пишу код, который не работает в определенном браузере, самым быстрым методом является обнаружение браузера.

Горизонтальное центрирование элемента с использованием автоматических полей работает для всех браузеров, кроме IE. На какую функцию я тестирую? Не имею представления. Но я знаю, в каком браузере это не работает.

Я понимаю, почему обнаружение функций может быть полезно в определенных ситуациях, например. если браузер находится в строгом / необычном режиме. Лучшим компромиссом было бы использование обоих методов.

В свете этого слова «Мы не рекомендуем использовать это свойство, попробуйте вместо этого использовать обнаружение функций» следует удалить со страницы документации jQuery.browser. Это заблуждение.

Было бы неплохо добавить браузеры как класс к тегу body для css. Не уверен, что это работает, потому что я не запускаю Windows и у меня есть powerPC, но он должен поставить класс .ie6 для всех Internet Explorer 6-9, что не очень полезно. Для всего остального используйте mooModernizr.

if (Browser.Engine.trident) {

    var IEbrowser = $('body');

    IEbrowser.addClass('ie');

}​

Почему нельзя было переписать jquery.browser для внутреннего использования jquery.support для определения браузера на основе функций (возможно, дополненных текущими методами из jquery.browser, где это необходимо), чтобы обеспечить удобные средства выбора семейства и версии браузера , хотя, возможно, он более надежен, чем современный jquery.browser?

Я хотел бы отметить, что navigator.userAgent не заслуживает особого доверия в том смысле, что он легко модифицируется и может не представлять фактический браузер, просматривающий страницу. Это могло быть одной из причин, по которой $.browser был объявлен устаревшим.

Но ради вопроса, давайте предположим, что обнаружение браузера - абсолютно необходимо.

Я столкнулся с этот очень крутой фрагмент Джеймса Падолси, который фактически различает Internet Explorer с помощью условных комментариев.

Я скомпилировал небольшой фрагмент кода с приведенным выше фрагментом и некоторым кодом из yepnope.js:

(function(window, doc) {
    window.detector = window.detector || (function() {
        var undef,
            docElement = doc.documentElement,       
            v = 3,
            div = document.createElement('div'),
            all = div.getElementsByTagName('i'),
            isGecko = ( 'MozAppearance' in docElement.style ),
            isGeckoLTE18 = isGecko && !! doc.createRange().compareNode,
            isOpera = !! ( window.opera && toString.call( window.opera ) == '[object Opera]' ),
            isWebkit = ( 'webkitAppearance' in docElement.style ),
            isNewerWebkit = isWebkit && 'async' in doc.createElement('script');

            while (
                div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                all[0]
            );

            return {
                isGecko: isGecko,
                isGeckoLTE18: isGeckoLTE18,
                isGeckoGT18: isGecko && ! isGeckoLTE18,
                isOpera: isOpera,
                isWebkit: isWebkit,
                isNewerWebkit: isWebkit && 'async' in doc.createElement('script'),
                isIE: ( v > 4 ),
                ieVersion: ( v > 4 ? v : undef )
            };
    }());
}(window, document));

Это различает браузеры по их возможностям.

Единственные проблемы в том, что в настоящее время у меня нет возможности отличить Safari от Chrome (оба браузера Webkit) и между версиями самих браузеров Gecko, Webkit и Opera.

Я знаю, что это не идеально, но это небольшое улучшение по сравнению с navigator.userAgent.

var browser = {
        chrome: false,
        mozilla: false,
        opera: false,
        msie: false,
        safari: false
    };
    var sBrowser, sUsrAg = navigator.userAgent;
    if (sUsrAg.indexOf("Chrome") > -1) {
        browser.chrome = true;
    } else if (sUsrAg.indexOf("Safari") > -1) {
        browser.safari = true;
    } else if (sUsrAg.indexOf("Opera") > -1) {
        browser.opera = true;
    } else if (sUsrAg.indexOf("Firefox") > -1) {
        browser.mozilla = true;
    } else if (sUsrAg.indexOf("MSIE") > -1) {
        browser.msie = true;
    }
console.info(browser.msie);