Wie du ein externes Element in Locator & Pages hinzufügst
Beschreibt eine grundlegende HTML-Injection in die lokalen Seiten des Locator.
Umfang
Dieser Artikel bietet eine generische und grundlegende Lösung, um eine externe Komponente über JavaScript zu Locator & Pages hinzuzufügen.
Einführung
Haftungsausschluss
Der folgende Versuch wurde mit einer bestimmten Locator- und Pages-Version erstellt und getestet. Bitte beachte, dass diese Lösung zu einem späteren Zeitpunkt möglicherweise nicht mehr unterstützt wird und wir können keine Unterstützung dafür garantieren. Dies dient als Proof-of-Concept.
Die vorgestellte Lösung zum Einfügen eines externen HTML-Elements in Locator & Pages verwendet JavaScript, um das Element nach einem bestimmten Element von Locator & Pages einzufügen.
Skript
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);So funktioniert es
Das JavaScript wird alle 500 Millisekunden ausgelöst und prüft dann zwei Dinge:
1- Existiert ein Element mit der Klasse myAddedParagraph auf dieser Seite?
2- Existiert ein Element mit der Klasse ubsf_details-box-wrapper ubsf_categories-box auf dieser Seite? (Dies ist notwendig, da das neue Element nach dem Kategorien-Element hinzugefügt wird)
Wenn die Antwort auf Prüfung 1 Nein ist und die Antwort auf Prüfung 2 Ja, wird ein neues HTML-Element definiert (cats) und nach dem Element mit der Klasse ubsf_details-box-wrapper ubsf_categories-box hinzugefügt.
Dass das Skript in festen Intervallen ausgeführt wird, bedeutet, dass es weiterhin funktioniert, wenn der Benutzer zu einer anderen Seite des Locators navigiert.
Auf andere Elemente anwenden
Im Skript müssen einige Dinge geändert werden, um es auf einen anderen Anwendungsfall anwenden zu können. Im bereitgestellten Beispiel wird ein neuer Absatz unter dem Kategorien-Element der lokalen Seite hinzugefügt.
- Die html-Zeichenkette muss die HTML-Struktur des neuen Elements enthalten
- Der Klassenname des neuen Elements muss im Skript konsistent bleiben (myAddedParagraph in diesem Fall)
- Der Klassenname des Elements, nach dem das neue Element hinzugefügt werden soll (ubsf_details-box-wrapper ubsf_categories-box in diesem Fall)
- Folgendes kann geändert werden, um das neue Element vor dem Zielelement hinzuzufügen: afterend (https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)