title: How to clear the contents of an iFrame from another iFrame
body: <p>I have a <code>wrapperPage.html</code> with an <code>&lt;iframe class="header"</code> and <code>&lt;iframe class="pageBody"</code>. In <code>header</code> there is a link, <code>&lt;a class="clearLink"</code>, which when clicked should clear the contents of <code>pageBody</code>.</p>
  
  <p>So far the following implementation of the above idea doesn't work. Please help me resolve this.</p>
  
  <p><strong>Please NOTE</strong> that, <code>header</code> and <code>pageBody</code> are each loaded from different included files.</p>
  
  <p><strong>wrapperPage.html</strong></p>
  
  <pre><code>&lt;div class=non-floater&gt;
      &lt;iframe class="header" src="header.html"&gt;&lt;/iframe&gt;
      &lt;iframe class="pageBody" src="pageBody.html" /&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>header.html :</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $(".clearLink").on("click", function() {
              $('.pageBody').contents().find("body").html('');
          });
      });
  &lt;/script&gt;
  
  &lt;a class="clearLink" href="#"&gt;Navigation Button&lt;/a&gt;
  </code></pre>
  
  <p><strong>pageBody.html :</strong></p>
  
  <pre><code>&lt;div class="panel-body"&gt;This is the body&lt;/div&gt;
  </code></pre>