Question

I don’t know what’s wrong with my code, even if I change the content of the target file it still wont refresh the 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>

What I want to achieve is when there are changes on the target page, the iframe will automatically reload itself so that the changes can be shown to the user. Both pages are located in the same domain.

Answer 1

Firstly, you had a missing closing bracket “)” at the end of the $.get method.

The main problem, though, was probably that your server is not sending proper Last-Modified headers. The server I tested on didn’t send any, meaning mod is undefined. A workaround is to check for Content-Length instead. It’s not ideal because an edited page doesn’t necessarily change size, but it seems you’re in control of the page so you could ensure you add an extra byte to force a refresh.

Here is your checkModified function updated which should work:

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 += "";
      }
   });
}