Wie kann man warten, bis ein Element vorhanden ist?

Question

Ich arbeite an einer Erweiterung in Chrome, und ich frage mich: Was ist der beste Weg, um herauszufinden, wann ein Element in Existenz kommt? Mit einfachen Javascript, mit einem Intervall, das überprüft, bis ein Element vorhanden ist, oder hat jQuery eine einfache Möglichkeit, dies zu tun?

Answer 1

Update

Nachstehend finden Sie eine aktualisierte Version, die mit Versprechen funktioniert. Sie "stoppt" auch, wenn eine bestimmte Anzahl von Versuchen erreicht ist.

function _waitForElement(selector, delay = 50, tries = 100) {
    const element = document.querySelector(selector);

    if (!window[`__${selector}`]) {
      window[`__${selector}`] = 0;
      window[`__${selector}__delay`] = delay;
      window[`__${selector}__tries`] = tries;
    }

    function _search() {
      return new Promise((resolve) => {
        window[`__${selector}`]++;
        setTimeout(resolve, window[`__${selector}__delay`]);
      });
    }

    if (element === null) {
      if (window[`__${selector}`] >= window[`__${selector}__tries`]) {
        window[`__${selector}`] = 0;
        return Promise.resolve(null);
      }

      return _search().then(() => _waitForElement(selector));
    } else {
      return Promise.resolve(element);
    }
  }

Die Verwendung ist sehr einfach, um es zu verwenden mit await Vergewissern Sie sich nur, dass Sie sich innerhalb einer async Funktion:

const start = (async () => {
  const $el = await _waitForElement(`.my-selector`);
  console.log($el);
})();

Überholte Version

Fügen Sie einfach den gewünschten Selektor hinzu. Sobald das Element gefunden wird, können Sie in der Callback-Funktion Zugriff darauf haben.

const waitUntilElementExists = (selector, callback) => {
const el = document.querySelector(selector);

if (el){
    return callback(el);
}

setTimeout(() => waitUntilElementExists(selector, callback), 500);
}

waitUntilElementExists('.wait-for-me', (el) => console.log(el));

Answer 2

Ich denke, dass es hier noch keine Antwort mit einem einfachen und lesbaren Arbeitsbeispiel gibt. Verwenden Sie MutationObserver interface um DOM-Änderungen zu erkennen, etwa so:

var observer = new MutationObserver(function(mutations) {
    if ($("p").length) {
        console.log("Exist, lets do something");
        observer.disconnect(); 
        //We can disconnect observer once the element exist if we dont want observe more changes in the DOM
    }
});

// Start observing
observer.observe(document.body, { //document.body is node target to observe
    childList: true, //This is a must have for the observer with subtree
    subtree: true //Set to true if changes must also be observed in descendants.
});

$(document).ready(function() {
    $("button").on("click", function() {
        $("p").remove();
        setTimeout(function() {
            $("#newContent").append("<p>New element</p>");
        }, 2000);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>New content</button>
<div id="newContent"></div>

Nota: Mozilla Spanisch Dokumente über MutationObserver sind mehr wenn Sie mehr Informationen wünschen.

Answer 3

Das können Sie tun

$('#yourelement').ready(function() {

});

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, wird es nicht funktionieren und Sie müssen sich die anderen Antworten ansehen.

Answer 4

Sie können sich anhören DOMNodeInserted o DOMSubtreeModified Ereignisse, die immer dann ausgelöst werden, wenn dem DOM ein neues Element hinzugefügt wird.

Außerdem gibt es LiveQuery jQuery-Plugin, das erkennen würde, wenn ein neues Element erstellt wird:

$("#future_element").livequery(function(){
    //element created
});

Answer 5

Für einen einfachen Ansatz mit jQuery habe ich festgestellt, dass dies gut funktioniert:

  // Wait for element to exist.
  function elementLoaded(el, cb) {
    if ($(el).length) {
      // Element is now loaded.
      cb($(el));
    } else {
      // Repeat every 500ms.
      setTimeout(function() {
        elementLoaded(el, cb)
      }, 500);
    }
  };

  elementLoaded('.element-selector', function(el) {
    // Element is ready to use.
    el.click(function() {
      alert("You just clicked a dynamically inserted element");
    });
  });

Hier wird einfach alle 500ms geprüft, ob das Element geladen ist, und wenn es geladen ist, können wir es verwenden.

Dies ist besonders nützlich für das Hinzufügen von Klick-Handlern zu Elementen, die dem Dokument dynamisch hinzugefügt wurden.