Detecting a click in an iframe

Question

I understand that it is not possible to tell what the user is doing inside an iframe if it is cross domain. What I would like to do is if a link inside an iframe is clicked, a div appears on the page holding the actual iframe.

Is this actually possible?

so are you saying the iframe in question is NOT cross domain? — Andrew Lohr, Dec 01 '17 at 13:53
Try out the solutions [here](https://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript/23231136#23231136) — Dumisani, Dec 01 '17 at 13:56
It seems possible to detect a click event by seeing if the iframe has focus, but you cannot tell what element the user clicked on in the cross domain iframe. — Andrew Lohr, Dec 01 '17 at 14:00
@AndrewLohr how do you detect focus when that focus occurs in a different window that you can't access? — charlietfl, Dec 01 '17 at 14:01
@charlietfl you detect focus on the iframe element on your own window. See the link Dumisani posted above. Or this answer too with an example https://stackoverflow.com/a/42373631/1309377 — Andrew Lohr, Dec 01 '17 at 14:02
@AndrewLohr all those solutions are 7 years old. You can't detect a click on a cross domain iframe in modern browsers — charlietfl, Dec 01 '17 at 14:05
@charlietfl the answer on https://stackoverflow.com/a/42373631/1309377 still works for me in chrome. It's not necessarily a "click", but focus. It is close but not exact — Andrew Lohr, Dec 01 '17 at 14:07

score 3 · Answer 1 · answered Dec 01 '17 at 15:26

Assuming that you only control a page holding a frame and you just want to check if any link inside that frame was clicked, you can listen for frame's load event.

Obviously it's not 100% reliable. For starters, you don't know which link was clicked. It doesn't work for links to #hashes (on the same page). Finally, you cannot distinguish between page reload and address change.

Unfortunately, without access to the frame, there's nothing more you can do.

If, on the other hand, you control both frame's page and a page holding that frame (but they're on different domains), you can gain full control, as long as you conform to Same-origin policy.

Example

Here's an over–complicated (for looks :D) example:

var frame = document.querySelector('iframe'),
    indicator = document.querySelector('#frame-state'),
    ignoreFirstLoad = true,
    timeout = null;
    
frame.addEventListener('load', function() {
  if (ignoreFirstLoad) {
    ignoreFirstLoad = false;
    return;
  }
  
  // some link was clicked or frame was reloaded
  indicator.classList.add('loaded');
  clearTimeout(timeout);

  timeout = setTimeout(function() {
    indicator.classList.remove('loaded');
  }, 1000);
});

iframe {
  width: 100%;
}

#frame-state {
  opacity: 0;
  transition: opacity 2s;
  
  font-weight: bold;
}

#frame-state.loaded {
  opacity: 1;
  transition: opacity .2s;
}

<p>Click on any link inside the frame: <span id="frame-state">Loaded!</span></p>

<iframe src="https://en.m.wikipedia.org/"></iframe>

score 0 · Answer 2 · answered Dec 02 '17 at 12:55

0

If you have access to both codebases. Then you can use the postMessage API to communicate between the iFrame and the parent page.

answered Dec 02 '17 at 12:55

David Bradshaw

11,859
3
41
70

Detecting a click in an iframe

2 Answers2

Example