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>