JS - How to reload iframe on a page when returning back from a link in the iframe

Question

I have a page with an iframe. The following code reloads the page, when it is again on focus. This works fine.

But when I'm navigating away from the page from within the iframe (contains a table with rows), the page should also reload the iframe, when it is in focus again.

How can I implement that in vanilla JS (IE8).

  var blurred = false;

  window.onblur = function() { blurred = true; };
  window.onfocus = function() { blurred && (reloadFrames()); };

  function reloadFrames() {
    document.getElementById('iframe1').contentWindow.location.reload();
  } // reloadFrames

Answer 1

Thx for the comments and hints! This is how I got this working:

Implement on main page:

  /**
   * Calls reloadFrames when page is on focus again.
   */
  var visibilityChange = (function(window) {
    return function(fn) {
      window.onfocus = function(e) {
        reloadFrames();
      };
    } ();
  } (window)); // Window object


  var reloadFrames = function () {
    document.getElementById('iframe1').contentWindow.location.reload();
  } // reloadFrames

Implement on page that sits in iframe:

  /**
   * Calls reloadFrames when parent page is on focus again.
   */
  var visibilityChange = (function(parent) {
    return function(fn) {
      window.onfocus = function(e) {
        parent.reloadFrames();
      };
    } ();
  } (parent)); // Parent object