0

I am trying to pick up the resize event of a jQuery UI sortable, or any event that gets triggered, while adding/removing its elements. This should cause the iframe to change its size. This should be triggered on every resize and not only on load, any Javascript code should be in the parent page.

None of the approaches listed here solved my problem yet. When I tried to create a resize event listener for both the contentWindow and content the event does not get picked up.

How should this be done with 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>

1 Answer 1

0

The most native jQuery approach would be using the jQuery iFrame resize plugin. It supports a variety of events. A script needs to be ran on both the parent page and the iframe. In my answer I highlighted how they can be both called from parent page >> 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.