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