Detecting clicks inside an iframe from outside?

Question

Here is the scenario. There is content loaded in iframe from other site. I click to some link inside the iframe.

Is it possible to catch somehow outside the iframe what is that link?

UPDATE Since I recieved question if my intentions are pure, I would explain more on the use case. May be I started in wrong direction for this task.

So, we have a desktop client that walks around web (for shoping actually) and when customer finds something she wants to buy, she clicks on "that" (anything - picture, link, address) and send "that" to our service where it is manually resolved to link to product and transformed to entry in her register. Nothing unusual.

Now, the task is to make it web app. So, customer registers in our site and starts browsing internet stores. Hence my first choice was iframe. But the question is how to find what she clicked on?

Or, generally - how to save a "bookmark" to some object from the other site?

Answer 1

If the pages are not located on the same domain then there is no way to do this. Your scripts cannot see across domains.

Answer 2

This sounds like a rather dodgy question if you ask me. What are you creating phishing sites?

Answer 3

If your iframe is in the same domain, it's a simple matter of adding an event listener to the onclick event of your links.

Example:

<a href="javascript:void(0)" onclick="top.harvestLink(this)" title="Item=foo" alt="">Foo</a>

Then in the page hosting the iframe you have your handler:

function harvestLink(anAnchor,aShoppingListArray) {
  var itemName = anAnchor.title.split("=")[1];
  aShoppingList.push({item:itemName,dateStamp:new Date()});
}

This is a simplistic example that illustrates the principle. You may want to add other information to the title tag, in which case you'll parse differently, and you may want to use a different attribute than "title" for storing that. The housekeeping you can do on your own. It can also be done (more easily, IMO) with button elements instead of anchor tags, but be sure to set the type attribute of the button to "button" or IE will submit the form.

Answer 4

There is no way to do this actually. The window.name transport that the above answerer indicated won't work without the cooperation of the site being visited. There is no way to access window.name unless the parent and child are on the same domain.

I recently got around this by setting window.name within the child and then redirecting to a 404 page of the parent's domain. Suddenly, the parent frame could read the iframeID.contentWindow.name value and get the information. But that redirection was done by my page within the iframe.

Every scenario I've seen this cross-domain, cross-frame communication occur is when the programmer controls either the child frame or both the parent and child frame. Only controlling the parent is locked down tight by every browser I've found.

Answer 5

One way that some sites have done is to create a bookmarklet. The user would browse around regularly, then if they find a site they want to add as a bookmark through your web application, they could just click on the bookmarklet.

The bookmarklet is a javascript function that would perhaps show a modal dialog window that could then access your site's bookmarking capability remotely.

For example, Facebook's Share Bookmarklet, any number of Delicious bookmarklets.

Your web application would then just provide a way to organize the bookmarks that people save using your bookmarklet. You could also look into a Firefox plugin, but bookmarklets are a more cross-browser friendly solution.