javascripthtmliframepage-refresh

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>