Как ждать, пока элемент не существует? - PullRequest
Новая
       3

Как ждать, пока элемент не существует?

203 голосов
/ 02 апреля 2011

Я работаю над расширением в Chrome, и мне интересно: как лучше узнать, когда элемент появляется?Используя простой javascript, с интервалом, который проверяет, пока элемент не существует, или jQuery имеет какой-то простой способ сделать это?

Ответы [ 14 ]

129 голосов
/ 24 мая 2013

DOMNodeInserted считается устаревшим, как и другие события мутации DOM, из-за проблем с производительностью. Рекомендуемый подход - использовать MutationObserver для наблюдения за DOM. Это поддерживается только в новых браузерах, поэтому вам следует вернуться к DOMNodeInserted, когда MutationObserver недоступно. 

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()
109 голосов
/ 04 декабря 2012

У меня была такая же проблема, поэтому я решил написать плагин .

$(selector).waitUntilExists(function);

Код: 

;(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));
59 голосов
/ 20 апреля 2015

Вот основная функция JavaScript для ожидания отображения элемента.

Параметры:

  1. selector: эта функция ищет элемент $ {selector}

  2. time: эта функция проверяет, существует ли этот элемент каждые $ {time} миллисекунды. 

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

Например, установка selector="#div1" и time=5000 будет искать тег HTML, id="div1" каждые 5000 миллисекунд.

24 голосов
/ 02 апреля 2011

Вы можете прослушивать DOMNodeInserted или DOMSubtreeModified события, которые запускаются всякий раз, когда новый элемент добавляется в DOM.

Существует также LiveQuery плагин jQuery, который будет определять, когда создается новый элемент: 

$("#future_element").livequery(function(){
    //element created
});
21 голосов
/ 02 апреля 2011

Вы можете сделать 

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

});

Обратите внимание, что это будет работать, только если элемент присутствует в DOM при запросе с сервера. Если элемент добавляется динамически через JavaScript, он не будет работать, и вам, возможно, придется поискать другие ответы.

15 голосов
/ 19 ноября 2015

Я использовал этот подход, чтобы дождаться появления элемента, чтобы я мог после этого выполнить другие функции.

Допустим, doTheRestOfTheStuff(parameters) функция должна вызываться только после того, как элемент с идентификатором the_Element_ID появляется илиГотовая загрузка, мы можем использовать, 

var existCondition = setInterval(function() {
 if ($('#the_Element_ID').length) {
    console.log("Exists!");
    clearInterval(existCondition);
    doTheRestOfTheStuff(parameters);
 }
}, 100); // check every 100ms
9 голосов
/ 09 марта 2017

Для простого подхода, использующего jQuery, я нашел, что это хорошо работает: 

  // 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");
    });
  });

Здесь мы просто проверяем каждые 500 мс, чтобы увидеть, загружен ли элемент, когда он есть, мы можем его использовать.

Это особенно полезно для добавления обработчиков щелчков к элементам, которые были динамически добавлены в документ.

8 голосов
/ 19 сентября 2014

Как насчет библиотеки inserttionQuery ?

inserttionQuery использует обратные вызовы CSS-анимации, прикрепленные к селекторам, указанным для запуска обратного вызова при создании элемента. Этот метод позволяет выполнять обратные вызовы при каждом создании элемента, а не только в первый раз.

Из GitHub:

Способ не-dom-событий для обнаружения обнаруженных узлов. И он использует селекторы.

Это не только для более широкой поддержки браузера, он может быть лучше, чем DOMMutationObserver для некоторых вещей.

Почему?

  • Поскольку события DOM замедляют работу браузера, а inserttionQuery -
  • Поскольку DOM Mutation Observer имеет меньшую поддержку браузера, чем inserttionQuery
  • Потому что с inserttionQuery вы можете фильтровать изменения DOM с помощью селекторов без снижения производительности!

Широко распространенная поддержка!

IE10 + и в основном все остальное (включая мобильный)

6 голосов
/ 18 июля 2018

Вот решение с возвратом обещаний в ванильном Javascript (без грязных обратных вызовов). По умолчанию он проверяет каждые 200 мс. 

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);
            }
        }
    });
}
5 голосов
/ 18 июля 2015

Вот функция, которая действует как тонкая оболочка для MutationObserver. Единственное требование - браузер должен поддерживать MutationObserver; нет зависимости от JQuery. Запустите фрагмент ниже, чтобы увидеть рабочий пример. 

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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...