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-10T14:22:43.303

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 '12 at 14:22

answered Dec 10 '12 at 14:17

Brad Christie

100,477
16
156
200

1

I always use `navigator.userAgent.match(/iPad/i) != null` to detect iPad – bart s Dec 10 '12 at 14:20
@barts: Noted, thanks for the information. I'll update my answer to reflect. – Brad Christie Dec 10 '12 at 14:22
Thank you guys for the comprehensive answer. That really helped me :) – born2fr4g Dec 11 '12 at 08:30

score 2 · Answer 2 · edited May 23 '17 at 10:29

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

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. — Brad Christie, Dec 10 '12 at 14:21
@BradChristie: Right, but `type` on `link` when there's a `rel="stylesheet"` isn't explicit, it's a no-op, see [here](http://www.w3.org/TR/html5/the-link-element.html#attr-link-type) and [here](http://www.w3.org/TR/html5/links.html#link-type-stylesheet). Similarly on `script`, the default is and **always** has been JavaScript, even on IE5 when Microsoft thought they could compete using VBScript. :-) — T.J. Crowder, Dec 10 '12 at 14:27

Load a javascript file and css file depending on user agent

2 Answers2

Linked