2015-03-17 2 views
5

Если у меня есть сайт, который содержит в IFRAME:Как узнать, когда появляется 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> 

можно тогда для IFrame, чтобы знать, если он может «видеть»? Это, например, зная верхнее положение iframe, связанное с верхней частью экрана.

Это мой тест IFrame: (все значения не равны 0, независимо от того, Спиральные поз из родителей)

<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> 

Я сделал изображение, чтобы быть более ясным. enter image description here

Я должен знать из iframe, если это видно или нет! Так что не из страницы, содержащей iframe.

+0

Можете ли вы jsfiddle это? –

+0

да, дайте мне несколько минут – clankill3r

+0

Это ужасно для jsfiddle! – clankill3r

ответ

0

Используйте это: https://github.com/customd/jquery-visible

Добавить идентификатор в IFRAME, то вы можете использовать это:

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

Я думал'.visible' проверяет, установлено ли свойство 'visibility' CSS' на 'visible', а не на вид – dayuloli

+0

извинения, забыли ссылку на github - добавлено –

0

Это аналогичная проблема с detecting infinite scrolling - Как мы знаем, что «Load больше» кнопка видно?

В качестве расширения указанной выше ссылке, вы можете также write a function, который будет определять, если любой элемент виден (по оси у) (копируется для справки):

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)); 
} 
+2

Это не похоже. Проблема в том, что я должен знать из iframe. Не страница, содержащая iframe. – clankill3r

+0

@ clankill3r Я вижу, это совсем другой стадион! Хорошо, что вы отредактировали свой вопрос, чтобы прояснить это. – dayuloli

+0

Да, похоже, все понимают неправильно :) Я не так хорошо объясняю вещи, которые кажутся :) – clankill3r

0

Это работает для меня. Это требует, чтобы страница с iframe имела 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)); 
      } 
2

Я знаю, что это старый вопрос, но некоторое новое API из Chrome было выпущено, которые могли бы ответить на ваш вопрос о последних версиях Chrome (22+)

InteractionObserver вы можете найти его здесь: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Существует полипол, который разрабатывается (тот же репо), но он не будет работать из iframe afaik, только если скрипт находится на родительской веб-странице.

Для других браузеров их есть некоторые темные способы сделать это на основе синхронизации атаки, эта статья объясняет это очень хорошо: http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

Редактировать: Следующая Firefox версии прийти имеет InteractionObserver функцию активированных по умолчанию в настоящее время , То же самое для Edge!

Смежные вопросы