Wie kann man warten, bis ein Element existiert?

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?

DOMNodeInsertedwird 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, DOMNodeInsertedwenn MutationObserveres nicht verfügbar ist.

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (!mutation.addedNodes) return

    for (var i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      var node = mutation.addedNodes[i]
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

// stop watching using:
observer.disconnect()

Ich hatte das gleiche Problem, also habe ich ein Plugin dafür geschrieben.

$(selector).waitUntilExists(function);

Code:

;(function ($, window) {

var intervals = {};
var removeListener = function(selector) {

    if (intervals[selector]) {

        window.clearInterval(intervals[selector]);
        intervals[selector] = null;
    }
};
var found = 'waitUntilExists.found';

/**
 * @function
 * @property {object} jQuery plugin which runs handler function once specified
 *           element is inserted into the DOM
 * @param {function|string} handler 
 *            A function to execute at the time when the element is inserted or 
 *            string "remove" to remove the listener from the given selector
 * @param {bool} shouldRunHandlerOnce 
 *            Optional: if true, handler is unbound after its first invocation
 * @example jQuery(selector).waitUntilExists(function);
 */

$.fn.waitUntilExists = function(handler, shouldRunHandlerOnce, isChild) {

    var selector = this.selector;
    var $this = $(selector);
    var $elements = $this.not(function() { return $(this).data(found); });

    if (handler === 'remove') {

        // Hijack and remove interval immediately if the code requests
        removeListener(selector);
    }
    else {

        // Run the handler on all found elements and mark as found
        $elements.each(handler).data(found, true);

        if (shouldRunHandlerOnce && $this.length) {

            // Element was found, implying the handler already ran for all 
            // matched elements
            removeListener(selector);
        }
        else if (!isChild) {

            // If this is a recurring search or if the target has not yet been 
            // found, create an interval to continue searching for the target
            intervals[selector] = window.setInterval(function () {

                $this.waitUntilExists(handler, shouldRunHandlerOnce, true);
            }, 500);
        }
    }

    return $this;
};

}(jQuery, window));

Hier ist eine JavaScript-Kernfunktion, die auf die Anzeige eines Elements wartet.

Parameter:

1. selector: Diese Funktion sucht nach dem Element $ {Selektor}

2. time: Diese Funktion prüft alle $ {time} Millisekunden, ob dieses Element vorhanden ist.

   function waitForElementToDisplay(selector, time) {
           if(document.querySelector(selector)!=null) {
               alert("The element is displayed, you can put your code instead of this alert.")
               return;
           }
           else {
               setTimeout(function() {
                   waitForElementToDisplay(selector, time);
               }, time);
           }
       }

Beispiel: Suchen selector="#div1"und time=5000suchen Sie nach dem HTML-Tag, dessen id="div1"alle 5000 Millisekunden.

Sie können Ereignisse anhören DOMNodeInsertedoder DOMSubtreeModifiedauslö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:

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

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 ID the_Element_IDangezeigt oder das Laden beendet wurde.

var existCondition = setInterval(function() {
 if ($('#the_Element_ID').length) {
    console.log("Exists!");
    clearInterval(existCondition);
    doTheRestOfTheStuff(parameters);
 }
}, 100); // check every 100ms

Du kannst 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, funktioniert es nicht und Sie müssen sich möglicherweise die anderen Antworten ansehen.

Ich 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:

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>

Hinweis: Spanische Mozilla- Dokumente MutationObserversind detaillierter, wenn Sie weitere Informationen wünschen.

Fügen Sie einfach den gewünschten Selektor hinzu. Sobald das Element gefunden wurde, können Sie in der Rückruffunktion darauf zugreifen.

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));

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 ü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.

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:

Nicht-Dom-Event-Methode zum Abfangen von Knoten, die angezeigt werden. Und es verwendet Selektoren.

Es ist nicht nur für eine breitere Browserunterstützung, es kann für bestimmte Dinge besser sein als DOMMutationObserver.

Warum?

