Maison > interface Web > js tutoriel > 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
Libérer: 2016-05-16 15:35:02
original
1096 Les gens l'ont consulté

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

Copier après la connexion
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");
Copier après la connexion

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.

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal