A Challenge: Call parent Javascript function from inside an iframe?

Discussion in 'HTML' started by Chris Ianson, Apr 5, 2006.

  1. Chris Ianson

    Chris Ianson Guest

    Hi geniuses (or is that genii, or genies)

    The challenge is as above really. I have a page with an iframe in it, and
    need to call a JS function in the *parent* page, *from* inside the iframe.

    (It's for Google Maps, but I won't bore you with the complexities of that,
    as it doesn't affect the question).

    Mochas kudos to anyone able to solve this widdle.

    Ta.
     
    Chris Ianson, Apr 5, 2006
    #1
    1. Advertising

  2. Chris Ianson wrote:
    > Hi geniuses (or is that genii, or genies)
    >
    > The challenge is as above really. I have a page with an iframe in it, and
    > need to call a JS function in the *parent* page, *from* inside the iframe.
    >
    > (It's for Google Maps, but I won't bore you with the complexities of that,
    > as it doesn't affect the question).
    >
    > Mochas kudos to anyone able to solve this widdle.


    Still flogging the iframe 'dead horse' I see.

    parent.yourfunction();


    Don't try patenting it though...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 5, 2006
    #2
    1. Advertising

  3. Chris Ianson

    Chris Ianson Guest

    "Jonathan N. Little" <> wrote in message
    news:443336ae$0$3697$...

    > Still flogging the iframe 'dead horse' I see.


    :( By 'dead horse' I assume you mean 'now working perfectly in all
    browsers'.

    > parent.yourfunction();


    Sadly this doesn't seem to work for Google Maps API. Are there any other
    methods to call JS from the parent frame?

    > Don't try patenting it though...


    Too right, I have enough of them already...

    TIA :)
     
    Chris Ianson, Apr 5, 2006
    #3
  4. Chris Ianson wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:443336ae$0$3697$...
    >
    >> Still flogging the iframe 'dead horse' I see.

    >
    > :( By 'dead horse' I assume you mean 'now working perfectly in all
    > browsers'.
    >
    >> parent.yourfunction();

    >
    > Sadly this doesn't seem to work for Google Maps API. Are there any other
    > methods to call JS from the parent frame?



    http://www.google.com/apis/maps/documentation/
    Google Maps API Documentation
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 5, 2006
    #4
  5. Chris Ianson

    Chris Ianson Guest

    "Jonathan N. Little" <> wrote in message
    news:4433f73b$0$3681$...

    > http://www.google.com/apis/maps/documentation/
    > Google Maps API Documentation


    Yes, I am far too familiar with that URL having used it for the past few
    weeks.

    The question I have asked is not covered therein.

    If anyone is able to provide an answer that would be great.

    TIA.
     
    Chris Ianson, Apr 5, 2006
    #5
  6. Chris Ianson wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:4433f73b$0$3681$...
    >
    >> http://www.google.com/apis/maps/documentation/
    >> Google Maps API Documentation

    >
    > Yes, I am far too familiar with that URL having used it for the past few
    > weeks.
    >
    > The question I have asked is not covered therein.
    >
    > If anyone is able to provide an answer that would be great.


    Sorry this IS how you reference a function in the parent frame. If it
    does not work for you then you must be and error of how you are using
    the function. Without URL only speculation.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 5, 2006
    #6
  7. Chris Ianson

    Chris Ianson Guest

    "Jonathan N. Little" <> wrote in message
    news:443406c6$0$3703$...

    > Sorry this IS how you reference a function in the parent frame. If it does
    > not work for you then you must be and error of how you are using the
    > function. Without URL only speculation.


    Are you familiar with Google Maps API Jonathan? I have been working with an
    expert in the field and neither of us can get it to work. If you are more
    of an expert with the API then we can talk further.
     
    Chris Ianson, Apr 6, 2006
    #7
  8. Chris Ianson wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:443406c6$0$3703$...
    >
    >> Sorry this IS how you reference a function in the parent frame. If it does
    >> not work for you then you must be and error of how you are using the
    >> function. Without URL only speculation.

    >
    > Are you familiar with Google Maps API Jonathan? I have been working with an
    > expert in the field and neither of us can get it to work. If you are more
    > of an expert with the API then we can talk further.
    >
    >

    I am familiar with web design, and JavaScript. That is how you reference
    a JavaScript function in a non-named parent frame.

    No Details
    No URL
    No Code.

    What do you want?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 6, 2006
    #8
  9. Chris Ianson

    Marcello Guest

    Hi guys,

    sorry to break the 'this works - no this doesn't work' quarrel, but
    Chris, have you tried something different?

    I've never used Google Maps API, so I don't know if you have access to
    code on the parent window. If you do, put a function over there that
    access the Google Maps one, and your function in the IFrame then access
    your function in the parent frame.

    If that still doesn't work, try putting and invisible FRAME (not
    IFrame) in the parent window to do the same 'proxy function' approach.
    I had to do it once, in another problem. For some reason it was not
    working from parent to child <-> child to parent frames, but taking
    this proxy function approach solved the problem.

    Also, are you passing 'objects' or functions as parameters in this
    call?

    Thanks,
    Marcello
     
    Marcello, Apr 6, 2006
    #9
  10. Chris Ianson

    Chris Ianson Guest

    "Jonathan N. Little" <> wrote in message
    news:4434637b$0$3694$...

    >> Are you familiar with Google Maps API Jonathan? I have been working with
    >> an expert in the field and neither of us can get it to work. If you are
    >> more of an expert with the API then we can talk further.


    Google Maps is a bit of an entity unto itself.

    > I am familiar with web design, and JavaScript. That is how you reference a
    > JavaScript function in a non-named parent frame.


    ....only it doesn't work with Google so...

    > What do you want?


    ....my question was a simple one which I will repeat for you as you are
    asking what I want:
    "Are there any other
    methods to call JS from the parent frame?"
     
    Chris Ianson, Apr 6, 2006
    #10
  11. Chris Ianson

    Chris Ianson Guest

    "Marcello" <> wrote in message
    news:...

    > I've never used Google Maps API, so I don't know if you have access to
    > code on the parent window. If you do, put a function over there that
    > access the Google Maps one, and your function in the IFrame then access
    > your function in the parent frame.


    Yep we actually just tried something similar.

    The parent page now declares a map function called "walk()".

    The child page (iframe) should no longer make its own changes to the iframe
    contents. When it wants to jump, it should make calls like
    "javascript:parent.walk(3)"

    [if you're unfamiliar with what is going on in the iframe from a previous
    discussion here, there's an example at
    http://www.cjse.pwp.blueyonder.co.uk/misc/A1master.htm]

    The parent code will then update the map *and* update the iframe contents.
    Simple.

    Trouble is, it means that navigating in the iframe then relies on JS, which
    rules out around 10% of people. Their loss sure, but still not ideal. We
    are looking to keep the navigation as HTML.

    > If that still doesn't work, try putting and invisible FRAME (not
    > IFrame) in the parent window to do the same 'proxy function' approach.
    > I had to do it once, in another problem. For some reason it was not
    > working from parent to child <-> child to parent frames, but taking
    > this proxy function approach solved the problem.


    Have passed this on to the other designer and will keep fingers crossed!

    > Also, are you passing 'objects' or functions as parameters in this
    > call?


    Only as above really.

    Thanks for your constructive reply Marcello. You seem to have understood
    what we are after. Cheers.
     
    Chris Ianson, Apr 6, 2006
    #11
  12. Marcello wrote:
    > Hi guys,
    >
    > sorry to break the 'this works - no this doesn't work' quarrel, but
    > Chris, have you tried something different?
    >
    > I've never used Google Maps API, so I don't know if you have access to
    > code on the parent window. If you do, put a function over there that
    > access the Google Maps one, and your function in the IFrame then access
    > your function in the parent frame.
    >
    > If that still doesn't work, try putting and invisible FRAME (not
    > IFrame) in the parent window to do the same 'proxy function' approach.
    > I had to do it once, in another problem. For some reason it was not
    > working from parent to child <-> child to parent frames, but taking
    > this proxy function approach solved the problem.
    >
    > Also, are you passing 'objects' or functions as parameters in this
    > call?
    >


    Since here has not event identified what Google Maps API function he is
    trying to call this is all speculation! Google Maps API seems to be
    standard JavaScript. The API seems very straight forward where you
    reference the map element on your document and they have built the API
    as OOP where your call various object methods to control the map. What
    is unclear is:

    1) What an IFRAME
    2) What function
    3) Is the function is code or Googles
    4) Is his code in the parent frame or the iframe
    5) Some code...URL something.

    Lastly I stand by my statement, that is how you reference an anonymous
    parent frame function. Would be willing to assist if more info was
    supplied. Really.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 6, 2006
    #12
  13. Chris Ianson wrote:
    > "Marcello" <> wrote in message
    > news:...
    >
    >> I've never used Google Maps API, so I don't know if you have access to
    >> code on the parent window. If you do, put a function over there that
    >> access the Google Maps one, and your function in the IFrame then access
    >> your function in the parent frame.

    >
    > Yep we actually just tried something similar.
    >
    > The parent page now declares a map function called "walk()".


    walk() is this your function? There is not method 'walk' described in
    any of the Google Maps object constructor that I can find.

    >
    > The child page (iframe) should no longer make its own changes to the iframe
    > contents. When it wants to jump, it should make calls like
    > "javascript:parent.walk(3)"


    are you calling the function via <a href="javascript:parent.walk(3)...
    if you this may be your problem. do not put "javascript:somefunction()"
    in a href attribute, put it on the event handler, i.e.,
    onclick="somefunction()"
    >
    > [if you're unfamiliar with what is going on in the iframe from a previous
    > discussion here, there's an example at
    > http://www.cjse.pwp.blueyonder.co.uk/misc/A1master.htm]


    Do not see reference to walk() in above code? what is the walk
    function's code?

    <snip>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 6, 2006
    #13
  14. Chris Ianson

    Marcello Guest

    Thanks Chris;

    if I understood correctly, basically one other problem that you have is
    having to process many stuff at the same time, in JavaScript, then
    browser's response to the user gets cranky. Is that ight?
     
    Marcello, Apr 6, 2006
    #14
  15. Chris Ianson

    Chris Ianson Guest

    "Marcello" <> wrote in message
    news:...
    > Thanks Chris;
    >
    > if I understood correctly, basically one other problem that you have is
    > having to process many stuff at the same time, in JavaScript, then
    > browser's response to the user gets cranky. Is that ight?


    No, that's not really a problem. Phew! :)

    Here is a summary of where we're a bit stuck (sorry I have no live code at
    the moment):

    Basically I have one web page now with a Google Map in it, and below the
    map is an inline frame containing a panoramic image. I have inserted a
    series of markers onto the map. When a marker is clicked, a relevant photo
    loads in the iframe.

    However, it is also possible to change the image *from within* the iframe
    itself, as per the example URL. E.g. clicking Go To End moves you to the
    end of the image. Clicking Walk Right moves you to the next image.

    ***The challenge is getting the map to respond when this happens.***

    E.g. clicking on a park in the map would bring up a photo of the park
    in the iframe (that bit works). Conversely selecting the park image from a
    text hyperlink *in* the iframe should scroll the map to centre and highlight
    the related marker on the park in the map (that bit eludes us).

    Hope that clarifies. I can't be any clearer until we have a URL demo.
     
    Chris Ianson, Apr 6, 2006
    #15
  16. Chris Ianson

    Chris Ianson Guest

    "Jonathan N. Little" <> wrote in message
    news:44352ec4$0$3695$...

    > Since here has not event identified what Google Maps API function he is


    I'm curious - what is your native language Jonathan?

    > 1) What an IFRAME


    English?

    > 2) What function


    With Google you can create functions and programs. We have one called
    'walk' which calls a new htm file in the child frame.

    > 3) Is the function is code or Googles


    English?

    > 4) Is his code in the parent frame or the iframe


    Parent frame only at present. Attempts to put code in the child to call the
    parent code function simply do nowt :(

    > Lastly I stand by my statement, that is how you reference an anonymous
    > parent frame function. Would be willing to assist if more info was
    > supplied. Really.


    Not disputing that and never have, the question was 'is there any other
    way'.

    Appreciate your time.
     
    Chris Ianson, Apr 6, 2006
    #16
  17. Chris Ianson wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:44352ec4$0$3695$...
    >
    >> Since here has not event identified what Google Maps API function he is

    >
    > I'm curious - what is your native language Jonathan?
    >
    >> 1) What an IFRAME

    >
    > English?


    My crime here was thoughts faster than fingers and then not proofing
    before posting! Now in English:

    Since he has not even identified what Google Maps API function he is
    trying to call this is all speculation! Google Maps API seems to be
    standard JavaScript. The API seems very straight forward where you
    reference the map element on your document and they have built the API
    as OOP where your call various object methods to control the map. What
    is unclear is:

    1) What in IFRAME
    2) What function
    3) Is the function his code or Googles
    4) Is his code in the parent frame or the iframe or both
    5) Some code...URL something.

    Lastly I stand by my statement, that is how you reference an anonymous
    parent frame function. Would be willing to assist if more info was
    supplied. Really.

    >
    > With Google you can create functions and programs. We have one called
    > 'walk' which calls a new htm file in the child frame.
    >


    Google is not a programing language, just some JavaScript where they
    have made predefined objects to assist with interfacing with their map
    program. So I can see no 'walk' method in any of Google Maps API so I am
    assuming that this is your JavaScript function.

    > Not disputing that and never have, the question was 'is there any other
    > way'.
    >


    Not that I am aware of. One of the complications that arises with
    frames, (framesets or using iframe the same problem exists). Since we
    have no code here to look at I can only assume you have a problem with
    your function. What does Firefox's JavaScript console say...great for
    debugging JavaScript. Does the function 'walk' work without the iframe?
    How about if you substitute a debug function to test?

    function walk(param){
    alert("walk called with param '" + param + "'");
    }

    Test calling function from top frame yourself:
    Base page:

    <html>
    <head>
    <title>Outside</title>
    <script type="text/javascript">

    function test(where){
    alert('Hello from ' + where );
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="test('Top')">Test</a>
    <iframe name="inner" src="insert.html"></iframe>
    </body>
    </html>

    Iframe insert:

    html>
    <head>
    </head>
    <body>
    <h2>Inner</h2>
    <a href="#" onclick="parent.test('Inside')">Test</a>
    </body>
    </html>

    But when I see your reference such as "javascript:parent.walk(3)" then
    the manner of *how* your are calling the function may be the problem. I
    wrote: Are you calling the function via:

    <a href="javascript:parent.walk(3)...

    if you are, this may be your problem. Do not put

    "javascript:somefunction()"

    in a href attribute, put it on the event handler, i.e.,

    onclick="somefunction()"



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 6, 2006
    #17
  18. Chris Ianson

    Marcello Guest

    Chris, Got it.

    Can't you force a mouse event? As I said, I've never dealt with Google
    Maps API, but I guess it uses a bunch of mouse event trappers/handlers.
    Is it possible to call the same functions emulating mouse clicks?

    Once I had to code a Java applet that had power lines and we had to
    move the map with the drag event. I got the initial and final mouse
    position (both X and Y axis) and then moved the image accordingly -
    note, in the opposite direction! - mouse moves up, image moves down.

    Can't you rebuild the same line of thought, in the opposite direction?
    I mean, I suppose you have the direction and the length you wanna
    'walk' in the map. Can't you do like fake clicks in Google Maps'
    arrows in the upper left corner? Or pinpoint locations in coordinates
    (degrees, minutes and seconds) and then do a MoveTo in the map?

    I'm afraid I can't help much more without understanding Google's API.
    Sorry about that.

    Regards!!
     
    Marcello, Apr 6, 2006
    #18
  19. Chris Ianson

    Marcello Guest

    I agree with Jonathan on the matter of not using: 'javascript:blabla'.
    It didn't work for me when I was doing several stuff in JS.
     
    Marcello, Apr 6, 2006
    #19
  20. Chris Ianson

    Shiggity

    Joined:
    Apr 14, 2007
    Messages:
    6
    parent.myfunction() is the key. If it doesn't work for you, you're doing something wrong. If it doesn't work for your resident expert, he's doing something wrong. It's not a complicated concept.
     
    Shiggity, Jul 16, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Daedalous
    Replies:
    3
    Views:
    756
    Daedalous
    Jan 16, 2004
  2. Replies:
    0
    Views:
    147
  3. Chris Ianson
    Replies:
    18
    Views:
    299
    Marcello
    Apr 6, 2006
  4. PD
    Replies:
    6
    Views:
    730
  5. omprakash
    Replies:
    0
    Views:
    296
    omprakash
    Jul 30, 2012
Loading...

Share This Page