2014-10-08 94 views
2

我不确定这是否可能,但使用谷歌搜索导致我没有明确的答案。有没有办法根据浏览器类型加载一组不同的HTML?基于浏览器加载不同的html文件?

这是我唯一的情况下唯一的选择。我已经尝试了其他一切,我将能够使其工作的唯一方法是将完全不同的HTML文件放入Internet Explorer 10及更低版本,并使用完全不同的脚本和资源。我有一个脚本需要保持在加载顺序的顶部才能正常运行(谷歌聚合物js文件),我还需要检测浏览器是否为ie10或更低版本,并且能够告诉浏览器不加载文件,如果是这样的话,因为它导致了太多的错误,没有其他的东西会加载到它下面的页面上。

所以,是的 - 任何方式来切换基于浏览器的HTML加载?最好能用ie10和以下的东西?任何信息或链接将不胜感激。谢谢!

编辑我不能使用条件注释,因为我需要它与ie10一起工作,他们删除了对条件的支持。 :(

编辑我现在可以检测到IE10和以下罚款感谢Siropo,但我不知道如何让文件加载之前,页面的其余部分..像我需要检查浏览器是IE10及以下,然后加载在文件中其他一切。是否有可能以某种方式告诉一切要等到我检查浏览器的类型?

+0

您可以通过Ajax调用基于浏览器版本加载HTML文件!或视角js!这可能会有所帮助! – developerCK 2014-10-08 07:04:50

+0

可能重复的[如何在IE中加载脚本?](http://stackoverflow.com/questions/5505155/how-not-to-load-a-script-in-ie) – parchment 2014-10-08 07:05:41

+0

也解释了如何加载只在ie – parchment 2014-10-08 07:05:54

回答

2

如果你只需要检测CT不同版本的IE浏览器,而不是其他的浏览器,你可以去为IE特定HTML条件语句:

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

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

+0

感谢您的链接:-)我用这些IE的低于10但我还需要一个适用于ie10的工具,我相信他们删除了条件支持 – shanling 2014-10-08 07:09:23

+0

关于在IE 10及以上版本中删除条件的好处... – marekful 2014-10-08 07:54:10

0

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

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

以下是有关该功能的详细数据:https://community.x10hosting.com/threads/javascript-load-different-webpage-depending-on-browser-type.98287/