根据浏览器加载不同的html文件？答案

【问题标题】：load different html file based on browser?根据浏览器加载不同的html文件？
【发布时间】：2016-05-28 14:21:51
【问题描述】：

我不确定这是否可能，但谷歌搜索导致我没有明确的答案。有没有办法根据浏览器类型加载不同的 html 集？

这确实是我独特案例的唯一选择。我已经尝试了其他所有方法，唯一能够使其工作的方法是为 Internet Explorer 10 及更低版本放入一个完全不同的 html 文件，其中包含完全不同的脚本和资源。我有一个脚本需要保持在加载顺序的顶部才能正常运行（谷歌聚合物 js 文件），我还需要检测浏览器是否为 ie10 或以下，并能够告诉浏览器不加载那个如果是这样，则文件，因为它会导致如此多的错误，以至于页面上的任何其他内容都不会加载。

所以，是的——有什么方法可以根据浏览器切换加载哪些 html？最好是适用于 ie10 及以下版本的东西？任何信息或链接将不胜感激。谢谢！

edit 我不能使用条件注释，因为我需要它与 ie10 一起使用，并且他们删除了对条件的支持。 :(

编辑感谢 Siropo，我现在可以检测到 IE10 及以下版本，但我不确定如何在页面的其余部分之前加载文件。就像我需要检查浏览器是IE10及以下，然后将文件与其他所有内容一起加载。有没有办法告诉一切等到我检查了浏览器类型？

【问题讨论】：

可以根据浏览器版本通过ajax调用加载html文件！或按角度js查看！这可能会有所帮助！
How not to load a script in IE?的可能重复
也说明了如何只在ie中加载
您想使用什么程序语言来检查客户端浏览器？ Javascript、PHP...？
好的，然后检查此链接 - javascriptkit.com/javatutors/navigator.shtml。在下面你有一个部分：检测 IE x.x

标签： javascript html loading

【解决方案1】：

如果您只需要检测不同版本的 IE 而不是其他浏览器，则可以使用 IE 特定的 HTML 条件：

http://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/

如果您使用框架来构建支持某种模板系统的网站，您可以依赖请求中的 User-Agent 来为不同的浏览器呈现不同的 HTML 模板。

【讨论】：

感谢链接 :-) 我将这些用于 10 以下的 IE，但我还需要一个适用于 ie10 的，我相信他们删除了条件支持

【解决方案2】：

这个技巧适用于所有浏览器。

 <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>

【讨论】：