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

Question

我想向我的用户展示一个看起来像这样的栏，如果：

浏览器不是IE；或者
浏览器是 IE 但版本 8 或更早

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

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

http://jreject.turnwheel.com/

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

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

score 13 · Accepted Answer

HTML

可以使用HTML中的条件注释来识别 IE 9 和更早版本（我认为是 IE 4）。

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

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

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

jQuery

jQuery 曾经包含一个浏览器检测模块 ( $.browser)，但在 jQuery 1.9 中被删除。如果您可以使用早期版本的 jQuery（例如1.8.3）或jQuery Migrate 插件，那么您可以使用它来显示横幅。

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

浏览器检测一般

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

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

当您在 SharePoint 网站上工作时，大概它是供公司内部使用的，而且该公司以 Microsoft 为中心。听起来您正在开发该网站以在 IE 中工作，并在开发过程中忽略其他浏览器。

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

score 13 · Accepted Answer

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

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

score 5 · Accepted Answer

编辑：这直接回答了 OP。

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

纯 javascript - 不需要 jQuery
IE10 报告 IE 10 与 IE 1
这现在报告边缘
不需要预先存在的特定 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);
}

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

您可以将条件编译与条件注释结合使用

这里简要概述了它是如何工作的。

始终显示栏
在javascript中设置一个标志。IEMinor=false
如果 IE <= 9，则使用脚本标记和条件注释将标志设置为 true
如果@_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+ (untested)中显示栏。并在其他情况下显示。

注意：我没有让它看起来和截图中的一模一样，你应该让那部分工作

编辑：使用 IE 的浏览器模式测试 IE<10 似乎有效
Edit2：哎呀，我从图片中认为 IE9 也不支持，以允许IE9更改lte IE 9为lt IE 9@_jscript_version > 9>= 9

score 2 · Accepted Answer

检查浏览器引擎是否为 Trident 6+（IE 9、10、11）应该做（演示）：

(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 最终版本或未来版本中中断。

score 0 · Accepted Answer

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

浏览器不是IE；

使用浏览器is.ie

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

使用浏览器is.ie8down

（在 SP2013 本地测试）

score 0 · Accepted Answer

这是针对 IE 10 和 11 测试的。前往此链接了解更多说明。

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

score 0 · Accepted Answer

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

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

score -4 · Accepted Answer

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

所以我猜你使用 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/

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

10 回答 10

HTML

jQuery

浏览器检测一般

Related

Reference