Carica un file javascript e un file css in base al programma utente

Question

Proprio come nel titolo.

Ho due file: uno è un file javascript e uno è un file css. E se user-agent è un iPad voglio caricare quei file - ma solo quando user-agent è iPad. Quindi sotto due righe vengono caricate solo quando user-agent è un iPad. come posso ottenere che

<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); 
} 

O qualunque sarebbe nella User-Agent intestazione per un iPad.

Riferimenti:

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

Answer 2

È possibile utilizzare document.createElement per creare link e script elementi, e poi aggiungerli al documento (per esempio, li aggiunge alla document.getElementsByTagName('head')[0] o simili).

This answer qui su SO suggerisce che è possibile selezionare un iPad semplicemente cercando la stringa "ipad" nel campo navigator.userAgent. Naturalmente, il campo del programma utente può essere falsificato.

Così, per esempio:

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

... ma questo è off-the-bracciale, non testati.

(Si noti che non c'è ragione di mettere il tipo su entrambi link o script,., Nel caso di link, il tipo viene dal tipo di contenuto della risposta Nel caso di script, il valore predefinito è JavaScript.)