By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,630 Members | 1,174 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,630 IT Pros & Developers. It's quick & easy.

Javascript - Event Propagation (iframe to enclosed html)

P: n/a
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
we*********@earthlink.net
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
"Wendi" <we*********@earthlink.net> wrote in message
news:1e******************************@localhost.ta lkaboutprogramming.com...
How can i capture an onClick event from within the calling iframe document
(not
using a cookie or something)? Any ideas?

Wendi Turner
we*********@earthlink.net


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

Jul 23 '05 #2

P: n/a
Wendi wrote:
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?
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):

<!-- required for registerEvent(...) -->
<script
type="text/javascript"
src="http://www.stud.tu-ilmenau.de/~thla-in/scripts/dhtml.js"</script>


<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>
Jul 23 '05 #3

P: n/a
(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
<1e******************************@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.)
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">
This should read

<script type="text/javascript">
function fireClickFunctions(){
alert('do lots of stuff');
}
</script>
</head>
<body>
<b onClick="fireClickFunctions();">CLICK ME</b>
Are you sure the "b"(old) element is the correct
element to attach the click event listener to?
</body>
</html>

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


I do not understand. You already do that.
PointedEars
Jul 23 '05 #4

P: n/a
Just a reminder, we can catch the onClick event, but the original
onclick on the document (if there is any) will be overwritten
Jul 23 '05 #5

P: n/a
i-Safire wrote:
Just a reminder,
For what?
we can catch the onClick event,
So where exactly is the problem?
but the original onclick on the document (if there is any) will
be overwritten


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
Jul 23 '05 #6

P: n/a
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)
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.