title: jquery accessing top document through iframe
body: <p>I have gotten this to work earlier, but for some reason it's no longer working. Could someone please explain me why this won't work now?</p>
  
  <p><strong>Page one that contains the iframe:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Test 1&lt;/title&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="thediv" style="background: #ffff00;"&gt; div &lt;/div&gt;
          &lt;iframe id="theframe" src="test2.html"&gt;&lt;/iframe&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>the iframe content</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;test 2&lt;/title&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
          &lt;script&gt;
             $(document).ready(function () {
                 $("#clickme").click(function(){
                     $("#thediv", top.document).css("background","#ff0000");
                     alert($("#thediv", top.document).text());
                 });
             });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;a href="#" id="clickme"&gt;clickme&lt;/a&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>