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

Question

提问by Luis Valencia

I would like to show my users a bar that looks like this, if:

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

Browser is not IE; or
Browser is IE but is version 8 or earlier

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

(Note that the screenshot is just for illustration - IE 9 issupported for my site.)

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

I found this nice jQuery plugin, but I don't want to use popups.

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

http://jreject.turnwheel.com/

The site where I will implement this is a Sharepoint 2013 site, so I will use a content editor webpart to include the HTML content you provide and the bar should be at the top of everything else.

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

Please include CSS if needed to make it look as the screenshot?

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

Answer 1

采纳答案by Paul D. Waite

HTML

IE 9 and earlier (down to, I think, IE 4) can be identified using conditional commentsin HTML.

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

As @Jost noted, you could use them to warn IE users on IE 8 and earlier, like this:

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

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

However, as IE 10 dropped support for these, you can't use them to identify non-IE browsers.

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

jQuery

jQuery used to include a browser detection module ($.browser), but it was removed in jQuery 1.9. If you can use an earlier version of jQuery (e.g. 1.8.3) or the jQuery Migrate plugin, then you could use this to show the banner.

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

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

Browser Detection in general

一般浏览器检测

Please note that browser detection is difficult. New browsers are coming out all the time, so any browser support plugin can rapidly become out of date, as can the premise on which you base your warning messages. jQuery's browser detect was the most consistently maintained, and even they gave up on it in the end.

请注意，浏览器检测很困难。新的浏览器一直在问世，因此任何浏览器支持插件都可能迅速过时，警告消息所依据的前提也是如此。jQuery 的浏览器检测是最一致维护的，甚至他们最终也放弃了。

These days, web developers are generally expected to write code that works cross-browser, and use feature-detection to deal with browsers that don't support the features they want to use.

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

As you're working on a SharePoint site, presumably it's for internal company use, and the company is Microsoft-centric. It sounds like you're developing the site to work in IE, and ignoring other browsers during development.

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

If you can reasonably expect most of your users to be on some version of IE, maybe the conditional comment warning is enough.

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

Answer 2

回答by Dany

I found the question interesting. So i worked out a script for myself, but maybe someone else can benefit from it. So that's why I posted it as an answer. It returns an object with browser and OS information.

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

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

回答by Joe Johnston

EDIT: This directly answers the OP.

编辑：这直接回答了 OP。

I have updated Dany's answer with two updates tested in (IE 6,7,8,9,10,11), Chrome, and Edge. Primarily because the updates are very hard to read in the comments.

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

Pure javascript - No jQuery required
IE10 reports IE 10 vs IE 1
This now reports Edge
No specific HTML elements required to pre-exist (other than a body)
Tested in IE6, IE7, IE8, IE9, IE11, Chrome v62, and Edge
TODO: get it working properly in OSX Sierra, and iPhone

纯 javascript - 不需要 jQuery
IE10 报告 IE 10 与 IE 1
这现在报告边缘
不需要预先存在的特定 HTML 元素（主体除外）
在 IE6、IE7、IE8、IE9、IE11、Chrome v62 和 Edge 中测试
TODO：让它在 OSX Sierra 和 iPhone 中正常工作

The test for edge must be first as it claims to be everything. :/

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

All this being said Browser detection "is what it is" and we can hope that the need for it will go away soon.

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

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

回答by Heres2u

I like the simple conditional html. (Simpler always seems better.)

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

Another more comprehensive javascript alert can be found at: http://www.browser-update.org

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

Answer 5

回答by Moritz Roessler

You could use conditional compilingin conjunction with conditional comments

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

Here a short overview of how this could work.

这是如何工作的简短概述。

Always show the bar
Set a flag in javascript. IEMinor=false
Set the flag to true if IE <= 9, by using a script tag and conditional comments
Use conditional compiling to hide the bar if @_jscript_version > 9(actually not needed)and IEMinor===false

