Javascript IE检测,为什么不使用简单的条件注释?

时间:2010-11-12 21:25:45

标签: javascript internet-explorer browser-detection conditional-comments

为了检测IE,大多数Javascript库都会做各种技巧。

  • jQuery似乎在页面的DOM中添加了一个临时对象来检测某些功能,
  • YUI2对其YAHOO.env.ua = function()(文件yahoo.js)中的用户代理进行了正则表达式

在阅读this answer之后,我想到这是真的,为了在Javascript中简单地检测IE,我们可以简单地添加到我们的页面中:

<!--[if IE]><script type="text/javascript">window['isIE'] = true;</script><![endif]-->

<script type="text/javascript" src="all-your-other-scripts-here.js"></script>

现在,我们为所有Javascript代码设置了window.isIE变量,只需执行以下操作:

if(window.isIE)
   ...

除了这可能导致痛苦,因为它必须在所有页面中添加,是否有任何我可能不知道的问题/考虑因素?


仅供参考:我知道最好使用object detection rather than browser detection,但有些情况下您仍然需要使用浏览器检测。

15 个答案:

答案 0 :(得分:59)

詹姆斯·帕德尔西(James Padolsey)在这里引用little snippet on GitHub

// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------

// UPDATE: Now using Live NodeList idea from @jdalton

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]
    );

    return v > 4 ? v : undef;

}());

当然所有的积分应该归詹姆斯所有,我只是信使(但如果我的复制粘贴动作错误,请拍摄信使)。

另请查看已创建的分叉。保罗·爱尔兰用comment解释了内部运作。

答案 1 :(得分:40)

如果你想这样做,我认为使用条件编译要好得多,因为你可以在javascript内部进行,而无需更改html:

var isIE = /*@cc_on!@*/false;

答案 2 :(得分:26)

Marcel Korpel的回答不再有效(在IE 10中它返回undef,因此IE 10看起来不是IE)。注意:现在已更新,以便与IE 11一起使用。

这是该代码的变体,但来自Microsoft's recommendations。如果您使用的是以前的代码,则可以直接使用此代码,因为它的构建方式与完全相同。

与条件注释/编译不同,它也适用于最小化器。

// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9, IE10 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------
var ie = (function(){
    var undef,rv = -1; // Return value assumes failure.
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    var trident = ua.indexOf('Trident/');

    if (msie > 0) {
        // IE 10 or older => return version number
        rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    } else if (trident > 0) {
        // IE 11 (or newer) => return version number
        var rvNum = ua.indexOf('rv:');
        rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
    }

    return ((rv > -1) ? rv : undef);
}());

已更新以使用IE11。谢谢&#39; acarlon&#39;指出它不起作用,并且马里奥&#39;对于我基于修复的代码!

答案 3 :(得分:11)

IE 11已经发生了很大变化,现在很多过去的浏览器检测方法都无法正常工作。以下代码适用于IE 11及更早版本。

function isIE()
{
    var isIE11 = navigator.userAgent.indexOf(".NET CLR") > -1;      
    var isIE11orLess = isIE11 || navigator.appVersion.indexOf("MSIE") != -1;
    return isIE11orLess;
}

答案 4 :(得分:6)

我想我有你想要的东西。您可以使用Javascript和clientCaps将完整版本的Internet Explorer作为字符串“AA.BB.CCCC.DDDD”。

http://www.pinlady.net/PluginDetect/IE/

它似乎适用于IE 5.5及更高版本(包括IE 10)。 它不受navigator.userAgent /文档模式/浏览器模式的影响。 不需要条件注释或任何额外的HTML元素。这是一个纯粹的Javascript解决方案。

目前我不确定IE Mobile的行为如何,但如果此clientCaps方法失败,您可以随时使用备份检测方法。

到目前为止,我得说,它运作得很好。

答案 5 :(得分:4)

我认为你回答了自己的问题:首先,它只检测IE,因此脚本本质上是将浏览器世界分为两部分:IE和&lt; everythingelse&gt;。

其次,您必须为每个HTML页面添加一个古怪的评论。鉴于像jQuery和YUI这样的广泛的JavaScript库必须“容易”插入/利用广泛的网站,你会自动使它们更难以在门外使用。

答案 6 :(得分:3)

如果确实需要浏览器检测(而不是功能检测),则存在

navigator.userAgent,jQuery使用它来获取$.browser对象的信息。它比在每个页面中包含特定于IE的条件注释要好得多。

答案 7 :(得分:2)

在这里,您可以找到一些非常简单的浏览器检测方法:http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/

var isIE = IE='\v'=='v';

答案 8 :(得分:2)

var version = navigator.userAgent.match(/(msie) (\d+)/i);
console.log(version);

在看到这个问题之后我快速写了一些东西,以防万一有人想要它。

**编辑**

下面是 Johnny Darvall的评论,我正在为试图嗅出 Internet Explorer 11 的任何人添加链接:

http://blogs.msdn.com/b/ieinternals/archive/2013/09/21/internet-explorer-11-user-agent-string-ua-string-sniffing-compatibility-with-gecko-webkit.aspx

答案 9 :(得分:2)

我正在使用该代码

var isIE = navigator.userAgent.indexOf('MSIE')&gt; -1;

答案 10 :(得分:1)

检查浏览器是一个坏主意 - 最好检查浏览器功能。例如,通常您检查用户是否使用IE,因为您想使用IE中不支持的某些功能。但是,您能否知道所有当前和未来的非IE浏览器都支持该功能?没有。 所以的方式,例如jQuery使用它更好:它创建并执行检查某些错误/功能的小测试用例 - 你可以简单地检查if(browser_supports_XYZ)之类的东西,而不是检查用户是否使用特定的浏览器。

无论如何,总有一些情况需要检查浏览器,因为这是一个无法使用脚本测试的可视错误。在这种情况下,最好使用javascript而不是条件注释,因为浏览器会在您需要的位置检查而不是在其他位置(想象一下.js文件,您检查isIE,该文件从未在该文件中定义)

答案 11 :(得分:0)

对于我的用例,我真的只需要检测是否低于IE9,所以我使用

if (document.body.style.backgroundSize === undefined && navigator.userAgent.indexOf('MSIE') > -1)
{
//IE8- stuff
}

答案 12 :(得分:-1)

  • 它污染全局命名空间
  • 需要更改两个文件。
  • 仅适用于IE
  • 从技术上讲,条件评论仍然是评论

答案 13 :(得分:-1)

这很有效,
var isIe = !!window.ActiveXObject;

答案 14 :(得分:-1)

为什么不用HTML5编程,然后检查

if ( window.navigator.product !== "Gecko" )

??没错,这将包括“Gecko”中的IE11,但它现在不是很好吗?

注意:HTML5规范。说navigator.product必须返回“Gecko”...... IE10和之前的所有内容都会返回其他内容。