danshultz/iframe-normalizer.js

## iframe-normalizer.js
/*globals $:true*/
(function () {
  var resizeInterval = 42;
  var resizeLimit = 1000 / 41 * 5;

  var initialize = function () {
    $('iframe[data-normalize]').each(function () {
      $(this).on('load', normalizeIframe);
    });
  };

  var normalizeIframe = function (e) {
    var iframe = e.target;
    var iframeDoc = $(iframe.contentDocument);

    var resizer = new Resizer(iframe, iframeDoc, resizeInterval, resizeLimit);
    resizer.interval =
      window.setInterval(function() { resizer.resize(); }, 42);
  };

  var Resizer = function (iframe, iframeDoc, interval, limit) {
    this.iframe = $(iframe);
    this.iframeDoc = iframeDoc;
    this.interval = interval;
    this.limit = limit;
    this.resizeCount = 0;
  };

  Resizer.prototype = {
    resize: function () {
      this.resizeCount++;
      if (this.resizeCount > resizeLimit) {
        window.clearInterval(this.interval);
      }
      this.resizeImpl();
    },
    resizeImpl: function () {
      var height = this.iframeDoc.height();
      this.iframe.css('height', height);
    }
  };

  $('document').ready(initialize);

}).call(this);

## iframe.html
<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox Example</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/srcdoc-polyfill.min.js"></script>
    <script type="text/javascript" src="/iframe-normalizer.js"></script>
  </head>
  <body>
    <div>
      <iframe srcdoc="<blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;><p>Ho Ho Ho - <a href=&quot;http://t.co/CZbJUl47gt&quot;>http://t.co/CZbJUl47gt</a> via <a href=&quot;https://twitter.com/Tackk&quot;>@Tackk</a> <a href=&quot;https://twitter.com/search?q=%23holidays2013&amp;src=hash&quot;>#holidays2013</a> <a href=&quot;https://twitter.com/search?q=%23GIF&amp;src=hash&quot;>#GIF</a></p>&mdash; ryan pastorelle (@rpastorelle) <a href=&quot;https://twitter.com/rpastorelle/statuses/415140679954608128&quot;>December 23, 2013</a></blockquote><script async src=&quot;//platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;></script>" frameborder="0" data-normalize="size" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
    </div>
  </body>
</html>

## srcdoc-polyfill.min.js
/*! srcdoc-polyfill - v0.1.1 - 2013-03-01
* http://github.com/jugglinmike/srcdoc-polyfill/
* Copyright (c) 2013 Mike Pennisi; Licensed MIT */
(function(t,e){var c,n,o=t.srcDoc,r=!!("srcdoc"in e.createElement("iframe")),i={compliant:function(t,e){e&&t.setAttribute("srcdoc",e)},legacy:function(t,e){var c;t&&t.getAttribute&&(e?t.setAttribute("srcdoc",e):e=t.getAttribute("srcdoc"),e&&(c="javascript: window.frameElement.getAttribute('srcdoc');",t.setAttribute("src",c),t.contentWindow&&(t.contentWindow.location=c)))}},s=t.srcDoc={set:i.compliant,noConflict:function(){return t.srcDoc=o,s}};if(!r)for(s.set=i.legacy,n=e.getElementsByTagName("iframe"),c=n.length;c--;)s.set(n[c])})(this,this.document);
	/globals $:true/
	(function () {
	var resizeInterval = 42;
	var resizeLimit = 1000 / 41 * 5;

	var initialize = function () {
	$('iframe[data-normalize]').each(function () {
	$(this).on('load', normalizeIframe);
	});
	};

	var normalizeIframe = function (e) {
	var iframe = e.target;
	var iframeDoc = $(iframe.contentDocument);

	var resizer = new Resizer(iframe, iframeDoc, resizeInterval, resizeLimit);
	resizer.interval =
	window.setInterval(function() { resizer.resize(); }, 42);
	};

	var Resizer = function (iframe, iframeDoc, interval, limit) {
	this.iframe = $(iframe);
	this.iframeDoc = iframeDoc;
	this.interval = interval;
	this.limit = limit;
	this.resizeCount = 0;
	};

	Resizer.prototype = {
	resize: function () {
	this.resizeCount++;
	if (this.resizeCount > resizeLimit) {
	window.clearInterval(this.interval);
	}
	this.resizeImpl();
	},
	resizeImpl: function () {
	var height = this.iframeDoc.height();
	this.iframe.css('height', height);
	}
	};

	$('document').ready(initialize);

	}).call(this);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sandbox Example</title>
	<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="/srcdoc-polyfill.min.js"></script>
	<script type="text/javascript" src="/iframe-normalizer.js"></script>
	</head>
	<body>
	<div>
	<iframe srcdoc="<blockquote class="twitter-tweet" lang="en"><p>Ho Ho Ho - <a href="http://t.co/CZbJUl47gt">http://t.co/CZbJUl47gt</a> via <a href="https://twitter.com/Tackk">@Tackk</a> <a href="https://twitter.com/search?q=%23holidays2013&src=hash">#holidays2013</a> <a href="https://twitter.com/search?q=%23GIF&src=hash">#GIF</a></p>— ryan pastorelle (@rpastorelle) <a href="https://twitter.com/rpastorelle/statuses/415140679954608128">December 23, 2013</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>" frameborder="0" data-normalize="size" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
	</div>
	</body>
	</html>
	/*! srcdoc-polyfill - v0.1.1 - 2013-03-01
	* http://github.com/jugglinmike/srcdoc-polyfill/
	* Copyright (c) 2013 Mike Pennisi; Licensed MIT */
	(function(t,e){var c,n,o=t.srcDoc,r=!!("srcdoc"in e.createElement("iframe")),i={compliant:function(t,e){e&&t.setAttribute("srcdoc",e)},legacy:function(t,e){var c;t&&t.getAttribute&&(e?t.setAttribute("srcdoc",e):e=t.getAttribute("srcdoc"),e&&(c="javascript: window.frameElement.getAttribute('srcdoc');",t.setAttribute("src",c),t.contentWindow&&(t.contentWindow.location=c)))}},s=t.srcDoc={set:i.compliant,noConflict:function(){return t.srcDoc=o,s}};if(!r)for(s.set=i.legacy,n=e.getElementsByTagName("iframe"),c=n.length;c--;)s.set(n[c])})(this,this.document);