Maison  >  Article  >  interface Web  >  Comment implémenter JavaScript pour charger dynamiquement les fichiers CSS et JS_javascript skills

Comment implémenter JavaScript pour charger dynamiquement les fichiers CSS et JS_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:35:021046parcourir

Le chargement dynamique des fichiers CSS est requis dans le projet. J'ai réglé le problème et intégré la fonction de chargement dynamique de JS dans un objet. Commençons par le code :

var dynamicLoading = {
  css: function(path){
 if(!path || path.length === 0){
  throw new Error('argument "path" is required !');
 }
 var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.href = path;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    head.appendChild(link);
  },
  js: function(path){
 if(!path || path.length === 0){
  throw new Error('argument "path" is required !');
 }
 var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    head.appendChild(script);
  }
}

L'objet

contient deux méthodes complètement indépendantes, qui sont utilisées respectivement pour charger les fichiers CSS et les fichiers JS. Les paramètres sont les chemins de fichiers à charger. Le principe est très simple : créer différents nœuds pour différents types de fichiers chargés, puis ajouter leurs attributs respectifs, et enfin les jeter dans la balise head. Après les tests, cette méthode est compatible avec tous les navigateurs, sûre, non toxique et respectueuse de l'environnement, et constitue un code commun avec lequel les développeurs Web peuvent travailler.
Voici le code d'appel, qui est extrêmement simple :

//动态加载 CSS 文件
dynamicLoading.css("test.css");

//动态加载 JS 文件
dynamicLoading.js("test.js");

Ce qui précède a pour but de vous expliquer comment charger dynamiquement des fichiers CSS et JS en JavaScript. J'espère que cela vous sera utile pour votre apprentissage.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn