I am looking for a way in js to check every x seconds if the content of my iframe has changed, and if so, refreh it to see the changes. I want to do this because simply refreshing every x seconds makes it very visible and forces the iframe to return to the top of the scrollbar every time. The src of the iframe is on the same domain so I have no problems with the same-origin policy.
Thanks !
It's simple. Make Ajax calls to retrieve the content of the page at a specified time interval. Compare the new content length with the previous one and reset the src
attribute of iframe
if there's any difference.
const URL = 'https://stackoverflow.com';
let content = '';
setTimeout(() => {
$.ajax({
url: URL,
type: 'GET',
success: (res) => {
if (content.length !== res.length) {
content = res;
$('#myframe').attr('src', URL);
}
},
error: (jqXHR, textStatus, errorThrown) => {
console.error(textStatus);
}
});
}, 5000); // Check difference and refresh iframe in 5 seconds interval
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id="myframe" src="https://stackoverflow.com"></iframe>