Я работаю над расширением в Chrome, и мне интересно: какой лучший способ узнать, когда возникает элемент? Используя простой javascript с интервалом, который проверяет, существует ли элемент, или у jQuery есть простой способ сделать это?
Как подождать, пока существует элемент?
Ответ 1
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()
Ответ 2
У меня была такая же проблема, поэтому я пошел дальше и написал для нее плагин .
$(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));
Ответ 3
Вот основная функция JavaScript, которая ожидает отображения элемента.
Параметры:
-
selector: эта функция ищет элемент $ {селектор} -
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" которого id="div1" каждые 5000 миллисекунд.
Ответ 4
Вы можете прослушивать события DOMNodeInserted или DOMSubtreeModified, которые запускаются при добавлении нового элемента в DOM.
Существует также LiveQuery плагин jQuery, который будет определять, когда будет создан новый элемент:
$("#future_element").livequery(function(){
//element created
});
Ответ 5
Вы можете сделать
$('#yourelement').ready(function() {
});
Обратите внимание, что это будет работать, только если элемент присутствует в DOM при запросе с сервера. Если элемент динамически добавляется через JavaScript, это не сработает, и вам, возможно, придется посмотреть на другие ответы.
Ответ 6
Я использовал этот подход для ожидания появления элемента, чтобы после этого выполнить остальные функции.
Скажем, 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
Ответ 7
Для простого подхода с использованием 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
Как насчет библиотеки insertionQuery?
insertionQuery использует обратные вызовы CSS Animation, привязанные к селектору (ям), указанным для запуска обратного вызова при создании элемента. Этот метод позволяет выполнять обратные вызовы всякий раз, когда создается элемент, а не только в первый раз.
Из github:
Не-dom-event способ обнаружения узлов. И он использует селекторы.
Он не только для более широкой поддержки браузера, он может быть лучше, чем DOMMutationObserver для определенных вещей.
Почему?
- Поскольку DOM Events замедляет работу браузера, а insertionQuery не выполняет
- Поскольку DOM Mutation Observer имеет меньше поддержки браузера, чем insertionQuery
- Поскольку с помощью insertionQuery вы можете фильтровать изменения DOM с помощью селекторов без накладных расходов на производительность!
Широкая поддержка!
IE10 + и в основном что-нибудь еще (в том числе мобильное)
Ответ 9
Здесь решение с возвратом обещаний в ванильном 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);
}
}
});
}
Ответ 10
Здесь функция, которая действует как тонкая оболочка вокруг 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 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>Ответ 11
Просто добавьте нужный селектор. Как только элемент найден, вы можете получить доступ к функции обратного вызова.
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));
Ответ 12
Здесь используется чистая функция Javascript, которая позволяет подождать что угодно. Установите интервал дольше, чтобы получить меньше ресурсов ЦП.
/**
* @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);
}
Чтобы вызвать это, например, в jQuery, используйте что-то вроде:
waitUntil(function(){
return $('#myelement').length > 0;
}, function(){
alert("myelement now exists");
}, function(){
alert("I'm bored. I give up.");
});
Ответ 13
Более чистый пример использования MutationObserver:
new MutationObserver( mutation => {
if (!mutation.addedNodes) return
mutation.addedNodes.forEach( node => {
// do stuff with node
})
})
Ответ 14
Решение, возвращающее Promise и позволяющее использовать тайм-аут (совместимый IE 11+):
"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 HTMLElement) {
clearInterval(interval);
resolve();
}
now = performance.now();
if (now - start >= timeout) {
reject("Could not find the element " + selector + " within " + timeout + " ms");
}
}, 100);
});
}
"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);
});
}
Примеры:
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
});
Работает как для списка элементов, так и для одного элемента.
Ответ 15
Если вы хотите, чтобы через некоторое время он прекратил поиск (тайм-аут), то будет работать следующий jQuery. Время ожидания истечет через 10 секунд. Мне нужно было использовать этот код, а не чистый JS, потому что мне нужно было выбрать вход по имени, и у меня были проблемы с реализацией некоторых других решений.
// 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);
Ответ 16
Я думаю, что до сих пор нет никакого ответа здесь с легким и читаемым рабочим примером. Используйте MutationObserver interface для обнаружения изменений DOM, например:
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>