vwochnik/iframe.html

## iframe.html
<!DOCTYPE html>
<meta charset="utf-8">
<h1>Iframe content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod doloribus a
modi ullam officia dolore, ea quisquam est. Asperiores, voluptates similique
impedit aperiam, dignissimos nihil possimus itaque ex tenetur laborum!</p>
<p>Quae ipsa, excepturi temporibus ullam quasi corrupti possimus? Unde
provident, non, nulla molestiae veniam reprehenderit soluta. Consequuntur
inventore repellendus numquam, facere, nostrum et officia suscipit fugiat
aperiam modi harum beatae.</p> <p>Corrupti aut aspernatur ut quaerat maiores
culpa ipsa veritatis facere, neque consectetur fugiat molestias sit provident
iste expedita consequuntur alias cupiditate, qui eius tempora ipsum, sapiente
minus? Cum, voluptatibus, vel.</p>
<style>
html { font-size: 14px; }
body { font-family: Verdana, Arial, sans-serif; background-color: #eef; color: #334; }
</style>
<script>
  (function(window, document) {
    var requestAnimationFrame = window.requestAnimationFrame       ||
                                window.webkitRequestAnimationFrame ||
                                window.mozRequestAnimationFrame    ||
                                window.setTimeout;

    function interval(fn, delay) {
      var now = Date.now(),
          cb = function() {
            interval(fn, delay);
            fn();
          },
          diff;
      requestAnimationFrame(function() {
        diff = Date.now() - now;
        if (delay <= diff) {
          return void cb();
        }
        setTimeout(cb, delay - diff);
      });
    }

    function event(elem, evnt, fn) {
      if (elem.addEventListener) {
        elem.addEventListener(evnt, fn, false);
      } else if (elem.attachEvent) {
        elem.attachEvent("on"+evnt, fn);
      }
    }

    function ready(fn) {
      if (typeof document.readyState === "undefined") {
        return void setTimeout(fn);
      }

      if (/oade|ompl/.test(document.readyState)) {
        return void fn();
      }

      setTimeout(function() {
        ready(fn);
      });
    }

    function sendFrameSize(target, targetOrigin, token) {
      var oldW, oldH;
      return function() {
        var w = document.documentElement.offsetWidth,
            h = document.documentElement.offsetHeight,
            msg = ["framesize", token, w, h].join(';');
        //if ((oldW !== w) || (oldH !== h)) {
          oldW = w;
          oldH = h;
        	target.postMessage(msg, targetOrigin);
        //}
      };
    }

    event(window, "message", function(evt) {
      if (/^frameinit;/.test(evt.data)) {
        var params = evt.data.split(';').slice(1),
            origin = params[0], token = params[1];

        var fn = sendFrameSize(evt.source, origin, token);
        event(window, "resize", fn);
        ready(fn);
        interval(fn, 500);
      }
    });
  })(window, document);
</script>

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive iFrame test</title>
<style>
html {
  font-size: 10px;
}
body {
  margin: 0;
}

.wrapper {
  margin: 2rem auto;
  max-width: 64rem;
}

.iframe {
  border: none;
  width: 100%;
  height: auto;
}
</style>
</head>
<body>
<div class="wrapper">
  <iframe id="iframe" class="iframe" src="https://rawgit.com/vwochnik/0ac0580740621936880578da87839b3f/raw/iframe.html"></iframe>
</div>
<script>
  (function(window, document) {
    function id(idstr, fn) {
      var el = document.getElementById(idstr);
      if (el !== null) { fn(el); }
    }

    function event(elem, evnt, fn) {
      if (elem.addEventListener) {
        elem.addEventListener(evnt, fn, false);
      } else if (elem.attachEvent) {
        elem.attachEvent("on"+evnt, fn);
      }
    }

    function origin(location) {
      return location.origin || location.protocol + "//" + location.host;
    }

    id("iframe", function(iframe) {
      var token;

      event(iframe, "load", function() {
        token = Date.now().toString(32);
        var msg = ['frameinit', origin(window.location), token].join(';');
        iframe.contentWindow.postMessage(msg, iframe.src);
      });

      event(window, "message", function(evt) {
        if (/^framesize;/.test(evt.data)) {
          var params = evt.data.split(';').slice(1);
          if (token === params[0]) {
            iframe.style.height = params[2] + "px";
          }
        }
      });
    })
  })(window, document);
</script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<h1>Iframe content</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod doloribus a
	modi ullam officia dolore, ea quisquam est. Asperiores, voluptates similique
	impedit aperiam, dignissimos nihil possimus itaque ex tenetur laborum!</p>
	<p>Quae ipsa, excepturi temporibus ullam quasi corrupti possimus? Unde
	provident, non, nulla molestiae veniam reprehenderit soluta. Consequuntur
	inventore repellendus numquam, facere, nostrum et officia suscipit fugiat
	aperiam modi harum beatae.</p> <p>Corrupti aut aspernatur ut quaerat maiores
	culpa ipsa veritatis facere, neque consectetur fugiat molestias sit provident
	iste expedita consequuntur alias cupiditate, qui eius tempora ipsum, sapiente
	minus? Cum, voluptatibus, vel.</p>
	<style>
	html { font-size: 14px; }
	body { font-family: Verdana, Arial, sans-serif; background-color: #eef; color: #334; }
	</style>
	<script>
	(function(window, document) {
	var requestAnimationFrame = window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.setTimeout;

	function interval(fn, delay) {
	var now = Date.now(),
	cb = function() {
	interval(fn, delay);
	fn();
	},
	diff;
	requestAnimationFrame(function() {
	diff = Date.now() - now;
	if (delay <= diff) {
	return void cb();
	}
	setTimeout(cb, delay - diff);
	});
	}

	function event(elem, evnt, fn) {
	if (elem.addEventListener) {
	elem.addEventListener(evnt, fn, false);
	} else if (elem.attachEvent) {
	elem.attachEvent("on"+evnt, fn);
	}
	}

	function ready(fn) {
	if (typeof document.readyState === "undefined") {
	return void setTimeout(fn);
	}

	if (/oade\|ompl/.test(document.readyState)) {
	return void fn();
	}

	setTimeout(function() {
	ready(fn);
	});
	}

	function sendFrameSize(target, targetOrigin, token) {
	var oldW, oldH;
	return function() {
	var w = document.documentElement.offsetWidth,
	h = document.documentElement.offsetHeight,
	msg = ["framesize", token, w, h].join(';');
	//if ((oldW !== w) \|\| (oldH !== h)) {
	oldW = w;
	oldH = h;
	target.postMessage(msg, targetOrigin);
	//}
	};
	}

	event(window, "message", function(evt) {
	if (/^frameinit;/.test(evt.data)) {
	var params = evt.data.split(';').slice(1),
	origin = params[0], token = params[1];

	var fn = sendFrameSize(evt.source, origin, token);
	event(window, "resize", fn);
	ready(fn);
	interval(fn, 500);
	}
	});
	})(window, document);
	</script>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Responsive iFrame test</title>
	<style>
	html {
	font-size: 10px;
	}
	body {
	margin: 0;
	}

	.wrapper {
	margin: 2rem auto;
	max-width: 64rem;
	}

	.iframe {
	border: none;
	width: 100%;
	height: auto;
	}
	</style>
	</head>
	<body>
	<div class="wrapper">
	<iframe id="iframe" class="iframe" src="https://rawgit.com/vwochnik/0ac0580740621936880578da87839b3f/raw/iframe.html"></iframe>
	</div>
	<script>
	(function(window, document) {
	function id(idstr, fn) {
	var el = document.getElementById(idstr);
	if (el !== null) { fn(el); }
	}

	function event(elem, evnt, fn) {
	if (elem.addEventListener) {
	elem.addEventListener(evnt, fn, false);
	} else if (elem.attachEvent) {
	elem.attachEvent("on"+evnt, fn);
	}
	}

	function origin(location) {
	return location.origin \|\| location.protocol + "//" + location.host;
	}

	id("iframe", function(iframe) {
	var token;

	event(iframe, "load", function() {
	token = Date.now().toString(32);
	var msg = ['frameinit', origin(window.location), token].join(';');
	iframe.contentWindow.postMessage(msg, iframe.src);
	});

	event(window, "message", function(evt) {
	if (/^framesize;/.test(evt.data)) {
	var params = evt.data.split(';').slice(1);
	if (token === params[0]) {
	iframe.style.height = params[2] + "px";
	}
	}
	});
	})
	})(window, document);
	</script>
	</body>
	</html>