• Weil DOM-Ereignisse den Browser verlangsamen und insertionQuery nicht
• Weil DOM Mutation Observer weniger Browserunterstützung bietet als insertionQuery
• Denn mit insertionQuery können Sie DOM-Änderungen mithilfe von Selektoren ohne Leistungsaufwand filtern!

Breite Unterstützung!

IE10 + und meistens alles andere (einschließlich Handy)

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.

function waitForMutation(parentNode, isMatchFunc, handlerFunc, observeSubtree, disconnectAfterMatch) {
  var defaultIfUndefined = function(val, defaultVal) {
    return (typeof val === "undefined") ? defaultVal : val;
  };

  observeSubtree = defaultIfUndefined(observeSubtree, false);
  disconnectAfterMatch = defaultIfUndefined(disconnectAfterMatch, false);

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
          var node = mutation.addedNodes[i];
          if (isMatchFunc(node)) {
            handlerFunc(node);
            if (disconnectAfterMatch) observer.disconnect();
          };
        }
      }
    });
  });

  observer.observe(parentNode, {
    childList: true,
    attributes: false,
    characterData: false,
    subtree: observeSubtree
  });
}

// Example
waitForMutation(
  // parentNode: Root node to observe. If the mutation you're looking for
  // might not occur directly below parentNode, pass 'true' to the
  // observeSubtree parameter.
  document.getElementById("outerContent"),
  // isMatchFunc: Function to identify a match. If it returns true,
  // handlerFunc will run.
  // MutationObserver only fires once per mutation, not once for every node
  // inside the mutation. If the element we're looking for is a child of
  // the newly-added element, we need to use something like
  // node.querySelector() to find it.
  function(node) {
    return node.querySelector(".foo") !== null;
  },
  // handlerFunc: Handler.
  function(node) {
    var elem = document.createElement("div");
    elem.appendChild(document.createTextNode("Added node (" + node.innerText + ")"));
    document.getElementById("log").appendChild(elem);
  },
  // observeSubtree
  true,
  // disconnectAfterMatch: If this is true the hanlerFunc will only run on
  // the first time that isMatchFunc returns true. If it's false, the handler
  // will continue to fire on matches.
  false);

// Set up UI. Using JQuery here for convenience.

$outerContent = $("#outerContent");
$innerContent = $("#innerContent");

$("#addOuter").on("click", function() {
  var newNode = $("<div><span class='foo'>Outer</span></div>");
  $outerContent.append(newNode);
});
$("#addInner").on("click", function() {
  var newNode = $("<div><span class='foo'>Inner</span></div>");
  $innerContent.append(newNode);
});

.content {
  padding: 1em;
  border: solid 1px black;
  overflow-y: auto;
}
#innerContent {
  height: 100px;
}
#outerContent {
  height: 200px;
}
#log {
  font-family: Courier;
  font-size: 10pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Create some mutations</h2>
<div id="main">
  <button id="addOuter">Add outer node</button>
  <button id="addInner">Add inner node</button>
  <div class="content" id="outerContent">
    <div class="content" id="innerContent"></div>
  </div>
</div>
<h2>Log</h2>
<div id="log"></div>

Hier ist eine vielversprechende Lösung in Vanille-Javascript (keine unordentlichen Rückrufe). Standardmäßig werden alle 200 ms überprüft.

function waitFor(selector) {
    return new Promise(function (res, rej) {
        waitForElementToDisplay(selector, 200);
        function waitForElementToDisplay(selector, time) {
            if (document.querySelector(selector) != null) {
                res(document.querySelector(selector));
            }
            else {
                setTimeout(function () {
                    waitForElementToDisplay(selector, time);
                }, time);
            }
        }
    });
}

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.

/**
 * @brief Wait for something to be ready before triggering a timeout
 * @param {callback} isready Function which returns true when the thing we're waiting for has happened
 * @param {callback} success Function to call when the thing is ready
 * @param {callback} error Function to call if we time out before the event becomes ready
 * @param {int} count Number of times to retry the timeout (default 300 or 6s)
 * @param {int} interval Number of milliseconds to wait between attempts (default 20ms)
 */
