根據用戶代理加載JavaScript文件和css文件

Question

就像在標題中一樣。

我得到了兩個文件：一個是javascript文件，另一個是css文件。如果用戶代理是一個iPad我想加載這些文件 - 但只有當用戶代理是iPad。所以下面兩行僅在user-agent是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); 
} 

或者任何將在User-Agent標題爲iPad。

參考文獻：

• 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的。）