Come aggiungere un elemento esterno in Locator & Pages
Descrive un'iniezione HTML di base nelle pagine locali di Locator.
Indice dei contenuti
Ambito di applicazioneIntroduzioneScriptCome funzionaApplicare ad altri elementi
Ambito di applicazione
Questo articolo offre una soluzione generica e di base per aggiungere un componente esterno a Locator e Pages tramite JavaScript.
Introduzione
Avvertenza
Il seguente tentativo è stato creato e testato con una determinata versione di Locator e Pages. Tieni presente che questa soluzione potrebbe non essere supportata in futuro e non garantiamo il supporto per essa. Questo deve essere utilizzato come proof-of-concept.
La soluzione presentata per iniettare un elemento HTML esterno a Locator e Pages utilizza JavaScript per inserire l'elemento dopo uno specifico elemento di Locator e 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);Come funziona
JavaScript viene attivato ogni 500 millisecondi e quindi cerca due cose:
1– Esiste un elemento con classe myAddedParagraph in questa pagina?
2– Esiste un elemento con classe ubsf_details-box-wrapper ubsf_categories-box in questa pagina? (Questo è necessario poiché il nuovo elemento viene aggiunto dopo l'elemento Categorie)
Se la risposta del controllo 1 è No e la risposta del controllo 2 è Sì, allora un nuovo elemento HTML viene definito (cats) e aggiunto dopo l'elemento con classe ubsf_details-box-wrapper ubsf_categories-box.
Il fatto che lo script venga eseguito a intervalli fissi significa che continuerà a funzionare se l'utente cambia un'altra pagina del Locator.
Applicare ad altri elementi
Pochi elementi devono essere modificati nello script per poterlo applicare a un altro caso d'uso. Nell'esempio fornito, un nuovo paragrafo viene aggiunto sotto l'elemento Categorie della pagina locale.
– La stringa html deve contenere la struttura HTML del nuovo elemento
– Il nome della classe del nuovo elemento deve rimanere coerente nello script (myAddedParagraph in questo caso)
– Il nome della classe dell'elemento dopo il quale deve essere aggiunto il nuovo elemento (ubsf_details-box-wrapper ubsf_categories-box in questo caso)
– È possibile modificare quanto segue per aggiungere il nuovo elemento prima dell'elemento di destinazione: afterend (https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)