Facebookに埋め込まれた膨大な量のxhr/ajaxコールを防ぐiframe

Question

私はFacebookからのたくさんの社会埋め込みを持つブートストラップカルーセルを持っています。 問題は既にこの簡単なjsfiddleに表示されており、Facebookの埋め込みに起因するため、私はBootstrap Carouselの詳細には触れません。

https://jsfiddle.net/1L95vqn4/を読み込み、「ネットワークタブ」のChrome Devツールを見て「XHR」（キャッシュを無効にする）のフィルタを適用すると、34件のリクエストが表示され、さらに5.8Mbが読み込まれますFacebookのiframeによってajax経由で読み込まれた動画を「再生」します。

私は、これらのfb ajaxリクエストの重みを怠ると、つまり、ユーザーが「ビデオを再生」を押したときにそれらの呼び出しをロードするだけです。

私はウェブ上でこれについて何も見つけることができませんでした非常に驚いています。ツイッター埋め込みなどの他のソーシャルネットワークでは、ユーザーが再生を押すまで動画が読み込まれません。ビデオを再生する前に、Facebookの埋め込みケースの膨大な量のデータ（5Mb、15MB、30MBなど）が読み込まれます。

私の実際のより複雑な問題についての情報のためだけに注意してください：私のウェブサイトでは、実際にこのiframeを使用していませんが、スタイルを埋め込んでいます（jsfiddleまたはあまりにも複雑なためにajaxリクエストを入れることは不可能です）。私の実際の問題は、各スライドに20枚のFacebookブック埋め込み動画があるカルーセルを読み込むと、カルーセルを開くときにパフォーマンスが大幅に向上するということです。

$.ajax({ 
    url: 'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/1526674334016658', 
    dataType: 'jsonp', 
    cache: false, 
    success: function (data) { 
    try {   
     var embed_html = (data.html); 
     $('div#item1').html(embed_html); 
    } catch (err) { 
     console.log(err); 
    } 
    } 
}); 

遅延ロードすることにより、パフォーマンスに影響を与えるすべてこのAJAX XHRとのMP4を読み込む、または他の方法としてFBを防止する方法はありますか？

Answer 1

一般的な例のみ）：

var i = 0; 
 
function ajaxTest() { 
 
    // these HTTP methods do not require CSRF protection 
 
    $.get('http://my.site.com/somepage.html'); 
 
} 
 
jQuery.ajaxSetup({ 
 
    beforeSend: function (xhr, settings) { 
 
     i++; 
 
     if (i > 50) { 
 
      $('#res').html('Not allowed!</br>'); 
 
      return false; 
 
     } else { 
 
      $('#res').html('Allowed![' + i + ']</br>'); 
 
      return true; 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="ajaxTest()">Test</button> 
 
<div id="res"></div>

私はこれがあなたを助けてくれることを願っています:)

Answer 2

一時的な回避策データが直接読み込まれるのを防ぐ方法がないようで、再生アイコン付きのビデオのプレースホルダを表示することができますユーザーがそれをクリックすると、要素を置き換えるxhr呼び出しがトリガーされます。ユーザーが既に再生を要求されている場合、デフォルトではビデオが自動再生されません。

そのような何か（あなたが言ったように、本当にjsfiddleに動作しますが、あなたはアイデアを得ることができない）：以下のようにあなたがAjaxSetup使用することができます（しかし、これはある

$('#item1').on('click',() => { 
 

 
    $.ajax({ 
 
    url: 'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/1526674334016658', 
 
    dataType: 'jsonp', 
 
    cache: false, 
 
    success: data => $('div#item1').html(data.html), 
 
    }); 
 

 
})

.facebook-play { 
 
    background-image: url(https://www.facebook.com/rsrc.php/v3/yE/r/UxpyARHiHA2.png); 
 
    background-repeat: no-repeat; 
 
    background-size: 81px 224px; 
 
    background-position: 0 0; 
 
    height: 80px; 
 
    margin: -40px 0 0 -40px; 
 
    width: 80px; 
 
    
 
    position: absolute; 
 
    top: 50%; 
 
    left: 45%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="item1"> 
 
    <img src="https://cdn.pixabay.com/photo/2016/05/18/20/57/cat-1401557_1280.jpg" width=550 height=360 /> 
 
    <i class="facebook-play" /> 
 
</div>