2

現在、ajax と pushstate を使ってテストしています。私はまだそのトピックの初心者です。ここでの私の質問については、問題なく実行され、すべてがスムーズに機能するようになりました。

しかし、たとえば、次のように #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 が終了した後に 2 つのアクションを実行しますが、#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 呼び出しが要求されたときは通信を停止して、新しい呼び出しからの成功アニメーションに問題がないようにしてください」と伝えることは解決策でしょうか?

4

1 に答える 1

0

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
    });
});
于 2012-10-02T18:52:34.157 に答える