jquery - Ajax请求: Wait till iframe fully loaded or prevent affecting ajax success animations

Question

我目前正在使用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 调用时停止任何通信，这样就不会影响新调用的成功动画”将是一个解决方案？

Answer 1

您可以使用 javascript 将 iframe 添加到 DOM，然后绑定(bind)您的 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
    });
});