Ich arbeite an einer Erweiterung in Chrome und frage mich: Wie kann ich am besten herausfinden, wann ein Element entsteht? Verwenden Sie einfaches Javascript mit einem Intervall, das prüft, bis ein Element vorhanden ist, oder hat jQuery eine einfache Möglichkeit, dies zu tun?
236
MutationObserver
>DOM Mutation Events
>setTimeout
.setTimeout
ist kompatibel, einfach zu implementieren, einfach zu warten und hat einen vernachlässigbaren Overhead.setTimeout
+jQuery
ist meiner Meinung nach aus zwei Gründen weniger als ideal: 1.) jQuery bloat 2.) Sie fragen das DOM unnötig manuell nach Elementen ab, Ereignisse schlagen diese Geschwindigkeit leicht, 3.) es wird immer langsamer sein als jedes native Implementierung. Wenn Sie relativ schnell etwas tun müssen, das auf dem Vorhandensein eines Elements basiert, insbesondere wenn eine nahtlose Benutzererfahrung Ihr Ziel ist, ist dies minderwertig.Antworten:
DOMNodeInserted
wird zusammen mit den anderen DOM-Mutationsereignissen aufgrund von Leistungsproblemen veraltet. Der empfohlene Ansatz besteht darin, einen MutationObserver zum Überwachen des DOM zu verwenden. Es wird jedoch nur in neueren Browsern unterstützt, daher sollten Sie darauf zurückgreifen,DOMNodeInserted
wennMutationObserver
es nicht verfügbar ist.quelle
if (mutation.addedNodes.length)
daif (mutation.addedNodes)
immer noch true zurückgegeben wird, selbst wenn es sich um ein leeres Array handelt. (2)mutation.addedNodes.forEach()
Dies ist nicht möglich, da addedNodes eine Knotenliste ist und Sie mit forEach keine Knotenliste durchlaufen können. Eine Lösung hierfür finden Sie unter toddmotto.com/ditch-the-array-foreach-call-nodelist-hackIch hatte das gleiche Problem, also habe ich ein Plugin dafür geschrieben.
$(selector).waitUntilExists(function);
Code:
quelle
window.setInterval
). Ich weiß nicht, ob dieMutationObserver
Antwort auch durch Umfragen funktioniert ...;
am Anfang der Funktion (;(function ($, window) {
) verwendet wird?Hier ist eine JavaScript-Kernfunktion, die auf die Anzeige eines Elements wartet.
Parameter:
selector
: Diese Funktion sucht nach dem Element $ {Selektor}time
: Diese Funktion prüft alle $ {time} Millisekunden, ob dieses Element vorhanden ist.Beispiel: Suchen
selector="#div1"
undtime=5000
suchen Sie nach dem HTML-Tag, dessenid="div1"
alle 5000 Millisekunden.quelle
querySelector
? developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorSie können Ereignisse anhören
DOMNodeInserted
oderDOMSubtreeModified
auslösen, die ausgelöst werden, wenn dem DOM ein neues Element hinzugefügt wird.Es gibt auch das LiveQuery jQuery-Plugin, das erkennt , wenn ein neues Element erstellt wird:
quelle
Ich habe diesen Ansatz verwendet, um auf das Erscheinen eines Elements zu warten, damit ich die anderen Funktionen danach ausführen kann.
Angenommen, die
doTheRestOfTheStuff(parameters)
Funktion sollte erst aufgerufen werden, nachdem das Element mit der IDthe_Element_ID
angezeigt oder das Laden beendet wurde.quelle
Du kannst tun
Bitte beachten Sie, dass dies nur funktioniert, wenn das Element im DOM vorhanden ist, wenn es vom Server angefordert wird. Wenn das Element dynamisch über JavaScript hinzugefügt wird, funktioniert es nicht und Sie müssen sich möglicherweise die anderen Antworten ansehen.
quelle
.ready()
Funktion funktioniert für fast alles (wenn nicht für alles), nicht nurdocument
. Es funktioniert einfach nicht mit dynamisch erstellten Elementen, auch nicht.live()
.$(document).ready()
Element, nicht das Element, von dem Sie glauben, dass es auch zutreffen wird. So funktioniert dieser spezielle Hörer. BeispielIch denke, dass es hier immer noch keine Antwort mit einem einfachen und lesbaren Arbeitsbeispiel gibt. Verwenden Sie MutationObserver
interface
, um DOM-Änderungen wie folgt zu erkennen:quelle
Fügen Sie einfach den gewünschten Selektor hinzu. Sobald das Element gefunden wurde, können Sie in der Rückruffunktion darauf zugreifen.
quelle
Für einen einfachen Ansatz mit jQuery habe ich festgestellt, dass dies gut funktioniert:
Hier überprüfen wir einfach alle 500 ms, ob das Element geladen ist, wenn es ist, können wir es verwenden.
Dies ist besonders nützlich, um Elementen, die dem Dokument dynamisch hinzugefügt wurden, Klick-Handler hinzuzufügen.
quelle
Wie wäre es mit der insertionQuery- Bibliothek?
insertionQuery verwendet CSS-Animationsrückrufe, die an die angegebenen Selektoren angehängt sind, um einen Rückruf auszuführen, wenn ein Element erstellt wird. Mit dieser Methode können Rückrufe ausgeführt werden, wenn ein Element erstellt wird, nicht nur beim ersten Mal.
Vom Github:
quelle
Hier ist eine Funktion, die als Thin Wrapper um MutationObserver fungiert. Die einzige Voraussetzung ist, dass der Browser MutationObserver unterstützt. Es besteht keine Abhängigkeit von JQuery. Führen Sie das folgende Snippet aus, um ein funktionierendes Beispiel anzuzeigen.
quelle
Hier ist eine vielversprechende Lösung in Vanille-Javascript (keine unordentlichen Rückrufe). Standardmäßig werden alle 200 ms überprüft.
quelle
Hier ist eine reine Javascript-Funktion, mit der Sie auf alles warten können. Stellen Sie das Intervall länger ein, um weniger CPU-Ressourcen zu verbrauchen.
Um dies beispielsweise in jQuery aufzurufen, verwenden Sie Folgendes:
quelle
Eine Lösung, die a zurückgibt
Promise
zurückgibt und die Verwendung eines Timeouts ermöglicht (kompatibler IE 11+).Für ein einzelnes Element (Typ Element):
Für mehrere Elemente (Typ NodeList):
Beispiele:
Funktioniert sowohl für eine Liste von Elementen als auch für ein einzelnes Element.
quelle
element instanceof HTMLElement
? Kann es jemals etwas anderes sein alsnull
oderHTMLElement
?Element
stattdessen (fest) verwendet hätte. Ich mache nur die Prüfung, weil ich sicher sein möchte, dass die Variableelement
die Eigenschaft hat,innerHTML
wie in der Element MDN-Dokumentation angegeben . Fühlen Sie sich frei, es zu entfernen, wenn Sie sich nicht darum kümmern!Ein saubereres Beispiel mit MutationObserver:
quelle
Dies ist eine einfache Lösung für diejenigen, die an Versprechen gewöhnt sind und keine Bibliotheken oder Timer von Drittanbietern verwenden möchten.
Ich benutze es seit einer Weile in meinen Projekten
Um es zu benutzen:
oder mit async / warten
quelle
async
/ verwenden kannawait
. Sie könnten auch in der Lage sein, mehr Leistung herauszuholen, indem Siemutations.addedNodes.find(node => node.matchesSelector("..."))
Wenn Sie möchten, dass es nach einer Weile nicht mehr funktioniert (Zeitüberschreitung), funktioniert die folgende jQuery. Nach 10 Sekunden tritt eine Zeitüberschreitung auf. Ich musste diesen Code anstelle von reinem JS verwenden, da ich eine Eingabe über den Namen auswählen musste und Probleme bei der Implementierung einiger anderer Lösungen hatte.
quelle
Normalerweise verwende ich dieses Snippet für den Tag Manager:
quelle
Wenn Sie asynchrone Dom-Änderungen haben, prüft diese Funktion (mit Zeitlimit in Sekunden), ob die DOM-Elemente für das DOM und seine Promise-basierten Elemente nicht schwer sind :)
quelle