Обнаружение изменений содержимого в iframe с помощью JavaScript

Чтобы обнаружить изменения в содержимом iframe с помощью JavaScript, вы можете использовать несколько методов. Вот несколько вариантов:

  1. MutationObserver: API MutationObserver позволяет вам прослушивать изменения в DOM и запускать функцию обратного вызова при возникновении изменений. Вы можете использовать его для наблюдения за содержимым iframe и обнаружения любых изменений.
const iframe = document.getElementById('myIframe');
const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // Content of the iframe has changed
            console.log('Content changed!');
        }
    }
});
observer.observe(iframe.contentDocument, { childList: true });
  1. Window.postMessage: если содержимое iframe обслуживается из другого домена, вы можете использовать метод postMessage для связи между родительским окном и iframe. iframe может отправлять сообщение родительскому окну при каждом изменении его содержимого, а родительское окно может прослушивать эти сообщения.

Вот пример:

В родительском окне:

window.addEventListener('message', (event) => {
    if (event.data === 'contentChanged') {
        // Content of the iframe has changed
        console.log('Content changed!');
    }
});

В iframe:

window.addEventListener('DOMContentLoaded', () => {
    // Detect content changes and send a message to the parent window
    // whenever the content changes
    // ...
    window.parent.postMessage('contentChanged', '*');
});
  1. Интервальный опрос: вы можете периодически проверять содержимое iframe через определенный интервал с помощью функции setInterval. Сравните текущий контент с предыдущим, чтобы обнаружить изменения.

Вот пример:

const iframe = document.getElementById('myIframe');
let previousContent = iframe.contentWindow.document.body.innerHTML;
setInterval(() => {
    const currentContent = iframe.contentWindow.document.body.innerHTML;
    if (currentContent !== previousContent) {
        // Content of the iframe has changed
        console.log('Content changed!');
        previousContent = currentContent;
    }
}, 1000); // Check every second