Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding an event to an iframe element

    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

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    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:
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function myfunc(s) {
    alert(s);
    return false;
    }
    top.myfunc2=myfunc;
    </SCRIPT>

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    An event handler is not a string but a Function object.
    Code:
    window.frames["map_target"].document.getElementById("map_image").onclick = function(){
      window.frames["map_target"].myfunc('inside');
    }

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Try this:
    Code:
    window.frames["map_target"].document.getElementById("map_image").onclick = function(evt){
      window.frames["map_target"].stopDraw(evt);
    }

  • #8
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •