Jak sprawdzić, kiedy pojawia się element iframe?

Jeśli mam stronę, która posiada iframe:Jak sprawdzić, kiedy pojawia się element iframe?

<html> 

    <body> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <iframe src="http:/somelink.com/iframe.html"></iframe> 
    </body> 

</html>

Czy zatem możliwe iframe wiedzieć, czy to może być „widoczny”? To na przykład dzięki znajomości najwyższej pozycji elementu iframe powiązanego z górną częścią ekranu.

To moja próba iframe: (wszystkie wartości są 0, bez względu na to, poz przewijania z rodzicem)

<html> 
    <head> 
     <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
     <script type="text/javascript"> 

      $(document).ready(function() { 
       console.log("ok"); 

       check(); 

      }); 


      function check() { 

       // position of parent 
       var parentScrollTop = $(window.parent.document).scrollTop(); 
       console.log("parentScrollTop: "+parentScrollTop); 

       // self position 
       var bodyPosition = $("body").position().top; 
       console.log("body position: "+bodyPosition); 

       setInterval(check, 1000); 
      } 

     </script> 

     <style type="text/css"> 
      body { 
       background-color: red; 
      } 
     </style> 
    </head> 
    <body> 

    </body> 
</html>

zrobiłem obraz jest bardziej wyraźny. enter image description here

Muszę wiedzieć z wewnątrz iframe, jeśli jest widoczny, czy nie! Więc nie z wewnątrz strony, która zawiera element iframe.

Źródło

2015-03-17 clankill3r

Czy możesz to rozwiązać? –

yeah daj mi kilka minut – clankill3r

To jest okropne dla jsfiddle! – clankill3r

Użyj tego: https://github.com/customd/jquery-visible

Dodaj identyfikator do iframe następnie można użyć to:

if ($('#iframeID').visible(true)) { 
    // The iframe is visible 
} else { 
    // The iframe is NOT visible 
}

Źródło

2015-03-17 15:40:54

Myślałem'.visible' sprawdza, czy właściwość CSV 'visibility' jest ustawiona na' visible', czy to w widoku – dayuloli

przeprasza, zapomniałem łącza do github - dodano teraz –

Jest to podobny problem z detecting infinite scrolling - Skąd wiemy, że „Załaduj więcej” przycisk jest widoczny?

Jako rozszerzenie powyższego linku, można również write a function który wykryje, jeśli każdy element jest widoczny (na osi y) (kopiowane w celach informacyjnych):

function isScrolledIntoView(elem) 
{ 
    var $elem = $(elem); 
    var $window = $(window); 

    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

Źródło

2015-03-17 15:44:33 dayuloli

To nie jest podobne. Problem polega na tym, że muszę wiedzieć z elementu iframe. Nie jest to strona zawierająca element iframe. – clankill3r

@ clankill3r Widzę, to zupełnie inny park! Dobrze, że zredagowałeś swoje pytanie, aby to wyjaśnić. – dayuloli

Tak, wydaje się, że wszystko jest źle zrozumiane :) Nie jestem aż tak dobry w wyjaśnianiu rzeczy, które wydaje się to możliwe :) – clankill3r

Ten pracował dla mnie. Wymaga to, aby strona zawierająca element iframe zawierała jQuery.

function isScrolledIntoParentView(elem) { 


       var $elem = window.parent.$(elem); 

       var docViewTop = $(window.parent).scrollTop(); 
       var docViewBottom = docViewTop + window.parent.innerHeight; 

       var elemTop = $elem.offset().top; 
       var elemBottom = elemTop + $elem.height(); 

       console.log("isScrolledIntoParentView"); 
       console.log($elem); 
       console.log("docViewTop "+docViewTop); 
       console.log("docViewBottom "+docViewBottom); 
       console.log("elemTop "+elemTop); 
       console.log("elemBottom "+elemBottom); 

       return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
      }

Źródło

2015-04-02 11:00:11 clankill3r

wiem, że to jest stare pytanie, ale niektóre nowe API z Chrome zostały zwolnione, które mogą odpowiedzieć na pytanie o najnowszych wersjach Chrome (22+)

InteractionObserver można go znaleźć tutaj: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Jest rozwijany polyfill (to samo repozytorium), ale nie zadziała z iframe afaik tylko wtedy, gdy skrypt znajduje się na stronie głównej.

W przypadku innych przeglądarek ich jest jakieś mroczne sposoby, aby to zrobić w oparciu o taktowaniu ataku, ten artykuł wyjaśnia to całkiem dobrze: http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

EDIT: Następny Firefox wersja przyjść ma InteractionObserver funkcji aktywowany domyślnie teraz , To samo dla Edge!

Źródło

2016-10-03 13:18:18 deKajoo

Jak sprawdzić, kiedy pojawia się element iframe?

Odpowiedz

Powiązane problemy