HTML - 如何在不同的用户代理中显示不同的图像？答案

【问题标题】：HTML - How to show different image in different user agents?HTML - 如何在不同的用户代理中显示不同的图像？
【发布时间】：2015-03-15 21:47:08
【问题描述】：

如果我使用 Chrome，我想显示 img1.jpg (<img src="img1.jpg" alt="my Chrome Image">)。否则，如果我使用 IE，我想显示 img2.jpg (<img src="img2.jpg" alt="my IE Image">)。有可能吗？

提前致谢。

【问题讨论】：

是的。 jsfiddle.net/1s22amge
Check what kind of browser the user is using的可能重复

标签： javascript html user-agent

【解决方案1】：

match = navigator.userAgent.match(/(chrome|safari|firefox|msie|opera|rv:11)\/?\s*([\d\.]+)/i);

match[1] 给出浏览器名称。 "rv:11" 也代表 IE11。

例如，您可以准备带前缀的图像，并使用匹配的值作为前缀：

myImg.src=match[1]+"-img1.jpg";
myImg.alt=match[1]+" Image";

【讨论】：

【解决方案2】：

您可以使用下面的函数执行此操作，然后只需使用 IF 语句来设置该图像的属性。

function browsercheck() {
    var userAgent = window.navigator.userAgent;
    return (userAgent.indexOf("MSIE ") > 0 || !! userAgent.match(/Trident.*rv\:11\./));

}

var browser = browsercheck() ? 'IE' : 'Chrome';

if (browser == "IE")
{
     //Set attribute   
}

else if (browser == "Chrome")
{
     //Set attribute   
}

如果您需要了解确切的浏览器，请使用以下内容

navigator.browsercheck= (function(){
    var ua= navigator.userAgent, tem,
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return { 'browser': M[0], 'version': M[1] };
})();

然后，您可以使用navigator.browserInfo.browser 查询此内容以获取浏览器信息，如果您需要知道确切的版本，则可以使用navigator.browserInfo.version。

信用：Browser detection in JavaScript?

【讨论】：

查看编辑以获取准确的浏览器信息。看起来他们是在 Chrome 或 IE 之后，但对于确切的版本，他们可以在添加的代码中绑定