Solved

Detecting the link click in an iframe

Posted on 2004-09-17
9
456 Views
Last Modified: 2008-02-01
Hi All,

I can detect the link clicks with "document.onclick=function()" function but there is an iframe in the document and i want to detect the link clicks in that iframe also. I tried "document.getElementById("innerframeID").onclick=function()" but it didn't work.

How can i perform this?

Thanks!
0
Comment
Question by:blacklord
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
9 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 12082650
This isn't possible as far as I know.

The iframe is a whole separate document.

window.onclick functions the same as document.onclick and doesn't do anything.
Putting an onclick handler inside the iframe tag is fruitless because the iframe is considered a separate document.
Notice how if you have an onclick inside the iframe, and you click the border of the iframe, the action executes? That's what handlers in the iframe do.

Because the iframe is a different document, there's nothing you can do.

You can use a server-side language like PHP or ASP to include the file into your page. It won't be an iframe then and will be part of the document. Or you can use XMLHTTP client side, which although works, is only supported by recent browsers, for example:

<script language="javascript" type="text/javascript">
<!--

function getDoc(path) {
   if (document.all) {
      var xObj=new ActiveXObject("Microsoft.XMLHTTP");
      xObj.open("GET",path,false);
      xObj.send();
      return(xObj.responseText);
   } else {
      var xObj=new XMLHTTPRequest();
      xObj.open("GET",path,false);
      xObj.send(null);
      return(xObj.responseText);
   }
}

//-->
</script>

which will return the contents of the page specified in path.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12082655
I can show hot that event capture works, but I need more details.
First question: why does not the page in the iframe react to the clicks itself?
Second question: where is the function which has to be called in onClick handler? Is it the main parent document?
And last but most important: do you want to handle the click when anywere on the iframe is clicked or only when some links or other elements are clciked?

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12082661
Hello Zyloch. Do you have again sleeping problems? Now you are in my time zone :-)
0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 63

Accepted Solution

by:
Zvonko earned 250 total points
ID: 12082700
And this is for Zyloch only:

<html>
<head>
<script>
function myFunction(){
  e=frames.innerframeID.event;
  window.status=e.clientX+":"+e.clientY;
}
</script>
</head>
<body>
<h1>Look into status bar</h1>
<iframe name="innerframeID" onLoad="frames.innerframeID.document.onmousemove=myFunction" height="100%" width="100%">
</iframe>
</body>
</html>

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12082739
Wow, I never knew that. Shows how much I know, eh? lol

Thanks Zvonko, once again, for showing me the light. And now, I believe I can fall asleep peacefully :-) (no, this is not sarcasm, I'm just tired)

O.O -> o.o -> -_- -> x_x

Till later,
Zyloch
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12082748
Good Nigth :-)
0
 
LVL 9

Expert Comment

by:cwolves
ID: 12084212
<iframe id="ifr" src="page.html"></iframe>
<script language="javascript">
frames.ifr.document.onclick=function(){alert('test');}
</script>
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question