Readme
Demo
index.js
server.js
service-worker.js

  • 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'
});

  • Load controlled and uncontrolled pages once the worker is active.

    navigator.serviceWorker.ready.then(reload);
var referenceIframe = document.getElementById('reference');
var sampleIframe = document.getElementById('sample');

  • Fix heights every time the iframe reload.

    referenceIframe.onload = fixHeight;
sampleIframe.onload = fixHeight;

  • Reload both iframes on demand.

    var reloadButton = document.querySelector('#reload');
reloadButton.onclick = reload;

  • Loads the controlled and uncontrolled iframes.

    function loadIframes() {
referenceIframe.src = './non-controlled.html';
sampleIframe.src = './controlled.html';
}

  • 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'));
}
}

  • Reload both iframes.

    function reload() {
referenceIframe.contentWindow.location.reload();
sampleIframe.contentWindow.location.reload();
}

Has it been useful?

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