Question

我目前正在测试ajax和pushstate。我仍然是这个话题的初学者。关于我的问题here我得到了很好的帮助，一切顺利。

但是当我在我的#content中使用iframe嵌入来自vimeo的视频时，就像这样：

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

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

如果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中，然后绑定您的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
    });
});

Ajax请求：等到iframe完全加载或阻止影响ajax成功动画

1 个答案: