有没有办法查明 iframe 的内容是否已更改？

Question

我正在寻找一种在 js 中每隔 x 秒检查一次我的 iframe 内容是否已更改的方法，如果已更改，请刷新它以查看更改。我想这样做是因为只需每 x 秒刷新一次就可以使它非常明显，并且每次都将 iframe 强制 return 到滚动条的顶部。 iframe 的 src 在同一个域中，所以我对同源策略没有任何问题。

谢谢！

Answer 1

很简单。在指定的时间间隔进行 Ajax 次调用以检索页面内容。将新的内容长度与之前的内容长度进行比较，如果有任何差异，则重置 iframe 的 src 属性。

const URL = 'https://whosebug.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://whosebug.com"></iframe>

有没有办法查明 iframe 的内容是否已更改？

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

html

javascript

iframe

page-refresh