Решали сейчас с коллегой вопрос по интеграции кода в Тильду. Кто не в курсе — это такой SaaS конструктор сайтов, приятный в простом использовании, но в вопросах интеграции чего-то на фронтенде не всегда очевидный. Детали реализации фронта не документированы, сервис не расчитан, что кто-то будет на фронтенде его логику с JS дорабатывать.
Задача была навесить свою JS логику сразу после отправки данных на сервер и отображения некоторого div'а. Этого div'а в момент начальной отрисовки страницы в дереве нет. Когда и кто его добавляет в DOM? Надо изучать их код, чтобы ответить.
Но в качестве быстрого решения можно воспользоваться хаком с MutationObserver. Это способ отслеживать все изменения DOM элементов внутри указанного элемента, которым может быть и body. Когда происходят изменения внутри отслеживаемого элемента — вызывается твоя функция и ты проверяешь в ней, показан ли сейчас нужный тебе элемент. И не надо разбираться с деталями реализации кода сайта, в который ты интегрируешься. Удобно. Минус — на каждое изменение отслеживаемого элемента вызывается твой код. Не стоит отслеживать так изменения больших и часто меняющихся узлов DOM дерева.
Накидал демку
#frontend #javascript #IT
Задача была навесить свою JS логику сразу после отправки данных на сервер и отображения некоторого div'а. Этого div'а в момент начальной отрисовки страницы в дереве нет. Когда и кто его добавляет в DOM? Надо изучать их код, чтобы ответить.
Но в качестве быстрого решения можно воспользоваться хаком с MutationObserver. Это способ отслеживать все изменения DOM элементов внутри указанного элемента, которым может быть и body. Когда происходят изменения внутри отслеживаемого элемента — вызывается твоя функция и ты проверяешь в ней, показан ли сейчас нужный тебе элемент. И не надо разбираться с деталями реализации кода сайта, в который ты интегрируешься. Удобно. Минус — на каждое изменение отслеживаемого элемента вызывается твой код. Не стоит отслеживать так изменения больших и часто меняющихся узлов DOM дерева.
Накидал демку
#frontend #javascript #IT