Question

我想向用户展示一个如下所示的栏：

浏览器不是IE;或
浏览器是IE，但是版本8或更早版本

（请注意，屏幕截图仅供参考 - 我的网站支持IE 9 。）

我找到了这个不错的jQuery插件，但我不想使用弹出窗口。

http://jreject.turnwheel.com/

我将实施此网站的是Sharepoint 2013网站，因此我将使用内容编辑器webpart来包含您提供的HTML内容，并且该栏应位于其他所有内容的顶部。

如果需要，请包含CSS，使其看起来像截图？

Answer 1

HTML

可以使用HTML中的conditional comments来识别IE 9及更早版本（我认为，IE 4）。

作为@Jost noted，您可以使用它们来警告IE 8及更早版本的IE用户，如下所示：

<!--[if lte IE 8]>
    BANNER HERE
<![endif]-->

但是，由于IE 10不再支持这些，因此您无法使用它们来识别非IE浏览器。

的jQuery

jQuery曾经包含浏览器检测模块（$.browser），但it was removed in jQuery 1.9。如果您可以使用早期版本的jQuery（例如1.8.3）或jQuery Migrate plugin，那么您可以使用它来显示横幅。

if ( !$.browser.msie || $.browser.version < 9 ) {
    // Add banner to the page here.
}

一般的浏览器检测

请注意浏览器检测很困难。新浏览器一直在推出，因此任何浏览器支持插件都可能很快变得过时，因为您可以将警告消息作为基础。 jQuery的浏览器检测是最一致的维护，甚至他们最终放弃了它。

目前，Web开发人员通常希望编写跨浏览器的代码，并使用功能检测来处理不支持他们想要使用的功能的浏览器。

当您在SharePoint网站上工作时，可能是内部公司使用，该公司以微软为中心。听起来你正在开发网站以便在IE中工作，并在开发过程中忽略其他浏览器。

如果您可以合理地期望大多数用户使用某个版本的IE，那么条件评论警告就足够了。

Answer 2

我觉得这个问题很有意思。所以我为自己制作了一个剧本，但也许其他人可以从中受益。这就是为什么我把它作为答案发布的原因。它返回一个包含浏览器和操作系统信息的对象。

browser = {};
if (/edge\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "edge";
    browser.majorVersion = parseInt(/edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /edge\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "chrome";
    browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "firefox";
    browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
    browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "opera";
    browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = 11;
    browser.version = "11";
} else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {
    browser.agent = "safari";
    browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
    browser.agent = false;
    browser.majorVersion = false;
    browser.version  = false;
}

if (/Windows\ NT/.test(navigator.userAgent)) {
    browser.os = "windows";
    var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);
    switch(winver) {
    case 6.0:
        browser.osversion = "Vista";
        break;
    case 6.1:
        browser.osversion = "7";
        break;
    case 6.2:
        browser.osversion = "8";
        break;
    case 6.3:
        browser.osversion = "8.1";
        break;
    case 10.0:
        browser.osversion = "10";
        break;
    default:
        browser.osversion = false;
    }
} else if (/OS\ X\ /.test(navigator.userAgent)) {
    browser.os = "os x"; // 
    browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "linux";
    browser.osversion = false;
}

Answer 3

您可以将条件编译与条件评论结合使用

这里简要介绍一下如何运作。

始终显示栏
在javascript中设置一个标志。 IEMinor=false
如果IE＆lt; = 9，则使用脚本标记和条件注释
如果@_jscript_version > 9 （实际上不需要）和IEMinor===false

<div id="bar"><center>Not Supported</center></div>
<script>
  var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
  /*@cc_on @*/
  /*@if (@_jscript_version > 9)
     if (!IEMinor)
       document.getElementById("bar").style.display = "none";
  /*@end @*/
</script>

_{我懒得添加脚本类型......}

以下是JSBin上的一个示例，该示例未显示IE 10+ （未经测试）中的栏。并在其他情况下显示它。

注意：我没有让它看起来与截图完全一样，你应该让那部分工作

编辑：使用IE的浏览器模式测试IE＆lt; 10似乎正常工作
Edit2：哎呀我从图片中想到IE9也不受支持，允许IE9将lte IE 9更改为lt IE 9而@_jscript_version > 9更改为>= 9