始终显示栏
在 javascript 中设置一个标志。 IEMinor=false
如果 IE <= 9，则使用脚本标记和条件注释将标志设置为 true
使用条件编译来隐藏栏 if @_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>

_{I was too lazy to add the script type...}

_{懒得加脚本类型了...}

Here is an example on JSBinwhich doesn't show the bar in IE 10+ (untested). And shows it in other cases.

这是JSBin上的一个示例，它没有在 IE 10+ (untested) 中显示栏。并在其他情况下显示它。

Note: I didn't make it look exactly like in the screenshot, you should get that part working

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

Edit: Using the browsermode of IE to test against IE<10 seems to work
Edit2: Whoops i thought from the picture IE9 is unsupported too, to allow IE9 change lte IE 9to lt IE 9and @_jscript_version > 9to >= 9

编辑：使用IE的browsermode对抗IE <10的测试似乎工作
EDIT2：哎呦我从图片IE9不支持也认为，让IE9变化lte IE 9来lt IE 9和@_jscript_version > 9到>= 9

Answer 6

回答by Pavlo

Checking if browser engine is Trident 6+ (IE 9, 10, 11) should do (demo):

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

However, the sniffing may break in IE 11 final or future versions if Microsoft will decide to change userAgentstring.

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

Answer 7

回答by mctl87

Actually in SharePoint (OP mentioned that) there is a built-in variable browseris. It's available in the global window scope. Answering OP question:

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

Browser is not IE;

浏览器不是 IE；

use browseris.ie

使用 browseris.ie

Browser is IE but is version 8 or earlier

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

use browseris.ie8down

使用 browseris.ie8down

(tested in SP2013 on-prem)

（在本地 SP2013 中测试）

Answer 8

回答by Learner

This is tested for IE 10 and 11. Head on to this linkfor more description.

这已针对 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>

Answer 9

回答by odai alghamdi

try $.browser.version
check here http://api.jquery.com/jQuery.browser/

尝试$.browser.version
检查这里http://api.jquery.com/jQuery.browser/

Answer 10

回答by Jamil Hneini

I don't suggest you to use client side as some browsers might trick you by passing wrong values to pass website tests.

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

So i guess your using PHP as a server side you can detect the browser using the get_browser()function that give you a lot of information about the browser here is a nice turtoeial:

因此，我猜您使用 PHP 作为服务器端，您可以使用get_browser()为您提供有关浏览器的大量信息的函数来检测浏览器，这是一个很好的 turtoeial：

Part 1:

第1部分：

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

Part 2:

第2部分：

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

if your using another language all server side language has this functunality just google it or reference some sort of a turtorial

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

From the client side you can detect if it is compatible like that:

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

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:

HTML：

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

FIDDLE:

小提琴：

Test it and it works:

测试它，它的工作原理：

http://jsfiddle.net/Z7fvb/

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

提问by Luis Valencia

采纳答案by Paul D. Waite

HTML

HTML

jQuery

jQuery

Browser Detection in general

一般浏览器检测

回答by Dany

回答by Joe Johnston

回答by Heres2u

回答by Moritz Roessler

回答by Pavlo

回答by mctl87

回答by Learner

回答by odai alghamdi

回答by Jamil Hneini

相关推荐

最近更新

标签

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

提问by Luis Valencia

采纳答案by Paul D. Waite

HTML

HTML

jQuery

jQuery

Browser Detection in general

一般浏览器检测

回答by Dany

回答by Joe Johnston

回答by Heres2u

回答by Moritz Roessler

回答by Pavlo

回答by mctl87

回答by Learner

回答by odai alghamdi

回答by Jamil Hneini

相关推荐

jQuery AJAX 请求中的内容类型和数据类型是什么？

jQuery 如何获取 Bootstrap 3 词缀方法的动态数据偏移值

jQuery 模糊事件未触发

jQuery 单击时显示特定图像

相关推荐

最近更新

标签