Skip to content

Instantly share code, notes, and snippets.

@vwochnik

vwochnik/iframe.html

Last active December 2, 2016 10:33
Show Gist options
  • Save vwochnik/cfcd96a2239f5cfb779eeb84bbbd2b05 to your computer and use it in GitHub Desktop.
Save vwochnik/cfcd96a2239f5cfb779eeb84bbbd2b05 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
iframe.html
<!DOCTYPE html>
<meta charset="utf-8">
<h1>Iframe content</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam et enim odio. Cum ea officiis itaque a, ratione, ipsum nobis unde vitae inventore nisi, veniam, iusto quod cupiditate ducimus labore!</span><span>Ipsa eius animi repellat nisi vitae id, dolor amet, obcaecati optio possimus tempore ad. Officia, facere tempore quo aliquam voluptate, est a fuga impedit debitis sed, modi officiis totam recusandae.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat autem voluptatibus accusantium eaque, cupiditate voluptatem quisquam libero eligendi, blanditiis voluptate illo, at vero officiis odio ullam quo. Esse, praesentium, ipsum.</span><span>Accusamus eos iure, magnam adipisci, saepe, numquam officiis dolores nam sunt praesentium ratione cumque harum ipsum fugiat doloremque eius temporibus facere quis aspernatur animi. Perspiciatis deserunt architecto non autem quibusdam!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit itaque dicta possimus atque aperiam, excepturi, qui autem nihil. Alias quos ullam, aliquid eaque magni, officia nobis maxime cumque quam doloribus?</span><span>Minus odio reprehenderit, sequi corporis veniam iure beatae ad ipsam nesciunt laboriosam eos architecto cumque! Magni eos fugit quam totam nobis iure minus, recusandae, deserunt consequatur perspiciatis, distinctio nulla laboriosam!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque neque minus consectetur unde vitae quas nesciunt nihil, libero assumenda ipsam, dolore repellendus dolor molestiae sunt nam omnis dolores cum deserunt.</span><span>Incidunt nemo perspiciatis voluptatibus fuga totam excepturi, possimus consequuntur porro officiis similique assumenda autem consequatur error dolor quas repellendus ipsum nam at beatae libero debitis a earum? Eaque omnis, porro?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos deleniti impedit assumenda laborum molestias doloribus id porro itaque aut qui eum, praesentium fuga sit ipsam maxime dolorem consequuntur est perspiciatis!</span><span>Consequatur molestiae quasi numquam eum placeat voluptatem. Beatae, sequi repellendus inventore odio nam minima. Cumque minus tempora sit reprehenderit non doloribus, eum dolor illum. Facilis temporibus voluptatem error, ea quaerat.</span></p>
<style>
html { font-size: 14px; }
body { font-family: Verdana, Arial, sans-serif; background-color: #eef; color: #334; }
</style>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive iFrame test</title>
<style>
html { font-size: 10px; }
body { margin: 0; font-size: 1rem; }
.wrapper { margin: 2rem auto; max-width: 64rem; }
</style>
</head>
<body>
<div class="wrapper">
<h1>Responsive iFrame test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni nam repudiandae ratione tempora excepturi perferendis laudantium dolor, facilis maiores, sapiente, deleniti numquam ab voluptatum laboriosam culpa nisi delectus! Soluta?</p>
<iframe id="iframe" frameborder="0" width="100%" height="200"></iframe>
<p>Ex harum distinctio, alias, ad et nemo commodi totam quo quidem dolores mollitia quod esse, beatae explicabo odio ipsam pariatur rem. Laborum aut officia sint, pariatur, neque voluptates facilis quo.</p>
</div>
<script>
(function(window, document) {
var raf = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.setTimeout;
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 get(url, cb, err) {
var req;
req = new XMLHttpRequest();
if (!("withCredentials" in req)) {
if (window.XDomainRequest) {
req = new XDomainRequest();
} else {
return void err();
}
}
req.open('GET', url, true);
req.onerror = err;
req.onload = function() {
if (req.status !== 200) {
return void err();
}
cb(req.responseText);
};
req.send();
}
var ifsrc = "https://rawgit.com/vwochnik/cfcd96a2239f5cfb779eeb84bbbd2b05/raw/91cea1289d3ef15ae84f76a63b79f69913cc6de2/iframe.html";
id("iframe", function(iframe) {
var iwindow = iframe.contentWindow,
idocument = iwindow.document,
iheight;
function updateHeight() {
var height = idocument.documentElement.offsetHeight;
if (height !== iheight) {
iframe.style.height = height + "px";
iheight = height;
raf(updateHeight);
} else {
setTimeout(function() {
raf(updateHeight);
}, 200);
}
}
get(ifsrc, function(html) {
idocument.write(html);
idocument.documentElement.style.overflow = 'hidden';
idocument.body.scroll = "no";
updateHeight();
}, console.error.bind(console));
});
})(window, document);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment