2013-10-24 4 views
10

Я хочу, чтобы иметь возможность обнаруживать IE9 или менее с помощью jQuery (или если есть лучший метод?). Если версия браузера имеет IE9 или меньше, я хочу загрузить модальную версию с возможностью обновления до Chrome, FF и т. Д.jQuery Обнаружение браузера IE9 и ниже и бросок модального обновления

Я читал, что $ .browser больше не работает, поэтому просто интересно, какой лучший способ чтобы добиться того, чего я хочу:

$(document).ready(function(){ 

    /* Get browser */ 
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

    /* Detect Chrome */ 
    if($.browser.chrome){ 
     /* Do something for Chrome at this point */ 
     alert("You are using Chrome!"); 

     /* Finally, if it is Chrome then jQuery thinks it's 
     Safari so we have to tell it isn't */ 
     $.browser.safari = false; 
    } 

    /* Detect Safari */ 
    if($.browser.safari){ 
     /* Do something for Safari */ 
     alert("You are using Safari!"); 
    } 

}); 
+3

Используйте условный комментарий только для IE9. Таким образом, вам не нужно беспокоиться о том, чтобы обнюхивать уродливую строку пользовательского агента. –

+0

вы можете обратиться к этому http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx – UDB

+1

Хотя этот вопрос старый и уже имеет ответ, я чувствую, что предположите, что вы не используете модаль для предупреждения своих пользователей. Старые браузеры неправильно обрабатывают отображение модального кода, поэтому, если пользователь использует IE5, например, предупреждение может не отображаться. – DavidB

ответ

11

не использовать JQuery для обнаружения IE Versio нс. Вместо этого используйте условные комментарии.

Почему? Хорошо подумайте, почему вы хотите настроить таргетинг на эти старые версии. Вероятно, потому, что они не поддерживают определенные функции JS/CSS, которые вам нужны. Так вы действительно хотите сохранить свой собственный JS-код, который, как вы уверены, будет работать в этих более старых версиях? Если вы идете по этому маршруту, вам нужно начать думать о том, будет ли код обнаружения, который вы пишете, работать в IE6 или 5 или 4 ... болезненным!

Вместо этого попробуйте следующее:

  1. Добавить модальный/баннер элемент к вашему HTML.
  2. В главном файле css скрыть этот элемент, используя display: none. Это гарантирует, что последние версии браузеров IE и IE не будут их видеть.
  3. Создайте только IE-файл css или js, который откроет этот элемент.
  4. Включите этот файл в условные комментарии, которые нацелены на версии IE, которые вы хотите.

В приведенном ниже примере используется простое раскрытие с использованием CSS, но вы можете легко заменить его на JS, если хотите. Просто не делайте это слишком сложным или легко можете сломать ранние версии IE.

#index.html 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <!--[if lte IE 9]> 
     <link rel="stylesheet" type="text/css" href="ie-only.css"> 
    <![endif]--> 
    </head> 
    <body> 
    <div class="ie-only">Go upgrade your browser!</div> 
    </body> 
</html> 

#main.css 
.ie-only { display: none } 

#ie-only.css 
.ie-only { display: block } 

Полезное conditional comments reference.

0

$.browser(), удаляют в jquery version 1.9 использования ниже кода в вашем скрипте,

(function($) { 

    var matched, browser; 

    // Use of jQuery.browser is frowned upon. 
    // More details: http://api.jquery.com/jQuery.browser 
    // jQuery.uaMatch maintained for back-compat 
    jQuery.uaMatch = function(ua) { 
     ua = ua.toLowerCase(); 

     var match = /(chrome)[ \/]([\w.]+)/.exec(ua) || 
      /(webkit)[ \/]([\w.]+)/.exec(ua) || 
      /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) || 
      /(msie) ([\w.]+)/.exec(ua) || 
      ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) || 
      []; 

     return { 
      browser: match[ 1 ] || "", 
      version: match[ 2 ] || "0" 
     }; 
    }; 
    // Don't clobber any existing jQuery.browser in case it's different 
    if (!jQuery.browser) { 
     matched = jQuery.uaMatch(navigator.userAgent); 
     browser = {}; 

     if (matched.browser) { 
      browser[ matched.browser ] = true; 
      browser.version = matched.version; 
     } 

    // Chrome is Webkit, but Webkit is also Safari. 
     if (browser.chrome) { 
      browser.webkit = true; 
     } else if (browser.webkit) { 
      browser.safari = true; 
     } 
     jQuery.browser = browser; 
    } 
})(jQuery); 
15
var browser = { 
     isIe: function() { 
      return navigator.appVersion.indexOf("MSIE") != -1; 
     }, 
     navigator: navigator.appVersion, 
     getVersion: function() { 
      var version = 999; // we assume a sane browser 
      if (navigator.appVersion.indexOf("MSIE") != -1) 
       // bah, IE again, lets downgrade version number 
       version = parseFloat(navigator.appVersion.split("MSIE")[1]); 
      return version; 
     } 
    }; 

if (browser.isIe() && browser.getVersion() <= 9) { 

    console.log("You are currently using Internet Explorer" + browser.getVersion() + " or are viewing the site in Compatibility View, please upgrade for a better user experience.") 
} 
+2

Примечание. IE 11 больше не включает 'MSIE'. – mikemaccana

2
var isIE9OrBelow = function() 
{ 
    return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10; 
} 
+0

'navigator.appVersion.split (" MSIE ") [1]' - это строка, а не число, например. : '9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8) ' – dude

0

Скорректированная из Sitepoint:

if(navigator.appVersion.indexOf("MSIE 9.") !== -1) 
Смежные вопросы