title: How to trigger an event from parent window based on iframe content?
body: <p>I'm creating a widget using iframe, and I want to hide the iframe in a specific event. </p>
  
  <p>Let's say <strong>main.html</strong> file has: </p>
  
  <pre><code>&lt;div id="my_widget"&gt;
    &lt;iframe src="www.mysite.com/main.html" width="50%" frameborder="0" height="550" id="my_iframe"&gt;Error uploading the frame.&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>widget.html</strong> file contains: </p>
  
  <pre><code>&lt;div id="widget-status-div" status="success"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>I tried to add some script by end of the widget.html file to access parent window (main.html) like: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;       
      setTimeout(function(){
        parent.$("#my_widget").fadeOut(300, function() { parent.$("#my_widget").remove(); });
      }, 3000);       
  &lt;/script&gt;
  </code></pre>
  
  <p>But unfortunately it didn't work. </p>
  
  <p>Another thing I tried to do, is to set <strong>setInterval(check_iframe, 5000)</strong> at parent window(main.html) to keep checking <strong>widget-status-div</strong> div at iframe every 5 seconds, but the problem is that I can't check the content of the iframe somehow (or maybe I'm doing it wrong). </p>
  
  <p>Any help would be highly appreciated. </p>
  
  <p>Thanks </p>