javascript 使用 jQuery 使用进度条加载 iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10397486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframes loading with progress bar using jQuery?
提问by Royi Namir
in my job (intranet)- I have an aspx page which has many Iframes ( all ours).
在我的工作（内联网）中 - 我有一个 aspx 页面，其中包含许多 Iframe（我们所有的）。
each iframe is being set(js/jquery) by btnX ( there are many buttons in the aspx page... some set src to iframes - some not).
每个 iframe 都由 btnX 设置（js/jquery）（aspx 页面中有很多按钮......有些将 src 设置为 iframe - 有些不是）。
notice : the progrssBAr is on the main page...
注意：progrssBAr 位于主页上...
goal : progressBar while iframe is loading...
目标：iframe 正在加载时的进度条...
code :
( at first the myPageWrapperis display:none)
代码：（起初myPageWrapper是display:none）
$('#myPageWrapper').on ('load','iframe',function () { $("#myProgressBar").hide();});
2 problems :
2个问题：
- i can listen to the iframes load finish event. but what about
showingthe ProgfressBar ? i dont want to edit all btn's event "onclick" - is there any centralized solution to this [using jquery]?
- 我可以收听 iframes 加载完成事件。但是
showingProgfressBar 呢？我不想编辑所有 btn 的事件“onclick”-[使用 jquery] 是否有任何集中的解决方案？
i need something that does :
我需要这样的东西：
"when btn sets the srcto an iframe - show myProgressBar"
“当 btn 设置src为 iframe 时 - 显示myProgressBar”
- simultaneous events can occur : iframe Ais being loading for 2 min ( example) - so it shows the progress bar , meanwhilei pressed other button which sets
srcto iframe B- which is loading very fast... once its loaded - it hides the ProgressBar ( look at my code) - butit shouldnt...Adidnt finish yet....
- 可能发生同时发生的事件：iframe A正在加载 2 分钟（示例）-因此它显示了进度条，同时我按下了设置
src为 iframe B 的其他按钮 -加载速度非常快...一旦加载-它会隐藏ProgressBar（看看我的代码） -但它不应该...... A 还没有完成......
回答by Luca Filosofi
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.
- 注意：
由于我收到了 3 个赞成票，因此我认为此代码正在帮助原始 OP 以外的其他人；所以我决定更新代码以反映它在开始时的意思，因为到目前为止 OP 和我发现他的问题在他的代码中的其他地方。
demo:http://so.lucafilosofi.com/iframes-loading-with-progress-bar-using-jquery/
演示：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:
每个 iframe 页面的底部：
top.postMessage('frame-name-or-what-you-want', window.location.href);
