I have the following code in the top frame of a two frame page:
JavaScript
x
15
15
1
function setKeyHook()2
{3
logMessage("setKeyHook()");4
top.frames.BOTTOM.document.onkeydown = 5
top.frames.TOP.document.onkeydown = function( evt )6
{7
return function(){8
top.frames.TOP.handleKeypress(evt);9
};10
11
}( window.event );12
}13
14
onload = setKeyHook;15
This works on the original document load, but when I call this function from another frame (usually when only one frame reloads), the hook is set, but when the onkeydown function fires, it does not receive the appropriate arguments, instead evt == null.
Full Code follows:
KeyFrameTest.asp
JavaScript
1
12
12
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"2
"http://www.w3.org/TR/html4/frameset.dtd">3
<html>4
<head>5
<title>KeyFrameTest</title>6
</head>7
<frameset Rows="80%,20%">8
<frame id="TOP" name="TOP" src="KeyFrameTestTop.asp">9
<frame id="BOTTOM" name="BOTTOM" src="KeyFrameTestBottom.asp">10
</frameset> 11
</html>12
KeyFrameTestTop.asp
JavaScript
1
163
163
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"2
"http://www.w3.org/TR/html4/frameset.dtd">3
<html>4
<head>5
<script type="Text/Javascript">6
7
String.prototype.trim = function() {8
return this.replace(/^s+|s+$/g,"");9
}10
11
NumElements = 5;12
//Alt Vals13
ControlCode = 1;14
ShiftCode = 2;15
ControlShiftCode = 3;16
//Key Vals17
keyR = 82;18
keyJ = 74;19
keyI = 73;20
keyT = 84;21
keyEnter = 13;22
//Array Indexs23
AltIndex = 0;24
KeyIndex = 1;25
FuncIndex = 2;26
KeyFuncMap = new Array(NumElements);27
for (i = 0; i < KeyFuncMap.length; ++i)28
{29
//Three elements, control or shift, key, function30
KeyFuncMap[i] = new Array(3);31
}32
33
KeyFuncMap[0][AltIndex] = ControlCode;34
KeyFuncMap[0][KeyIndex] = keyR;35
KeyFuncMap[0][FuncIndex] = "parent.TOP.logMessage("Ctrl + R")";36
37
KeyFuncMap[1][AltIndex] = ControlCode;38
KeyFuncMap[1][KeyIndex] = keyJ;39
KeyFuncMap[1][FuncIndex] = "parent.TOP.logMessage("Ctrl + J")";40
41
KeyFuncMap[2][AltIndex] = ControlCode;42
KeyFuncMap[2][KeyIndex] = keyI;43
KeyFuncMap[2][FuncIndex] = "parent.TOP.logMessage("Ctrl + I")";44
45
KeyFuncMap[3][AltIndex] = ControlCode;46
KeyFuncMap[3][KeyIndex] = keyT;47
KeyFuncMap[3][FuncIndex] = "parent.TOP.logMessage("Ctrl + T")";48
49
KeyFuncMap[4][AltIndex] = ControlCode;50
KeyFuncMap[4][KeyIndex] = keyEnter;51
KeyFuncMap[4][FuncIndex] = "parent.TOP.logMessage("Ctrl + Enter")";52
53
function CompleteEvent(e)54
{55
e.cancelBubble = true;56
e.returnValue = false;57
}58
59
function logMessage(msg)60
{61
logBox = parent.TOP.document.getElementById("logBox");62
if( logBox.value.trim().length < 1 )63
{64
logBox.value = msg;65
}66
else67
{68
logBox.value = logBox.value + "rn" + msg;69
}70
}71
72
function handleKeypress(e)73
{74
logMessage("handleKeypress(e)");75
e = e || window.event ;76
if (e == null)77
{78
logMessage("handleKeypress(e): e == null");79
return false;80
}81
controlVal = getControlVal(e);82
83
for (i = 0; i < KeyFuncMap.length; i++)84
{85
if (KeyFuncMap[i][AltIndex] == controlVal &&86
KeyFuncMap[i][KeyIndex] == e.keyCode)87
{88
eval(KeyFuncMap[i][FuncIndex]);89
CompleteEvent(e);90
}91
}92
}93
94
function getControlVal(e)95
{96
if (e.ctrlKey && e.shiftKey)97
{98
return 3;99
}100
else if (e.ctrlKey)101
{102
return 1;103
}104
else if (e.shiftKey)105
{106
return 2;107
}108
else return 0;109
}110
111
function displayEverything()112
{113
displayProps(top.frames.TOP, "top.frames.TOP", 0, 1);114
displayProps(top.frames.BOTTOM, "top.frames.BOTTOM", 0, 1);115
}116
117
function clearLog()118
{119
logBox = parent.TOP.document.getElementById("logBox");120
logBox.value = "";121
}122
123
function displayProps(o, name, level, maxLevel)124
{125
try {126
if (level > maxLevel)127
return;128
for (prop in o){129
logMessage(name + "." + prop + " = " + o[prop]);130
if (typeof(o[prop]) == "object" && o[prop] != o){131
displayProps(o[prop], name + "." + prop, level + 1, maxLevel);132
}133
}134
}135
catch (ex){136
logMessage(ex.toString());137
}138
}139
140
function setKeyHook()141
{142
logMessage("setKeyHook()");143
top.frames.BOTTOM.document.onkeydown = 144
top.frames.TOP.document.onkeydown = function( evt )145
{146
return function(){147
top.frames.TOP.handleKeypress(evt);148
};149
150
}( window.event );151
}152
153
onload = setKeyHook;154
</script>155
</head>156
<body>157
<h1>Hello</h1>158
<textarea id="LogBox" rows="20" cols="80"></textarea><BR>159
<input type="Button" value="Display Properties" onClick="displayEverything();"/>160
<input type="Button" value="Clear Log" onClick="clearLog();"/>161
</body>162
</html> 163
KeyFrameTestBottom.asp
JavaScript
1
12
12
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"2
"http://www.w3.org/TR/html4/frameset.dtd">3
<html>4
<head>5
</head>6
<body>7
<p>Press Keys Here</p>8
<input type="Button" value="Reset Handlers" 9
onclick="top.frames.TOP.setKeyHook();">10
</body>11
</html> 12
To recreate the issue, right click the bottom frame, click refresh, click “Reset Hooks”, and press keys.
Related Question: Handle keyPress Accross Frames in IE
I’ve also read an article on Javascript closures, but I’m not sure how it applies.
Sorry for the narrowness of question, but I really don’t know Javascript well enough to figure out the trick to this.
Advertisement
Answer
Here’s a solution that ditches the “old way” of handling events, and instead uses the more flexible and powerful “event listener” model. This allows the passing of event objects
Note that the attachEvent() method is IE only (which you stipulated as being ok in your previous post – but you’ll need to change this if you support something else)
JavaScript
1
15
15
1
function setKeyHook()2
{3
var botDocument = top.frames.BOTTOM.document;4
var topDocument = top.frames.TOP.document;5
var eventName = 'onkeydown';6
var handlerFunc = top.frames.TOP.handleKeypress;7
8
// Clear them first, or else they'll attach twice and thusly, fire twice9
botDocument.detachEvent( eventName, handlerFunc ); 10
topDocument.detachEvent( eventName, handlerFunc );11
12
topDocument.attachEvent( eventName, handlerFunc );13
botDocument.attachEvent( eventName, handlerFunc );14
}15
When event listeners are registered this way, the proper event object is automatically passed as an argument to the handler function.