Façons d'ajouter des fichiers javascript de façon dynamique dans une page
J'ai vu Scriptaculous.js fichier à inclure les fichiers javascript de façon dynamique. Est-il préférable d'inclure le javascript de manière dynamique.
Par exemple, je voudrais que mes fichiers js comme,
<script src="single.js?files=first.js,second.js,third.js..."></script>
Comment puis-je le faire de manière efficace?
- Pourquoi négative de vote?Quel est le problème avec elle?
- il ressemble à quelqu'un est passer par la page d'une question et downvoting tout; il y a au moins 5 questions dans une rangée avec 1 ou plus bas. Je devine qu'un modérateur pourrait le vérifier...
- D'accord, j'étais aussi curieux de ce qui se passe. Semble que certains spammeur est d'avoir un plaisir. ... Donc +1 pour compenser.
- Je me demande il y a trois arswers ici, mais je suis seulement deux. Ce qui se passe?
- l'un est le spam et supprimés. Je crois que la réponse de comptage est mis en cache ou éventuellement comprend juste supprimé les réponses (c'est à dire d'un bug).
- Vous pourriez vouloir étudier RequireJS ou LabJS
- Double Possible de JQuery pour charger un fichier Javascript dynamiquement
Vous devez vous connecter pour publier un commentaire.
Pour charger un .js ou .fichier css de manière dynamique, en un mot, cela signifie en utilisant les méthodes du DOM pour créer en premier lieu un chic de nouvelles "SCRIPT" ou "LIEN" de l'élément, de l'assigner les attributs appropriés, et enfin, l'utilisation de l'élément.appendChild() pour ajouter l'élément à l'emplacement souhaité dans l'arborescence du document. Il sonne un peu plus de fantaisie que c'est vraiment. Permet de voir comment tout cela s'assemble:
j'espère que son utilisation complète
Vous pouvez utiliser le
jQuery.getScript()
fonction... je pense qu'il sera beaucoup plus facile pour vous d'inclure un script JavaScript.js
fichier.Ici est la référence.
il y a beaucoup de manières différentes, mais la manière de Google en charge des scripts supplémentaires est comme ceci:
C'est pris directement à partir de Google maps loader.
L'écriture d'un script tag directement sur le document, est la plus simple et la plus efficace.
document.write
, le script de mise à jour utilisedocument.createElement
. Voici une autre lecture intéressante: Éviter document.écrireÀ la suite de la conseils de Salaman Un commentaires, j'ai trouvé comment Google fait-il maintenant avec google Analytics: https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking
Et ici est un plus de la version générique de ce même code:
Pour ajouter un nouveau fichier javascript de manière dynamique:
J'ai vu ce que le scriptaculous chargeur n'. Ce qu'il fait est qu'il va à travers toutes les balises script dans le document pour trouver celui qui a chargé lui-même, de l'e.g:
Puis il analyse la chaîne de requête utilisé à l'intérieur de l'attribut src et dynamique, en créer d'autres balises de script pour chaque fichier de script. Dans le même temps, il analyse également le chemin de la base de script (
/path/to/single.js
) et utilise le même chemin pour charger les fichiers de dépendance (par exemple,/path/to/first.js
).Vous pouvez créer votre propre chargeur de script comme ceci. En javascript natif, vous pouvez utiliser les fonctions suivantes:
getElementsByTagName
-- trouver tous les scriptsgetAttribute
-- trouver src/href/type d'attributcreateElement
-- créer un élément de scriptappendChild
-- append à la tête et le corpsAnand Thangappan a posté une solution qui utilise ces fonctions. Si vous utilisez un framework comme jQuery ou MooTools alors à la fois de fournir leurs propres implémentations de chargement dynamique de JsvaScript.
Enfin, il y a un côté serveur la solution à votre problème. Regardez minify -- Combine et minifies plusieurs CSS ou des fichiers JavaScript en un seul téléchargement.
Nous pouvons étendre ce donc qu'un rappel peut être effectué une fois que le script est ajouté.
filename
etfiletype
ne pas l'utiliser et l'utilisationfileref
qui vous ne déclarez pas...document.getElementsByTagName("head")[0].appendChild(fileref)
ne fonctionne pas si vous avez certains de document.prêt() fonctionne de la ligne.$("head").append(fileref);
fonctionne très bien pour moi, même s'il doitjquery.min.js
inline référence.et
master_load.js
: