title: Accessing element in child IFrame from parent page using jquery
body: <p>I am trying to access the elements of the document in the iframe from the parent document using the following code, but cannot get it to work for some reason.</p>
  
  <p>Parent.html :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Parent&lt;/title&gt;
          &lt;script src='http://code.jquery.com/jquery-latest.min.js'&gt; 
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;iframe  id="iframe1" src="iframe.html"&gt;
          &lt;/iframe&gt;
          &lt;script type='text/javascript'&gt; 
  
              $('#iframe1').ready(function()
              {
              console.log($('#iframe1').contents().find("#testDiv").html());
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>IFrame.html :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Iframe&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="testDiv"&gt;
              Works!
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>All i am getting in console log is 'undefined' instead of 'Works!'. What am I doing wrong?</p>
  
  <p>Thanks in advance.</p>