Javascript - Event Propagation (iframe to enclosed html)

#1 July 23rd, 2005, 11:41 AM

If i have an iframe from within an HMTL document:

Iframe.htm:
------------------------------
<html>
<head>
<title>Iframe.htm</title>
</head>
<body>
<iframe src="sample.htm"></iframe>
</body>
</html>

And this iframe loads the src=Sample.htm below:

Sample.htm
-------------------------------
<html>
<head>
<title>Sample.htm</title>
<script language="JavaScript">
function fireClickFunctions(){
alert('do lots of stuff');
}
</script>
</head>
<body>
<b onClick="fireClickFunctions();">CLICK ME</b>
</body>
</html>

How can i capture an onClick event from within the calling iframe document
(not
using a cookie or something)? Any ideas?

Wendi Turner
wenditurner@earthlink.net

#2 July 23rd, 2005, 11:43 AM

"Wendi" <wenditurner@earthlink.net> wrote in message
news:1e235dad13e22a971a03099099b1587f@localhost.ta lkaboutprogramming.com...
[color=blue]
> How can i capture an onClick event from within the calling iframe document
> (not
> using a cookie or something)? Any ideas?
>
> Wendi Turner
> wenditurner@earthlink.net
>[/color]

It still isn't totally clear what you're asking.
I assume you want an onclick event in the parent document to call a function
coded in the iframe's document (sample.htm), and you want the code that
instigates this action to be within the latter.

If so, say you created a link in the parent document (Iframe.htm) like:

<A HREF='#' id='callFrameFunc' >Whatever</A> (or any element with an onclick
event)

Then in sample.htm you would have:

<SCRIPT>
parent.document.getElementById('callFrameFunc').on click=fireClickFunctions;
</SCRIPT>

Alternatively you could simply use the element's onclick event to call a
function in the iframe (sample.htm)

<A HREF='#'
onclick="if(window.frames)window.frames[0].fireClickFunctions();return false">Do
it in the iframe</A>

If you wanted it the other way round (click in iframe calls function in parent),
the syntax in the parent document would be something like:

window.frames[0].document.getElementById('myElement').onclick=loca lFunction;

--
Stephen Chalmers

#3 July 23rd, 2005, 12:11 PM

Wendi wrote:
[color=blue]
> If i have an iframe from within an HMTL document:
> [...]
> And this iframe loads the src=Sample.htm below:
> [...]
> How can i capture an onClick event from within the calling iframe
> document (not using a cookie or something)? Any ideas?[/color]

The "click" event ("onclick" is merely the name of its intrinsic handler)
bubbles by default[1]. If it occurs in the iFrame, it bubbles up to the
container object of that iFrame (usually a Window object), not any further
(the event does not "know" that it occurs in a document that is the resource
of a container embedded in another document).

So if you do not want to change the source code of the iFrame document, the
solution is to attach an event listener to the window object for "click"
events, in the "parent" document. The following should work (untested):


<script
type="text/javascript"
src="http://www.stud.tu-ilmenau.de/~thla-in/scripts/dhtml.js"[color=blue]
></script>[/color]

<iframe
...
onload="registerEvent(this, "click", myFunction);">

where "anyFunction" is a reference to a function you have coded to
do whatever you want it to. That can be e.g. the function's name,
the result of a Function() constructor call, a function statement
or a function operation in particular, depending on the versions of
J(ava)Script you want to support (ask Google Groups for details).

Of course all this is possible *only* if you can follow the Same
Origin Policy[2].

If the above works, please save the dhtml.js script file to your
webspace (to save me traffic) and take heed of the license agreement.

HTH

PointedEars
___________
[1] <http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling>
<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents>
[2]
<http://www.mozilla.org/projects/security/components/same-origin.html>

#4 July 23rd, 2005, 12:11 PM

(Since it has been quite a time since the original posting (OP): posted &
mailed; usually it is impolite to ask for e-mail responses (only) in an
OP -- nobody wants to be subscribed to a newsgroup that contains only
questions, no answers; if possible, please post replies to this posting
to the newsgroup [I am including the Message-ID so the thread can be
easily found].)

Wendi wrote in
<1e235dad13e22a971a03099099b1587f@localhost.talkab outprogramming.com>:

(localhost.talkaboutprogramming.com resolves to 127.0.0.1 which is localhost
[TCP/IP loopback device]. Thus the above is not a valid message ID since it
lacks a Fully Qualified Domain Name (FQDN). This is a bug in the supposedly
HTTP-to-NNTP gateway used here. The makers of it should be informed about
that issue to get it fixed ASAP.)
[color=blue]
> If i have an iframe from within an HMTL document:
> [...]>
> <iframe src="sample.htm"></iframe>
> [...]
>
> And this iframe loads the src=Sample.htm below:
>
> Sample.htm
> -------------------------------
> <html>
> <head>
> <title>Sample.htm</title>
> <script language="JavaScript">[/color]

This should read

<script type="text/javascript">
[color=blue]
> function fireClickFunctions(){
> alert('do lots of stuff');
> }
> </script>
> </head>
> <body>
> <b onClick="fireClickFunctions();">CLICK ME</b>[/color]

Are you sure the "b"(old) element is the correct
element to attach the click event listener to?
[color=blue]
> </body>
> </html>
>
> How can i capture an onClick event from within the calling iframe document
> (not using a cookie or something)? Any ideas?[/color]

I do not understand. You already do that.

PointedEars

#5 July 23rd, 2005, 12:12 PM

Just a reminder, we can catch the onClick event, but the original
onclick on the document (if there is any) will be overwritten

#6 July 23rd, 2005, 12:12 PM

i-Safire wrote:
[color=blue]
> Just a reminder,[/color]

For what?
[color=blue]
> we can catch the onClick event,[/color]

So where exactly is the problem?
[color=blue]
> but the original onclick on the document (if there is any) will
> be overwritten[/color]

I still do not understand. Overwritten by what with what?
Without further information, e.g. having a look at your code
(URL?), it is impossible to say what is going wrong here.

PointedEars

#7 July 23rd, 2005, 12:12 PM

The following line in the parent document,
<iframe ... onload="registerEvent(this, "click", myFunction);">
will overwrite
1) the "onload" event handler in the "sample.htm" document; also,
2) the "onClick" event handler in the sample.htm document.

(Ref:Phoenix398017)

Javascript - Event Propagation (iframe to enclosed html)

re: Javascript - Event Propagation (iframe to enclosed html)

re: Javascript - Event Propagation (iframe to enclosed html)

re: Javascript - Event Propagation (iframe to enclosed html)

re: Javascript - Event Propagation (iframe to enclosed html)

re: Javascript - Event Propagation (iframe to enclosed html)

re: Javascript - Event Propagation (iframe to enclosed html)

/bytes/development

/bytes/it

/bytes/about