Adding an event to an iframe element

kalyson

06-15-2007, 04:34 AM

Hello,

I'm trying to add an event handler to various elements in an IFRAME. I've adding it to images, the body of the document, etc., and none of them work.

This code would be in the top frame's <SCRIPT> tags in the <HEAD> part of the document:

window.frames["map_target"].document.getElementById("map_image").onclick="myfunc('inside')";

In the IFRAME source document, I have this in the <HEAD> of that document:

<SCRIPT LANGUAGE="JavaScript">
function myfunc(s) {
alert(s);
return false;
}
</SCRIPT>

If I do this:

<IMG NAME="map_image" ID="map_image" SRC="http://newlightsoftware.com/map_ca.gif" BORDER="0" onclick="return myfunc('inside');">

and click on the image, it works. If I try to add the onclick event dynamically in the parent document, it does nothing. No errors or anything...

Does anyone see what I'm doing wrong? I looked for other examples like this but did not find any.

Thanks,
Kris

rnd me

06-15-2007, 06:18 AM

for firefox:
document.getElementById("iframename").contentWindow.document.
for IE it is contentDocument i believe.

i am not sure you can add an event handler to a framed doc from above. you might try pushing the function up to "top".

like:
<SCRIPT LANGUAGE="JavaScript">
function myfunc(s) {
alert(s);
return false;
}
top.myfunc2=myfunc;
</SCRIPT>

kalyson

06-15-2007, 08:03 AM

Hi, there,
Thanks for the reply.
Actually, this part is right:
window.frames["map_target"].document.getElementById("map_image")

It is just that I can't dynamically set an event handler on the element that is returned, regardless of what element comes back. In this case it happens to be an image. I know there is a way to do it, I am just not seeing it yet. Maybe by adding an event listener, but not sure.

Thanks for the post, however!

Kris

glenngv

06-15-2007, 05:36 PM

An event handler is not a string but a Function object.
window.frames["map_target"].document.getElementById("map_image").onclick = function(){
window.frames["map_target"].myfunc('inside');
}

kalyson

06-15-2007, 06:56 PM

Very cool! That does certainly work.

In my real code I'm trying to pass the mouse event in, and if you do this:

<BODY
onclick="setStartDraw(event,'selectionBox');" >

where onmousedown is an attribute of an element, the event seems to be placed for you in the first parameter, for some reason.

But in this case above, no event parameter is being given to the function definition:

window.frames["map_target"].document.getElementById("map_image").onclick=function(){window.frames["map_target"].stopDraw(event);}

I'm thinking there must be a way to get it in there...

Thanks so much for your help. I'm struggling with this a lot. But learning a lot, too, thanks to this forum.

--Kris

kalyson

06-15-2007, 07:01 PM

Hmmmm....

I tried this to see what would happen (just a wild guess):

window.frames["map_target"].document.getElementById("map_image").onclick=function(e){window.frames["map_target"].stopDraw(e);}

and it seems to be calling the function. There is another problem going on, I guess, but I THINK that I guessed it right and that the event handler is being called.

Thanks again for the help!
-Kris

glenngv

06-15-2007, 07:02 PM

Try this:
window.frames["map_target"].document.getElementById("map_image").onclick = function(evt){
window.frames["map_target"].stopDraw(evt);
}

kalyson

06-15-2007, 07:14 PM

Thanks so much Glenn. It looks like that is the way to get an event in. The errors I'm seeing now have to do with the fact that I'm dealing with js code declared inside an IFRAME (well actually external js file). So, as an experienced coder, you know that the scoping issues with variables across frames is kinda wacky. At least it seems that way to a newbie!

Thanks so much for your input. :)

--K