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>
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:
window.navigator.userAgent
document.createElement
node.appendChild
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.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With