根据用户代理加载 javascript 文件和 css 文件

Question

就像标题一样。

我有两个文件：一个是 javascript 文件，一个是 css 文件。如果 user-agent 是 iPad，我想加载这些文件 - 但仅当 user-agent 是 iPad 时。因此，仅当用户代理是 iPad 时才加载以下两行。我怎样才能做到这一点

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

Answer 1

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 的 User-Agent 标头中的任何内容。

参考资料：

• window.navigator.userAgent
• document.createElement
• node.appendChild

Answer 2

您可以使用document.createElement 创建link 和script 元素，然后将它们附加到文档中（例如，将它们附加到document.getElementsByTagName('head')[0] 或类似的）。

This answer 这里的 SO 建议您可以通过在 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>

...但这是即兴的，未经测试的。

（请注意，没有理由将类型放在link 或script 上；在link 的情况下，类型来自响应的内容类型。在script 的情况下，默认为 JavaScript。）