Facebook'ta gömülü xhr/ajax çağrılarını engelle iframe

Question

Facebook'taki tüm videoları içeren çok sayıda sosyal gömülü bir Bootstrap Atlı Karıncaya sahibim. Bu basit jsfiddle numaralı sayfada zaten görünen ve Facebook gömülü olması nedeniyle Bootstrap Carousel'ın ayrıntılarına girmeyeceğim.

Bu sayfayı yüklerseniz: https://jsfiddle.net/1L95vqn4/ ve 'Ağ Sekmesinde' Chrome Dev araçlarına bakın ve 'XHR' (Önbellek devre dışıyken) üzerine filtre uygulayın, 34 istek göreceksiniz ve sizden önce 5.8Mb yükler. Facebook iframe tarafından ajax üzerinden yüklenen videoyu 'oynatın'.

Bu fb ajax isteğinin ağırlığını tembelleştirmek istiyorum, diğer bir deyişle, sadece "video oynat" tuşuna bastığında bu çağrıları yüklemek.

Bu konuda internette hiçbir şey bulamadığım için çok şaşırdım. Twitter gömülü gibi diğer sosyal ağlar, kullanıcı oynatma düğmesine basana kadar videoyu yüklemez. Facebook'u oynatmadan önce bile büyük miktarda veri gömülmüş durumdadır (5Mb, 15mb, 30mb ...).

Sadece benim daha karmaşık sorunum hakkında bilgi almak için unutmayın: web sitemde, aslında bu iframe'i kullanmıyorum ama stili yerleştirdim (ama jsfiddle veya ajax isteklerini benim için çok karmaşık değil). Ve benim asıl mesele şu ki her slaytta 20 tane facebook gömülü videonuzun yer aldığı bir atlı karıncaya yüklediğinizde, o zaman atlı karıncayı açtığınızda büyük bir performans isabeti ekler.

$.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); 
    } 
    } 
}); 

FB tembel yükleme bütün bu ajax xhr ve mp4 etkileyen performansı yük veya başka bir şekilde önlemek için herhangi bir yolu var mı?

Answer 1

aşağıda açıklanan gibi AjaxSetup kullanabilirsiniz (Ama bu

genel bir örnek için):

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>

Umarım bu size yardımcı olur :)

Answer 2

Verdiğim bir geçici çözüm, verilerin doğrudan yüklenmesini önlemenin bir yolu gibi görünmediğinden, videonuzun bir yer işaretini bir oynatma simgesiyle ve yalnızca bir kez kullanıcı üzerine tıklayarak öğeyi değiştirecek xhr çağrısını tetikler. Daha sonra, varsayılan oynatma durumunda, videoyu oynatmak için kullanıcının istediği takdirde, videoyu otomatik olarak etkinleştirebilirsiniz.

Bunun gibi bir şey (gerçekten jsfiddle içinde çalışamaz söyledi, ama fikir edinmek gibi):

$('#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>