title: iFrames and detecting focus again
body: <p>I have been struggling for some time with this - I have a document that is essentially this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
          some divs and stuff
  
          &lt;div id="content"&gt;
              &lt;iframe src="" id="content_frame"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What is essential with this particular page is that it knows when anything on the page has focus. This is actually pretty easy, and works with two simple functions:</p>
  
  <pre><code>window.onblur=function(){   // when you leave the window
      if(conn != null) {
          if (document.activeElement == document.getElementById("content_frame")) {               
                      send_message_to_server(JSON.stringify({'type':'upd','ele':'vis','status':true}));
          beep_off(conn.peer);
          } else {
              send_message_to_server(JSON.stringify({'type':'upd','ele':'vis','status':false}));
              beep_on(conn.peer);
          }
      }
  };
  
  window.onfocus=function(){  // when you focus the window
      if(conn != null) {
          send_message_to_server(JSON.stringify({'type':'upd','ele':'vis','status':true}));
          beep_off(conn.peer);
      }
  };
  </code></pre>
  
  <p>The problem I am having is that when the "iframe" is selected, it has focus - this means when the window blurs (change tab or whatever), the iframe still has focus within the window and so fires a message like it still has focus.</p>
  
  <p>In short what I need is:</p>
  
  <ul>
  <li>If the iframe or the regular part of the site has focus, it fires "true".</li>
  <li>If none of the site has focus (they might have clicked developer tools, the search bar, changed tabs etc) it fires "false".</li>
  </ul>
  
  <p>Currently what I have is:</p>
  
  <ul>
  <li>When the site has focus it fires "true". (good)</li>
  <li>However if the iframe has focus and then you change tabs, clicked developer tools or address bar etc, it still fires "true". (bad)</li>
  <li>If anything else has focus and you change tabs, clicked developer tools or address bar etc, it fires "false". (good)</li>
  </ul>
  
  <p>What I have also tried:</p>
  
  <ul>
  <li>Many permutations of the above code.</li>
  <li>$('iframe').is(':focus'); as a flag for if the iframe has focus or not (this doesn't seem to work).</li>
  </ul>