Home/ Questions/Q 266775
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T23:28:19+00:00

I’ve been trying to handle the onkeydown event across multiple frames (no, I unfortunately

  • 0

I’ve been trying to handle the onkeydown event across multiple frames (no, I unfortunately cannot be rid of the frames) via JavaScript (see my previous question here). I’m getting a handle on the document in the other frame, and setting it’s onkeydown handler equal to my function. No error is thrown, but when I later check the document’s settings, onkeydown is null. I’ve gotten the same results in IE6 and IE7. What am I doing wrong?

  • Function

     function setKeyHook(doc)
 {
     try{               
         if (doc)
             if (parent.TOP.handleKeypress){
                 doc.onkeydown = parent.TOP.handleKeypress;
                 logMessage('Attached handler');
             }
             else{
                 logMessage('No handleKeypress');
             }
         else
             logMessage('No doc');
     }
     catch (ex){
         logMessage(ex.toString());
     }
 }

  • Call

setTimeout("setKeyHook(parent.document.getElementById(\"bottom\").document);", 1000);
  • Output
   Attached handler
  • After execution
    BOTTOM.protocol = HyperText Transfer Protocol
    BOTTOM.onkeypress = null
    BOTTOM.onrowenter = null
    BOTTOM.onmousedown = null

How should I apply the same event handler across frames?

Note: This needs to work (and only work) in IE6 and IE7.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
<frameset rows="50%,50%">
    <frame src="frame1.html" name="TOP">
    <frame src="frame2.html" name="BOTTOM">
</frameset>
</html>

    frame1.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

    1. window – The current window. This is also implied when left out (i.e., window.onload === onload)
    2. parent – The parent window to the current
    3. top – The topmost window in a frameset family. parent === top when you have only one frameset.
    4. 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.

    • 0