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

Question

如果：

1. 浏览器不是 IE；或
2. 浏览器是 IE，但版本为 8 或更早

（请注意，屏幕截图仅用于说明 - 我的网站支持 IE 9 。）

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

http://jreject.turnwheel.com/

我将实现此功能的站点是 Sharepoint 2013 站点，因此我将使用内容编辑器 Web 部件来包含您提供的 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 网站上工作时，大概它是供公司内部使用的，而且该公司以 Microsoft 为中心。听起来您正在开发网站以在 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

编辑：这直接回答了 OP。

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

• 纯 javascript - 无需 jQuery
• IE10 报告 IE 10 与 IE 1
• 现在报告 Edge
• 不需要预先存在的特定 HTML 元素（正文除外）
• 在 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 4

我喜欢简单的条件 html。 （越简单越好。）

另一个更全面的 javascript 警报可以在以下位置找到：http://www.browser-update.org

Answer 5

检查浏览器引擎是否为 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 6

您可以将 条件编译 与 条件 cmets

结合使用

这里简要概述了它的工作原理。

1. 始终显示栏
2. 在 javascript 中设置一个标志。 IEMinor=false
3. 如果 IE
4. 如果@_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
编辑2：哎呀，我从图片中认为 IE9 也不支持，允许 IE9 更改 @ 987654326@ 到 lt IE 9 和 @_jscript_version > 9 到 >= 9

Answer 7

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

1. 浏览器不是 IE；

• 使用 browseris.ie

1. 浏览器是 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

检查此代码，它按预期工作。

        if (navigator.userAgent.includes('Trident')) {
            alert('This site is not supported by your Internet Explorer, please use Microsoft Edge or Google Chrome.');
        }

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

如果您使用另一种语言，所有服务器端语言都具有这种功能，只需谷歌搜索或参考某种教程

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

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-->

小提琴：

测试一下就可以了：

http://jsfiddle.net/Z7fvb/