title: Working of an iframe
body: <p>Here is a snippet of code that uses a script to populate the contents of an iframe:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function() {
              $('iframe').contents().find('body').html('&lt;script&gt;console.log($("div"))&lt;\/script&gt;');
          });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;Test&lt;/div&gt;
          &lt;iframe /&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When executed we see that the iframe has access to the parent's DOM and we see the div being selected by the jQuery selector. The iframe does not have jQuery included but it can access the jQuery object of the parent.</p>
  
  <p>However if we write the same thing via an iframe src inclusion, the behavior is different:</p>
  
  <p>test.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;Test&lt;/div&gt;
          &lt;iframe src="another.html"&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>another.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function() {
              console.log($('div'));
          });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>We now see that the page does not list any divs. Further, if we don't include the jQuery js in the child page, it would throw an error.</p>
  
  <p>Note that both pages are in the same domain, so we don't have same-origin policy issues.</p>
  
  <p>My questions are:</p>
  
  <ol>
  <li>Why is the behavior different for the 2 - a. manipulating the iframe DOM from the parent and b. including the iframe content via a src?</li>
  <li>Is there a way to make the parent have access to the child and NOT vice-versa?</li>
  </ol>