title: Close iFrame On Button Click Within Itself
body: <p>I load an iFrame of another page of my website dynamically. I would like to close the iFrame by clicking on an "X" button within the iFrame. I have created a Jquery function in my main JavaScript file, and I have also added some Javascript to my page frame itself (within my own domain). </p>
  
  <p>In my main JS file:</p>
  
  <pre><code>var closeIFrame = function() {
      $('#iframeContact').remove();
      $("#overlay").toggleClass("overflowhidden overflow");
  };
  </code></pre>
  
  <p>On my iFrame page (at the bottom of the page's HTML):</p>
  
  <pre><code>&lt;script&gt;
  $("#menuOverlayBack").click(function(){
      parent.closeIFrame();
  }
  </code></pre>
  
  <p></p>
  
  <p>I even have tried putting an "onclick" HTML element on my button to no avail:</p>
  
  <pre><code>&lt;i class="menuOverlayBack material-icons" id="menuOverlayBack" onclick="parent.closeIFrame()"&gt;arrow_back&lt;/i&gt;
  </code></pre>