如何检测旧版浏览器并重定向到浏览器支持页面

Question

如果IE版本低于9，或者mozilla版本低于35，Chrome版本低于39，safari版本低于s7，则应该重定向到浏览器支持页面。

尝试使用下面的代码，但是它没有起作用...只有当我在IE中打开对象检查器窗口时才能工作。

 <!--[if lt IE 9 ]>
<script type='text/javascript'>
    console.log("its less than IE 9");        
window.location.href="BrowserSupport.html";
</script>

请指导我如何检测这些浏览器的版本并重定向到浏览器支持页面？

- dsi

---

replace可能是更好的选择: https://dev59.com/_3RB5IYBdhLWcg3wz6Wd#506004 - Bram Vanroy

Answer 1

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix; 


// In Opera 15+, the true version is after "OPR/" 
if ((verOffset=nAgt.indexOf("OPR/"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+4);
}
// In older Opera, the true version is after "Opera" or after "Version"
else if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
   fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
   fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
 fullVersion  = ''+parseFloat(navigator.appVersion); 
 majorVersion = parseInt(navigator.appVersion,10);
}


     alert("Name:"+browserName+" Version "+majorVersion)

- Tushar

---

将此代码粘贴到 head 标签内，但无法正常工作。无法获取浏览器名称和版本，请指导。 - dsi

Answer 2

更新代码。现在它将正常工作。

/*
 * Browser Detect script
 */
BrowserDetect = (function() {
 // script settings
 var options = {
  osVersion: true,
  minorBrowserVersion: true
 };

 // browser data
 var browserData = {
  browsers: {
   chrome: uaMatch(/Chrome\/([0-9\.]*)/),
   firefox: uaMatch(/Firefox\/([0-9\.]*)/),
   safari: uaMatch(/Version\/([0-9\.]*).*Safari/),
   opera: uaMatch(/Opera\/.*Version\/([0-9\.]*)/, /Opera\/([0-9\.]*)/),
   msie: uaMatch(/MSIE ([0-9\.]*)/, /Trident.*rv:([0-9\.]*)/)
  },
  engines: {
   webkit: uaContains('AppleWebKit'),
   trident: uaMatch(/(MSIE|Trident)/),
   gecko: uaContains('Gecko'),
   presto: uaContains('Presto')
  },
  platforms: {
   win: uaMatch(/Windows NT ([0-9\.]*)/),
   mac: uaMatch(/Mac OS X ([0-9_\.]*)/),
   linux: uaContains('X11', 'Linux')
  }
 };

 // perform detection
 var ua = navigator.userAgent;
 var detectData = {
  platform: detectItem(browserData.platforms),
  browser: detectItem(browserData.browsers),
  engine: detectItem(browserData.engines)
 };

 // private functions
 function uaMatch(regExp, altReg) {
  return function() {
   var result = regExp.exec(ua) || altReg && altReg.exec(ua);
   return result && result[1];
  };
 }
 function uaContains(word) {
  var args = Array.prototype.slice.apply(arguments);
  return function() {
   for(var i = 0; i < args.length; i++) {
    if(ua.indexOf(args[i]) < 0) {
     return;
    }
   }
   return true;
  };
 }
 function detectItem(items) {
  var detectedItem = null, itemName, detectValue;
  for(itemName in items) {
   if(items.hasOwnProperty(itemName)) {
    detectValue = items[itemName]();
    if(detectValue) {
     return {
      name: itemName,
      value: detectValue
     };
    }
   }
  }
 }

 // add classes to root element
 (function() {
  // helper functions
  var addClass = function(cls) {
   var html = document.documentElement;
   html.className += (html.className ? ' ' : '') + cls;
  };
  var getVersion = function(ver) {
   return typeof ver === 'string' ? ver.replace(/\./g, '_') : 'unknown';
  };

  // add classes
  if(detectData.platform) {
   addClass(detectData.platform.name);
   if(options.osVersion) {
    addClass(detectData.platform.name + '-' + getVersion(detectData.platform.value));
   }
  }
  if(detectData.engine) {
   addClass(detectData.engine.name);
  }
  if(detectData.browser) {
   addClass(detectData.browser.name);
   addClass(detectData.browser.name + '-' + parseInt(detectData.browser.value, 10));
   if(options.minorBrowserVersion) {
    addClass(detectData.browser.name + '-' + getVersion(detectData.browser.value));
   }
  }
 }());

 // export detection information
 return detectData;
}());

- Ram kumar

---

无论我保留哪个条件，我的意思是，我如何检测这是旧版浏览器，因为我上面提到了检测版本，所以需要重定向？ - dsi

无法使其工作。你能分享一下细节吗？ - dsi

当我添加这个脚本时，它会在HTML上添加类似于http://prntscr.com/6elbdr的类。 - Ram kumar

现在我已经更新了代码来回答问题。请使用它，希望对你有用。 - Ram kumar

无法获取正确的浏览器。在Mac上的Chrome中显示为Safari。在Android 4.2上则显示为Chrome。 - theBugger

Answer 3

你可以简单地使用像哪个浏览器这样的已有工具。只需从GitHub上下载即可。这通常比编写自己的版本更容易且更好。

编辑：由于您在评论中提供了更多信息并且“哪个浏览器”使用了一些PHP，而您使用的是ASP，因此这里提供一个纯JavaScript解决方案，使用jQuery：Jquery Browser。

if ( $.browser.msie ) {
    alert( $.browser.version );
}

而且你也可以使用jQuery进行重定向：

$(location).attr('href','http://examplesite.com/whatever.html');

- BogdanM

---

我正在使用ASP.NET应用程序。请指导如何将其整合以解决此问题。 - dsi

你不需要使用jQuery来修改location对象。location.href = 'http://examplesite.com/whatever.html'完全可以。 - Alex K

@AlexKinnee 这是真的，但他也不必使用jquery。我只是认为，当使用框架来做某事时，使用它来做其他事情更加一致。 - BogdanM