views:

325

answers:

4

I want to track what happens inside an iframe when a user clicks on links in the IFrame. The page that contains the iframe (the parent) is to track the user´s navigation through the page in the iframe. Both pages will be hosted on the same toplevel domain, although the subdomains will differ.

I need the parent page to be notified of every click, but I do not have direct control over the pages I load into the iframe.

Is adding an onclick to all the links whenever the page in the iframe is loaded possible? How would I go about doing this?

This would be the "template" on which to build:

<html>
 <script language="javascript">
     var currentURL;
 </script>
 <body>
     <iframe id="container" width="500" height="500" src="http://subdomain.parentdomain.com"/&gt;
 </body>

+3  A: 

Iframe CrossDomain access needs to be the same domain, subdomain, and port.

If you had them on the same domain, you could bind click event handlers on all the links, then when they are clicked log a click to something like google analytics, your database, etc.

CodeJoust
Is it possible to access: sub1.domain.com from a page placed in domain.com/folder/file.htm ? This could be an answer for me.For a local version, the following code worked: http://stackoverflow.com/questions/753863/apply-onclick-to-all-elements-in-an-iframe
Paul
A: 

With jQuery it would be easy.

$(document).ready(function(){
   var iframeWindow = $('#container')[0].contentWindow;
   $(iframeWindow).load(function(){
       $(this).find('a').click(top.myClickHandler);
   });
}

function myClickHandler(){
    /* Do something */
}
Justin Swartsel
I haven´t used jQuery yet, but would the above code not only work on the very first page in the iframe? All subsequent pages would have to be changed too for my site to do what it should.
Paul
It wouldn't work because it's on a different subdomain.If you get the iframe on the same domain, you can use `$(parent).find('a').click(function(){})` but that won't work due to the subdomains.
CodeJoust
Touche on the subdomain issue. I did write that code to work from the TOP page. So everytime a new page is loaded into the iframe it would attach a click handler to all anchors on that page. This way you wouldn't have to change every page thats loaded in the iframe, just the parent (containing) page.
Justin Swartsel
A: 

I do not have direct control over the pages I load into the iframe

That's your blocker. If you can augment the code within the remote pages, you can use postMessage and the iframe fragment identifier hack to get browser coverage. Fortunately, someone already did the dirty work for you:

Geoff
Unfortunately, augmenting the code is not an option. Think of different departments located in different countries.I had seen some hacks in this direction and indeed it would be enough to just send a string (the URL that is currently being clicked or displayed in the iframe).Really too bad I can´t use this.
Paul
A: 

I am going to use an AJAX-Proxy to have the content (as far as the browser is concerned) come from my domain. This will solve all the cross domain scripting issues that CodeJoust mentioned. Speed of delivery might be a problem due to the overhead I will be generating, but that will have to be seen.

I will probably move along the lines of this Stackoverflow Question:

"Apply “onclick” to all elements in an iFrame"

Regarding legal issues pertaining to proxying and changing the content of pages dynamically, it will have to be checked. I believe that tracking users that give their express consent is, from an ethical standpoint, unproblematic.

Paul