Duża ilość iframe potrafi powodować problemy w działaniu strony responsywności itp. itd.
Zagnieżdżone iframe powodowały duża ilość requestów w krótkim czasie ( oraz powtarzające się requesty w odstępach czasu ).
Widok po kilku sekundach od załadowania strony bez żadnej optymalizacji.
![](https://darkgl.pl/wp-content/uploads/2018/07/Przechwytywanie.png)
Mimo powtarzającej się zawartości iframe skrypty oraz zawartość były ładowana jednocześnie.
Jednym ze sposobów optymalizacji tego było opóźnienie ładowania zawartości iframe wraz z kontrolą czy skrypty są nadal wykonywane w iframe.
Tutaj przychodzimy nam atrybut sandbox z HTML5 ( https://www.w3schools.com/tags/att_iframe_sandbox.asp ).
Sandbox pozwala na kontrolowanie co może być wykonywane w iframe lub blokowane.
Optymalizacja polegała na:
- Dodanie standardowo atrybutu sandbox ( pustego ) do wszystkich iframe. Skrypty oraz zawartość nie była ładowana podczas ładowania strony.
- Dodanie biblioteki jquery.visible ( https://github.com/customd/jquery-visible )
- Dodanie funkcji checkVisible która sprawdza wszystkie elementy iframe i ich widoczność w viewport. Jeśli element jest widoczny atrybut sandbox jest usuwany a iframe przeładowywany w innym przypadku do iframe jest dodawany atrybut sandbox który blokuje wykonywanie dalszych skryptów. Kod funkcji checkVisible
function checkVisible() { var elementsList = $('.postMain[data-type="1"]'); for (var iPosition = 0; iPosition & lt; elementsList.length; iPosition++) { if ($(elementsList[iPosition]).visible(true)) { var iframe = $(elementsList[iPosition]).find('iframe'); if (typeof $(iframe).attr('sandbox') === typeof undefined) { continue; } $(iframe).removeAttr('sandbox'); $(iframe).attr('src', $(iframe).attr('src')) } else { $(elementsList[iPosition]).find('iframe').attr('sandbox', ''); } } }