J'ai piraté ensemble du vanilla javascript pour charger un script externe lors d'un événement de clic.
var searchLabel = document.getElementById('search-toggle-label');
searchLabel.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "wp-content/themes/2016/js/cse.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
Mais il continue de charger le même script à chaque fois lors d'un événement de clic.
J'ai donc ajouté une instruction if pour vérifier la valeur et le type. "==="
var searchLabel = document.getElementById('search-toggle-label');
if (typeof searchLabel === 'undefined') {
searchLabel.onclick = function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "wp-content/themes/2016/js/cse.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
}
else {
alert('loaded already');
}
Évidemment, c'est faux puisque je reçois une alerte lors du chargement de la page et lors d'un événement de clic, le script ne se charge pas.
Je suis perplexe. Je sais qu'il existe une solution simple en utilisant jQuery mais j'essaie réellement d'apprendre à écrire en javascript.
Toute aide sera fortement appréciée.
3 réponses
Supprimez l'écouteur d'événements une fois qu'il s'est déclenché:
var searchLabel = document.getElementById('search-toggle-label');
searchLabel.addEventListener('click', loadScript, false);
function loadScript(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "wp-content/themes/2016/js/cse.js.";
document.getElementsByTagName("head")[0].appendChild(script);
searchLabel.removeEventListener('click', loadScript, false);
return false;
}
Ajoutez une fonction pour renvoyer true / false si un script est présent dans le DOM. En voici un:
function isScriptLoaded(src) {
return !!Array.prototype.filter.call(document.getElementsByTagName('script'), function(node) {
return node.src === src;
});
}
Ensuite, utilisez-le pour tester si le script est déjà inséré dans le DOM.
Essayez peut-être de définir un indicateur avant la définition de la fonction. De cette façon, vous pouvez vérifier l'indicateur au début de la fonction et omettre le reste. Vous avez également un excellent exemple que j'ai trouvé sur Internet. Recherchez cette solution.