Comment ajouter un élément externe dans Locator & Pages
Décrit une injection HTML basique dans les pages locales du Locator.
Portée
Cet article propose une solution générique et basique pour ajouter un composant externe à Locator & Pages via JavaScript.
Introduction
Avertissement
La tentative suivante a été créée et testée avec une certaine version de Locator et Pages. Veuillez noter que cette solution pourrait ne pas être supportée à un moment donné à l'avenir et nous ne garantissons pas le support pour celle-ci. Ceci est à utiliser comme preuve de concept.
La solution présentée pour injecter un élément HTML externe à Locator & Pages utilise JavaScript pour insérer l'élément après un élément spécifique de Locator & Pages.
Script
window.setInterval(function() {
if(document.getElementsByClassName('myAddedParagraph').length == 0 && document.getElementsByClassName('ubsf_details-box-wrapper ubsf_categories-box').length > 0){
const cats = document.getElementsByClassName('ubsf_details-box-wrapper ubsf_categories-box')[0];
var html = "<p class=\"myAddedParagraph ubsf_details-box-wrapper\">newly added paragraph</p>";
cats.insertAdjacentHTML("afterend", html);
}
}, 500);Comment ça marche
Le JavaScript se déclenche toutes les 500 millisecondes et cherche ensuite deux choses :
1 – Un élément avec la classe myAddedParagraph existe-t-il sur cette page ?
2 – Un élément avec la classe ubsf_details-box-wrapper ubsf_categories-box existe-t-il sur cette page ? (C'est nécessaire puisque le nouvel élément est ajouté après l'élément Catégories)
Si la réponse à la vérification 1 est Non et la réponse à la vérification 2 est Oui, alors un nouvel élément HTML est défini (cats) et ajouté après l'élément avec la classe ubsf_details-box-wrapper ubsf_categories-box.
Le fait que le script s'exécute à intervalles réguliers signifie qu'il continuera de fonctionner si l'utilisateur accède à une autre page de Locator.
Appliquer à d'autres éléments
Quelques éléments doivent être modifiés dans le script pour pouvoir l'appliquer à un autre cas d'usage. Dans l'exemple fourni, un nouveau paragraphe est ajouté sous l'élément Catégories de la Page locale.
– La chaîne html doit contenir la structure HTML du nouvel élément
– Le nom de la classe du nouvel élément doit rester cohérent dans le script (myAddedParagraph dans ce cas)
– Le nom de la classe de l'élément après lequel le nouvel élément doit être ajouté (ubsf_details-box-wrapper ubsf_categories-box dans ce cas)
– Voici ce qui peut être changé pour ajouter le nouvel élément avant l'élément ciblé : afterend (https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)