Cómo añadir un elemento externo en Locator & Pages
Describe una inyección HTML básica en las páginas locales de Locator.
Alcance
Este artículo ofrece una solución genérica y básica para añadir un componente externo a Locator & Pages mediante JavaScript.
Introducción
Aviso legal
El siguiente intento fue creado y probado con una versión específica de Locator y Pages. Ten en cuenta que esta solución podría no ser compatible en el futuro y no garantizamos soporte para ella. Esto debe utilizarse como una prueba de concepto.
La solución presentada para inyectar un elemento HTML externo en Locator & Pages utiliza JavaScript para insertar el elemento después de un elemento específico 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);Cómo funciona
El JavaScript se ejecuta cada 500 milisegundos y luego busca dos cosas:
1- ¿Existe un elemento con la clase myAddedParagraph en esta página?
2- ¿Existe un elemento con la clase ubsf_details-box-wrapper ubsf_categories-box en esta página? (Esto es necesario porque el nuevo elemento se añade después del elemento de Categorías)
Si la respuesta de la verificación 1 es No y la respuesta de la verificación 2 es Sí, entonces se define un nuevo elemento HTML (cats) y se añade después del elemento con la clase ubsf_details-box-wrapper ubsf_categories-box.
El hecho de que el script se ejecute en intervalos fijos significa que seguirá funcionando si el usuario cambia a otra página del Locator.
Aplicar a otros elementos
Se necesitan modificar algunas cosas en el script para poder aplicarlo a otro caso de uso. En el ejemplo proporcionado, se añade un nuevo párrafo bajo el elemento de Categorías de la Página Local.
- La cadena de caracteres html debe contener la estructura html del nuevo elemento
- El nombre de la clase del nuevo elemento debe permanecer consistente en el script (myAddedParagraph en este caso)
- El nombre de la clase del elemento después del cual se debe añadir el nuevo elemento (ubsf_details-box-wrapper ubsf_categories-box en este caso)
- Lo siguiente puede cambiarse para añadir el nuevo elemento antes del elemento objetivo: afterend (https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)