使用jQuery加载进度条的iframe？ [英] Iframes loading with progress bar using jQuery?

问题描述

在我的工作（内联网） - 我有一个aspx页面，其中有许多iframe（我们所有的）。

每个iframe都被设置（js / jquery） btnX（在aspx页面中有很多按钮...一些将iframe设置为src - 有些不是）。

注意：progrssBAr位于主页面上...

em>

goal：progressBar while iframe is loading ...

code：
（at首先 myPageWrapper 是 display：none ）

<$ p $ （'load'，'iframe'，function（）{$（＃myProgressBar）。hide（）;}）;

<2>问题：

• 我可以听iframes加载完成事件。但是怎么样显示 ProgfressBar？
  i不想编辑所有btn的事件onclick - 是否有任何集中式解决方案[使用jquery]？

我需要这样做：

$ b 当btn将 src 设置为iframe时 - 显示 myProgressBar
$ b

• 同时发生的事件：iframe A 正在加载2分钟（示例） - 所以它显示进度条，同时我按下其他按钮，将 src 设置为iframe B - 加载速度非常快......一旦加载它，它隐藏ProgressBar（查看我的代码） - 但它不应该... A 尚未完成....

解决方案

代码更新

• 注意：由于我收到3张最高票数，我假设这段代码正在帮助别人， ;所以我决定更新代码以反映开始时的意图，因为到目前为止OP已经发现他的问题在他的代码中的其他地方。

示范： http://so.lucafilosofi.com/iframes-loading-with-progress-bar-using-jquery/

主页头

  var iframes = []，进度= 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>正在加载！< / p>'）; 
 
 iframes.push（iframe_id）; 
 
 if（parseInt（$ pGressIndex.width（））== 960）{
 $ pGressIndex.removeAttr（'style'）; $ b $ （660  - （20 * iframes.length））：660; 
 
 $ pGressIndex.animate（{b}} 
 
 var fW =（iframes.length> 1） 
 width：fW 
}，5000）; 
 
 var iframe_page = iframe_id +'.html'; 
 
 if（$（this.hash）.length！= 0）{
 $（this.hash）.remove（）; 
 
 $ b $（'< iframe>'）。attr（{
 id：iframe_id，
 src：iframe_page，
 frameBorder：0， 
 width：960 
}）。appendTo（'＃iframes-wrapper'）; 
} 
返回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页面的底部：

  top.postMessage（'frame-name-or-what-you-want'，window.location.href）; 
  

in my job (intranet)- I have an aspx page which has many Iframes ( all ours).

each iframe is being set(js/jquery) by btnX ( there are many buttons in the aspx page... some set src to iframes - some not).

notice : the progrssBAr is on the main page...

goal : progressBar while iframe is loading...

code : ( at first the myPageWrapper is display:none)

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

2 problems :

• i can listen to the iframes load finish event. but what about showing the ProgfressBar ? i dont want to edit all btn's event "onclick" - is there any centralized solution to this [using jquery]?

i need something that does :

"when btn sets the src to an iframe - show myProgressBar"

• simultaneous events can occur : iframe A is being loading for 2 min ( example) - so it shows the progress bar , meanwhile i pressed other button which sets src to iframe B - which is loading very fast... once its loaded - it hides the ProgressBar ( look at my code) - but it shouldnt...A didnt finish yet....

解决方案

CODE UPDATED

• NOTE: since i received 3 up-votes i assume that this code is helping someone else other then the original OP; so i decided to update the code to reflect what it was meant to be at the beginning, since so far the OP and i have discovered that his problem was somewhere else in his code.

demo: http://so.lucafilosofi.com/iframes-loading-with-progress-bar-using-jquery/

head of main page

        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;
            });
        });

bottom of main page:

            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);

bottom of each iframe page:

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

这篇关于使用jQuery加载进度条的iframe？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！