Comment servir différents fichiers javascript en fonction de la largeur du navigateur

Donc, je veux que certains fichiers Javascript pour certaines navigateur largeurs. Je sais que @media sert CSS spécifique par navigateur de largeur et de certains appareils.
Comment pourrais-je faire quelque chose de similaire pour les fichiers Javascript, SANS utiliser côté serveur d'appels?

C'est possible avec Javascript pour appeler d'autres fichiers Javascript basé sur la largeur du navigateur?
Si oui, Comment?

Merci d'avance.

source d'informationauteur ClosDesign

  1. 3

    Alors que je n'en suis pas sûr pourquoi, vous pouvez toujours importer les fichiers JavaScript via JS Script.

    Les liens suivants donnent des informations sur ce sujet.

    SUR une note de côté - Pourquoi cherchez-vous à faire cela? Sûrement, vous pouvez obtenir la résolution de l'écran, puis ajuster à des calculs et du contenu sur la base de ces variables, sans la nécessité de modifier les fichiers JS. Il y a tellement de différentes résolutions (à des appareils mobiles, plusieurs moniteurs à écran large, projecteurs, etc.). Un utilisateur peut également redimensionner les navigateurs qui en fait effectivement pas la peine.

  2. 13
    var scriptSrc = 'js/defaults.js';
if (screen.width <= 800)
  scriptSrc = 'js/defaults-800.js';
else if (screen.width <= 1024)
  scriptSrc = 'js/defaults-1024.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

    Peut-être? Charge dynamique sur la base de la résolution de l'écran. Pourrait aussi utiliser de la taille du document, la taille du navigateur, etc. Si je ne suis pas positif que vous voulez vraiment faire cela. Idéalement bien que vous devez avoir à composer avec une relative métriques (comme % ou em) et votre conception de l'éviter.

  3. 1

    Essayez ceci:

    var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")

if (window.document.body.clientWidth == XXX) {
    fileref.setAttribute("src", "script1.js")
} else {
    fileref.setAttribute("src", "script2.js")

    }

  4. 0

    Les Media queries sont une bonne solution pour offrir de nouveaux styles pour différentes largeurs de fenêtre. Malheureusement, il n'y a pas de media de l'attribut de l' <script> élément de procéder de la même façon.

    Vous pouvez, toutefois, de fournir un script de chargement de script qui se charge souhaitée .js un fichier en fonction de la feuille de style sélectionnée par le navigateur sur la base de votre demande de support. Je ne sais pas comment le faire d'une manière directe, simple et élégant, mais il y a une belle hack pour cela. Vous avez à "marquer" chaque .css avec une unique déclaration (factice, sans importance ou différents de par leur conception) et vérifier de l'intérieur JS après que la page a été chargée de déterminer la feuille de style a été appliqué par le navigateur.

    Le code HTML pourrait ressembler à ceci:

    <style media="handheld, screen and (max-width:1023px)">
    body { margin-top: 0px }
</style>
<style media="screen and (min-width:1024px)">
    body { margin-top: 1px }
</style>

    Et l'accompagnement JS comme suit:

    function onLoad() {
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top');

    var script = document.createElement('script');
    script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js');
    head.appendChild(script);
}

    Ce fait le travail, mais seulement par la charge de base. Pour obtenir une réaction de redimensionnement de la fenêtre du navigateur par l'utilisateur, vous devez garder une trace de la veuve de largeur et de recharger la page si nécessaire.

  5. 0

    Depuis 2011, le monde a basculé dans l'ère mobile.

    Vous pourriez veux essayer avec: document.documentElement.clientWidthcar il va vous dire la partie visible de votre page, il réagit à un zoom, mais pas à la hauteur.