Действия при возникновении проблем при загрузке / готовности события iframe (jquery)

Question

У меня есть административная панель, куда я хочу загрузить изображения, связанные с продуктом.Я разделил загрузку в iframe и предварительный просмотр изображения с другим iframe, поэтому мне не нужно перезагружать всю страницу каждый раз при отправке формы.Прямо сейчас это выглядит так (добавлена ​​граница для справки):

Я бы хотел:

• Поскольку высота обоих фреймов равнапеременная (зависит от количества картинок в секунду, и после первого закачки появляется сообщение обратной связи): установите высоту фрейма в соответствии с высотой содержимого тела.
• Показать gif индикатора выполнения после отправки формы загрузки и скрыть ее после завершения загрузки рамки.
• Обновить кадр предварительного просмотра после завершения загрузки формы загрузки после отправки формы, чтобы он отображалдобавлено новое изображение.

Мой код выглядит следующим образом:

HTML:

<p>
Subir imagen:
<span class="loading_bar"></span><br />
<iframe name="upload_iframe" class="upload_iframe" src="upload.php" scrolling="no"></iframe>
</p>

<p>
<iframe name="slideshow_iframe" class="slideshow_iframe" src="slideshow.php" scrolling="no"></iframe>
</p>

Javascript:

//<!--
$(document).ready(function(){
    // ------------------ UPLOAD ------------------

    // On any frame load
    $("iframe").load(function() {
        // Change frame's height to be the same as the contents body's height
        var iframe_height = $(this).contents().find('body').height();
        $(this).height(iframe_height);
        // Control point
        alert("Frame: "+$(this).attr("class")+" | Content height: "+iframe_height+" | Frame height: "+$(this).height());
    });

    // On "iframe_upload" load
    $("iframe.upload_iframe").load(function() {
        // Hide progress bar
        $(this).prev("span.loading_bar").hide();
        // Reload "iframe_slideshow"
        $("iframe.upload_slideshow").attr("src",$("iframe.upload_slideshow").attr("src"));
    });

    // On "select file" change
    $(".upload_form_upload").change(function() {
        var parent_element = "#"+$(this).closest("form").attr("id");
        // Show progress bar
        $(parent_element+" span.loading_bar", parent.document).show();
        // Submit upload form
        $(this).closest("form").submit();
    });
}); 
//--> 

Теперь проблема:

• Действия под нагрузкой никогда не запускаются, ни при первой загрузке сайта, ни при отправке формы.
• Если я изменяю .load ()для .ready (), когда на сайт загружено все внутри$ ("iframe"). ready () {срабатывает дважды для каждого iframe, и то, что находится ниже $ ("iframe.upload_iframe"). ready () никогда не срабатывает.Несмотря на то, что я получаю оповещение, новая высота не устанавливается.
• Это то, что я получаю из оповещения в «Контрольной точке»:

При загрузке страницы в первый раз:

При загрузке страницы во второй раз:

После отправки:

Answer 1

Это мой скрипт изменения размера iframe, который работает в кросс-браузерном режиме. Надеюсь, это поможет!

//get iframe
var iframe = $('iframe')[0];
//get iframe body (IE?)        
var iframeBody = (iframe.contentDocument) ? iframe.contentDocument.body : iframe.contentWindow.document.body;
//works out the new height by matching the offsetHeight and scrollHeight
var height = (iframeBody.scrollHeight < iframeBody.offsetHeight) ? iframeBody.scrollHeight : iframeBody.offsetHeight;
//sets the new height on the iframe
$(iframe).height(height);