使用 jQuery 将 iframe 高度绑定到其内容高度

Question

我正在尝试获取 jQuery UI sortable 的 resize 事件，或任何被触发的事件，同时添加/删除其元素。这应该会导致iframe 更改其大小。这应该在每次调整大小时触发，不仅在加载时，任何 Javascript 代码都应该在父页面中。

这里列出的方法都没有解决我的问题。当我尝试为contentWindow 和content 创建resize 事件侦听器时，该事件不会被拾取。

这应该如何用 jQuery 来完成？ >>JSFIDDLE

$(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('<li>ITEM</li>');
  });
  $('#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('<scr' + 'ipt type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.3/iframeResizer.contentWindow.js"></scr' + 'ipt>');
  iFrameResize({log:true});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.3/iframeResizer.js"></script>

<!--3. SOLUTION HTML ATTRIBUTES - NOT WORKING-->
<div style="margin:0px;padding:0px;overflow:hidden">
  <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"></iframe>
</div>

<div id="content">
  <a href="javascript:void(0);" id="add">Add</a>
  <a href="javascript:void(0);" id="remove">Remove</a>
  <ul id="sortable" class="sortable">
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
  </ul>
</div>

Answer 1

最原生的 jQuery 方法是使用 jQuery iFrame 调整大小插件。它支持各种事件。需要在父页面和 iframe 上运行脚本。在我的回答中，我强调了如何从父页面调用它们 >> JSFIDDLE

$(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('<li>ITEM</li>');
  });
  $('#frame').contents().find('#remove').click(function() {
    $('#frame').contents().find('.sortable li:last-child').remove();
  });

  //SOLUTION - JQUERY IFRAME RESIZE PLUGIN
  var script = frame.contentWindow.document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.3/iframeResizer.contentWindow.js";
  frame.contentWindow.document.body.appendChild(script);
	iFrameResize({
    log: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.3/iframeResizer.js"></script>

<iframe id="frame" src="https://fiddle.jshell.net" sandbox="allow-same-origin allow-scripts"></iframe>

<div id="content">
  <a href="javascript:void(0);" id="add">Add</a>
  <a href="javascript:void(0);" id="remove">Remove</a>
  <ul id="sortable" class="sortable">
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
  </ul>
</div>