javascript - 檢查使用者是否使用 IE

我正在透過點擊具有特定類別的 div 來呼叫如下的函數。

有沒有辦法在啟動函數時檢查使用者是否使用 Internet Explorer，如果他們使用其他瀏覽器則中止/取消，以便它僅為 IE 使用者運行？這裡的使用者都會使用 IE8 或更高版本，所以我不需要考慮 IE7 及更低版本。

如果我能知道他們使用的是哪個瀏覽器，那就太好了，但這不是必要的。

範例函數：

$('.myClass').on('click', function(event)
{
    // my function
});

答案＃1

已經過了好幾年，Edge 瀏覽器現在使用 Chromium 作為其渲染引擎。
可悲的是，檢查 IE 11 仍然是一件事。

這裡有一個更直接的方法，因為古老版本的 IE 應該已經不存在了。

if (window.document.documentMode) {
  // Do IE stuff
}

這是我以前的答案（2014）：

在 Edge 中，使用者代理字串 已經更改。

/**
 * detect IEEdge
 * returns version of IE/Edge or false, if browser is not a Microsoft browser
 */
function detectIEEdge() {
    var ua = window.navigator.userAgent;

    var msie = ua.indexOf('MSIE ');
    if (msie > 0) {
        // IE 10 or older => return version number
        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    }

    var trident = ua.indexOf('Trident/');
    if (trident > 0) {
        // IE 11 => return version number
        var rv = ua.indexOf('rv:');
        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }

    var edge = ua.indexOf('Edge/');
    if (edge > 0) {
       // Edge => return version number
       return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    }

    // other browser
    return false;
}

範例用法：

alert('IEEdge ' + detectIEEdge());

IE 10 的預設字串：

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

IE 11 的預設字串：

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko 

Edge 12 的預設字串：

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 

Edge 13 的預設字串（感謝 @DrCord）：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586 

Edge 14 的預設字串：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/14.14300 

Edge 15 的預設字串：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063 

Edge 16 的預設字串：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299 

Edge 17 的預設字串：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134 

Edge 18（內部預覽版）的預設字串：

Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 14) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17730 

在 CodePen 測試：

http://codepen.io/gapcode/pen/vEJNZN

答案＃2

使用以下 JavaScript 方法：

function msieversion() 
{
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0) // If Internet Explorer, return version number
    {
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    }
    else  // If another browser, return 0
    {
        alert('otherbrowser');
    }

    return false;
}

您可以在以下 Microsoft 支援網站上找到詳細資訊：

如何從腳本中判斷瀏覽器版本

更新：（支援 IE 11）

function msieversion() {

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  // If Internet Explorer, return version number
    {
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    }
    else  // If another browser, return 0
    {
        alert('otherbrowser');
    }

    return false;
}

答案＃3

如果你只想知道瀏覽器是否為 IE，你可以這樣做：

var isIE = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');

if ((old_ie > -1) || (new_ie > -1)) {
    isIE = true;
}

if ( isIE ) {
    //IE specific code goes here
}

更新 1：更好的方法

我現在推薦這個。它仍然非常易讀，而且代碼少得多 :)

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);

if ( isIE ) {
  //IE specific code goes here
}

感謝評論中的 JohnnyFun 提供的簡短回答 :)

更新 2：在 CSS 中測試 IE

首先，如果可以的話，你應該使用 @supports 語句，而不是使用 JS 來檢查瀏覽器是否支持某個 CSS 功能。

.element {
  /* styles for all browsers */
}

@supports (display: grid) {
  .element {
    /* styles for browsers that support display: grid */
  }
}

（請注意，IE 完全不支援 @supports，並且會忽略置於 @supports 語句內的任何樣式。）

如果問題無法透過 @supports 解決，那麼你可以這樣做：

// JS

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);

if ( isIE ) {
  document.documentElement.classList.add('ie')
}

/* CSS */

.element {
  /* styles that apply everywhere */
}

