Чтобы обнаружить изменения в содержимом iframe с помощью JavaScript, вы можете использовать несколько методов. Вот несколько вариантов:
- 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 });
- 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', '*');
});
- Интервальный опрос: вы можете периодически проверять содержимое 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