Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2018, 11:19
Новичок на форуме
Отправить личное сообщение для strs Посмотреть профиль Найти все сообщения от strs
 
Регистрация: 15.04.2015
Сообщений: 7

Выполнить скрипт только после того, как элемент с определенным id появляется в DOM
Добрый день!

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

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

Каким образом можно выполнить скрипт только после того, как элемент с определенным id появляется в DOM? Очень желательно не применять стронние библиотеки типа jQuery.
Ответить с цитированием
  #2 (permalink)  
Старый 26.05.2018, 11:29
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

Последний раз редактировалось j0hnik, 26.05.2018 в 11:39.
Ответить с цитированием
  #3 (permalink)  
Старый 26.05.2018, 15:36
Новичок на форуме
Отправить личное сообщение для strs Посмотреть профиль Найти все сообщения от strs
 
Регистрация: 15.04.2015
Сообщений: 7

Пока за основную задачу не брался, решил сначала сам сделать страницу с динамически появляющимся элементом:
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

strs,
скрипт перенесите вниз на строку 25 перед </body>
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2018, 15:57
Новичок на форуме
Отправить личное сообщение для strs Посмотреть профиль Найти все сообщения от strs
 
Регистрация: 15.04.2015
Сообщений: 7

Сообщение от рони Посмотреть сообщение
strs,
скрипт перенесите вниз на строку 25 перед </body>
Не помогает
Ответить с цитированием
  #6 (permalink)  
Старый 26.05.2018, 16:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

querySelector('#id1')
Ответить с цитированием
  #7 (permalink)  
Старый 26.05.2018, 16:28
Новичок на форуме
Отправить личное сообщение для strs Посмотреть профиль Найти все сообщения от strs
 
Регистрация: 15.04.2015
Сообщений: 7

Всем спасибо, работает!
Ответить с цитированием
  #8 (permalink)  
Старый 26.05.2018, 16:48
Новичок на форуме
Отправить личное сообщение для strs Посмотреть профиль Найти все сообщения от strs
 
Регистрация: 15.04.2015
Сообщений: 7

Поторопился радоваться.
Подскажите еще: как отследить появление элемента с конкретным id? Там просто родитель - это <body> и в нем много чего может появиться, а мне нужно узнать о том, что в нем появился div с id="xxx".
Ответить с цитированием
  #9 (permalink)  
Старый 26.05.2018, 17:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

strs,
в нормальном случае ловят не джина, а редактируют функцию которая добавляет.
Ответить с цитированием
  #10 (permalink)  
Старый 26.05.2018, 17:53
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

Обзервер для таких задач слишком тяжеловесен. Хватит простой проверки по таймауту:
(function repeat(){
    var element = document.getElementById('id');
    if(!element) return setTimeout(repeat, 100);

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать чтобы скрипт не спотыкался если какой то элемент не находит на странице? денис77447327 Общие вопросы Javascript 1 04.10.2017 17:10
Как удалить элемент из дерева DOM dummer jQuery 13 16.01.2011 16:19
Как узнать содержит ли DOM определенный элемент Ruslan Events/DOM/Window 8 12.03.2010 22:02
Как запустить скрипт после отработки другого скрипта? roman2 Общие вопросы Javascript 2 10.08.2009 01:23
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 02:11