469,579 Members | 1,899 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,579 developers. It's quick & easy.

How to Pass events between iframes and functions?


I have a main html page which creates an iframe, something like:
Expand|Select|Wrap|Line Numbers
  1. <iframe id='somefrm' src="http://somepage/frm.html" title="My frame" name='somefrm' frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 34%;">text</iframe>
Now, the above iframe has for example this in it:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <a href="http://msn.com">First link inside my frm.html</a><br />
  3. <a href="http://msn.ca">Second link inside my frm.html</a><br />
  4. </body>
I want to add an event to the links from this iframe from my main page like this:
Expand|Select|Wrap|Line Numbers
  1. window.frames[0].document.getElementsByTagName('a')[0].onmousemove=Functi;
window.frames[0] refers to the first frame (assuming that's the above). In the above line I am assigning the first anchor in the iframe the onmousemove attribute and tell it to execute the function Functi when a user moves the mouse over that link in the iframe.

This works almost well. The function is called but the problem is that I need to operate on the event that's generated and hence need a reference to it.
The function Functi looks something like: and it is declared in the main html page:
Expand|Select|Wrap|Line Numbers
  1. function Functi(e) {
  2.     if (!e) var e = window.event;
  3.     // operate on e
  4. }
Now, the problem is how can I correctly pass the 'event' that happened in the iframe to the function Functi?

I am sure that the problem lies somewhere with the iframes because assigning exactly in this same way the onmousemove attribute to a link in my main page works perfectly fine. So, this works well:
Expand|Select|Wrap|Line Numbers
  1. document.getElementsByTagName("a")[1].onmouseover=Functi;
The above will give the onmouseover property to the second anchor in my main page, and when I hover over it, it calls the function and accesses the 'event' without problems.

I tried doing something like:
Expand|Select|Wrap|Line Numbers
  1. window.frames[0].document.getElementsByTagName('a')[0].onmousemove=function(){Functi(event);};
But it doesn't help.

The error I get when I hover over the link in my iframe is: "Object expected" on the line that tries to access the event in the function Functi.

Thanks in advance for your replies.
Oct 27 '10 #1
1 2381
5,390 Expert Mod 4TB
you might try:

Expand|Select|Wrap|Line Numbers
  1. onmousemove = function(e) {
  2.     var event = !e ? window.event : e;
  4.     Functi(event);
  5. };
this should always pass the event to the Functi() method.
Oct 30 '10 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Nick | last post: by
3 posts views Thread by tigrfire | last post: by
1 post views Thread by Andy | last post: by
1 post views Thread by ljlevend2 | last post: by
4 posts views Thread by sofeng | last post: by
2 posts views Thread by Israel | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.