当使用 jQuery 和 fancybox 在 iframe 内显示另一个页面时，我想在 iframe 内的页面加载时显示加载动画。这在使用 ajax 加载内容时是可能的，但在使用 iframe 时我想要同样的东西。是否可以在 iframe 中的内容加载时从 api 中获取加载动画？
这是在fancybox中显示iframe的代码：
var $fancybox = $("#openPopup").fancybox({
'type': 'iframe',
'href': "Test.php"
});
【问题讨论】：
标签： jquery iframe loading fancybox
您可以简单地将带有 CSS 的背景附加到下面的图层，当 iframe 准备好时，它将与您的背景与微调器重叠
#fancybox-outer{
background:#fff url("$path to animation/ajax-loader.gif") no-repeat 50% 50% !important;
}
【讨论】：
这对我有用：
'onComplete' : function(){
jQuery.fancybox.showActivity();
jQuery('#fancybox-frame').load(function(){
jQuery.fancybox.hideActivity();
});
}
【讨论】：
我也有同样的问题。以下是我在阅读史蒂夫的回答后实施解决问题的方法。
HTML：
<a id="myLink" href="/slow-loading-url">My Link</a>
JavaScript：
$(document).ready(function() {
$("#myLink").click(function(event) {
$.fancybox.open(this.href, {type: "iframe"});
$.fancybox.showLoading();
$("iframe.fancybox-iframe").load(function() {
$.fancybox.hideLoading();
});
event.preventDefault();
});
});
当然，这不适用于设置了 X-Frame-Options HTTP 标头的外部 URL。例如https://www.google.com.au/。
【讨论】：
没有显示加载动画的原因是fancybox没有任何加载的概念来处理这种内容；它只是在指定尺寸上覆盖一个 iframe，一旦完成，就fancybox 而言，工作就完成了。
iframe 然后继续加载按照正常浏览器功能指定的内容。
我想您为启用加载程序所付出的努力将远远超过拥有它的好处。
无论如何，jQuery .ready in a dynamically inserted iframe 的问题应该可以帮助您；它向您展示了如何将回调推送到 iframe 的加载事件中，您可以在单击添加加载微调器后使用它来移除加载微调器？
在实际控制fancybox 覆盖的iframe 时当然还有更多的复杂性，希望API 能对此有所帮助，但我再次不确定这是否值得。
【讨论】：
http://panduwana.wordpress.com/2010/05/09/fancybox-iframe-patch/
这应该会有所帮助:-) 这是对原始 Fancybox（最新版本，顺便说一句）的修改。
小心！根据我从描述中了解到的，这不适用于跨域 iFrame。
【讨论】：
您可以将处理程序附加到fancybox iframe 的加载事件并隐藏加载程序。
$('<a href="url_here"> </a>').fancybox({
type: 'iframe'
onComplete: function(){
$('#fancybox-frame').load(function(){
$.fancybox.hideActivity();
});
}
}).click();
$.fancybox.showActivity();
【讨论】：
this SO 帖子中有更多答案。不幸的是，我找不到“真正的”解决方案，但其他人正在替换页面覆盖 CSS (#fancybox-overlay) 以包含微调器。然后，当 iframe 页面最终加载时，它被放置在微调器上。
编辑：
我放弃了使用 fancybox 来处理加载图像，并认为我会分享我的解决方案。我在页面中添加了我自己的绝对定位加载gif，在调用 fancybox 之前显示它，我可以使用 JQuery 捕获 iframe 加载事件以隐藏微调器，如下所示：
$( "#progressIcon" ).show();
$.fancybox.open( { type: "iframe", minWidth: 990, minHeight: 690, href: URL, title: "Basket" } );
$( "iframe" ).load( function ()
{
$( "#progressIcon" ).hide();
} );
如果您不像我一样手动调用fancybox，我假设您可以通过点击事件轻松附加此代码，即：
$('.fancybox').fancybox();
$('.fancybox').click( /* ... */ );
我还注意到，在播放 fancybox (v2.0.6) 源代码时，如果 autoSize 与 iFrame 一起使用，fancybox 似乎使用加载事件来显示/隐藏加载动画，尽管我没有测试过理论。
if (type === 'iframe' && current.autoSize) {
F.showLoading();
F._setDimension();
F.inner.css('overflow', current.scrolling);
content.bind({
onCancel : function() {
$(this).unbind();
F._afterZoomOut();
},
load : function() {
F.hideLoading();
try {
if (this.contentWindow.document.location) {
F.current.height = $(this).contents().find('body').height();
}
} catch (e) {
F.current.autoSize = false;
}
F[ F.isOpen ? '_afterZoomIn' : '_beforeShow']();
}
}).appendTo(F.inner);
} else {
F.inner.append(content);
F._beforeShow();
}
【讨论】：
Fancybox 2 现已存在，并提供了开箱即用的功能。
【讨论】：
这是用 z-index 解决的
<style>
#fancybox-loading{z-index:99999;}
</style>
<script>
$.fancybox({
'href' :url,
'width' : 900,
'height' : 600,
'scrolling' : 'auto',
'type' : 'iframe',
'titleShow' : false,
'onComplete' : function() {
$.fancybox.showActivity();
$('#fancybox-frame').load(function() {
$.fancybox.hideActivity();
});
}
})
【讨论】：
FancyBox 提供了开箱即用的功能。 当您单击按钮或链接打开 iframe 时，Fancybox 会在正文中附加一个 div#fancybox_loading，并在 iframe 完全加载后删除该 div。 你只需要确保 div#fancybox-loading 是 'display:block'。
【讨论】：
no-javascript，对每个浏览器的反应就绪解决方案支持 (html 1.0)
#iframe{
background:#ffffff url("path/to/your/gif") no-repeat 50% 50% ;
}
具有相同支持但没有额外要求的另一种方法：
#iframe{
background:#ffffff url("data:image/gif;base64,yout-base-64-code") no-repeat 50% 50% ;
}
【讨论】：