Ajax 请求：等待 iframe 完全加载或防止影响 ajax 成功动画答案

【问题标题】：Ajax request: Wait till iframe fully loaded or prevent affecting ajax success animationsAjax 请求：等待 iframe 完全加载或防止影响 ajax 成功动画
【发布时间】：2012-07-22 14:44:17
【问题描述】：

我目前正在使用 ajax 和 pushstate 进行测试。我仍然是该主题的初学者。关于我的问题here，我得到了帮助，运行良好，一切顺利。

但是，例如，当我在我的#content 中嵌入来自 vimeo 的带有 iframe 的视频时，如下所示：

<iframe class="video" src="http://player.vimeo.com/video/video-id" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

.. ajax 会在 iframe 加载之前触发。

如果 iframe 在调用后仍然需要加载，这仍然可以，但即使在 iframe 加载完成后，它也会影响我的下一个 ajax 调用，并带有错误的转换。正如您在我的代码中看到的那样，我在 ajax 完成后执行了两个操作，如果我的 #content 中嵌入了 iframe，它们将无法正常工作。

所以我的问题是：

a.) 有没有办法确保在 ajax 成功触发之前所有元素（甚至来自第三方）都已完全加载？

b.) 如何防止（甚至加载的）iframe 影响我进一步的 ajax 调用和动画？

这是我现在使用的最终 ajax 代码：

$(function(){
    var replacePage = function(url) {

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();

                $("#content").promise().done(function(){                            
                    $('#content').html(html).fadeIn().promise().done(function(){    
                        $(".menue").slideUp();
                    });
                }); 
            }
        });
    }

    $('nav a').on('click', function(e){
        history.pushState(null, null, this.href);       
        replacePage(this.href);
        e.preventDefault();
        $("#content").hide();
        // maybe tell here to "stop all iframe communication" ?
    });


    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

有人告诉我，这取决于 iframe 如何连接到它的源。我想用 API 处理这个（我仍然需要学习）可以保证它可以正常工作。但在这种情况下，我说的是一个简单的嵌入代码，其中第三方有时甚至不提供 API。因此，至少告诉 iframe“在 ajax 调用后随时加载，但请在请求新的 ajax 调用时停止任何通信，这样你就不会因新调用而影响成功动画”是一个解决方案吗？

【问题讨论】：

标签： jquery ajax iframe

【解决方案1】：

您可以使用 javascript 将 iframe 添加到 DOM，然后绑定您的 ajax 内容：

$(function(){
    var iframe = '<iframe class="video" src="http://player.vimeo.com/video/video-id" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
    $("body").append(iframe, function(){
        //stuff to do after the iframe has loaded
    });
});

【讨论】：