Skip to content

Instantly share code, notes, and snippets.

@vwochnik vwochnik/iframe.html
Last active Sep 21, 2016

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.