Bind высота IFrame его высота содержимого с JQuery

Question

Я пытаюсь подобрать resize событие в JQuery UI sortable или любого события, которое получает срабатывает, а добавление/удаление его элементов. Это должно привести к изменению размера iframe. Это должно быть вызвано на каждый размер и не только при загрузке, любой Javascript-код должен быть на родительской странице.

Ни один из подходов, перечисленных здесь, еще не решил мою проблему. Когда я попытался создать прослушиватель событий resize как для contentWindow, так и для content, событие не получает.

Как это сделать с помощью 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. В своем ответе я подчеркнул, как они могут быть как вызваны из родительской страницы >>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); 
 
\t 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>