问题
I am not sure if this is even possible, but googling has lead me to no clear answer. Is there a way to load a different set of html based on browser type?
This is seriously the only option for my unique case. I've tried everything else and the only way I'm going to be able to make it work is by putting in an entirely different html file with entirely different scripts and resources for Internet Explorer 10 and below. I have a script that needs to remain at the top of the load order in order to function correctly (google polymer js file) and I need to also detect if the browser is ie10 or below and be able to tell the browser to not load that file if so, as it's causing so many errors that nothing else will load below it on the page.
So, yes -- any way to switch which html loads based on browser? Preferably something that would work with ie10 and below? Any info or links would be appreciated. Thank you!
edit I cannot use a conditional comment because I need it to work with ie10 and they removed support for conditionals. :(
edit I can now detect IE10 and below fine thanks to Siropo, but I am not sure how to get the file to load before the rest of the page.. Like I need to check if the browser is IE10 and below, and then load the file in with everything else. Is there maybe a way to tell everything to wait until I've checked browser type?
回答1:
If you only need to detect different versions of IE and not other browsers, you could go for the IE specific HTML conditionals:
http://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/
If you are using a framework to build your site that supports some sort of templating system, you could rely on the User-Agent in the request to render different HTML templates for different browsers.
回答2:
Take a look on the get_browser php function.
Here's another alternative.
回答3:
This trick works for all browsers.
<html>
<head>
<title>Redirecting</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript"> {var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "unknown";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
var browser = BrowserDetect.browser;
browser = browser.toLowerCase();
var link = browser + '.html';
document.write('<meta http-equiv="refresh" content="1; url=' + link + '"/>');
</script>
</head>
<body background="/images/background1.jpg">
<p align=center><font color=green size=5>Rendering Browser</font></p>
<p align=center><img src="http://www.lacosta-seaisle.com/images/loading_aqua.gif" alt="loading"></p>
</body>
</html>
Here is more data about this feature: https://community.x10hosting.com/threads/javascript-load-different-webpage-depending-on-browser-type.98287/
来源：https://stackoverflow.com/questions/26250894/load-different-html-file-based-on-browser