473,883 Members | 2,233 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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.
Apr 5 '06
18 43582
"Marcello" <ma************ ***@gmail.com> wrote in message
news:11******** ************@v4 6g2000cwv.googl egroups.com...
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:par ent.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.
Apr 6 '06 #11
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
Apr 6 '06 #12
Chris Ianson wrote:
"Marcello" <ma************ ***@gmail.com> wrote in message
news:11******** ************@v4 6g2000cwv.googl egroups.com...
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:par ent.walk(3)"
are you calling the function via <a href="javascrip t:parent.walk(3 )...
if you this may be your problem. do not put "javascript:som efunction()"
in a href attribute, put it on the event handler, i.e.,
onclick="somefu nction()"
[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
Apr 6 '06 #13
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?

Apr 6 '06 #14
"Marcello" <ma************ ***@gmail.com> wrote in message
news:11******** **************@ t31g2000cwb.goo glegroups.com.. .
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.
Apr 6 '06 #15
"Jonathan N. Little" <lw*****@centra lva.net> wrote in message
news:44******** **************@ news.centralva. net...
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.
Apr 6 '06 #16
Chris Ianson wrote:
"Jonathan N. Little" <lw*****@centra lva.net> wrote in message
news:44******** **************@ news.centralva. net...
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>Outsid e</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.htm l"></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:par ent.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="javascrip t:parent.walk(3 )...

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

"javascript:som efunction()"

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

onclick="somefu nction()"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Apr 6 '06 #17
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!!

Apr 6 '06 #18
I agree with Jonathan on the matter of not using: 'javascript:bla bla'.
It didn't work for me when I was doing several stuff in JS.

Apr 6 '06 #19

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
94267
by: Christian Radermacher | last post by:
I have document with an iframe in it. I'm able to call a javascript function in the main-document from the javascript inside the iframe-document. I have difficulties to do the other way round, i.e. to call a function in the iframe-document from javascript in the main-document. TIA Christian
11
41224
by: HolaGoogle | last post by:
Hi, Sorrryy to ask such basic question but i do need your help! Here's what i'm trying to do: In my parent form i'm calling a my Iframe form to get certain value, then depending on that value enable or disable my submit button in my parent form without using any refresh/reload or submit button in my form. Looks realy simple but i don't know how to get it work. actualy, i've been able to populate listbox,text boxes in my parent with...
2
2428
by: Targa | last post by:
Not sure if this is the correct group for this but I assume this can be done with javascript. Basically, I have a page with a form on it. There is also an IFRAME on the page that has several form fields which contain the results of a database query. I need to be able to submit the form and have the fields in the IFRAME submitted along with it. Is there a way to do this with javascript?
26
45554
by: Dave Hammond | last post by:
In document "A.html" I have defined a function and within the document body have included an IFRAME element who's source is document "B.html". In document "B.html" I am trying to call the function defined in "A.html", but every attempt results in an "is not a function" error. I have tried to invoke the function using parent.document.funcname(), top.document.funcname(), and various other identifying methods, but all result in the above...
9
2185
by: Paul | last post by:
HI! I need to call a function that is located in the parent. I need it so that it calls when the child page in the iframe loads. Would it be better to use an onload event in the body? if so how do I call it from the child page? -- Thanks in advance :) Paul
1
4735
by: Helixpoint | last post by:
I have a frameset. left and main. Inside the main frame I have a IFRAME. I need to refresh the main frame when I post a form inside the IFRAME. I am trying the code below with no luck?? Private Sub addMachine_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles addMachine.Click Dim sScript As New System.Text.StringBuilder sScript.Append("<SCRIPT language=""javascript"">" & vbCrLf)
6
9401
by: paul | last post by:
HI! How do we send a variable from an Iframe page back to its parent? I have a script that calculates the iframe's window size but I need to know how to send that value back to its parent so I can use it there. Thanks in advance :) Paul
2
13812
by: Steven | last post by:
I have a page(pg1) which contains a select list (list1) in a form(form1) and an iframe(frame1), in this iframe is a page(pg2) with another select list(list2) in a form(form2) and I transfer the contents of list2 to list 1 as follows function transfer(){ for (var i=0; i<document.form2.list2.length; i++){ var cf=document.form2.list2; addOption(parent.document.form1.list1, document.form2.list2.value, document.form2.list2.value);
4
19523
by: Jayyde | last post by:
Is there any way to capture a button click inside an iFrame and perform both an action on that page and one on the parent page? Basically I have a page atm that allows the user to add a record to a table and what I would like to have are save and cancel buttons (or maybe just a save button with a close image on the DHTML "window") on the page that, when save is clicked for instance, will save the record (code in that page) and close the...
0
9798
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11160
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10422
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9588
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7978
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7136
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4622
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4230
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3241
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.