捕获 iframe 上的点击事件

Question

Im trying to do something like

<div onClick={()=>{ console.log(captured)}}>
  <iframe />
</div>

Is not working. Looks like iframe not allow to do that.

Any suggestion?

Answer 1

It is completely normal; events bubble inside the dom tree, the iframe has it's own dom tree and thus wont bubble the event outside of it.

How does your setup look like? If you control the content inside the iframe you could use the post message API to communicate between the iframe and parent, check:

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

If you do not control it then probably you could detect a blur event on the parent window, rather than the click event on the iframe.

Hope this helps

Answer 2

It isn't possible to read iframe content (DOM) from the parent page.

There is an jQuery plugin called IframeTracker . This should solve your problem. You can check the GitHub page for more detailed information.

Answer 3

If you have access to the iframe and control it, you can create a js file and do something like this and put it in both the iframe and the parent window:

(function() {
  if (window.location != window.parent.location) {
    window.document.addEventListener('click', window.parent.iframe_clicked);
  }
})();

function iframe_clicked(event) {
  console.log("wow, no kiddin!");
}

Of course there are other ways like going trough setting up a server and ajax and doing this over network too which have their own usages.

And also there's postMessage as well, which others have already mentioned so I'm gonna skip explaining it.