• index.js

  • Register the ServiceWorker limiting its action to those URL starting by controlled. The scope is not a path but a prefix. First, it is converted into an absolute URL, then used to determine if a page is controlled by testing it is a prefix of the request URL.

    navigator.serviceWorker.register('service-worker.js', {
      scope: './controlled'
    var referenceIframe = document.getElementById('reference');
    var sampleIframe = document.getElementById('sample');
  • Fix heights every time the iframe reload.

    referenceIframe.onload = fixHeight;
    sampleIframe.onload = fixHeight;
  • Compute the correct height for the content of an iframe and adjust it to match the content.

    function fixHeight(evt) {
      var iframe = evt.target;
      var document = iframe.contentWindow.document.documentElement;
      iframe.style.height = document.getClientRects()[0].height + 'px';
  • Specifically for the cookbook site :(

      if (window.parent !== window) {
        window.parent.document.body.dispatchEvent(new CustomEvent('iframeresize'));

Has it been useful?

Tell us what you think of this recipe by leaving a comment!