title: Cannot modify content of iframe, what is wrong?
body: <p>I am trying to modify content of an iframe but it does not work.</p>
  
  <p>This is my main.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Main page&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h3&gt;Main page&lt;/h3&gt;
  &lt;iframe src="ifr.htm" id="ifr" name="ifr"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
      $('#ifr').load(function(){
          $('#ifr').contents().find('body').html('Hey, i`ve changed content of &lt;body&gt;!    Yay!!!');
      });
  });
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my ifr.htm</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Iframe page&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
   Content to be displayed in iframe ...
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>