Ajax请求:等待iframe完全加载或防止影响Ajax成功动画

Question

我目前正在测试ajax和pushstate。我对那个话题还是个初学者。关于我的问题，我得到了很好的运行和一切顺利的帮助。

但是，例如，当我在#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完成后执行两个操作，如果我在#内容中嵌入了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调用时，请停止任何通信，这样就不会给新调用的成功动画带来麻烦"是一个解决方案吗？

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