What is the proper jQuery Syntax for removing a class based upon a visitor's brand web browser?

StackOverflow https://stackoverflow.com/questions/17896379

题

I am wanting to remove a class from a specified ID if a visitor is using Internet Explorer (IE).

At first, I created a redirect for visitors using IE with the following JavaScript syntax, and it worked just fine:

<script language=javascript>
if ((navigator.userAgent.match(/IE/i))) {
    document.location = "http://www.somepage.com/IE_page.html";
    }
</script>

But I want to take a different tack. Rather than redirect to another page, I want the ability to remove (or add perhaps) class(es) to ID's.

What I created, but hasn't worked, was this:

<script language=javascript>
if ((navigator.userAgent.match(/IE/i))) {
    $('#someIdHere').removeClass('someClassHere');
    }
</script>

I have the requisite jQuery link above this script.

What syntax am I missing with this jQuery statement?

有帮助吗？

解决方案

You need to wrap the code in a $(document).ready() block, or the #someIdHere element won't exist on the page when your code executes.

$(document).ready(function () {
    if ((navigator.userAgent.match(/IE/i))) {
        $('#someIdHere').removeClass('someClassHere');
    }
});

.. alternatively, you can include your code at the bottom of the page (before the </body>) rather than in the <head>.

Also note that you run the risk of matching non-IE browsers with your regex pattern. Something like /\bMSIE\b/i would be more precise.

FWIW, see HTML Script tag: type or language (or omit both)? with regard to using language=javascript in <script /> tags.

其他提示

There is a way in javascript to detect ie by using conditional comments. This is not my work, I'll just post the Snippet of James Padolsey from Github:

// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
//     ie === undefined
// If you're in IE (>=5) then you can determine which version:
//     ie === 7; // IE7
// Thus, to detect IE:
//     if (ie) {}
// And to detect the version:
//     ie === 6 // IE6
//     ie > 7 // IE8, IE9 ...
//     ie < 9 // Anything less than IE9
// ----------------------------------------------------------

// UPDATE: Now using Live NodeList idea from @jdalton

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

An alternative route you could take, would be using the conditional comments directly on your HTML-file, omitting the need of detecting anything directly in JS (this is more preferrable in my opinion):

<!--[if lt IE 7 ]> <html class="msie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="msie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="msie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="msie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Replace your HTML-Tag in your file with this snippet. IE will render the tag corresponding to its version. Then you can look for the existence of the class msie on the html-tag.

Note that both solutions won't work for IE10 because this version doesn't support conditional comments anymore.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top