title: Bind iframe height to its content height with jQuery
body: <p>I am trying to pick up the <code>resize</code> event of a jQuery UI <code>sortable</code>, or any event that gets triggered, while <strong>adding/removing</strong> its elements. This should cause the <code>iframe</code> to change its size. This should be triggered on <strong>every resize</strong> and not only on load, any Javascript code should be in the parent page.</p>
  
  <p>None of the approaches listed here solved my problem yet. When I tried to create a <code>resize</code> event listener for both the <code>contentWindow</code> and <code>content</code> the event does not get picked up.</p>
  
  <p>How should this be done with jQuery? >> <a href="https://jsfiddle.net/piglin/0d3mq19u/15/" rel="nofollow">JSFIDDLE</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
    //SKIP SAME ORIGIN POLICY
    $('#frame').contents().find('html body').html($('#content').html());
    $("link[type='text/css']").clone().appendTo($("#frame").contents().find("head"));
    $("style[type='text/css']").clone().appendTo($("#frame").contents().find("head"));
    $('#content').remove();
  
    //PREPARE INTERFACE
    $('#frame').contents().find('#sortable').sortable();
    $('#frame').contents().find('#add').click(function() {    
      $('#frame').contents().find('#sortable').append('&lt;li&gt;ITEM&lt;/li&gt;');
    });
    $('#frame').contents().find('#remove').click(function() {
      $('#frame').contents().find('.sortable li:last-child').remove();
    });
  
    //1. SOLUTION EVENT LISTENERS - NOT WORKING
    var iframe = $('#frame').contents();
    console.log("IFRAME",iframe);
    iframe.on('resize', function() {
      console.log("iframe window resize event");
    }); 
    var iframeBody = $('#frame').contents().find('body');
    console.log("BODY",iframeBody);
    iframeBody.on('resize', function() {
      console.log("iframe body resize event");
    });
    var iframeSortable = $('#frame').contents().find('#sortable');
    console.log("SORTABLE",iframeSortable);
    iframeSortable.on('resize', function() {
      console.log("iframe sortable resize event");
    });
    
    //2. SOLUTION IFRAME RESIZER JQUERY PLUGIN - NOT WORKING
    $('#frame').contents().find('body').append('&lt;scr' + 'ipt type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.3/iframeResizer.contentWindow.js"&gt;&lt;/scr' + 'ipt&gt;');
    iFrameResize({log:true});
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.3/iframeResizer.js"&gt;&lt;/script&gt;
  
  &lt;!--3. SOLUTION HTML ATTRIBUTES - NOT WORKING--&gt;
  &lt;div style="margin:0px;padding:0px;overflow:hidden"&gt;
    &lt;iframe id="frame" src="https://fiddle.jshell.net" sandbox="allow-same-origin allow-scripts" style="width:100%; height: 100%; overflow:hidden" frameborder="1" scrolling="no" height="100%" width="100%" seamless="seamless"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
    &lt;a href="javascript:void(0);" id="add"&gt;Add&lt;/a&gt;
    &lt;a href="javascript:void(0);" id="remove"&gt;Remove&lt;/a&gt;
    &lt;ul id="sortable" class="sortable"&gt;
      &lt;li&gt;ITEM&lt;/li&gt;
      &lt;li&gt;ITEM&lt;/li&gt;
      &lt;li&gt;ITEM&lt;/li&gt;
      &lt;li&gt;ITEM&lt;/li&gt;
      &lt;li&gt;ITEM&lt;/li&gt;
      &lt;li&gt;ITEM&lt;/li&gt;
      &lt;li&gt;ITEM&lt;/li&gt;
      &lt;li&gt;ITEM&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>