function waitUntil(isready, success, error, count, interval){
    if (count === undefined) {
        count = 300;
    }
    if (interval === undefined) {
        interval = 20;
    }
    if (isready()) {
        success();
        return;
    }
    // The call back isn't ready. We need to wait for it
    setTimeout(function(){
        if (!count) {
            // We have run out of retries
            if (error !== undefined) {
                error();
            }
        } else {
            // Try again
            waitUntil(isready, success, error, count -1, interval);
        }
    }, interval);
}

Um dies beispielsweise in jQuery aufzurufen, verwenden Sie Folgendes:

waitUntil(function(){
    return $('#myelement').length > 0;
}, function(){
    alert("myelement now exists");
}, function(){
    alert("I'm bored. I give up.");
});

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):

"use strict";

function waitUntilElementLoaded(selector) {
    var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    var start = performance.now();
    var now = 0;

    return new Promise(function (resolve, reject) {
        var interval = setInterval(function () {
            var element = document.querySelector(selector);

            if (element instanceof Element) {
                clearInterval(interval);

                resolve();
            }

            now = performance.now();

            if (now - start >= timeout) {
                reject("Could not find the element " + selector + " within " + timeout + " ms");
            }
        }, 100);
    });
}

Für mehrere Elemente (Typ NodeList):

"use strict";

function waitUntilElementsLoaded(selector) {
    var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    var start = performance.now();
    var now = 0;

    return new Promise(function (resolve, reject) {
        var interval = setInterval(function () {
            var elements = document.querySelectorAll(selector);

            if (elements instanceof NodeList) {
                clearInterval(interval);

                resolve(elements);
            }

            now = performance.now();

            if (now - start >= timeout) {
                reject("Could not find elements " + selector + " within " + timeout + " ms");
            }
        }, 100);
    });
}

Beispiele:

waitUntilElementLoaded('#message', 800).then(function(element) {
    // element found and available

    element.innerHTML = '...';
}).catch(function() {
    // element not found within 800 milliseconds
});

waitUntilElementsLoaded('.message', 10000).then(function(elements) {
    for(const element of elements) {
        // ....
    }
}).catch(function(error) {
    // elements not found withing 10 seconds
});

Funktioniert sowohl für eine Liste von Elementen als auch für ein einzelnes Element.

Ein saubereres Beispiel mit MutationObserver:

new MutationObserver( mutation => {
    if (!mutation.addedNodes) return
    mutation.addedNodes.forEach( node => {
        // do stuff with node
    })
})

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

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

Um es zu benutzen:

waitForElm('.some-class').then(elm => console.log(elm.textContent));

oder mit async / warten

const elm = await waitForElm('.some-classs')

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.

 // Wait for element to exist.

    function imageLoaded(el, cb,time) {

        if ($(el).length) {
            // Element is now loaded.

            cb($(el));

            var imageInput =  $('input[name=product\\[image_location\\]]');
            console.log(imageInput);

        } else if(time < 10000) {
            // Repeat every 500ms.
            setTimeout(function() {
               time = time+500;

                imageLoaded(el, cb, time)
            }, 500);
        }
    };

    var time = 500;

    imageLoaded('input[name=product\\[image_location\\]]', function(el) {

     //do stuff here 

     },time);

Normalerweise verwende ich dieses Snippet für den Tag Manager:

<script>
(function exists() {
  if (!document.querySelector('<selector>')) {
    return setTimeout(exists);
  }
  // code when element exists
})();  
</script>

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 :)

function getElement(selector, i = 5) {
  return new Promise(async (resolve, reject) => {
    if(i <= 0) return reject(`${selector} not found`);
    const elements = document.querySelectorAll(selector);
    if(elements.length) return resolve(elements);
    return setTimeout(async () => await getElement(selector, i-1), 1000);
  })
}

// Now call it with your selector

try {
  element = await getElement('.woohoo');
} catch(e) { // catch the e }

//OR

getElement('.woohoo', 5)
.then(element => { // do somthing with the elements })
.catch(e => { // catch the error });