| strs | 26.05.2018 15:57 |
Цитата:
|
Сообщение от рони
(Сообщение 486045)
strs,
скрипт перенесите вниз на строку 25 перед </body> |
Выполнить скрипт только после того, как элемент с определенным id появляется в DOM
Добрый день!
Задача такая: мне нужно написать простенький юзерскрипт для личного использования, который бы изменял свойства одного всплывающего окошка на неком форуме (width, height, top, left). Я его потом впихну либо в TamperMonkey либо в собственное расширение. Проблема в том, что на момент загрузки страницы этот элемент не существует, модальное окошко появляется только по клику на панели инструментов текстового редактора форума. Оно имеет свой id, поэтому добраться до него не проблема, проблема отследить его появление. Каким образом можно выполнить скрипт только после того, как элемент с определенным id появляется в DOM? Очень желательно не применять стронние библиотеки типа jQuery. |
https://developer.mozilla.org/ru/doc...tationObserver
Вешаем на родителя
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
observer.observe(document.querySelector('родитель элемента'), { childList: true});
|
Пока за основную задачу не брался, решил сначала сам сделать страницу с динамически появляющимся элементом:
<html>
<head>
<script>
function f1()
{
document.getElementById('id1').innerHTML='<div id="id2" style="text-align:center;">SOME TEXT</div>'
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
observer.observe(document.querySelector('id1'), { childList: true});
</script>
</head>
<body>
<h1 style='text-align:center'>TEST!</h1>
<hr>
<input type='button' value="Add child!" onclick='f1()'>
<hr>
<div id="id1" style="width:100%; height:20px;"></div>
</body>
</html>
В div с id=id1 по нажатию на кнопку добавляется еще один div c id=id2, стили которого я позже хочу изменять при помощи скрипта. Добавил туда ваш код, браузер ругается на следующее: Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. |
strs,
скрипт перенесите вниз на строку 25 перед </body> |
Цитата:
|
querySelector('#id1')
|
Всем спасибо, работает!
|
Поторопился радоваться.
Подскажите еще: как отследить появление элемента с конкретным id? Там просто родитель - это <body> и в нем много чего может появиться, а мне нужно узнать о том, что в нем появился div с id="xxx". |
strs,
в нормальном случае ловят не джина, а редактируют функцию которая добавляет. |
Обзервер для таких задач слишком тяжеловесен. Хватит простой проверки по таймауту:
(function repeat(){
var element = document.getElementById('id');
if(!element) return setTimeout(repeat, 100);
// основной код / вызов основной функции
}());
В целом, конечно, рони прав, по хорошему надо изменять(подменять) именно саму функцию вызова того окна. Но для юзерскрипта можно не заморачиваться. |
| Часовой пояс GMT +3, время: 09:52. |