Answer 4

检查浏览器引擎是否为Trident 6+（IE 9,10,11）应该执行（demo）：

(function () {
  var trident = {
    string: navigator.userAgent.match(/Trident\/(\d+)/)
  };

  trident.version = trident.string ? parseInt(trident.string[1], 10) : null;

  if (!trident.string || trident.version < 6) {
    document.body.innerHTML = '<div class="alert">Not supported.</div>' +
      document.body.innerHTML;
  }
})();

但是，如果Microsoft决定更改userAgent字符串，则IE 11最终版或未来版本中的嗅探可能会中断。

Answer 5

我喜欢简单的条件html。（更简单似乎总是更好。）

可以在http://www.browser-update.org

找到另一个更全面的JavaScript提醒

Answer 6

编辑：这直接回答OP。

我已经在（IE 6,7,8,9,10,11），Chrome和Edge中测试了两个更新，更新了Dany的答案。主要是因为评论中很难阅读更新。

纯javascript - 不需要jQuery
IE10报告IE 10 vs IE 1
现在报告Edge
预先存在（除了正文）
在IE6，IE7，IE8，IE9，IE11，Chrome v62和Edge中测试
TODO：让它在OSX Sierra和iPhone

边缘测试必须首先，因为它声称是一切。：/

所有这些都说浏览器检测“就是这样”，我们可以希望它的需求很快就会消失。

browser = {};
if (/(Edge\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
    browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
    browser.agent = "MSIE";
    browser.version = 11;
} else {
    browser.agent = false;
    browser.version = false;
}

if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "Windows";

    switch (parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
        case 6.0:
            browser.osversion = "Vista";
            break;
        case 6.1:
            browser.osversion = "7";
            break;
        case 6.2:
            browser.osversion = "8";
            break;
        default:
            browser.osversion = false;
    }
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "OS X";
    browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "Linux";
    browser.osversion = false;
}

if (browser.agent === "MSIE" && browser.version <= 9) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
    newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
    document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing 
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
    newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
    document.body.insertBefore(newDiv, document.body.firstChild);
}

Answer 7

实际上在SharePoint（OP提到过）中有一个内置变量 browseris 。它在全局窗口范围内可用。回答OP问题：

浏览器不是IE;

使用browseris.ie

浏览器是IE，但是版本8或更早版本

使用browseris.ie8down

（在SP2013室内测试）

Answer 8

已针对IE 10和11进行了测试。请转到this link，以获取更多说明。

 <div id="noSupport"></div>
 <script>
    function isIE() {
        return /Trident\/|MSIE/.test(window.navigator.userAgent);  // IE 10 and IE 11
    }
    if (isIE()) {
        document.getElementById('noSupport').innerHTML = 'IE not supported'
    }
</script>

Answer 9

尝试$.browser.version
点击这里http://api.jquery.com/jQuery.browser/

Answer 10

我不建议您使用客户端，因为某些浏览器可能会通过传递错误的值来传递网站测试来欺骗您。

所以我猜你使用PHP作为服务器端，你可以使用get_browser()函数检测浏览器，这里提供了很多关于浏览器的信息，这是一个很好的turtoeial：

第1部分：

http://thenewboston.org/watch.php?cat=11&number=67

第2部分：

http://thenewboston.org/watch.php?cat=11&number=68

如果您使用其他语言所有服务器端语言都有这种功能只是google它或引用某种类型的turtorial

从客户端，您可以检测它是否兼容：

function Is_Compatible(){
var browser = navigator.appName;
var Fvar = document.getElementById('test').style.borderRadius;
if(browser !== 'Microsoft Internet Explorer'){
return false;
}
if(Fvar == undefined){
//Not IE9+
return false;
}else{
//Is IE9+
return true;
}
}
if(Is_Compatible() == true){
alert('Compatible');
}else{
alert('uncompatible');
}

HTML：

<div style="border-radius:20px;opacity:0;z-index:-500;" id="test"></div><!--It willl not inflect your design-->

FIDDLE：

测试它并且它有效：

http://jsfiddle.net/Z7fvb/

如果浏览器不是Internet Explorer 9或更高版本，则显示消息

10 个答案:

HTML

的jQuery

一般的浏览器检测