Fancybox：加载 iframe 内容时显示加载动画

发布于 2024-09-18 00:16:04 字数 360 浏览 7 评论 0原文

当使用 jQuery 和 fancybox 在 iframe 内显示另一个页面时，我想在 iframe 内的页面显示加载动画正在加载。当使用 ajax 加载内容时这是可能的，但在使用 iframe 时我想要同样的事情。是否可以在 iframe 中的内容加载时从 api 获取加载动画？

这是在 fancybox 中显示 iframe 的代码：

var $fancybox = $("#openPopup").fancybox({
    'type': 'iframe',
    'href': "Test.php"
});

原文

When using jQuery and fancybox for showing another page inside an iframe I want to show the loading animation while the page inside the iframe is loading. This is possible when using ajax to load content but I want the same thing when using iframe. Is it possible from the api to also get the loading animation while the content in the iframe is loading?

This is the code for showing the iframe in the fancybox:

var $fancybox = $("#openPopup").fancybox({
    'type': 'iframe',
    'href': "Test.php"
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

离去的眼神 2024-09-25 00:16:05

FancyBox 提供了开箱即用的功能。
当您单击按钮或链接打开 iframe 时，Fancybox 会将 div#fancybox_loading 附加到正文，并在 iframe 完全加载后删除该 div。
您只需要确保 div#fancybox-loading 为“display:block”。

图像显示 div#fancybox-loading

回复收藏 0 原文

月朦胧 2024-09-25 00:16:05

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

no-javascript, react ready solution support for every browser (html 1.0)

#iframe{
    background:#ffffff url("path/to/your/gif") no-repeat 50% 50% ;
}

Another approach with same support but no extra request:

#iframe{
    background:#ffffff url("data:image/gif;base64,yout-base-64-code") no-repeat 50% 50% ;
}

回复收藏 0 原文

み零 2024-09-25 00:16:04

您可以简单地将带有 CSS 的背景附加到下面的图层，当 iframe 准备就绪时，它将与微调器重叠您的背景

#fancybox-outer{
    background:#fff url("$path to animation/ajax-loader.gif") no-repeat 50% 50% !important;
}

You can simply attach backgroung with CSS to layer below, that when iframe will be ready it will overlap your backgroung with spinner

#fancybox-outer{
    background:#fff url("$path to animation/ajax-loader.gif") no-repeat 50% 50% !important;
}

回复收藏 0 原文

柒夜笙歌凉 2024-09-25 00:16:04

这对我有用：

'onComplete' : function(){
            jQuery.fancybox.showActivity();
            jQuery('#fancybox-frame').load(function(){
                jQuery.fancybox.hideActivity();
            });

        }

This worked for me:

'onComplete' : function(){
            jQuery.fancybox.showActivity();
            jQuery('#fancybox-frame').load(function(){
                jQuery.fancybox.hideActivity();
            });

        }

回复收藏 0 原文

我恋#小黄人 2024-09-25 00:16:04

我也有同样的问题。以下是我在阅读史蒂夫的回答后实施问题解决方案的方法。

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/。

I had the same question. Here's how I implemented a solution to the problem after reading Steve's answer.

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

});

Of course this won't work for external URLs with the X-Frame-Options HTTP header set. For example https://www.google.com.au/.

回复收藏 0 原文

泪是无色的血 2024-09-25 00:16:04

不显示加载动画的原因是，对于此类内容，fancybox 不知道任何加载概念；它只是以指定的尺寸覆盖一个 iframe，一旦完成，就 fancybox 而言，工作就完成了。

然后，iframe 继续加载按照正常浏览器功能指定的内容。

我想您为启用加载程序而必须付出的努力将远远超过拥有它的好处。

无论如何，问题动态插入的iframe中的jQuery .ready应该有所帮助你在路上；它向您展示了如何将回调推送到 iframe 的加载事件中，您可以在单击添加加载微调器后使用该回调来删除加载微调器？

当然，获得对 fancybox 覆盖的 iframe 的实际控制还存在进一步的复杂性，希望 API 能对此有所帮助，但我再次不确定这是否值得付出努力。

回复收藏 0 原文

白况 2024-09-25 00:16:04

http://panduwana.wordpress.com/2010/05/09/ fancybox-iframe-patch/

这应该有帮助:-)
它是原始 Fancybox（最新版本，BTW）的修改版。

小心！根据我从描述中读到的内容，这不适用于跨域 iFrame。

回复收藏 0 原文

流心雨 2024-09-25 00:16:04

您可以将处理程序附加到 fancybox iframe 的加载事件并隐藏加载程序。

$('<a href="url_here"> </a>').fancybox({
        type: 'iframe'
        onComplete: function(){
            $('#fancybox-frame').load(function(){
                $.fancybox.hideActivity();
            });
        }
    }).click();

    $.fancybox.showActivity();

You can attach a handler to the fancybox iframe's load event and hide the loader.

$('<a href="url_here"> </a>').fancybox({
        type: 'iframe'
        onComplete: function(){
            $('#fancybox-frame').load(function(){
                $.fancybox.hideActivity();
            });
        }
    }).click();

    $.fancybox.showActivity();

回复收藏 0 原文

我也只是我 2024-09-25 00:16:04

这篇帖子中有更多答案。不幸的是，我找不到“真正的”解决方案，但其他人正在替换页面覆盖 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) 源时也注意到，它看起来像 fancybox 使用加载事件如果 autoSize 与 iFrame 一起使用，则显示/隐藏加载动画，尽管我尚未测试该理论。

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

There are more answers in this SO post. Unfortunately I cannot find a "real" solution, but other people are replacing the page overlay CSS (#fancybox-overlay) to include a spinner. Then when the iframe'd page eventually loads it's placed over the spinner.

EDIT:

I gave up on using fancybox to handle the loading image and thought I'd share my solution. I added an absolutely positioned loading gif of my own to the page, show it just before calling fancybox and I can capture the iframe loaded event with JQuery to hide the spinner, like so:

$( "#progressIcon" ).show();

$.fancybox.open( { type: "iframe", minWidth: 990, minHeight: 690, href: URL, title: "Basket" } );

$( "iframe" ).load( function ()
{
    $( "#progressIcon" ).hide();
} );

if you're not calling fancybox manually like I am, I assume you could just as easily attach this code through a click event, i.e:

$('.fancybox').fancybox();
$('.fancybox').click( /* ... */ );

I've also noticed while playing in the fancybox (v2.0.6) source that it looks like fancybox uses the load event to show/hide the loading animation if autoSize is used with an iFrame, though I haven't tested the theory.

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

回复收藏 0 原文

烧了回忆取暖 2024-09-25 00:16:04

Fancybox 2 现已存在，并提供开箱即用的功能。

回复收藏 0 原文

花间憩 2024-09-25 00:16:04

这是用 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();
                                });
                            }
                    })

This is solve with 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();
                                });
                            }
                    })

回复收藏 0 原文

~没有更多了~