Javascript et Responsive Design

Question

J'ai cette pièce de javascript pour mon site réactif (Voir ci-dessous). En un mot, je ne veux pas l'afficher (ce qui signifie que je ne veux pas que ce javascript soit exécuté) lorsque la taille de l'écran est inférieure à 480 (téléphone portable). Comment ferais-je cela? J'ai essayé d'utiliser display: aucun pour le div dans lequel il est, mais le script s'exécute toujours et la barre Hello montre toujours. Des idées? Merci.

<script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"></script> 

Voici le site: http://www.thesandiegocriminallawyer.com

Voici le HTML (près du fond):

<div class="hello_bar"> 
<script src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js" type="text/javascript"> 
</div> 

Answer 1

Mesurer la largeur de l'écran et seulement fixer le script hellobar si son plus large que 480:

Remplacer:

<script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"></script> 

Avec:

<script type="text/javascript"> 
    var swidth = (window.innerWidth > 0) ? window.innerWidth : screen.width; 
    if (swidth > 480) { 
     var s = document.createElement("script"); 
     s.type = "text/javascript"; 
     s.src = "//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"; 
     document.getElementsByTagName('head')[0].appendChild(s); 
    } 
</script> 

http://jsfiddle.net/xusH3/

Answer 2

Il y a 2 solutions que je peux penser:

1. charge le script dynamique en vérifiant la largeur de l'écran d'abord, puis le chargement du fichier une manière asynchrone si nécessaire.

2. Enroulez le contenu de votre fichier de script dans une condition qui est basée sur la largeur de l'écran/document (le fichier sera chargé de toute façon, mais ne fonctionnera pas quoi que ce soit si l'écran est inférieure à 480)

la première est meilleure, tandis que le second peut résoudre des maux de tête si vous avez besoin de votre code pour être disponible immédiatement lorsque la page se charge

un échantillon pour le script de chargement de manière asynchrone est:

<script> 
    function loadScript(url){ 
    var js, fjs = document.getElementsByTagName('script')[0]; 
    js = document.createElement('script'); 
    js.src = url; 
    fjs.parentNode.insertBefore(js, fjs); 
    }; 

    if(window.innerWidth>480){ //here you should check for the width (this check is not necessarily cross browser) 
     loadScript("//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"); 
    } 
</script>