根据用户代理加载javascript文件和css文件
就像在标题中一样 我有两个文件:一个是javascript文件,一个是css文件。如果用户代理是iPad,我想加载这些文件——但只有当用户代理是iPad时。因此,下面两行仅在用户代理是iPad时加载。我怎样才能做到这一点根据用户代理加载javascript文件和css文件,javascript,html,user-agent,Javascript,Html,User Agent,就像在标题中一样 我有两个文件:一个是javascript文件,一个是css文件。如果用户代理是iPad,我想加载这些文件——但只有当用户代理是iPad时。因此,下面两行仅在用户代理是iPad时加载。我怎样才能做到这一点 <link rel="stylesheet" href="/c/dropkick.css" type="text/css"/> <script src="/s/jquery.dropkick-1.0.0.js" type="text/javascript"&g
<link rel="stylesheet" href="/c/dropkick.css" type="text/css"/>
<script src="/s/jquery.dropkick-1.0.0.js" type="text/javascript"></script>
您可以使用document.createElement创建链接和脚本元素,然后将它们附加到文档中,例如,将它们附加到document.getElementsByTagName'head'[0]或类似的文件中
因此,这里建议您只需在navigator.userAgent字段中查找字符串iPad,即可选择iPad。当然,用户代理字段可以被欺骗
例如:
<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>
…但这是即兴的,未经测试
请注意,没有理由将类型放在链接或脚本上;对于链接,类型来自响应的内容类型。对于脚本,默认值是JavaScript
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);
}
或者iPad的用户代理标题中的任何内容
参考资料:
我总是使用navigator.userAgent.match/iPad/I!=检测为空iPad@barts:注意,谢谢您提供的信息。我会更新我的答案以反映。谢谢你们全面的回答。这确实帮助了我:虽然我同意您不需要指定类型,但我从旧版本的foo.png中获得了草图,标题中包含内容类型:text/javascript。我想我觉得在很多情况下显式比隐式更安全。@BradChristie:是的,但是当有一个rel=样式表不是显式的,它是不可操作的,请参见和。同样,在脚本上,默认值是JavaScript,并且一直都是JavaScript,即使在IE5上,当微软认为他们可以使用VBScript进行竞争时也是如此-