Question

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"/>
 </body>

Answer 1

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.

Answer 2

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.

Answer 3

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:

Answer 4

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 */
}

友情链接