Load a javascript file and css file depending on user agent

Question

Just like in the title.

I got two files: one is javascript file and one is css file. And if user-agent is an iPad I want to load those files - but only when user-agent is iPad. So below two lines are only loaded when user-agent is an iPad. how can i achieve that

<link rel="stylesheet" href="/c/dropkick.css" type="text/css"/>
<script src="/s/jquery.dropkick-1.0.0.js" type="text/javascript"></script>

Brad Christie · Accepted Answer · 2012-12-10 14:22:43Z

11

if (navigator.userAgent.match(/iPad/i) != null){ // may need changing?
  var js = document.createElement('script');
  js.type = "text/javascript";
  js.src = "/s/jquery.dropkick-1.0.0.js";

  var css = document.createElement('link');
  css.type = "text/css";
  css.rel = "stylesheet";
  css.href = "/c/dropkick.css";

  var h = document.getElementsByTagName('head')[0];
  h.appendChild(js);
  h.appendChild(css);
}

Or whatever would be in the User-Agent header for an iPad.

References:

edited Dec 10, 2012 at 14:22

answered Dec 10, 2012 at 14:17

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bart s Over a year ago

I always use navigator.userAgent.match(/iPad/i) != null to detect iPad

Brad Christie Over a year ago

@barts: Noted, thanks for the information. I'll update my answer to reflect.

born2fr4g Over a year ago

Thank you guys for the comprehensive answer. That really helped me :)

Community · Accepted Answer · 2017-05-23 10:29:24Z

2

You can use document.createElement to create link and script elements, and then append them to the document (for instance, append them to document.getElementsByTagName('head')[0] or similar).

This answer here on SO suggests that you can dtect an iPad by just looking for the string "ipad" in the navigator.userAgent field. Of course, the user agent field can be spoofed.

So for example:

<script>
(function() {
    var elm, head;

    if (navigator.userAgent.indexOf("ipad") !== -1) {
        head = document.getElementsByTagName('head')[0] || document.body || document.documentElement;

        elm = document.createElement('link');
        elm.rel = "stylesheet";
        elm.href = "/c/dropkick.css";
        head.appendChild(elm);

        elm = document.createElement('script');
        elm.src = "/s/jquery.dropkick-1.0.0.js";
        head.appendChild(elm);
    }
})();
</script>

...but that's off-the-cuff, untested.

(Note that there's no reason to put the type on either link or script; in the case of link, the type comes from the content-type of the response. In the case of script, the default is JavaScript.)

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Dec 10, 2012 at 14:16

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

Brad Christie Over a year ago

Though I agree you don't need to specify type, I get sketching from the old days of foo.png containing Content-Type: text/javascript in the header. I guess I feel like explicit is safer than implicit in a lot of cases.

T.J. Crowder Over a year ago

@BradChristie: Right, but type on link when there's a rel="stylesheet" isn't explicit, it's a no-op, see here and here. Similarly on script, the default is and always has been JavaScript, even on IE5 when Microsoft thought they could compete using VBScript. :-)

Collectives™ on Stack Overflow

Load a javascript file and css file depending on user agent

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related