.ie .element {
  /* styles that only apply in IE */
}

（注意：classList 對 JS 來說相對較新，我認為在 IE 瀏覽器中，它只有在 IE11 中可用。也可能在 IE10 中可用。）

如果你在專案中使用 SCSS（Sass），這可以簡化為：

/* SCSS (Sass) */

.element {
  /* styles that apply everywhere */

  .ie & {
    /* styles that only apply in IE */
  }
}

更新 3：添加 Microsoft Edge（不建議）

如果你也想把 Microsoft Edge 加入清單，你可以這樣做。不過 我不建議這麼做，因為 Edge 是一個比 IE 更強大的瀏覽器。

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident|Edge\//.test(ua);

if ( isIE ) {
  //IE & Edge specific code goes here
}

答案＃4

這會對任何版本的 Internet Explorer 返回 true：

function isIE(userAgent) {
  userAgent = userAgent || navigator.userAgent;
  return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1 || userAgent.indexOf("Edge/") > -1;
}

userAgent 參數是可選的，默認為瀏覽器的使用者代理。

答案＃5

你可以使用 navigator 物件來檢測使用者的瀏覽器，你不需要 jQuery，下面的 4 個註解已經包含在內，所以這段程式碼可以如預期運作

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || navigator.userAgent.indexOf("Trident/") > -1 ){ 
 // Do stuff with Internet-Exploders ... :)
}

http://www.javascriptkit.com/javatutors/navigator.shtml

答案＃6

這就是 Angularjs 團隊的做法（v 1.6.5）：

var msie, // holds major version number for IE, or NaN if UA is not IE.

// Support: IE 9-11 only
/**
 * documentMode is an IE-only property
 * http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx
 */
msie = window.document.documentMode;

然後有幾行代碼分散在各處，將它用作一個數字，例如

if (event === 'input' && msie <= 11) return false;

和

if (enabled && msie < 8) {

答案＃7

你可以簡單地這樣做： :

var isIE = !!window.document.documentMode; // this variable will hold if the current browser is IE

我知道這個問題很舊，但如果有人捲動到那麼遠，他們可以看到簡單的答案 :)

答案＃8

方法 01：
$.browser 在 jQuery 版本 1.3 中已被棄用，並在 1.9 中移除

if ( $.browser.msie) {
  alert( "Hello! This is IE." );
}

方法 02：
使用條件註解

<!--[if gte IE 8]>
<p>You're using a recent version of Internet Explorer.</p>
<![endif]-->

<!--[if lt IE 7]>
<p>Hm. You should upgrade your copy of Internet Explorer.</p>
<![endif]-->

<![if !IE]>
<p>You're not using Internet Explorer.</p>
<![endif]>

方法 03：

 /**
 * Returns the version of Internet Explorer or a -1
 * (indicating the use of another browser).
 */
function getInternetExplorerVersion()
{
    var rv = -1; // Return value assumes failure.

    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        var ua = navigator.userAgent;
        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
    }

    return rv;
}

function checkVersion()
{
    var msg = "You're not using Internet Explorer.";
    var ver = getInternetExplorerVersion();

    if ( ver > -1 )
    {
        if ( ver >= 8.0 ) 
            msg = "You're using a recent copy of Internet Explorer."
        else
            msg = "You should upgrade your copy of Internet Explorer.";
    }

    alert( msg );
}

方法 04：
使用 JavaScript/手動檢測

/*
     Internet Explorer sniffer code to add class to body tag for IE version.
     Can be removed if your using something like Modernizr.
 */
 var ie = (function ()
 {

     var undef,
     v = 3,
         div = document.createElement('div'),
         all = div.getElementsByTagName('i');

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

     //append class to body for use with browser support
     if (v > 4)
     {
         $('body').addClass('ie' + v);
     }

 }());

參考連結

答案＃9

使用上述答案；簡單且簡明地返回布林值：

var isIE = /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);