How to display browser specific HTML?

后端 未结 9 637
遇见更好的自我
遇见更好的自我 2020-12-06 10:48

I\'m trying to find a way to display one link to an IE user and another link to all other browsers using javascript or conditional comments (or whatever it takes).

B

相关标签:
9条回答
  • 2020-12-06 11:23

    One way that I've figured out how to do it:

    Get the javascript code from http://www.quirksmode.org/js/detect.html and put it in the <head> tag.

    Then in your <body> tag use:

    <script type="text/javascript">
    <!--
    if (BrowserDetect.browser == 'Explorer') {
        document.write('<a href="#">Explorer</a>');
    } else {
        document.write('<a href="#">Other Browsers</a>');
    }
    // -->
    </script>
    

    Not sure if this is the most simple way to do it but it got the job done.

    0 讨论(0)
  • 2020-12-06 11:25

    This is the Microsoft-approved way:

    <!--[if IE]>
        <a href="ie-only.html">click here!</a>
    <![endif]-->
    <![if !IE]>
        <a href="all-other-browsers.html">click here!</a>
    <![endif]>
    

    More information available at http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.

    Edit

    This code is implicitly guaranteed to work in all current and future versions of IE starting with IE 5. For non-IE browsers, the code works by relying on those browsers ignoring the "nonsensical" <![if !IE]> tag, which they all do, and I've never seen it fail. For a version that uses nothing but good ol' HTML comments, see bobince's answer, which I actually prefer to the Microsoft-provided solution.

    0 讨论(0)
  • 2020-12-06 11:28

    Add this to your header :

    <script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
    

    Then whatever you want to your .css page :

    /* Chrome Only */
    .chrome embed {
        display: none;
    }
    
    /* Firefox Only */
    .gecko video {
        display: none;
    }
    

    Source : http://rafael.adm.br/css_browser_selector/

    Available Browser Codes [browser]:

    ie - Internet Explorer (All versions)
    ie8 - Internet Explorer 8.x
    ie7 - Internet Explorer 7.x
    ie6 - Internet Explorer 6.x
    ie5 - Internet Explorer 5.x
    gecko - Mozilla, Firefox (all versions), Camino
    ff2 - Firefox 2
    ff3 - Firefox 3
    ff3_5 - Firefox 3.5
    ff3_6 - Firefox 3.6 new
    opera - Opera (All versions)
    opera8 - Opera 8.x
    opera9 - Opera 9.x
    opera10 - Opera 10.x
    konqueror - Konqueror
    webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
    safari3 - Safari 3.x
    chrome - Google Chrome
    iron - SRWare Iron
    
    0 讨论(0)
  • 2020-12-06 11:31

    A shot in the dark, maybe, but would this work?

    <style>
    
        a.forIeOnly {display: none; }
        a.notForIe  {display: block; }
    
    </style>
    
    <!--[if ie]>
    
    <style>
        a.forIeOnly {display: block;}
        a.notForIe  {display: none; }
    </style>
    
    <![endif]-->
    
    <a href="#" class="forIeOnly">Link One</a>
    <a href="#" class="notForIe">Link Two</a>
    

    It's nowhere near as clean/attractive as an if/else statement could be, but...it was the easiest way I could think of to implement a solution. Though it may well be fraught with issues all of its own.

    0 讨论(0)
  • 2020-12-06 11:32

    I don't think this is possible with conditional comment tags (which only work in internet explorer)

    Sure it is. You just have to leave the content for non-IE browsers in a position such that it's part of a conditional comment clause but not actually inside a <!-- comment -->. Then browsers that don't know about conditional comments will see the content fine. This is known as a downlevel-revealed conditional comment.

    Unfortunately the markup Microsoft give you there is invalid HTML (and not even well-formed XML). To make it pass muster you just need a few additional ‘--’s:

    <!--[if IE]> This is IE! <![endif]-->
    <!--[if !IE]><!--> This ain't IE! <!--<![endif]-->
    

    Although I have to echo AnonJr's non-answer, in that it's rare you should need a completely separate link/page for IE compared to other browsers. If you're doing something tricky like complex VML and ActiveX work in IE with Flash on other browsers I guess there could be a reason for it, but usually a few CSS and script hacks over the same basic page should suffice.

    0 讨论(0)
  • 2020-12-06 11:39

    You could always use CSS to hide the code from specific browsers. For instance, considering the following code:

    <a href"ie-only.html" id="ie-only">click here!</a>
    <a href"all-other-browsers.html" id="other-browsers">click here!</a>
    

    You could apply the following CSS hacks, and the appropriate links would be displayed to the appropriate browsers.

    /* Display settings for most browsers */
    #ie-only {display: none;}
    #other-browsers {display: block;}
    
    /* Display settings for IE <= 6 */
    * html #ie-only {display: block;}
    * html #other-browsers {display: none;}
    
    0 讨论(0)
提交回复
热议问题