Skip to content

Instantly share code, notes, and snippets.

@MarkRoddy

MarkRoddy/inner.html

Created September 23, 2013 23:30
Show Gist options
  • Save MarkRoddy/6678417 to your computer and use it in GitHub Desktop.
Save MarkRoddy/6678417 to your computer and use it in GitHub Desktop.
Download ZIP
Only via Firefox: Javascript running inside an iframe that is hidden does not report the appropriate size of elements. If you remove style="display: none" from the iframe the correct size is reported.
Raw
inner.html
<html>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<body>
Inner HTML
<div class="some-container">Inside Container</div>
<script>
alert("Container width: " + $(".some-container").width());
alert("Container outer width: " + $(".some-container").outerWidth());
</script>
</body>
</html>
Raw
outer.html
<html>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<body>
Outer HTML
<iframe id="daframe" style="display: none" src="inner.html"></iframe>
<script type="text/javascript">
$("#daframe").on("load", function (e) {
$("#daframe").css("display", "block");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment