在我的工作（内部网） - 我有有很多的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？

回答

码已更新

相关问题