我想向我的用户展示一个类似这样的栏,如果:
(请注意,此屏幕截图仅用于说明-我的网站支持IE 9。)
我发现了这个不错的jQuery插件,但我不想使用弹出窗口。
我将在其中实现这一点的站点是Sharepoint 2013站点,因此我将使用内容编辑器bar部件来包含您提供的HTML内容,并且栏应该位于所有其他内容的顶部。
请包括CSS,如果需要使它看起来像屏幕截图?
发布于 2013-09-11 20:10:48
HTML
IE9和更早的版本(我认为是IE4)可以在超文本标记语言中使用conditional comments来识别。
作为@Jost noted,您可以使用它们来警告IE 8和更早版本的IE用户,如下所示:
<!--[if lte IE 8]>
BANNER HERE
<![endif]-->
然而,由于IE10放弃了对这些浏览器的支持,你不能用它们来识别非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站点上工作时,它大概是供公司内部使用的,而且公司是以微软为中心的。这听起来像是你在开发一个可以在IE中工作的站点,并且在开发过程中忽略了其他浏览器。
如果你可以合理地期望你的大多数用户使用某个版本的IE,也许条件注释警告就足够了。
发布于 2013-09-11 21:28:29
我发现这个问题很有趣。因此,我为自己设计了一个脚本,但也许其他人可以从中受益。这就是我把它作为答案发布的原因。它返回一个包含浏览器和操作系统信息的对象。
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;
}
发布于 2017-10-12 00:16:59
EDIT:直接回答OP.
我已经更新了Dany的答案,在(IE 6,7,8,9,10,11),Chrome和Edge中测试了两个更新。主要是因为更新很难在评论中读到。
<代码>H111在IE6、IE7、IE8、IE9、IE11、Chrome v62和边缘<代码>H212<代码>H113TODO:使其在OSX Sierra和iPhone中正常工作<代码>H214F215
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);
}
https://stackoverflow.com/questions/18739655
复制相似问题