SO48200522

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href='style.css' rel='stylesheet'>
  <script>
    /* Global variables */
    var HT, WD;
    // Reference the form
    var UI = document.forms['ui'];
  </script>
</head>

<body>

  <form id='ui'>
    <fieldset>
      <legend><h1>iFrame</h1></legend>
      <label for='viewW'><b>Width:&nbsp;
      <output id='viewW'></output>px</b>
      </label>
      <label for='viewH'><b>&nbsp;&nbsp;Height:&nbsp;
      <output id='viewH'></output>px</b>
      </label>
      <button id='add' type='button'>ADD</button>
      <button id='del' type='button'>DEL</button>
      <button id='onOff' type='button'>ON/OFF</button>
    </fieldset>
  </form>

  <iframe id='frame' src='iframe.html'></iframe>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='localstorage.js'></script>
  <script>
    $(function() {
      // When user clicks a button...
      $('#ui button').on('click', function() {
        // ...if button#add...
        if ($(this).is('#add')) {
          // ...make a div.box in section#dock...
          $('#frame').contents().find('#dock').append("<div class='box'>&nbsp;</div>");
          // or if button#onOff...
        } else if ($(this).is('#onOff')) {
          // ...slide iframe#frame in/out...
          $('#frame').slideToggle('slow');
          // ...Otherwise...
        } else {
          // ...remove a div.box
          $('#frame').contents().find('#dock div:last-child').remove();
        }
      });
      /* When the child page saves the height in
      || localStorage...
      */
      $(window).on('storage', function(e) {
        // ...get the values stored in localStorage...
        HT = getData('height');
        WD = getData('width');
        // ...display it ...
        $('#viewH').val(HT);
        $('#viewW').val(WD);
        // ...and set the values as `iframe#frame` dim
        $('#frame').height(HT);
        $('#frame').width(WD);
      });
    });
  </script>

</body>

</html>

#main {
  height: 100vh;
  width: 100vw;
}

#ui {
  padding: 5px 0;
  display: table;
}

fieldset {
  display: table-row;
  border: 10px ridge #777;
  border-radius: 12px;
}

#frame {
  display: block;
  border: 10px ridge #555;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

#dock {
  counter-reset: count;
  overflow-x: hidden;
}

.box {
  width:90%;
  min-width: 300px;
  height: 64px;
  border: 10px ridge #444;
  border-radius: 12px;
  text-align: center;
  counter-increment: count;
}

.box::before {
  content: 'Comment 'counter(count);
  display: block;
  margin-top: 16px;
  font-size: 24px;
}

section div.box:first-of-type {
  margin-top: 0;
}

section div.box:last-of-type {
  margin-bottom: 30px;
}

button,
label {
  font: inherit;
  display: table-cell;
}
label {
  padding-bottom: 10px;
}

legend {
  margin-bottom:-15px;
}

hr {
  margin-top: -2px;
  border-color: red;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href='style.css' rel='stylesheet'>
  <script>
  /* Global variables */
    var HT, WD;
    // Reference the parent's form
    var UI = parent.document.forms['ui'];
  </script>
</head>

<body>
  <main id='main'>
    <section id='dock'>

    </section>
    <hr>
  </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='localstorage.js'></script>
  <script>
    $(function() {
        // When the form is clicked...
        $(UI).on('click', function() {
          // Get the dimensions of #dock
          WD = $('#dock').width();
          HT = $('#dock').height();
          // Store the dim in localStorage
          setData('width', WD);
          setData('height', HT);
        });
    });
  </script>
</body>

</html>

  function getData(key) {
    return JSON.parse(localStorage.getItem(key));
  }

  function setData(key, val) {
    localStorage.setItem(key, JSON.stringify(val));
  }

#Using `localStorage`* to adjust iFrame height by its content

**Note:** This applies to all pages meeting the requirements of **Same Origin Policy**.

The **Web Storage API** has its own **Event Object** called `Storage` which will trigger whenever the `localStorage` is used. Although **`Event.currentTarget`** is `Window`, an important detail to remember is that the **event handler** must be on another page. So if some data from inside of an iframe was stored there, we can listen and handle the `storage` event from its parent page.

On the parent page [index.html](index.html):

1. An <kbd>ADD</kbd> and <kbd>DEL</kbd> button, when clicked, will add/delete a `div.box` inside `section#dock` which is in the page [iframe.html](iframe.html) which is also the child page within the iframe.

On the child page [iframe.html](iframe.html):

2. Upon each click of `button#add`, the `div.box`es will stack and increase the height of its `parentElement` (`section#dock`). 

3. There's also an event handler set up that reaches up through the iframe into the parent page and listens for clicks on `form#ui`. When the user clicks any button on `form#ui`, in addition to steps #1 and #2, another callback is invoked on the child page:
 
  - The height of `section#dock` is stored in `localStorage`, which in turn triggers the `storage` event and callback on the parent page is invoked.
     
  - It gets the height of `section#dock` stored in `localStorage`...
    - ...displays the value in `output#view`...
    - ...changes `iframe#frame` height to the value


*For the sake of breverty `sessionStorage` is not included in this topic.