473,387 Members | 1,575 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Javascript - Event Propagation (iframe to enclosed html)

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
6 14356
"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
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
(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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

111
by: Retlak | last post by:
The recommended (on dozens of websites) and effective (works in Netscape, MSIE, Mozilla, probably others) way to detect if a browser has Javascript turned off is to put this in the <head>: ...
7
by: Marci | last post by:
I found this script for cascading menus, however, I cannot reach the author to solve the bug I am having when I add a second menu to it. My problem is this: If I click on the first link, the...
7
by: x muzuo | last post by:
Hi guys, I have got a prob of javascript form validation which just doesnt work with my ASP code. Can any one help me out please. Here is the code: {////<<head> <title>IIBO Submit Page</title>...
5
by: Tudor Tihan | last post by:
Hi, This is my first post here, so please be kind. I have tryed to make a javascript html page loader by using an invisible <IFrame> and some javascript variable text passing between...
18
by: Chris Ianson | last post by:
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. ...
22
by: Victor | last post by:
Hi everybody! I am experiencing a strange - at least for me - phenomen. I have a func containing the following code : alert (document.forms.elements.value); // document.forms.submit();...
1
by: jadeite100 | last post by:
Hi: I am using IE 6 SP2. My resize attribute does not work <body onresize="test1();">. When I resize my window, the resize event doesnot get call. I have a jsp page with an iFrame called...
2
by: sorobor | last post by:
dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button...
1
by: pdx00 | last post by:
i'm looking to do context menus for my app which can contain framesets and iframes. to get fluid context menus, i will enclose the entire app in an iframe. when a person clicks inside the iframe, i...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
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,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.