logo标签列表

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

javascriptjquerycssinternet-explorerbrowser-detection
21

如果以下情况之一成立，我希望向我的用户展示一个看起来像这样的栏：

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

http://blog.integryst.com/webcenter-interaction/files/2011/10/ie9-support-confluence.png

（请注意，此截图仅供说明 - 我的网站支持IE 9。）
我找到了这个不错的jQuery插件，但我不想使用弹出窗口。

http://jreject.turnwheel.com/

这个功能将在Sharepoint 2013网站上实现，因此我将使用内容编辑器WebPart来包含您提供的HTML内容，并且该栏应该位于其他所有内容的顶部。
如果需要，请包含CSS以使其看起来像屏幕截图。
看看如何识别浏览器的用户代理。你需要编写自定义代码来实现这一点。搜索一下，你会找到解决方法的。 - Akki619
你的网站需要IE 9或更高版本才能使用吗？它不支持早期版本的IE或其他浏览器吗？ - Paul D. Waite
这是一个Sharepoint 2013网站，旧版本可以运行，但在IE 9上显示效果更佳。 - Luis Valencia
在 jQuery 文档中查看 $.support。 - Mr_Green
@Quentin，有些笔记本电脑上IE9不会根据策略自动安装，我猜测是策略出了问题。 - Luis Valencia
显示剩余5条评论
10个回答
13

HTML

使用 HTML 中的 条件注释 可以识别 IE 9 及之前版本（包括 IE 4）。

正如 @Jost 提到的，您可以像这样使用它们来警告IE 8及更早版本的用户：

<!--[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 站点，我们可以假设该站点是用于内部公司使用的，且该公司以微软为中心。看起来你正在开发能够在 IE 中运行的站点，并在开发过程中忽略了其他浏览器。

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

我的回答是否解释了为什么我认为反过来做可能更容易？（指您对@Josts删除的答案的评论） - Moritz Roessler
4
条件注释已经被删除，$.browser 已经被取消，浏览器检测也不太好用了。那么实际问题的答案在哪里？ - Pavlo
@C5H8NNaO4：是的 - 我可以看到设置 display:none 比通过 JavaScript 添加横幅更容易。然而，我想指出的是，如果你这样做，那么如果检测脚本失败，用户会看到警告。从 OP 所说的内容来看，我认为误报（在新浏览器中显示警告）比漏报（在旧浏览器中不显示警告）更糟糕。 - Paul D. Waite
@Pavlo：实际问题的答案在“一般浏览器检测”标题下，其中指出今天不可能编写任何可以成功识别尚不存在的浏览器的代码。 - Paul D. Waite
13

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

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;
}
无法在IE 11上工作，因为它不包含“MSIE”部分：http://www.nczonline.net/blog/2013/07/02/internet-explorer-11-dont-call-me-ie/ - Pavlo
2
已编辑以支持IE 11和Opera。 - Dany
1
IE 10 显示为 IE 1，修复方法是将 MSIE 行更改为：（注意 "{1}" 已更改为 "+"）browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]); - Joe Johnston
2
编辑以支持新版本的Opera，Safari，Edge和Windows，并修复OS X版本问题。 - J.D. Mallen
主要版本存在限制，因为它基于几年前的浏览器版本，为了使其具有未来性，应该是：([0-9]{1,2}) 或者甚至是 ([0-9]{1,3})。 - yennefer
1
为新的基于Edge Chromium添加edg if (/edg\/[0-9]{2}/i.test(navigator.userAgent)) - Boss COTIGA
5

编辑：这是直接回答OP的问题。

我已经使用两个更新对Dany的回答进行了更新，测试通过的浏览器包括（IE 6、7、8、9、10、11）、Chrome和Edge。主要是因为更新在评论中很难阅读。

  • 纯JavaScript - 不需要jQuery
  • IE10报告IE 10 vs IE 1
  • 现在可以报告Edge
  • 除了body之外，不需要特定的HTML元素预先存在
  • 在IE6、IE7、IE8、IE9、IE11、Chrome v62和Edge中测试过
  • TODO：在OSX Sierra和iPhone上正确运行它

Edge的测试必须放在第一位，因为它声称是一切。:/

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

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);
}
2
亲爱的踩分者：这个代码是有效的，而且正是原帖所询问的。因此我要踩你的踩分。 - Joe Johnston
3

我喜欢简单条件HTML。(越简单越好。)

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

2
您可以使用条件编译和条件注释相结合的方式。
以下是如何操作的简要介绍：
  1. 始终显示此栏
  2. 在 JavaScript 中设置一个标志。IEMinor=false
  3. 如果 IE <= 9，请使用脚本标记和条件注释将标志设置为 true。
  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<10似乎可以工作。
编辑2：糟糕，我以为从图片中看出IE9也不支持，要允许IE9，请将lte IE 9更改为lt IE 9，并将@_jscript_version > 9更改为>= 9

@Pavlo 我没有IE 11。但它不应该有条件注释，所以标志应该是“false”，并且栏应该隐藏，除非他们删除了条件编译支持。 - Moritz Roessler
2

检查浏览器引擎是否为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;
  }
})();

然而，如果微软决定更改userAgent字符串，那么在IE 11最终版或以后的版本中，嗅探可能会失效。
0

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

  1. 浏览器不是IE;
  • 使用browseris.ie
  1. 浏览器是IE但版本为8或更早
  • 使用browseris.ie8down

（在SP2013 on-prem中测试）

0

检查一下这段代码，它的运行结果符合预期。

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

一份好的回答总是要包含为什么这样做可以解决问题的解释，这样原作者和未来的读者都能从中学习。 - Tyler2P
0

这已经在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>
-4

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

所以我猜你正在使用PHP作为服务器端，你可以使用get_browser()函数检测浏览器，它会给你很多关于浏览器的信息，这里有一个不错的教程：

第一部分：

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

第二部分：

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/

1
服务器端浏览器检测很容易被浏览器欺骗 - 在客户端执行浏览器检测更容易和更安全，特别是对于IE浏览器，因为它们支持条件注释。 - Jost
1
@Jamil：“某些浏览器可能会通过传递错误的值来通过网站测试。” - 每个浏览器都会向服务器传递部分虚假的用户代理字符串。（它们都以“Mozilla”开头，即使Mozilla已经不存在了。） - Paul D. Waite
@Pavlo 当它在Chrome，FireFox，IE9，IE10上兼容时，它会发出警报。当它在Chrome，Firefox，Safari或Opera上时，您是否也想返回false？ - Jamil Hneini
@Pavio 这个问题将被编辑以满足您的需求，它很简单。 - Jamil Hneini
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接