title: IE throws an "Object required" error when trying to use the Event Object from another window/frame
body: <p>I found a JavaScript error in a script that I'm developing. I whittled it down to a pair of fairly concise pages that still produce the error:</p>
  
  <ul>
  <li><a href="http://troy.onespot.com/static/4505/index.html" rel="nofollow noreferrer">http://troy.onespot.com/static/4505/index.html</a></li>
  <li><a href="http://troy.onespot.com/static/4505/iframe.html" rel="nofollow noreferrer">http://troy.onespot.com/static/4505/iframe.html</a></li>
  </ul>
  
  <p>If you load the first page in Internet Explorer 8 (or probably 6 or 7, for that matter), give it about half a second to run the script, then click the "Google" link inside of the <code>&lt;iframe&gt;</code>, you should see an error message appear:</p>
  
  <p><a href="http://skitch.com/troywarr/dui21/ie8-error" rel="nofollow noreferrer">http://skitch.com/troywarr/dui21/ie8-error</a></p>
  
  <p>(You may need to uncheck <code>Tools &gt; Internet Options &gt; Advanced &gt; "Disable script debugging (Internet Explorer)"</code> and check <code>"Display a notification about every script error"</code> two lines below to see the error messages.)</p>
  
  <p>Starting the debugger shows the beautifully insightful message "Object required":</p>
  
  <p><a href="http://skitch.com/troywarr/dui26/ie8-debugging" rel="nofollow noreferrer">http://skitch.com/troywarr/dui26/ie8-debugging</a></p>
  
  <p>The culprit is the line:</p>
  
  <pre><code>target = event_object.target || event_object.srcElement;
  </code></pre>
  
  <p>I think that's valid code - at least it works in Firefox. My best guess is that there is an issue with trying to access the Event Object of one frame from another - vaguely similar to why you can't rely on <code>instanceof</code> to detect arrays if they were created in a different window/frame (search for "context" at <a href="http://javascript.crockford.com/remedial.html" rel="nofollow noreferrer">http://javascript.crockford.com/remedial.html</a> if that didn't make sense).</p>
  
  <p>Does that sound like a valid theory? If so, what can I do to fix this? If at all possible, I need to preserve the same general code structure/functionality:</p>
  
  <ul>
  <li>There is a link inside an <code>&lt;iframe&gt;</code> on a page.</li>
  <li>A script in the <code>&lt;iframe&gt;</code> calls a function on the parent page, which attaches an event handler to the element in the <code>&lt;iframe&gt;</code> with the specified <code>id</code> attribute.</li>
  <li>Clicking that <code>&lt;iframe&gt;</code>d link triggers the event, which calls a function on the parent page, passing the Event Object by default.</li>
  <li>The function on the parent page determines information about the clicked element (the <code>&lt;a&gt;</code>) from the Event Object in a cross-browser-compatible way.</li>
  </ul>
  
  <p>I would also like to continue using event delegation, and keep all of the functions in the parent document, just calling them with arguments from the <code>&lt;iframe&gt;</code>d document. However, if you have any suggestions for alternative approaches, I'd love to hear them.</p>
  
  <p>Thanks in advance for any help! Please let me know if you need any more explanation about my requirements or what I'm trying to do - I'm hoping that there's just a better way to access or pass the Event Object that I'm not aware of - an "Oh, yeah, you just need to do it like this" kind of solution. I hope that's not wishful thinking. ;-)</p>