Question

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

这里列出的方法都没有解决我的问题。当我尝试为iframe和resize创建contentWindow事件监听器时，事件不会被接收。

如何使用jQuery完成这项工作？＆GT;＆GT; JSFIDDLE

＆＃13;

content

＆＃13;

$(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});

});

＆＃13;

Answer 1

最原生的jQuery方法是使用jQuery iFrame resize插件。它支持各种活动。需要在父页面和iframe上运行脚本。在我的回答中，我强调了如何从父页面调用它们＆gt;＆gt; 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>

使用jQuery

1 个答案: