无法触发 iframe 加载/就绪事件 (jquery) 上的操作

Question

我有一个管理面板，我想在其中上传与产品相关的图片。我已将上传到 iframe 和图片预览分离到另一个 iframe，这样我就不必在每次提交表单时重新加载整个页面。现在它看起来像这样（添加边框以供参考）：

我想：

• 由于高度两个 iframe 的高度都是可变的（取决于第二个 iframe 的图片数量，上传后会在第一个 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);