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

[Chris Ianson]

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.

 

[Jonathan N. Little]

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

 

[Chris Ianson]

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

 

[Jonathan N. Little]

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


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

 

[Chris Ianson]

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.

 

[Jonathan N. Little]

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.

 

[Chris Ianson]

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.

 

[Jonathan N. Little]

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?

 

[Marcello]

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

 

[Chris Ianson]

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]

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
"javascriptarent.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.

 

[Jonathan N. Little]

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.

 

[Jonathan N. Little]

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
"javascriptarent.walk(3)"

are you calling the function via <a href="javascriptarent.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>

 

[Marcello]

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?

 

[Chris Ianson]

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]

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.

 

[Jonathan N. Little]

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


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 "javascriptarent.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="javascriptarent.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()"

 

[Marcello]

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]

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.

 

[Shiggity]

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.