Appelez le fichier JS externe fondée sur “l'écran” de la valeur

Je vais essayer cela, mais il ne fonctionne pas:

<html>
<head>
<script src="js/menu-collapser.js" type="text/javascript" media="media screen and (max-width: 599px)"></script>
</head>
...
</html>

//menu-collapser.js :

jQuery(document).ready(function($){
    $('.main-navigation li ul').hide();
    $('.main-navigation li').has('ul').click(function() {
        $(this).children().toggle();
    });
});

Avez-vous une idée sur comment faire de la bonne façon? Le script fonctionne si elle est utilisée directement dans l'en-tête avec les balises.

OriginalL'auteur Mark | 2013-04-04

  1. 16

    Vous ne pouvez pas le faire directement à l'aide de Javascript <script> balises. Les Media queries sont utilisés dans les fichiers CSS ou CSS styles. Un exemple de base:

    <link rel="stylesheet" media="screen and (min-width: 900px)" href="desktop.css"/>
<link rel="stylesheet" media="screen and (min-width: 571px)" href="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 570px)" href="mobile.css"/>

    Ou directement dans vos feuilles de style:

    @media screen and (max-width: 599px) {
  #mobile {
     display: block;
  }
}

    Toutefois, vous pouvez utiliser un élément externe chargeur/requête de média de la bibliothèque pour ce faire (require.js, modernizr.js, enquire.js et autres), Dans ce cas, je suis un exemple d'utilisation de enquire.js, je pense que c'est très efficace et ne nécessite pas de jQuery par défaut:

    Exemple complet

    1) Comprennent enquire.js (disponible ici):

    <script type="text/javascript" src="/js/enquire.js"></script>

    2) Créer une fonction de charge - pour charger des fichiers JS:

    <script type="text/javascript">

//This loads JS files in the head element
    function loadJS(url)
    {
        //adding the script tag to the head
       var head = document.getElementsByTagName('head')[0];
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src = url;

       //fire the loading
       head.appendChild(script);
    }

</script>

    3) Feu enquire.js et écouter les requêtes de média changements (à la fois sur la charge et sur-redimensionner):

    <script type="text/javascript">

    enquire.register("screen and (max-width: 599px)", {
        match : function() {
            //Load a mobile JS file
            loadJS('mobile.js');
        }
    }).listen();


    enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
        match : function() {
            //Load a tablet JS file
            loadJS('tablet.js');
            //console.log('tablet loaded');
        }
    }).listen();


    enquire.register("screen and (min-width: 900px)", {
        match : function() {
            //Load a desktop JS file
            loadJS('desktop.js');
            //console.log('desktop loaded');
        }
    }).listen();
</script>

    Mettre tous ensemble

    À l'aide d'une simple page HTML avec enquire.js chargé à partir d'un fichier externe:

    <html>
<head>
<script type="text/javascript" src="/enquire.js"></script>
<script type="text/javascript">
//This loads JS files in the head element
function loadJS(url)
{
//adding the script tag to the head
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
//fire the loading
head.appendChild(script);
}
</script>
<style>
body {
font-family: arial;
}
h1 {
font-size: 50pt;
}
#mobile {
display: none;
}
#tablet {
display: none;
}
#desktop {
display: none;
}
@media screen and (max-width: 599px) {
#mobile {
display: block;
}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
#tablet {
display: block;
}
}
@media screen and (min-width: 900px) {
#desktop {
display: block;
}
}   
</style>
</head>
<body>
<div id="desktop">
<h1>Desktop</h1>
</div>
<div id="tablet">
<h1>Tablet</h1>
</div>
<div id="mobile">
<h1>Mobile</h1>
</div>
<script type="text/javascript">
enquire.register("screen and (max-width: 599px)", {
match : function() {
//Load a JS file
loadJS('mobile.js');
}
}).listen();
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
loadJS('tablet.js');
//console.log('tablet loaded');
}
}).listen();
enquire.register("screen and (min-width: 900px)", {
match : function() {
loadJS('desktop.js');
//console.log('desktop loaded');
}
}).listen();
</script>
</body>
</html>

    Outre le chargement de JS fichiers, vous pouvez créer un CSS chargeur de trop, qui fonctionnerait de la même façon (sous certaines conditions), mais cela va à l'encontre de l'objet de l'aide @media en CSS. Il est intéressant de lire les explications d'utilisation pour enquire.js, comme il peut faire beaucoup plus que ce que j'ai illustré ici.

    Mise en garde: Rien au-dessus utilise jQuery, mais vous pouvez prendre avantage de certaines des fonctions qu'il offre; le chargement des scripts par exemple - ou de l'exécution d'autres fonctions que vous avez besoin.

    Salut, merci pour votre explication. Je suis tryin pour suivre vos suggestions, mais il n'est pas facile pour moi. Dois-je télécharger require.js/modernizr.js les inclure dans la tête et ensuite utiliser votre second code dans le corps? Parce qu'il ne semble pas fonctionner...
    Je vais mettre à jour ma réponse avec un exemple précis.
    De réponses mis à jour avec un meilleur exemple.
    vous êtes incroyable, merci pour votre aide. malheureusement je ne peux pas le faire fonctionner! 🙁 si vous êtes assez aimable pour prendre un coup d'oeil à mon code, j'ai simplifié et collé ici: pastebin.com/HkviLP9H
    Il ne semble pas quelque chose de mal avec votre code, Il fonctionne dans Chrome, Safari mais ce n' menu-collapser.js faire!?

    OriginalL'auteur nickhar

  2. 4

    Pourquoi ne pas les charger dans un script conditionnel? 

    (function() {
if( window.innerWidth > 600 ) {
var theScript = document.createElement('script');
theScript.type = 'text/javascript';
theScript.src = 'js/menu-collapser.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(theScript, s);
}
})();

    Ou, mieux encore, seulement exécuter le code si la fenêtre.innerWidth > 600 ? De toute façon, il y a beaucoup de solutions que vous pouvez utiliser.

    ça ne fonctionne pas...

    OriginalL'auteur Mitch

  3. 2

    media n'est pas un attribut valide pour <script>, vérifier ici.

    De sorte que vous devrait détecter les types de médias manuellement que de charger le script de façon dynamique.

    Il y a un plug-in pour css détection de médias en javascript, vous pouvez l'utiliser.

    <script type="text/javascript" src="js/mediatypechecker.js"></script>
$(function() {
if(IsMediaType('screen') > 0 && parseInt(screen.width) < 599) {
$.getSscript("js/menu-collapser.js");
}
});
    pouvez pas le faire fonctionner...

    OriginalL'auteur ocanal