iframe加載/就緒事件觸發行爲的問題（jQuery）

我有一個管理面板，我想上傳與產品關聯的圖片。我已將上傳分爲iframe和將圖片預覽分隔到另一個iframe，因此我無需在每次提交表單時重新加載整個頁面。現在它看起來像這樣（僅供參考添加邊框）：iframe加載/就緒事件觸發行爲的問題（jQuery）

enter image description here

我想：

由於兩個I幀的高度是可變的（這取決於照片的數量在第二種情況下，反饋消息在上載完成後顯示在拳頭上）：設置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（）永遠不會被觸發。即使我得到警報，新的高度也沒有設置。
這是我從警報獲得下的「控制點」：

在頁面加載，第一次：

enter image description here

在頁面加載，第二次：

enter image description here

提交後：

enter image description here

來源

2012-02-07 Sandra

編輯了一些東西，因爲我意識到我沒有包含幻燈片.php中的js文件^^ U但其他問題依然存在。 – Sandra 2012-02-07 13:45:31

您是否考慮過將jQuery添加到iframe頁面並使用一個小腳本來觸發父級中的自定義「loadiframe」事件？ – 2012-02-07 13:47:22

這是我工作跨瀏覽器的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);

來源

2012-02-07 12:39:23 sidonaldson

iframe加載/就緒事件觸發行爲的問題（jQuery）

回答

相關問題