I got this to work
frameset.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Test</title>
</head>
frame1.html
<frameset rows="50%,50%">
<frame src="frame1.html" name="TOP">
<frame src="frame2.html" name="BOTTOM">
</frameset>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frame 1</title>
<script type="text/javascript">
onload = function()
{
top.frames.BOTTOM.document.onkeydown =
self.document.onkeydown = function( evt )
{
return function()
{
// Just an example to show it's working
document.getElementById( 'output' ).value += String.fromCharCode( evt.keyCode );
}
}( window.event );
}
</script>
</head>
<body>
frame1
<textarea id="output"></textarea>
</body>
</html>
frame2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frame 2</title>
</head>
<body>
frame2
<textarea></textarea>
</body>
</html>
First of all, it always pays to be fairly explicit with your object references. Using proprietary DOM shortcuts (such as window.frameName) just add unnecessary error potential. This is why my script explicitly looks in the frames collection of the window object.
Next is to familiarize yourself with the various built-in window references in the DOM when dealing with framesets. There are 4 total
- window - The current window. This is also implied when left out (i.e., window.onload === onload)
- parent - The parent window to the current
- top - The topmost window in a frameset family. parent === top when you have only one frameset.
- self - alias of window
So basically what I've done here is, when the onload event fires in the frame1 window, is add a handler function to the keydown event for the documents in both of the frame windows.
That function uses a closure to ensure that the event generated in frame1 is available to the actual handler, regardless of which window generated the keydown event. This is necessary because of how IE does events. Whereas other browser create new event objects as they occur and passes them to event hanlders, IE just modifies the global event object (referenced via window.event or more simple, just event) to reflect the current event.
I hope that makes sense.