在我的工作（內部網） - 我有有很多的I幀（所有我們的）一個aspx頁面。使用jQuery加載進度條的iframe？

每個IFRAME是由btnX設置（JS/jQuery的）（也有在aspx頁面的按鈕......一些集SRC於Iframe - 有些沒有）。

enter image description here

注意：progrssBAr是在主頁上...

目標：進度而IFRAME加載...

代碼：（起初myPageWrapper是display:none）

$('#myPageWrapper').on ('load','iframe',function() { $("#myProgressBar").hide();});

2問題：

我可以收聽iframes加載完成事件。但是showing ProgfressBar呢？我不想「點擊」編輯所有的BTN的事件 - 有這個[使用jquery]任何集中的解決方案？

我需要的東西做：

「當BTN設置src的iframe - 顯示myProgressBar」可能會出現

同時發生的事件：IFRAME 一個正在裝載了2分鐘（實施例） - 因此它顯示進度條，同時我按下另一個按鈕用於設置src到iframe的乙 - 這是加載速度非常快......一旦其加載 - 它隱藏進度（看我的代碼） - 但它不應該...但一個 didnt完成....

來源

2012-05-01 Royi Namir

也許一個愚蠢的問題，但你需要iframe？你也可以使用ajax來加載div。 –

這就是你需要的：http://easyxdm.net/wp/ - 跨域消息傳遞變得容易 –

@JPHellemons在我的Intranet工作....他們創建頁面並設置src ....有時候更好使用IFRAME - 你沒有在1頁的一切...你可以測試indevidual網頁等...我知道它對搜索引擎優化不好。但那不是問題 –

碼已更新

注意：因爲我收到的3升票我認爲這個代碼是幫助別人，其他那麼原來的OP;所以我決定更新代碼，以反映它的意思是開頭，因爲迄今爲止OP，我已經發現了他的問題是其他地方在他的代碼。

演示：主要頁面的http://so.devilmaycode.it/iframes-loading-with-progress-bar-using-jquery/

頭

 var iframes = [], progress = 0; 
     $(function() { 
      $pGressIndex = $('#progress-bar-indicator'); 
      $('#navigation a').click(function() { 

       var iframe_id = this.hash.split('#')[1]; 

       if (iframes.indexOf(iframe_id) === -1) { 

        $('#log').prepend('<p><strong>' + iframe_id + '</strong> is loading!</p>'); 

        iframes.push(iframe_id); 

        if (parseInt($pGressIndex.width()) == 960) { 
         $pGressIndex.removeAttr('style'); 
        } 

        var fW = (iframes.length > 1) ? (660 - (20 * iframes.length)) : 660; 

        $pGressIndex.animate({ 
         width : fW 
        }, 5000); 

        var iframe_page = iframe_id + '.html'; 

        if ($(this.hash).length != 0) { 
         $(this.hash).remove(); 
        } 

        $('<iframe>').attr({ 
         id : iframe_id, 
         src : iframe_page, 
         frameBorder : 0, 
         width : 960 
        }).appendTo('#iframes-wrapper'); 
       } 
       return false; 
      }); 
     });

底部主網頁：

  window.addEventListener("message", function(e) { 
       console.log(iframes); 
       var index = iframes.indexOf(e.data); 
       iframes.splice(index, 1); 
       if (iframes.length == 0) { 
        $pGressIndex.stop(true).animate({ 
         width : 960 
        }, 100); 
       } 
       $('#' + e.data).show(); 
      }, false);

機器人每個iframe頁面的tom：

  top.postMessage('frame-name-or-what-you-want', window.location.href);

來源

2012-05-01 16:41:04

我沒有語言來感謝你的努力和幫助。謝謝:) –

@羅伊納米爾：我要添加一些小的修復和評論來源..！你很歡迎，我很高興它幫助... –

@Royi Namir：示例源代碼完全評論 –

使用jQuery加載進度條的iframe？

回答

碼已更新

相關問題