title: How to get access to iframe element
body: <p>I have the following html and javascript.  If I click on simulate event I want the HandleEvents function to post the text into the 'child' page html.  So I am essentially trying to latch onto an html element inside a child web page from a parent.</p>
  
  <p>How do I do that?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;script type="text/javascript"&gt;
  
  function _bindEvent(el, eventName, eventHandler) {
          if (el.addEventListener){
             el.addEventListener(eventName, eventHandler, false); 
          } else if (el.attachEvent){
             el.attachEvent('on'+eventName, eventHandler);
          }
  }
  
  function doconfigure() {
     var ifrm = document.getElementById('ifrm');
     if(ifrm) {
        ifrm.src="configure.html";
     }
  }
  
  function doevents() {
     var ifrm = document.getElementById('ifrm');
     if(ifrm) {
        ifrm.src="show_events.html";
     }
  }
  
  function dooutbound() {
         var ifrm = document.getElementById('ifrm');
         if(ifrm) {
            ifrm.src="outbound.html";
         }
  }
  
  function HandleEvents(data) {
  
      //post data to show_events.html page
      var ifrm = document.getElementById('ifrm');
      if(ifrm) {
          ifrm.src="show_events.html";
      }
  
      //post to events field
      var elem = top.frames['display'].document.getElementById('event');
      if(elem) {
          elem.innerHTML = data;
      }
  }
  
  &lt;/script&gt;
  
  &lt;title&gt;&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Select&lt;/legend&gt;
  &lt;input type="button" value="Configure" onclick="doconfigure();"&gt;
  &lt;input type="button" value="Events" onclick="doevents();"&gt;
  &lt;input type="button" value="Outbound" onclick="dooutbound();"&gt;
  &lt;input type="button" value="simulate event" onclick="HandleEvents('my event');"&gt;
  &lt;br /&gt;
  &lt;/fieldset&gt;
  &lt;iframe src="configure.html" name="display" id="ifrm" height="700" width="800"&gt;
    &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
  &lt;/iframe&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then the show_events.html page:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Events:&lt;/p&gt;
    &lt;p id="event"&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>