title: How to know when an iframe comes into view?
body: <p>If I have a site that holds an iframe:</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;body&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;iframe src="http:/somelink.com/iframe.html"&gt;&lt;/iframe&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Is it then possible for the iframe to know if it can be "seen"?
  This for example by knowing the top position of the iframe related to the top of the screen.</p>
  
  <p>This is my test iframe:
  (all values are 0, no matter scroll pos of parent)</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="//code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
              $(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);
              }
  
          &lt;/script&gt;
  
          &lt;style type="text/css"&gt;
              body {
                  background-color: red;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I made an image to be more clear.
  <img src="https://i.stack.imgur.com/yJnxb.png" alt="enter image description here"></p>
  
  <p>I have to know from within the iframe if it's visible or not!
  So not from within the page that holds the iframe.</p>