如果源页面发生更改，则自动重新加载 iframe

Question

我不知道我的代码有什么问题，即使我更改了目标文件的内容，它仍然不会刷新 iframe。

<script type="text/javascript">
var page = 'data/apps/<? echo $_SESSION['name']; ?><? echo $_SESSION['last']; ?>App.html', lM;

function checkModified(){
   $.get(page, function(a,a,x){
      var mod = x.getResponseHeader('last-modified');
      if(lM != mod){
         lM = mod;
         document.getElementById("frame").src += "";
      }
   }
}

setInterval(checkModified, 5000); // every 5 seconds
</script>

我想要实现的是当目标页面发生更改时，iframe 会自动重新加载，以便将更改显示给用户。两个页面都位于同一个域中。

Answer 1

首先，$.get 方法末尾缺少右括号“)”。

不过，主要问题可能是您的服务器没有发送正确的Last-Modified 标头。我测试的服务器没有发送任何内容，这意味着 mod 未定义。一种解决方法是改为检查 Content-Length。这并不理想，因为编辑后的页面不一定会改变大小，但您似乎可以控制页面，因此您可以确保添加额外的字节来强制刷新。

这是您更新的 checkModified 函数，它应该可以工作：

function checkModified() {
   $.get(page, function(a, b, x) {
      var mod = (x.getResponseHeader('Last-Modified')) ? x.getResponseHeader('Last-Modified') : x.getResponseHeader('Content-Length');
      if (lM != mod) {
         lM = mod;
         console.log('Fetched');
         document.getElementById("frame").src += "";
      }
   });
}