Форум

strs · #1 (**permalink**) 26.05.2018, 11:19

Добрый день!

Задача такая: мне нужно написать простенький юзерскрипт для личного использования, который бы изменял свойства одного всплывающего окошка на неком форуме (width, height, top, left). Я его потом впихну либо в TamperMonkey либо в собственное расширение.

Проблема в том, что на момент загрузки страницы этот элемент не существует, модальное окошко появляется только по клику на панели инструментов текстового редактора форума. Оно имеет свой id, поэтому добраться до него не проблема, проблема отследить его появление.

Каким образом можно выполнить скрипт только после того, как элемент с определенным id появляется в DOM? Очень желательно не применять стронние библиотеки типа jQuery.

j0hnik · #2 (**permalink**) 26.05.2018, 11:29

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

strs · #3 (**permalink**) 26.05.2018, 15:36

Пока за основную задачу не брался, решил сначала сам сделать страницу с динамически появляющимся элементом:

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

рони · #4 (**permalink**) 26.05.2018, 15:49

strs,
скрипт перенесите вниз на строку 25 перед </body>

strs · #5 (**permalink**) 26.05.2018, 15:57

Сообщение от рони

strs,
скрипт перенесите вниз на строку 25 перед </body>

Не помогает

laimas · #6 (**permalink**) 26.05.2018, 16:05

querySelector('#id1')

strs · #7 (**permalink**) 26.05.2018, 16:28

Всем спасибо, работает!

strs · #8 (**permalink**) 26.05.2018, 16:48

Поторопился радоваться.
Подскажите еще: как отследить появление элемента с конкретным id? Там просто родитель - это <body> и в нем много чего может появиться, а мне нужно узнать о том, что в нем появился div с id="xxx".

рони · #9 (**permalink**) 26.05.2018, 17:39

strs,
в нормальном случае ловят не джина, а редактируют функцию которая добавляет.

Aetae · #10 (**permalink**) 26.05.2018, 17:53

Обзервер для таких задач слишком тяжеловесен. Хватит простой проверки по таймауту:

(function repeat(){
    var element = document.getElementById('id');
    if(!element) return setTimeout(repeat, 100);

    // основной код / вызов основной функции

}());

В целом, конечно, рони прав, по хорошему надо изменять(подменять) именно саму функцию вызова того окна. Но для юзерскрипта можно не заморачиваться.

Форум

Справочник

Discord чат

Курсы javascript