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

Posted

技术标签:

【中文标题】如果浏览器不是 Internet Explorer 9 或更高版本,则显示一条消息【英文标题】:Show a message if the browser is not internet explorer 9 or greater 【发布时间】:2013-09-15 09:17:28 【问题描述】:

如果:

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

(请注意,屏幕截图仅用于说明 - 我的网站支持 IE 9 。)

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

http://jreject.turnwheel.com/

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

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

【问题讨论】:

查看如何识别浏览器的 USER 代理。然后,您需要为此编写自定义代码。搜索周围你会找到周围的路。 所以您的网站需要 IE 9 或更高版本?不支持早期版本的IE,或者其他浏览器? 它的 Sharepoint 20130 2013 站点,旧版本可以工作,但 IE 9 看起来更好。 我很惊讶有人在人们使用的浏览器不受公司 IT 部门控制的环境中使用 Sharepoint。 在 jquery 文档中检查 $.support.. 【参考方案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,那么条件注释警告可能就足够了。

【讨论】:

我的答案是否解释了为什么我认为反过来可能会更容易? (参考您对@Josts 已删除答案的评论) 条件注释消失,$.browser 被删除,浏览器检测不正确。实际问题的答案在哪里? @C5H8NNaO4:是的 - 我可以看到设置 display:none 比通过 javascript 添加横幅更容易。但是,我会注意到,当您这样做时,如果检测脚本失败,用户会看到警告。根据 OP 所说,我认为误报(在新浏览器中显示警告)比误报(在旧浏览器中不显示警告)更糟糕。 @Pavlo:实际问题的答案在“浏览器检测一般”标题下,它指出今天不可能编写任何代码来保证成功识别不检测的浏览器还存在。【参考方案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;

【讨论】:

不适用于 IE 11,因为它不包含“MSIE”部分:nczonline.net/blog/2013/07/02/… 已编辑以支持 IE 11 和 Opera。 IE 10 显示为 IE 1 修复方法是将 MSIE 行更改为:(注意 '1' 已更改为 '+' browser.version = parseInt(navigator.userAgent.match (/(MSIE\ [0-9]+)/i)[0].split(" ")[1]); 已编辑以添加对新版本 Opera、Safari、Edge 和 Windows 的支持,并修复 OS X 版本控制。 为基于新 Edge Chromium 的 if (/edg\/[0-9]2/i.test(navigator.userAgent)) 添加 edg 【参考方案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);

【讨论】:

亲爱的反对者:这行得通。这就是OP所问的。所以我反对你的反对票。【参考方案4】:

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

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

【讨论】:

【参考方案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 最终版本或未来版本中的嗅探可能会中断。

【讨论】:

【参考方案6】:

您可以将 条件编译条件 cmets

结合使用

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

    始终显示栏 在 javascript 中设置一个标志。 IEMinor=false 如果 IE 如果@_jscript_version &gt; 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 &gt; 9&gt;= 9

【讨论】:

@Pavlo 我没有 IE 11。但它不应该有条件 cmets,所以标志应该是 false 并且栏应该隐藏,除非他们会删除条件编译支持【参考方案7】:

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

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

(在 SP2013 本地测试)

【讨论】:

【参考方案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>

【讨论】:

【参考方案9】:

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

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

【讨论】:

一个好的答案将始终包括解释为什么这会解决问题,以便 OP 和任何未来的读者可以从中学习。【参考方案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/

【讨论】:

服务器端浏览器检测是一定会被浏览器欺骗的东西——在客户端进行检测更容易、更安全,尤其是对于 IE,因为它们有条件 cmets。 @Jamil:“某些浏览器可能会通过传递错误值来通过网站测试来欺骗您” - 每个浏览器都会将部分伪造的用户代理字符串传递给服务器。 (它们都以“Mozilla”开头,尽管 Mozilla 已经不存在了。) @Pavlo it alert Compatible when it is chrome , FireFox , IE9 , IE 10 你想在chrome firefox safari或opera上返回false吗??? @Pavio 问题将被编辑以满足您的需要,这很简单

以上是关于如果浏览器不是 Internet Explorer 9 或更高版本,则显示一条消息的主要内容,如果未能解决你的问题,请参考以下文章

如果浏览器是 Internet Explorer:运行替代脚本

Internet Explorer 9 是不是会在数组和对象文字末尾的额外逗号上阻塞?

加载大页面时 Internet Explorer 无响应

如何在 Internet Explorer 浏览器的 JavaScript 中修复数组 indexOf()

为啥在安装Windows Internet Explorer 7的时候,提示"此操作系统不支持Windows Internet Explorer 7.

是否可以将Internet Explorer滚动条箭头居中?