Как я могу отслеживать изменения содержимого на странице HTML после загрузки страницы

Question

Я ломаю голову над этим.

После загрузки HTML-документа в браузер я хочу иметь возможность отслеживать страница в случае, если какой-либо контент на нем изменяется по любой причине.

Есть ли функция Javascript, с помощью которой я могу отслеживать, что имеет изменено »на веб-странице. Это должно быть независимо от типа содержимого на странице HTML.

У меня есть два примера для размышления:

Ex1:

Скажем, в документе HTML есть два поля выбора s1 и s2. Список элементов в s2 зависит от выбора в s1 (страница не обновился - то есть s2 загружается через Ajax или что-то). Поэтому после загрузки HTML-страницы мне нужно получать уведомление всякий раз, когда s2 заселено ...

Ex2:

Скажем, на странице HTML есть ссылка, щелкнув по которой всплывающее окно div создается с некоторым текстом. Как я могу захватить содержимое этого динамического всплывающего окна?

Во всей этой дискуссии я не принимаю во внимание какую-либо конкретную формат HTML ... содержимое HTML может быть любым ... мне просто нужно отслеживать отслеживание изменений содержимого после загрузки страницы ...

В идеале мне нужно добиться этого с помощью JavaScript (на стороне клиента сценарии). Как мне этого добиться?

Answer 1

Если вы используете AJAX, вы можете настроить функцию ответа для обработки домашней системы «прослушивания событий». Поэтому после того, как ответ делает то, что ему нужно, он может вызывать любые методы, которые были зарегистрированы с ним, передавая текст ответа при необходимости.

Итак, из ваших примеров выше, в Ex1, когда AJAX возвращается из S1, он загружает S2, а затем вызывает метод, говоря, что S2 изменился. В Ex2, когда новый AJAX возвращает содержимое DIV, после загрузки его в DIV он вызывает другой метод (или, возможно, тот же самый, в зависимости от того, что вы пытаетесь сделать) и предупреждает его о том, что DIV имеет новое содержимое.

Answer 2

Вы можете отслеживать изменения в текстовом поле, используя onkeyup. Это будет говорить вам каждый раз, когда кто-то вносит изменения в данное текстовое поле.

Это может потенциально вызвать много событий. Однако использование onblur не обязательно скажет вам об изменениях в текстовом поле, и охват браузера onchange в лучшем случае не будет точным.

Answer 3

Вы можете установить свой скрипт "watcher" в качестве таймера, запустив функцию diff для текущего document.body.innerHTML и сохраненную версию, захваченную при загрузке. В зависимости от того, как быстро будет работать diff, вы получите представление о том, какой интервал таймера использовать.

Это может не отражать изменения в элементах формы, но для них легче проходить по циклу через все элементы формы в каждой форме на странице.

Вот чья-то функция сравнения, которую я нашел в Google: http://snowtide.com/jsdifflib