[SOLVED] Is there a way to find out if the content of an iframe has changed?

Is there a way to find out if the content of an iframe has changed?

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 !

Solution

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>